dashboard: fix not redirecting to login (#1017)

Signed-off-by: Teo Koon Peng <teokoonpeng@gmail.com>
open-rmf · Oct 10, 2024 · f7f962d · f7f962d
1 parent 238bb15
commit f7f962d
Show file tree

Hide file tree

Showing 10 changed files with 538 additions and 77 deletions.
diff --git a/packages/dashboard/.gitignore b/packages/dashboard/.gitignore
@@ -29,3 +29,4 @@ web_server.log
 /.rmf
 
 *storybook.log
+/keycloak-example.pub
diff --git a/packages/dashboard/examples/keycloak/README.md b/packages/dashboard/examples/keycloak/README.md
@@ -0,0 +1,34 @@
+This is an example using a local keycloak authentication provider.
+
+Follow the instructions below to run the example
+
+1. Start a keycloak instance
+
+```bash
+docker run --rm -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:25.0.2 start-dev
+```
+
+2. Setup keycloak for rmf-web
+
+```bash
+examples/keycloak/keycloak-setup.bash -u admin -o keycloak-example.pub
+```
+
+when prompted for the admin password, use "admin"
+
+the script will
+
+1. create a "rmf-web" realm
+1. create a user in "rmf-web" realm with the same credentials as the keycloak admin
+1. create a "dashboard" client
+1. create a rmf api server client scope
+1. create mappers for rmf api server client scopes
+1. link the dashboard client with the client scope
+1. export the public key
+
+3. Start rmf api server with the keycloak config
+
+```bash
+# be sure to run from packages/dashboard directory and source a supported rmf installation
+RMF_API_SERVER_CONFIG="$(pwd)/examples/keycloak/api_server_config.py" pnpm -C ../api-server start
+```
diff --git a/packages/dashboard/examples/keycloak/api_server_config.py b/packages/dashboard/examples/keycloak/api_server_config.py
@@ -0,0 +1,14 @@
+from os.path import dirname
+
+from api_server.default_config import config
+
+here = dirname(__file__)
+run_dir = f"{here}/run"
+
+config.update(
+    {
+        "jwt_public_key": f"{here}/../../keycloak-example.pub",
+        "jwt_secret": None,
+        "iss": "http://localhost:8080/realms/rmf-web",
+    }
+)
diff --git a/packages/dashboard/examples/keycloak/index.html b/packages/dashboard/examples/keycloak/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%BASE_URL%favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Web application that provides overall visualization and control over the RMF system"
+    />
+    <link rel="shortcut icon" type="image/x-icon" href="%BASE_URL%favicon.ico" />
+    <title>RMF Dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/dashboard/examples/keycloak/index.tsx b/packages/dashboard/examples/keycloak/index.tsx
@@ -0,0 +1,126 @@
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+
+import ReactDOM from 'react-dom/client';
+import {
+  InitialWindow,
+  LocallyPersistentWorkspace,
+  RmfDashboard,
+  Workspace,
+} from 'rmf-dashboard/components';
+import { MicroAppManifest } from 'rmf-dashboard/components/micro-app';
+import doorsApp from 'rmf-dashboard/micro-apps/doors-app';
+import liftsApp from 'rmf-dashboard/micro-apps/lifts-app';
+import createMapApp from 'rmf-dashboard/micro-apps/map-app';
+import robotMutexGroupsApp from 'rmf-dashboard/micro-apps/robot-mutex-groups-app';
+import robotsApp from 'rmf-dashboard/micro-apps/robots-app';
+import tasksApp from 'rmf-dashboard/micro-apps/tasks-app';
+import KeycloakAuthenticator from 'rmf-dashboard/services/keycloak';
+
+const mapApp = createMapApp({
+  attributionPrefix: 'Open-RMF',
+  defaultMapLevel: 'L1',
+  defaultRobotZoom: 20,
+  defaultZoom: 6,
+});
+
+const appRegistry: MicroAppManifest[] = [
+  mapApp,
+  doorsApp,
+  liftsApp,
+  robotsApp,
+  robotMutexGroupsApp,
+  tasksApp,
+];
+
+const homeWorkspace: InitialWindow[] = [
+  {
+    layout: { x: 0, y: 0, w: 12, h: 6 },
+    microApp: mapApp,
+  },
+];
+
+const robotsWorkspace: InitialWindow[] = [
+  {
+    layout: { x: 0, y: 0, w: 7, h: 4 },
+    microApp: robotsApp,
+  },
+  { layout: { x: 8, y: 0, w: 5, h: 8 }, microApp: mapApp },
+  { layout: { x: 0, y: 0, w: 7, h: 4 }, microApp: doorsApp },
+  { layout: { x: 0, y: 0, w: 7, h: 4 }, microApp: liftsApp },
+  { layout: { x: 8, y: 0, w: 5, h: 4 }, microApp: robotMutexGroupsApp },
+];
+
+const tasksWorkspace: InitialWindow[] = [
+  { layout: { x: 0, y: 0, w: 7, h: 8 }, microApp: tasksApp },
+  { layout: { x: 8, y: 0, w: 5, h: 8 }, microApp: mapApp },
+];
+
+export default function App() {
+  return (
+    <RmfDashboard
+      apiServerUrl="http://localhost:8000"
+      trajectoryServerUrl="http://localhost:8006"
+      authenticator={
+        new KeycloakAuthenticator(
+          {
+            clientId: 'dashboard',
+            realm: 'rmf-web',
+            url: 'http://localhost:8080',
+          },
+          // This must be a full url, if the dashboard is served under a subpath, this
+          // must be set approriately.
+          // Note that we can't use the base url directly as it could be an absolute path.
+          `${location.origin}/silent-check-sso.html`,
+        )
+      }
+      helpLink="https://osrf.github.io/ros2multirobotbook/rmf-core.html"
+      reportIssueLink="https://github.com/open-rmf/rmf-web/issues"
+      resources={{ fleets: {}, logos: { header: '/resources/defaultLogo.png' } }}
+      tasks={{
+        allowedTasks: [
+          { taskDefinitionId: 'patrol' },
+          { taskDefinitionId: 'delivery' },
+          { taskDefinitionId: 'compose-clean' },
+          { taskDefinitionId: 'custom_compose' },
+        ],
+        pickupZones: [],
+        cartIds: [],
+      }}
+      tabs={[
+        {
+          name: 'Map',
+          route: '',
+          element: <Workspace initialWindows={homeWorkspace} />,
+        },
+        {
+          name: 'Robots',
+          route: 'robots',
+          element: <Workspace initialWindows={robotsWorkspace} />,
+        },
+        {
+          name: 'Tasks',
+          route: 'tasks',
+          element: <Workspace initialWindows={tasksWorkspace} />,
+        },
+        {
+          name: 'Custom',
+          route: 'custom',
+          element: (
+            <LocallyPersistentWorkspace
+              defaultWindows={[]}
+              allowDesignMode
+              appRegistry={appRegistry}
+              storageKey="custom-workspace"
+            />
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(<App />);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,3 +29,4 @@ web_server.log
		/.rmf

		*storybook.log
		/keycloak-example.pub