Merge pull request #1 from aptmac/cryostat-web

Web UI prototyping

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/cryostat-web"]
+	path = src/cryostat-web
+	url = https://github.com/cryostatio/cryostat-web

README.md

@@ -1,3 +1,4 @@
+## Deploying the plugin:
 ```bash
 $ export PLUGIN_NAME=cryostat-plugin
 $ ./build.bash
@@ -6,7 +7,34 @@ $ helm upgrade -i $PLUGIN_NAME charts/openshift-console-plugin -n plugin--${PLUG
 $ helm uninstall $PLUGIN_NAME
 ```
 
+## Development using local backend (Cryostat or Prism):
 
+### Terminal 1: Run the plugin locally
+```
+yarn run start
+```
+
+Plugin assets will be accessible at http://localhost:9001
+
+### Terminal 2: Run a local backend, either a Prism mock server or local Cryostat
+
+```
+yarn run mock-server
+
+OR
+
+(in a Cryostat repo)
+bash smoketest.sh -t
+```
+
+Cryostat is accessble at http://localhost:8181, and for simplicity Prism has been configured to use the same port.
+
+### Terminal 3: Run a local OpenShift Console with plugin-proxy
+```
+yarn run start-console
+```
+
+The OpenShift Console running the plugin will be available at http://localhost:9000
 
 # OpenShift Console Plugin Template
 

console-extensions.json

@@ -3,18 +3,205 @@
     "type": "console.page/route",
     "properties": {
       "exact": true,
-      "path": "/example",
+      "path": "/cryostat/example",
       "component": { "$codeRef": "ExamplePage" }
     }
   },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/about",
