Created minimal dashboard app with relay provider and keycloak

DiamondLightSource · Nov 14, 2024 · 7f8a617 · 7f8a617
1 parent 831db98
commit 7f8a617
Show file tree

Hide file tree

Showing 17 changed files with 865 additions and 549 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -13,3 +13,5 @@ dist-ssr
 *.local
 
 *storybook.log
+
+*.tsbuildinfo
diff --git a/frontend/dashboard/.env.production b/frontend/dashboard/.env.production
@@ -0,0 +1,3 @@
+VITE_KEYCLOAK_URL = "https://workflows.diamond.ac.uk/graphql"
+VITE_KEYCLOAK_REALM = "master"
+VITE_KEYCLOAK_CLIENT = "workflows-cluster"
diff --git a/frontend/dashboard/index.html b/frontend/dashboard/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Workflows Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/frontend/dashboard/package.json b/frontend/dashboard/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "relay-compiler --validate && tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "relay": "relay-compiler"
+  },
+  "dependencies": {
+    "@jsonforms/material-renderers": "^3.4.1",
+    "@jsonforms/react": "^3.4.1",
+    "keycloak-js": "^26.0.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-relay": "18.1.0",
+    "workflows-lib": "*",
+    "relay-workflows-lib": "*"
+
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@jsonforms/core": "^3.4.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-relay": "16.0.6",
+    "@types/relay-runtime": "18.1.1",
+    "babel-plugin-relay": "18.1.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "relay-compiler": "18.1.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-plugin-relay": "2.1.0"
+  }
+}
diff --git a/frontend/dashboard/relay.config.json b/frontend/dashboard/relay.config.json
@@ -0,0 +1,11 @@
+{
+  "src": "./src",
+  "language": "typescript",
+  "schema": "./src/workflows.graphql",
+  "exclude": [
+    "**/node_modules/**",
+    "**/__mocks__/**",
+    "**/__generated__/**"
+  ],
+  "eagerEsModules": true
+}
diff --git a/frontend/dashboard/src/App.tsx b/frontend/dashboard/src/App.tsx
@@ -0,0 +1,9 @@
+function App() {
+  return (
+    <>
+    <h1>Hello Workflow Dashboard!</h1>
+    </>
+  )
+}
+
+export default App
diff --git a/frontend/dashboard/src/RelayEnvironment.ts b/frontend/dashboard/src/RelayEnvironment.ts
@@ -0,0 +1,63 @@
+import {
+  Environment,
+  Network,
+  RecordSource,
+  Store,
+  FetchFunction,
+} from "relay-runtime";
+import keycloak from "./keycloak";
+
+const HTTP_ENDPOINT = "https://workflows.diamond.ac.uk/graphql";
+
+const kcinit = keycloak.init({
+  onLoad: "login-required"
+})
+.then(
+  auth => {
+      console.info("Authenticated");
+      console.log("auth", auth);
+      keycloak.onTokenExpired = () => {
+        console.log("token expired");
+      };
+  },
+  () => {
+    console.error("Authentication failed");
+  }
+);
+
+const fetchFn: FetchFunction = async (request, variables) => {
+  if (!keycloak.authenticated) {
+    await kcinit;
+  }
+
+  if (keycloak.token) {
+    const resp = await fetch(HTTP_ENDPOINT, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${keycloak.token}`,
+        Accept:
+          "application/graphql-response+json; charset=utf-8, application/json; charset=utf-8",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        query: request.text, // <-- The GraphQL document composed by Relay
+        variables,
+      }),
+    });
+
+    return await resp.json(); // eslint-disable-line @typescript-eslint/no-unsafe-return
+  } else {
+    console.log("Not authenticated yet");
+    return {};
+  }
+};
+
+
+function createRelayEnvironment() {
+  return new Environment({
+    network: Network.create(fetchFn),
+    store: new Store(new RecordSource()),
+  });
+}
+
+export const RelayEnvironment = createRelayEnvironment();
diff --git a/frontend/dashboard/src/keycloak.ts b/frontend/dashboard/src/keycloak.ts
@@ -0,0 +1,12 @@
+import Keycloak from "keycloak-js";
+
+//Keycloak init options
+const initOptions = {
+  url: import.meta.env.VITE_KEYCLOAK_URL,
+  realm: import.meta.env.VITE_KEYCLOAK_REALM,
+  clientId: import.meta.env.VITE_KEYCLOAK_CLIENT,
+};
+
+const keycloak = new Keycloak(initOptions);
+
+export default keycloak;
diff --git a/frontend/dashboard/src/main.tsx b/frontend/dashboard/src/main.tsx
@@ -0,0 +1,13 @@
+import { RelayEnvironmentProvider } from "react-relay";
+import { RelayEnvironment } from "./RelayEnvironment";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root") as Element).render(
+  <RelayEnvironmentProvider environment={RelayEnvironment}>
+    <StrictMode>
+      <App/>
+    </StrictMode>
+  </RelayEnvironmentProvider>
+);
diff --git a/frontend/dashboard/src/vite-env.d.ts b/frontend/dashboard/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/frontend/dashboard/tsconfig.app.json b/frontend/dashboard/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/frontend/dashboard/tsconfig.json b/frontend/dashboard/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/frontend/dashboard/tsconfig.node.json b/frontend/dashboard/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/dashboard/vite.config.ts b/frontend/dashboard/vite.config.ts
@@ -0,0 +1,8 @@
+import relay from "vite-plugin-relay";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [relay, react()],
+});
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,7 +3,8 @@
   "type": "module",
   "workspaces": [
     "workflows-lib",
-    "relay-workflows-lib"
+    "relay-workflows-lib",
+    "dashboard"
   ],
   "scripts": {
     "lint": "eslint",

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -2,6 +2,7 @@
   "files": [],
   "references": [
     { "path": "./workflows-lib" },
-    { "path": "./relay-workflows-lib" }
+    { "path": "./relay-workflows-lib" },
+    { "path": "./dashboard" }
   ]
 }