Merge pull request #1742 from rawagner/dashboards-page

Add plugin infra for adding new dashboard tabs/cards
openshift · Jun 26, 2019 · 3034dac · 3034dac
2 parents 4f68117 + e29751c
commit 3034dac
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 29 deletions.
diff --git a/frontend/packages/console-demo-plugin/src/dashboards/foo-card.tsx b/frontend/packages/console-demo-plugin/src/dashboards/foo-card.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {
+  DashboardCard,
+  DashboardCardTitle,
+  DashboardCardBody,
+  DashboardCardHeader,
+} from '@console/internal/components/dashboard/dashboard-card';
+
+export const FooCard: React.FC<{}> = () => (
+  <DashboardCard>
+    <DashboardCardHeader>
+      <DashboardCardTitle>Foo Card</DashboardCardTitle>
+    </DashboardCardHeader>
+    <DashboardCardBody>
+      <div>foo content</div>
+    </DashboardCardBody>
+  </DashboardCard>
+);
diff --git a/frontend/packages/console-demo-plugin/src/plugin.tsx b/frontend/packages/console-demo-plugin/src/plugin.tsx
@@ -14,11 +14,14 @@ import {
   RoutePage,
   DashboardsOverviewHealthPrometheusSubsystem,
   DashboardsOverviewHealthURLSubsystem,
+  DashboardsCard,
+  DashboardsTab,
 } from '@console/plugin-sdk';
 
 // TODO(vojtech): internal code needed by plugins should be moved to console-shared package
 import { PodModel } from '@console/internal/models';
 import { FLAGS } from '@console/internal/const';
+import { GridPosition } from '@console/internal/components/dashboard/grid';
 
 import { FooBarModel } from './models';
 import { yamlTemplates } from './yaml-templates';
@@ -37,7 +40,9 @@ type ConsumedExtensions =
   | YAMLTemplate
   | RoutePage
   | DashboardsOverviewHealthPrometheusSubsystem
-  | DashboardsOverviewHealthURLSubsystem<any>;
+  | DashboardsOverviewHealthURLSubsystem<any>
+  | DashboardsTab
+  | DashboardsCard;
 
 const plugin: Plugin<ConsumedExtensions> = [
   {
@@ -167,6 +172,22 @@ const plugin: Plugin<ConsumedExtensions> = [
       render: () => <h1>Test Page</h1>,
     },
   },
+  {
+    type: 'Dashboards/Tab',
+    properties: {
+      id: 'foo-tab',
+      title: 'Foo',
+    },
+  },
+  {
+    type: 'Dashboards/Card',
+    properties: {
+      tab: 'foo-tab',
+      position: GridPosition.MAIN,
+      loader: () =>
+        import('./dashboards/foo-card' /* webpackChunkName: "demo-card" */).then((m) => m.FooCard),
+    },
+  },
 ];
 
 export default plugin;
diff --git a/frontend/packages/console-plugin-sdk/src/registry.ts b/frontend/packages/console-plugin-sdk/src/registry.ts
@@ -12,6 +12,8 @@ import {
   isYAMLTemplate,
   isRoutePage,
   isDashboardsOverviewHealthSubsystem,
+  isDashboardsCard,
+  isDashboardsTab,
 } from './typings';
 
 /**
@@ -59,4 +61,12 @@ export class ExtensionRegistry {
   public getDashboardsOverviewHealthSubsystems() {
     return this.extensions.filter(isDashboardsOverviewHealthSubsystem);
   }
+
+  public getDashboardsTabs() {
+    return this.extensions.filter(isDashboardsTab);
+  }
+
+  public getDashboardsCards() {
+    return this.extensions.filter(isDashboardsCard);
+  }
 }
diff --git a/frontend/packages/console-plugin-sdk/src/typings/dashboards.ts b/frontend/packages/console-plugin-sdk/src/typings/dashboards.ts
@@ -1,5 +1,8 @@
 import { SubsystemHealth } from '@console/internal/components/dashboards-page/overview-dashboard/health-card';
+import { GridPosition } from '@console/internal/components/dashboard/grid';
+
 import { Extension } from './extension';
+import { LazyLoader } from './types';
 
 namespace ExtensionProperties {
   interface DashboardsOverviewHealthSubsystem<R> {
@@ -31,6 +34,25 @@ namespace ExtensionProperties {
     /** The Prometheus query */
     query: string;
   }
+
+  export interface DashboardsTab {
+    /** The tab's ID which will be used as part of href within dashboards page */
+    id: string;
+
+    /** The tab title */
+    title: string;
+  }
+
+  export interface DashboardsCard {
+    /** The tab's ID where this card should be rendered */
+    tab: string;
+
+    /** The card position in the tab */
+    position: GridPosition;
+
+    /** Loader for the corresponding dashboard card component. */
+    loader: LazyLoader<any>;
+  }
 }
 
 export interface DashboardsOverviewHealthURLSubsystem<R>
