feat(dynamic-plugins): make mountpoints and layout declarative

Signed-off-by: Tomas Coufal <tcoufal@redhat.com>
janus-idp · Nov 1, 2023 · 132b4f7 · 132b4f7
1 parent da696fd
commit 132b4f7
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 32 deletions.
diff --git a/app-config.yaml b/app-config.yaml
@@ -342,4 +342,48 @@ enabled:
 
 dynamicPlugins:
   rootDirectory: dynamic-plugins-root
-  frontend: {}
+  frontend:
+    janus-idp.backstage-plugin-quay:
+      mountPoints:
+        - mountPoint: entity.page.overview/cards
+          config:
+            layout:
+              gridRowStart: span 2
+            if:
+              anyOf:
+              - isQuayAvailable
+          module: QuayPlugin
+          importName: QuayPage
+    janus-idp.backstage-plugin-ocm:
+      dynamicRoutes:
+        - path: /ocm
+          importName: OcmPage
+          module: OcmPlugin
+          menuItem:
+            icon: Storage
+            text: Clusters
+      mountPoints:
+        - mountPoint: entity.page.overview/context
+          importName: ClusterContextProvider
+          module: OcmPlugin
+        - mountPoint: entity.page.overview/cards
+          importName: ClusterAvailableResourceCard
+          module: OcmPlugin
+          config:
+            layout:
+              gridRowStart: 1
+              gridColumnStart: "span 1"
+            if:
+              anyOf:
+              - isKind: resource
+              - isType: kubernetes-cluster
+        - mountPoint: entity.page.overview/cards
+          importName: ClusterInfoCard
+          module: OcmPlugin
+          config:
+            if:
+              allOf:
+              - isKind: resource
+              - isType: kubernetes-cluster
+
+
diff --git a/packages/app/config.d.ts b/packages/app/config.d.ts
@@ -65,7 +65,7 @@ export interface Config {
             text: string;
           };
         })[];
-        routeBindings: {
+        routeBindings?: {
           bindTarget: string;
           bindMap: {
             [key: string]: string;
@@ -74,8 +74,24 @@ export interface Config {
         mountPoints: {
           mountPoint: string;
           module: string;
-          importName?: string;
-        }[];
+          importName: string;
+          config: {
+            layout?: {
+              [key: string]: string;
+            },
+            if?: {
+              allOf?: ({
+                [key: string]: string | string[];
+              } | string)[];
+              anyOf?: ({
+                [key: string]: string | string[];
+              } | string)[];
+              oneOf?: ({
+                [key: string]: string | string[];
+              } | string)[];
+            }
+          }[];
+          }
       };
     };
   };

