diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/.babelrc.js b/splunk_add_on_ucc_framework/ucc_ui_lib/.babelrc.js new file mode 100644 index 000000000..ead152c79 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/.babelrc.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['@splunk/babel-preset'], +}; diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/.editorconfig b/splunk_add_on_ucc_framework/ucc_ui_lib/.editorconfig new file mode 100644 index 000000000..fed6bf6a9 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/.editorconfig @@ -0,0 +1,23 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# http://editorconfig.org + +root = true + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 4 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[*.json] +indent_size = 2 diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/.eslintrc.js b/splunk_add_on_ucc_framework/ucc_ui_lib/.eslintrc.js new file mode 100644 index 000000000..bc8f76784 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: '@splunk/eslint-config/browser-prettier', +}; diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/.gitignore b/splunk_add_on_ucc_framework/ucc_ui_lib/.gitignore new file mode 100644 index 000000000..1b507f430 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/.gitignore @@ -0,0 +1,11 @@ +.DS_Store +.idea/ +node_modules +npm-debug.log +test-reports +coverage_report +yarn-error.log +licenses.json +functional-temp +splunktional-temp +stage/ diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/.npmignore b/splunk_add_on_ucc_framework/ucc_ui_lib/.npmignore new file mode 100644 index 000000000..cf0d102b9 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/.npmignore @@ -0,0 +1,37 @@ +# Source code +/src/ +/test/ +/demo/ + +# Tools +/.babelrc* +.eslintrc.* +.eslintignore +/stylelint.config.js +.stylelintignore +/webpack.config.js + +# Testing +/coverage_report/ +/functional.settings.js +/functional.*.conf.js +/functional-temp +/splunktional.settings.js +/splunktional.*.conf.js +/splunktional-temp +/test-reports/ +/karma.conf.js +/jest.config.js +/webpack.test.config.js +/*hooks.js +/test-app + +# Misc +/docs.manifest.json +/docs +/docs.gen* +/.npmignore +npm-debug.log +yarn-error.log +/licenses.json +/*.tgz diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/.prettierrc b/splunk_add_on_ucc_framework/ucc_ui_lib/.prettierrc new file mode 100644 index 000000000..8716f410c --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/.prettierrc @@ -0,0 +1,7 @@ +printWidth: 100 +singleQuote: true +tabWidth: 4 +overrides: + - files: "*.json" + options: + tabWidth: 2 diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/README.md b/splunk_add_on_ucc_framework/ucc_ui_lib/README.md new file mode 100644 index 000000000..4e9dd9c24 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/README.md @@ -0,0 +1,29 @@ +# Contributing to UCC UI Lib + +## Overview + +The project contains UI framework that renders UI components dynamically based on provided `globalConfig.json`. + + +## Getting Started + +1. Clone the repo. +2. Install yarn (>= 1.2) if you haven't already: `npm install --global yarn`. +3. Run the setup task: `yarn run setup`. + +After this step, the following tasks will be available: + +* `start` – Run the `start` task +* `build` – Create a production bundle +* `test` – Run unit tests +* `lint` – Run JS and CSS linters +* `format` – Run prettier to auto-format `*.js`, `*.jsx` and `*.css` files. This command will overwrite files without +asking, `format:verify` won't. + +Running `yarn run setup` once is required to enable all other tasks. The command might take a few minutes to finish. + + +## Code Formatting + +UCC UI Lib uses [prettier](https://github.com/prettier/prettier) to ensure consistent code formatting. It is recommended + to [add a prettier plugin to your editor/ide](https://github.com/prettier/prettier#editor-integration). diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/jest.config.js b/splunk_add_on_ucc_framework/ucc_ui_lib/jest.config.js new file mode 100644 index 000000000..af03d1135 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + testMatch: ['**/*.unit.[jt]s?(x)'], +}; diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/package.json b/splunk_add_on_ucc_framework/ucc_ui_lib/package.json new file mode 100644 index 000000000..1771e51a9 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/package.json @@ -0,0 +1,64 @@ +{ + "name": "@splunk/ucc_ui_lib", + "version": "0.0.1", + "license": "UNLICENSED", + "private": true, + "scripts": { + "build": "cross-env NODE_ENV=production webpack --bail", + "format": "git ls-files | grep -E \"\\.(jsx?|css)$\" | xargs prettier --write", + "format:verify": "git ls-files | grep -E \"\\.(jsx?|css)$\" | xargs prettier --list-different", + "eslint": "eslint src --ext \".js,.jsx\"", + "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml", + "eslint:fix": "eslint src --ext \".js, .jsx\" --fix", + "link:app": "ln -s $PWD/stage $SPLUNK_HOME/etc/apps/my-splunk-app", + "lint": "yarn run eslint && yarn run stylelint", + "lint:ci": "yarn run eslint:ci && yarn run stylelint", + "start": "webpack --watch", + "setup": "yarn && yarn run build", + "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js", + "test": "jest", + "test:ci": "cross-env JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=json", + "test:watch": "jest --watch" + }, + "dependencies": {}, + "devDependencies": { + "@babel/core": "^7.2.0", + "@splunk/babel-preset": "^3.0.0", + "@splunk/eslint-config": "^4.0.0", + "@splunk/react-page": "^5.0.0", + "@splunk/react-ui": "^4.0.0", + "@splunk/splunk-utils": "^2.0.0", + "@splunk/stylelint-config": "^4.0.0", + "@splunk/themes": "^0.7.0", + "@splunk/webpack-configs": "^5.0.0", + "babel-eslint": "^10.1.0", + "babel-loader": "^8.0.4", + "chai": "^3.5.0", + "copy-webpack-plugin": "^4.5.2", + "cross-env": "^7.0.3", + "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.2", + "eslint": "^7.14.0", + "eslint-config-airbnb": "^18.2.1", + "eslint-config-prettier": "^6.15.0", + "eslint-import-resolver-webpack": "^0.13.0", + "eslint-plugin-import": "^2.22.1", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-react": "^7.21.5", + "eslint-plugin-react-hooks": "^4.2.0", + "html-webpack-plugin": "^3.2.0", + "jest": "^25.1.0", + "jest-junit": "^10.0.0", + "prettier": "^2.0.5", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "styled-components": "^5.1.1", + "stylelint": "^13.0.0", + "webpack": "^4.16.2", + "webpack-cli": "^3.1.0", + "webpack-merge": "^4.1.3" + }, + "engines": { + "node": ">=6" + } +} diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/base.html b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/base.html new file mode 100644 index 000000000..7822bdf75 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/base.html @@ -0,0 +1,31 @@ +<%! +app_name = cherrypy.request.path_info.split('/')[3] + +%>\ + + + + + + + ${_('Loading...')} + + + + + + + + + + + <% + page_path = "/static/app/" + app_name + "/pages/" + page + ".js" + %> + + + + + diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/app.conf b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/app.conf new file mode 100644 index 000000000..21c1e2da7 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/app.conf @@ -0,0 +1,25 @@ +###################################################### +# +# ${package.name} +# +# ${copyright} +# +###################################################### + +[install] +is_configured = true +state = enabled +build = ${version.build} + +[launcher] +author = Splunk Inc. +version = ${version.major}.${version.minor}.${version.revision} +description = ${friendly.name} + +[ui] +is_visible = true +label = ${friendly.name} +docs_section_override=AddOns:released + +[package] +id = ${package.name} \ No newline at end of file diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml new file mode 100644 index 000000000..79d0fcff1 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml @@ -0,0 +1,5 @@ + diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/configuration.xml b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/configuration.xml new file mode 100644 index 000000000..7431e812b --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/configuration.xml @@ -0,0 +1,4 @@ + + + + diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/inputs.xml b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/inputs.xml new file mode 100644 index 000000000..90bbda9ad --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/inputs.xml @@ -0,0 +1,4 @@ + + + + diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx new file mode 100644 index 000000000..14b473c65 --- /dev/null +++ b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx @@ -0,0 +1,52 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Button from '@splunk/react-ui/Button'; +import { StyledContainer, StyledGreeting } from './TestComponentStyles'; + +class TestComponent extends Component { + static propTypes = { + name: PropTypes.string, + }; + + static defaultProps = { + name: 'User', + }; + + constructor(props) { + super(props); + this.state = { counter: 0 }; + } + + render() { + const { name } = this.props; + const { counter } = this.state; + + const message = + counter === 0 + ? 'You should try clicking the button.' + : `You've clicked the button ${counter} time${counter > 1 ? 's' : ''}.`; + // const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require; + function requireDynamically(path) { + return eval(`require`); // Ensure Webpack does not analyze the require statement + } + requireDynamically(['custom/' + module], (CustomRow) => { + this.CustomRow = CustomRow; + }); + + return ( + + Hello, {name}! +
{message}
+