@@ -60,3 +82,17 @@ export const isDashboardsOverviewHealthSubsystem = (
   e: Extension<any>,
 ): e is DashboardsOverviewHealthSubsystem =>
   isDashboardsOverviewHealthURLSubsystem(e) || isDashboardsOverviewHealthPrometheusSubsystem(e);
+
+export interface DashboardsTab extends Extension<ExtensionProperties.DashboardsTab> {
+  type: 'Dashboards/Tab';
+}
+
+export const isDashboardsTab = (e: Extension<any>): e is DashboardsTab =>
+  e.type === 'Dashboards/Tab';
+
+export interface DashboardsCard extends Extension<ExtensionProperties.DashboardsCard> {
+  type: 'Dashboards/Card';
+}
+
+export const isDashboardsCard = (e: Extension<any>): e is DashboardsCard =>
+  e.type === 'Dashboards/Card';
diff --git a/frontend/packages/console-plugin-sdk/src/typings/pages.ts b/frontend/packages/console-plugin-sdk/src/typings/pages.ts
@@ -1,9 +1,7 @@
-import * as React from 'react';
 import { RouteProps, RouteComponentProps } from 'react-router-dom';
 import { K8sKind, K8sResourceKindReference } from '@console/internal/module/k8s';
 import { Extension } from './extension';