diff --git a/packages/app/src/components/AppBase/AppBase.tsx b/packages/app/src/components/AppBase/AppBase.tsx
@@ -17,7 +17,6 @@ import {
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
-import { OcmPage } from '@janus-idp/backstage-plugin-ocm';
 import React, { useContext } from 'react';
 import { Route } from 'react-router-dom';
 import { Root } from '../Root';
@@ -83,7 +82,6 @@ const AppBase = () => {
             </Route>
             <Route path="/settings" element={<UserSettingsPage />} />
             <Route path="/catalog-graph" element={<CatalogGraphPage />} />
-            <Route path="/ocm" element={<OcmPage />} />
             <Route path="/learning-paths" element={<LearningPaths />} />
             <Route path="/lighthouse" element={<LighthousePage />} />
             {dynamicRoutes.map(({ Component, path, ...props }) => (

diff --git a/packages/app/src/components/DynamicRoot/DynamicRoot.tsx b/packages/app/src/components/DynamicRoot/DynamicRoot.tsx
@@ -85,9 +85,20 @@ const DynamicRoot = ({
     }
 
     const providerMountPoints = mountPoints.map(
-      ({ module, importName, mountPoint, scope }) => ({
+      ({ module, importName, mountPoint, scope, config }) => ({
         mountPoint,
         Component: remotePlugins[scope][module][importName],
+        config: {
+          ...config,
+          if: Object.fromEntries(
+            Object.entries(config?.if || {}).map(([k, v]) => [
+              k,
+              v.map(c =>
+                typeof c === 'string' ? remotePlugins[scope][module][c] : c,
+              ),
+            ]),
+          ),
+        },
       }),
     );
 
@@ -97,7 +108,10 @@ const DynamicRoot = ({
       if (!acc[entry.mountPoint]) {
         acc[entry.mountPoint] = [];
       }
-      acc[entry.mountPoint].push(entry.Component);
+      acc[entry.mountPoint].push({
+        component: entry.Component,
+        config: entry.config,
+      });
       return acc;
     }, {});
     getScalprum().api.mountPoints = mountPointComponents;

diff --git a/packages/app/src/components/DynamicRoot/DynamicRootContext.tsx b/packages/app/src/components/DynamicRoot/DynamicRootContext.tsx
@@ -24,7 +24,19 @@ export type DynamicRootContextValue = DynamicModuleEntry & {
   Component: React.ComponentType<any>;
 };
 
-export type ScalprumMountPoint = React.ComponentType<{}>;
+export type ScalprumMountPointConfig = {
+  layout?: Record<string, string>,
+  if?: {
+    [key in ('allOf' | 'oneOf' | 'anyOf')]?: ({
+      [key: string]: string | string[];
+    } | Function)[];
+  }
+}
+
+export type ScalprumMountPoint = {
+  component: React.ComponentType<{}>
+  config?: ScalprumMountPointConfig
+};
 
 export type RemotePlugins = {
   [scope: string]: {

diff --git a/packages/app/src/components/catalog/EntityPage/index.tsx b/packages/app/src/components/catalog/EntityPage/index.tsx
@@ -1,27 +1,107 @@
-import { EntitySwitch, isKind } from '@backstage/plugin-catalog';
 import React from 'react';
+import getMountPointData from '../../../utils/dynamicUI/getMountPointData';
+import { EntityAboutCard, EntityLayout, EntityLinksCard, EntitySwitch, isKind } from '@backstage/plugin-catalog';
+import { ScalprumMountPointConfig } from '../../DynamicRoot/DynamicRootContext';
+import { hasAnnotation, isType } from '../utils';
+import { Entity } from '@backstage/catalog-model';
+import { makeStyles } from 'tss-react/mui';
 
-import {
-  componentPage,
-  defaultEntityPage,
-  apiPage,
-  groupPage,
-  userPage,
-  systemPage,
-  domainPage,
-  resourcePage,
-} from './Pages';
+
+const createConditionsArray = (conditions: ({
+  [key: string]: string | string[];
+} | Function)[]) => {
+  return conditions.map(c => {
+    if (typeof c === 'function') {
+      return (entity: Entity) => Boolean(c(entity))
+    }
+    if (c.isKind) {
+      return isKind(c.isKind)
+    }
+    if (c.isType) {
+      return isType(c.isType)
+    }
+    if (c.hasAnnotation) {
+      return hasAnnotation(c.hasAnnotation as string)
+    }
+    return () => false
+  })
+}
+
+const entitySwitchCaseIf = (conditional: ScalprumMountPointConfig['if']) => (e: Entity) => {
+  if (conditional?.allOf) {
+    return createConditionsArray(conditional.allOf).every(f => f(e))
+  }
+  if (conditional?.anyOf) {
+    return createConditionsArray(conditional.anyOf).some(f => f(e))
+  }
+  if (conditional?.oneOf) {
+    return createConditionsArray(conditional.oneOf).filter(f => f(e)).length === 1
+  }
+  return true
+}
+
+const useStyles = makeStyles()(theme => ({
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, 1fr)',
+    gridGap: theme.spacing(3),
+  }
+}));
+const Grid = ({ children }: React.PropsWithChildren<{}>) => {
+  const { classes } = useStyles();
+
+  return <div className={classes.grid}>{children}</div>
+}
+
+const tab = (mountPoint: string, children: React.ReactNode) => (
+ <>
+  {getMountPointData<React.ComponentType>(`${mountPoint}/context`).reduce(
+    (acc, { component: Component }) => (
+      <Component>
+        {acc}
+      </Component>
+    ),
+    <Grid>
+      {children}
+      {getMountPointData<React.ComponentType>(`${mountPoint}/cards`).map(
+        ({ component: Component, config }, index) => (
+          <EntitySwitch  key={index}>
+            <EntitySwitch.Case if={entitySwitchCaseIf(config.if)}>
+              <div style={ config.layout }>
+                <Component />
+              </div>
+            </EntitySwitch.Case>
+          </EntitySwitch>
+        )
+      )}
+    </Grid>)
+  }
+ </>
+)
 
 export const entityPage = (
-  <EntitySwitch>
-    <EntitySwitch.Case if={isKind('component')} children={componentPage} />
-    <EntitySwitch.Case if={isKind('api')} children={apiPage} />
-    <EntitySwitch.Case if={isKind('group')} children={groupPage} />
-    <EntitySwitch.Case if={isKind('user')} children={userPage} />
-    <EntitySwitch.Case if={isKind('system')} children={systemPage} />
-    <EntitySwitch.Case if={isKind('domain')} children={domainPage} />
-    <EntitySwitch.Case if={isKind('resource')} children={resourcePage} />
-
-    <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>
-  </EntitySwitch>
+  <EntityLayout>
+    <EntityLayout.Route path="/" title="Overview">
+      {tab('entity.page.overview', <>
+      <div style={{gridColumnStart: 'span 6'}}>
+        <EntityLinksCard />
+      </div>
+      <div style={{gridColumnStart: 'span 6', gridRowStart: 2}}>
+        <EntityAboutCard />
+      </div>
+      </>)}
+    </EntityLayout.Route>
+  </EntityLayout>
+  // <EntitySwitch>
+  //   <EntitySwitch.Case if={isKind('component')} children={componentPage} />
+  //   <EntitySwitch.Case if={isKind('api')} children={apiPage} />
+  //   <EntitySwitch.Case if={isKind('group')} children={groupPage} />
+  //   <EntitySwitch.Case if={isKind('user')} children={userPage} />
+  //   <EntitySwitch.Case if={isKind('system')} children={systemPage} />
+  //   <EntitySwitch.Case if={isKind('domain')} children={domainPage} />
+  //   <EntitySwitch.Case if={isKind('resource')} children={resourcePage} />
+
+  //   <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>
+  // </EntitySwitch>
+
 );
diff --git a/packages/app/src/components/catalog/utils.tsx b/packages/app/src/components/catalog/utils.tsx
@@ -8,3 +8,9 @@ export const isType = (types: string | string[]) => (entity: Entity) => {
     ? entity?.spec?.type === types
     : types.includes(entity.spec.type as string);
 };
+export const hasAnnotation = (keys: string) => (entity: Entity) => {
+  if (!entity?.metadata?.annotations) {
+    return false;
+  }
+  return Object.keys(entity?.metadata?.annotations).includes(keys)
+};
diff --git a/packages/app/src/utils/dynamicUI/extractDynamicConfig.ts b/packages/app/src/utils/dynamicUI/extractDynamicConfig.ts
@@ -2,6 +2,7 @@ import { defaultConfigLoader } from '@backstage/core-app-api';
 import {
   DynamicModuleEntry,
   RouteBinding,
+  ScalprumMountPointConfig,
 } from '../../components/DynamicRoot/DynamicRootContext';
 
 type AppConfig = {
@@ -48,6 +49,7 @@ async function extractDynamicConfig() {
       module: string;
       importName: string;
       mountPoint: string;
+      config?: ScalprumMountPointConfig;
     }[];
   }>(
     (acc, { data }) => {

diff --git a/packages/app/src/utils/dynamicUI/getMountPointData.ts b/packages/app/src/utils/dynamicUI/getMountPointData.ts
@@ -1,6 +1,7 @@
 import { getScalprum } from '@scalprum/core';
+import { ScalprumMountPointConfig } from '../../components/DynamicRoot/DynamicRootContext';
 
-function getMountPointData<T = any>(mountPoint: string): T[] {
+function getMountPointData<T = any>(mountPoint: string): {config: ScalprumMountPointConfig; component: T}[] {
   return getScalprum().api.mountPoints?.[mountPoint] ?? [];
 }