+      "component": { "$codeRef": "AboutPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/settings",
+      "component": { "$codeRef": "SettingsPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/dashboard",
+      "component": { "$codeRef": "DashboardPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/topology",
+      "component": { "$codeRef": "TopologyPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/rules",
+      "component": { "$codeRef": "AutomatedRulesPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/recordings",
+      "component": { "$codeRef": "RecordingsPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/archives",
+      "component": { "$codeRef": "ArchivesPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/events",
+      "component": { "$codeRef": "EventsPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/security",
+      "component": { "$codeRef": "SecurityPage" }
+    }
+  },
+  {
+    "type": "console.navigation/section",
+    "properties": {
+      "id": "cryostat-section",
+      "insertAfter": "home",
+      "perspective": "admin",
+      "name": "%plugin__console-plugin-template~Cryostat%"
+    }
+  },
   {
     "type": "console.navigation/href",
     "properties": {
       "id": "example",
       "name": "%plugin__console-plugin-template~Plugin Example%",
-      "href": "/example",
+      "href": "/cryostat/example",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/separator",
+    "properties": {
+      "id": "pf-separator",
+      "section": "cryostat-section",
+      "insertAfter": "%plugin__console-plugin-template~Plugin Example%"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "about",
+      "name": "%plugin__console-plugin-template~About%",
+      "href": "/cryostat/about",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "settings",
+      "name": "%plugin__console-plugin-template~Settings%",
+      "href": "/cryostat/settings",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "dashboard",
+      "name": "%plugin__console-plugin-template~Dashboard%",
+      "href": "/cryostat/dashboard",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "topology",
+      "name": "%plugin__console-plugin-template~Topology%",
+      "href": "/cryostat/topology",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/separator",
+    "properties": {
+      "id": "pf-separator",
+      "section": "cryostat-section",
+      "insertAfter": "topology"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "rules",
+      "name": "%plugin__console-plugin-template~Automated Rules%",
+      "href": "/cryostat/rules",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "recordings",
+      "name": "%plugin__console-plugin-template~Recordings%",
+      "href": "/cryostat/recordings",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "archives",
+      "name": "%plugin__console-plugin-template~Archives%",
+      "href": "/cryostat/archives",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "events",
+      "name": "%plugin__console-plugin-template~Events%",
+      "href": "/cryostat/events",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "security",
+      "name": "%plugin__console-plugin-template~Security%",
+      "href": "/cryostat/security",
       "perspective": "admin",
-      "section": "home"
+      "section": "cryostat-section"
     }
   }
 ]

package.json

@@ -21,15 +21,23 @@
     "cypress-merge": "mochawesome-merge ./integration-tests/screenshots/cypress_report*.json > ./integration-tests/screenshots/cypress.json",
     "cypress-generate": "marge -o ./integration-tests/screenshots/ -f cypress-report -t 'OpenShift Console Plugin Template Cypress Test Results' -p 'OpenShift Cypress Plugin Template Test Results' --showPassed false --assetsDir ./integration-tests/screenshots/cypress/assets ./integration-tests/screenshots/cypress.json",
     "cypress-postreport": "yarn cypress-merge && yarn cypress-generate",
-    "webpack": "node -r ts-node/register ./node_modules/.bin/webpack"
+    "webpack": "node -r ts-node/register ./node_modules/.bin/webpack",
+    "mock-server": "prism mock -d -p 8181 $npm_package_config_api_schema_path"
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.15.5",
     "@openshift-console/dynamic-plugin-sdk": "1.4.0",
     "@openshift-console/dynamic-plugin-sdk-webpack": "1.1.1",
-    "@patternfly/react-core": "^5.1.1",
-    "@patternfly/react-icons": "^5.1.1",
-    "@patternfly/react-styles": "^5.1.1",
+    "@patternfly/quickstarts": "^5.4.0",
+    "@patternfly/react-catalog-view-extension": "^5.0.0",
+    "@patternfly/react-charts": "^7.4.3",
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.0",
+    "@patternfly/react-styles": "^5.4.0",
+    "@patternfly/react-table": "^5.4.0",
+    "@patternfly/react-topology": "^5.4.0",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@stoplight/prism-cli": "^5.10.0",
     "@types/node": "^18.0.0",
     "@types/react": "^17.0.37",
     "@types/react-helmet": "^6.1.4",
@@ -45,6 +53,8 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.1",
+    "humanize-duration": "^3.32.1",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^3.11.0",
     "mocha-junit-reporter": "^2.2.0",
     "mochawesome": "^7.1.3",
@@ -56,13 +66,15 @@
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.3",
+    "react-joyride": "^2.9.2",
     "react-router": "5.3.x",
     "react-router-dom": "5.3.x",
     "style-loader": "^3.3.1",
     "stylelint": "^15.3.0",
     "stylelint-config-standard": "^31.0.0",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.8.1",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.7.4",
     "webpack": "5.75.0",
     "webpack-cli": "^4.9.2",
@@ -77,7 +89,16 @@
     "displayName": "Cryostat Console Plugin Test",
     "description": "Test project for Console Plugin with backend service",
     "exposedModules": {
-      "ExamplePage": "./components/ExamplePage"
+      "ExamplePage": "./openshift/pages/ExamplePage",
+      "AboutPage": "./openshift/pages/AboutPage",
+      "SettingsPage": "./openshift/pages/SettingsPage",
+      "DashboardPage": "./openshift/pages/DashboardPage",
+      "TopologyPage": "./openshift/pages/TopologyPage",
+      "AutomatedRulesPage": "./openshift/pages/AutomatedRulesPage",
+      "RecordingsPage": "./openshift/pages/RecordingsPage",
+      "ArchivesPage": "./openshift/pages/ArchivesPage",
+      "EventsPage": "./openshift/pages/EventsPage",
+      "SecurityPage": "./openshift/pages/SecurityPage"
     },
     "dependencies": {
       "@console/pluginAPI": "*"
@@ -89,5 +110,8 @@
     "babel-loader": "^8.0.2",
     "i18next": "^23.11.5",
     "mocha": "^10.5.1"
+  },
+  "config": {
+    "api_schema_path": "https://raw.githubusercontent.com/cryostatio/cryostat/refs/heads/main/schema/openapi.yaml"
   }
 }

src/openshift/components/CryostatContainer.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { store } from '@app/Shared/Redux/ReduxStore';
+import { Provider } from 'react-redux';
+import { CryostatController } from './CryostatController';
+
+export const CryostatContainer: React.FC = ({ children }) => {
+  return (
+    <Provider store={store}>
+      {/* TODO: set-up the CR selector, and any other component Cryostat-web might need */}
+      <CryostatController>{children}</CryostatController>
+    </Provider>
+  );
+};