-
-type LazyLoader<T extends {}> = () => Promise<React.ComponentType<Partial<T>>>;
+import { LazyLoader } from './types';
 
 namespace ExtensionProperties {
   export interface ResourcePage<T> {

diff --git a/frontend/packages/console-plugin-sdk/src/typings/types.ts b/frontend/packages/console-plugin-sdk/src/typings/types.ts
@@ -0,0 +1 @@
+export type LazyLoader<T extends {}> = () => Promise<React.ComponentType<Partial<T>>>;
diff --git a/frontend/public/components/app-contents.tsx b/frontend/public/components/app-contents.tsx
@@ -118,7 +118,7 @@ const AppContents = withRouter(React.memo(() => (
 
           <Route path={['/all-namespaces', '/ns/:ns']} component={RedirectComponent} />
 
-          <LazyRoute path="/dashboards" exact loader={() => import('./dashboards-page/dashboards' /* webpackChunkName: "dashboards" */).then(m => m.DashboardsPage)} />
+          <LazyRoute path="/dashboards" loader={() => import('./dashboards-page/dashboards' /* webpackChunkName: "dashboards" */).then(m => m.DashboardsPage)} />
           <LazyRoute path="/cluster-status" exact loader={() => import('./cluster-overview' /* webpackChunkName: "cluster-overview" */).then(m => m.ClusterOverviewPage)} />
           <Redirect from="/overview/all-namespaces" to="/cluster-status" />
           <Redirect from="/overview/ns/:ns" to="/k8s/cluster/projects/:ns/workloads" />

diff --git a/frontend/public/components/dashboard/dashboard-card/card-body.tsx b/frontend/public/components/dashboard/dashboard-card/card-body.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { CardBody, CardBodyProps } from '@patternfly/react-core';
 
-import { LoadingInline } from '../../utils';
+import { LoadingInline } from '../../utils/status-box';
 
 export const DashboardCardBody: React.FC<DashboardCardBodyProps> = React.memo(({ isLoading, classname, children, ...props }) => (
   <CardBody className={classNames('co-dashboard-card__body', classname)} {...props}>

diff --git a/frontend/public/components/dashboard/grid.tsx b/frontend/public/components/dashboard/grid.tsx
@@ -1,35 +1,58 @@
 import * as React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 
-import { useRefWidth } from '../utils';
+import { useRefWidth } from '../utils/ref-width-hook';
 
 export const MEDIA_QUERY_LG = 992;
 
-export const DashboardGrid: React.FC<DashboardGridProps> = ({ mainCards, leftCards, rightCards }) => {
+export enum GridPosition {
+  MAIN = 'MAIN',
+  LEFT = 'LEFT',
+  RIGHT = 'RIGHT',
+}
+
+const mapCardsToGrid = (cards: React.ComponentType<any>[], keyPrefix: string): React.ReactNode[] =>
+  cards.map((Card, index) => (
+    <GridItem key={`${keyPrefix}-${index}`} span={12}><Card /></GridItem>
+  ));
+
+export const DashboardGrid: React.FC<DashboardGridProps> = ({ mainCards, leftCards = [], rightCards = [] }) => {
   const [containerRef, width] = useRefWidth();
   const grid = width <= MEDIA_QUERY_LG ?
     (
       <Grid className="co-dashboard-grid">
         <GridItem lg={12} md={12} sm={12}>
-          {mainCards}
+          <Grid className="co-dashboard-grid">
+            {mapCardsToGrid(mainCards, 'main')}
+          </Grid>
         </GridItem>
         <GridItem key="left" lg={12} md={12} sm={12}>
-          {leftCards}
+          <Grid className="co-dashboard-grid">
+            {mapCardsToGrid(leftCards, 'left')}
+          </Grid>
         </GridItem>
         <GridItem key="right" lg={12} md={12} sm={12}>
-          {rightCards}
+          <Grid className="co-dashboard-grid">
+            {mapCardsToGrid(rightCards, 'right')}
+          </Grid>
         </GridItem>
       </Grid>
     ) : (
       <Grid className="co-dashboard-grid">
         <GridItem key="left" lg={3} md={3} sm={3}>
-          {leftCards}
+          <Grid className="co-dashboard-grid">
+            {mapCardsToGrid(leftCards, 'left')}
+          </Grid>
         </GridItem>
         <GridItem lg={6} md={6} sm={6}>
-          {mainCards}
+          <Grid className="co-dashboard-grid">
+            {mapCardsToGrid(mainCards, 'main')}
+          </Grid>
         </GridItem>
         <GridItem key="right" lg={3} md={3} sm={3}>
-          {rightCards}
+          <Grid className="co-dashboard-grid">
+            {mapCardsToGrid(rightCards, 'right')}
+          </Grid>
         </GridItem>
       </Grid>
     );
@@ -38,7 +61,7 @@ export const DashboardGrid: React.FC<DashboardGridProps> = ({ mainCards, leftCar
 };
 
 type DashboardGridProps = {
-  mainCards: React.ReactNode,
-  leftCards?: React.ReactNode,
-  rightCards?: React.ReactNode,
+  mainCards: React.ComponentType<any>[],
+  leftCards?: React.ComponentType<any>[],
+  rightCards?: React.ComponentType<any>[],
 };
diff --git a/frontend/public/components/dashboards-page/dashboards.tsx b/frontend/public/components/dashboards-page/dashboards.tsx
@@ -2,18 +2,46 @@ import * as React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { connect } from 'react-redux';
 
+import * as plugins from '../../plugins';
 import { OverviewDashboard } from './overview-dashboard/overview-dashboard';
-import { HorizontalNav, PageHeading, LoadingBox } from '../utils';
+import { HorizontalNav, PageHeading, LoadingBox, Page, AsyncComponent } from '../utils';
+import { Dashboard } from '../dashboard/dashboard';
+import { DashboardGrid, GridPosition } from '../dashboard/grid';
+import { DashboardsCard } from '@console/plugin-sdk';
 
-const tabs = [
+const getCardsOnPosition = (cards: DashboardsCard[], position: GridPosition): React.ComponentType<any>[] =>
+  cards.filter(c => c.properties.position === position).map(c => () => <AsyncComponent loader={c.properties.loader} />);
+
+const getPluginTabPages = (): Page[] => {
+  const cards = plugins.registry.getDashboardsCards();
+  return plugins.registry.getDashboardsTabs().map(tab => {
+    const tabCards = cards.filter(c => c.properties.tab === tab.properties.id);
+    return {
+      href: tab.properties.id,
+      name: tab.properties.title,
+      component: () => (
+        <Dashboard>
+          <DashboardGrid
+            mainCards={getCardsOnPosition(tabCards, GridPosition.MAIN)}
+            leftCards={getCardsOnPosition(tabCards, GridPosition.LEFT)}
+            rightCards={getCardsOnPosition(tabCards, GridPosition.RIGHT)}
+          />
+        </Dashboard>
+      ),
+    };
+  });
+};
+
+const tabs: Page[] = [
   {
     href: '',
     name: 'Overview',
     component: OverviewDashboard,
   },
+  ...getPluginTabPages(),
 ];
 
-const _DashboardsPage: React.FC<DashboardsPageProps> = ({ match, kindsInFlight }) => {
+const DashboardsPage_: React.FC<DashboardsPageProps> = ({ match, kindsInFlight }) => {
   return kindsInFlight
     ? <LoadingBox />
     : (
@@ -28,7 +56,7 @@ const mapStateToProps = ({k8s}) => ({
   kindsInFlight: k8s.getIn(['RESOURCES', 'inFlight']),
 });
 
-export const DashboardsPage = connect(mapStateToProps)(_DashboardsPage);
+export const DashboardsPage = connect(mapStateToProps)(DashboardsPage_);
 
 type DashboardsPageProps = RouteComponentProps & {
   kindsInFlight: boolean;

diff --git a/frontend/public/components/dashboards-page/overview-dashboard/overview-dashboard.tsx b/frontend/public/components/dashboards-page/overview-dashboard/overview-dashboard.tsx
@@ -5,13 +5,8 @@ import { HealthCard } from './health-card';
 import { DetailsCard } from './details-card';
 
 export const OverviewDashboard: React.FC<{}> = () => {
-  const mainCards = [
-    <HealthCard key="health" />,
-  ];
-
-  const leftCards = [
-    <DetailsCard key="details" />,
-  ];
+  const mainCards = [HealthCard];
+  const leftCards = [DetailsCard];
 
   return (
     <Dashboard>

diff --git a/frontend/public/components/utils/horizontal-nav.tsx b/frontend/public/components/utils/horizontal-nav.tsx
@@ -26,7 +26,7 @@ class PodsComponent extends React.PureComponent<PodsComponentProps> {
   }
 }
 
-type Page = {
+export type Page = {
   href: string;
   name: string;
   component?: React.ComponentType<any>;