feat(ui): Adds a report page which shows basic historical workflow me…

…trics. Closes argoproj#3557 (argoproj#3558)
jlegrone · Oct 8, 2020 · 04f7488 · 04f7488
1 parent a545a53
commit 04f7488
Show file tree

Hide file tree

Showing 10 changed files with 484 additions and 214 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -15,6 +15,8 @@
  "@fortawesome/fontawesome-free": "^5.12.0",
  "@types/dagre": "^0.7.44",
  "argo-ui": "https://github.com/argoproj/argo-ui.git",
+ "chart.js": "^2.9.3",
+ "chartjs-plugin-annotation": "^0.5.7",
  "classnames": "^2.2.5",
  "cron-parser": "^2.16.3",
  "dagre": "^0.8.5",
@@ -26,9 +28,9 @@
  "monaco-editor": "0.20.0",
  "prop-types": "^15.7.2",
  "react": "^16.8.3",
+ "react-chartjs-2": "^2.9.0",
  "react-datepicker": "^2.14.0",
  "react-dom": "^16.8.3",
- "react-form": "2.16.0",
  "react-moment": "^0.9.7",
  "react-monaco-editor": "^0.36.0",
  "react-router-dom": "^4.2.2",
@@ -38,6 +40,7 @@
  "swagger-ui-react": "^3.29.0"
  },
  "devDependencies": {
+ "@types/chart.js": "^2.9.24",
  "@types/classnames": "^2.2.3",
  "@types/deep-equal": "^1.0.1",
  "@types/history": "^4.6.2",

diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
@@ -15,6 +15,7 @@ import clusterWorkflowTemplates from './cluster-workflow-templates';
 import cronWorkflows from './cron-workflows';
 import help from './help';
 import login from './login';
+import reports from './reports';
 import ErrorBoundary from './shared/components/error-boundary';
 import {services} from './shared/services';
 import {Utils} from './shared/utils';
@@ -32,6 +33,7 @@ const apiDocsUrl = uiUrl('apidocs');
 const userInfoUrl = uiUrl('userinfo');
 const loginUrl = uiUrl('login');
 const timelineUrl = uiUrl('timeline');
+const reportsUrl = uiUrl('reports');
 
 export const history = createBrowserHistory();
 
@@ -61,6 +63,11 @@ const navItems = [
  path: archivedWorkflowsUrl,
  iconClassName: 'fa fa-archive'
  },
+ {
+ title: 'Reports',
+ path: reportsUrl,
+ iconClassName: 'fa fa-chart-bar'
+ },
  {
  title: 'User',
  path: userInfoUrl,
@@ -155,11 +162,17 @@ export class App extends React.Component<{}, {version?: Version; popupProps: Pop
  <Redirect to={this.archivedWorkflowsUrl} />
  </Route>
  )}
+ {this.state.namespace && (
+ <Route exact={true} strict={true} path={reportsUrl}>
+ <Redirect to={this.reportsUrl} />
+ </Route>
+ )}
  <Route path={workflowsUrl} component={workflows.component} />
  <Route path={workflowTemplatesUrl} component={workflowTemplates.component} />
  <Route path={clusterWorkflowTemplatesUrl} component={clusterWorkflowTemplates.component} />
  <Route path={cronWorkflowsUrl} component={cronWorkflows.component} />
  <Route path={archivedWorkflowsUrl} component={archivedWorkflows.component} />
+ <Route path={reportsUrl} component={reports.component} />
  <Route exact={true} strict={true} path={helpUrl} component={help.component} />
  <Route exact={true} strict={true} path={apiDocsUrl} component={apidocs.component} />
  <Route exact={true} strict={true} path={userInfoUrl} component={userinfo.component} />
@@ -188,6 +201,10 @@ export class App extends React.Component<{}, {version?: Version; popupProps: Pop
  return workflowsUrl + '/' + (this.state.namespace || '');
  }
 
+ private get reportsUrl() {
+ return reportsUrl + '/' + (this.state.namespace || '');
+ }
+
  public getChildContext() {
  return {
  history,

diff --git a/ui/src/app/reports/components/report-container.tsx b/ui/src/app/reports/components/report-container.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {Route, RouteComponentProps, Switch} from 'react-router';
+import {Reports} from './reports';
+
+export const ReportsContainer = (props: RouteComponentProps<any>) => (
+ <Switch>
+ <Route exact={true} path={`${props.match.path}/:namespace?`} component={Reports} />
+ </Switch>
+);