Add a PatternFly UI

- Fetch streaming data from go-stream and present it in various
forms to track current and past jobs.

Signed-off-by: Brent Salisbury <[email protected]>

.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.snap]
+max_line_length = off
+trim_trailing_whitespace = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,76 @@
+module.exports = {
+  // tells eslint to use the TypeScript parser
+  "parser": "@typescript-eslint/parser",
+  // tell the TypeScript parser that we want to use JSX syntax
+  "parserOptions": {
+    "tsx": true,
+    "jsx": true,
+    "js": true,
+    "useJSXTextNode": true,
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": "."
+  },
+  // we want to use the recommended rules provided from the typescript plugin
+  "extends": [
+    "@redhat-cloud-services/eslint-config-redhat-cloud-services",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "globals": {
+    "window": "readonly",
+    "describe": "readonly",
+    "test": "readonly",
+    "expect": "readonly",
+    "it": "readonly",
+    "process": "readonly",
+    "document": "readonly",
+    "insights": "readonly",
+    "shallow": "readonly",
+    "render": "readonly",
+    "mount": "readonly"
+  },
+  "overrides": [
+    {
+      "files": ["src/**/*.ts", "src/**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "extends": ["plugin:@typescript-eslint/recommended"],
+      "rules": {
+        "react/prop-types": "off",
+        "@typescript-eslint/no-unused-vars": "error"
+      },
+    },
+  ],
+  "settings": {
+    "react": {
+      "version": "^16.11.0"
+    }
+  },
+  // includes the typescript specific rules found here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks",
+    "eslint-plugin-react-hooks"
+  ],
+  "rules": {
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/interface-name-prefix": "off",
+    "prettier/prettier": "off",
+    "import/no-unresolved": "off",
+    "import/extensions": "off",
+    "react/prop-types": "off"
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

.prettierignore

@@ -0,0 +1 @@
+package.json

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 120
+}

README.md

@@ -0,0 +1,48 @@
+# InstructLab Bot UI
+
+This is a [Patternfly](https://www.patternfly.org/get-started/develop/) react deployment for front-ending InstructLab Bot jobs. The framework is based off [patternfloy-react-seed](https://github.com/patternfly/patternfly-react-seed) but upgraded to use the latest React v6+. The data is all read only streaming from redis, via the go-streamer service.
+
+## Quickstart
+
+- Start the bot [compose stack](../deploy/compose).
+- Start go-streamer on the same host as the redis server since it will be connecting to `localhost:6379` by default, but can be set with `--redis-server`. The same applies to the listening websocket port `--listen-address` which defaults to `localhost:3000`.
+
+```bash
+cd ui/go-stream
+./go-stream 
+```
+
+- Start [webpack](https://github.com/webpack/webpack).
+
+```bash
+cd ui/
+npm run start:dev
+```
+
+## Authentication
+
+Currently, there is no OAuth implementation, this just supports a user/pass defined at runtime. If no `/ui/.env` file is defined, the user/pass is simply admin/password. To change those defaults, create the `/ui/.env` file and fill in the account user/pass with the following.
+
+```text
+REACT_APP_ADMIN_USERNAME=<user>
+REACT_APP_ADMIN_PASSWORD=<pass>
+```
+
+## Development Scripts
+
+```bash
+# Install development/build dependencies
+npm install
+
+# Start the development server
+npm run start:dev
+
+# Run a production build (outputs to "dist" dir)
+npm run build
+
+# Start the express server (run a production build first)
+npm run start
+
+# Start storybook component explorer
+npm run storybook
+```

dr-surge.js

@@ -0,0 +1,7 @@
+const fs = require('fs');
+const path = require('path');
+const indexPath = path.resolve(__dirname, 'dist/index.html');
+const targetFilePath = path.resolve(__dirname, 'dist/200.html');
+// ensure we have bookmarkable url's when publishing to surge
+// https://surge.sh/help/adding-a-200-page-for-client-side-routing
+fs.createReadStream(indexPath).pipe(fs.createWriteStream(targetFilePath));