feat(ui): Sign-post examples and the catalog. Fixes argoproj#4360 (ar…

…goproj#4382) Signed-off-by: Alex Collins <[email protected]>
jlegrone · Oct 27, 2020 · 252c463 · 252c463
1 parent 334d134
commit 252c463
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 6 deletions.
diff --git a/...ow-templates/components/cluster-workflow-template-list/cluster-workflow-template-list.tsx b/...ow-templates/components/cluster-workflow-template-list/cluster-workflow-template-list.tsx
@@ -5,6 +5,7 @@ import * as models from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {BasePage} from '../../../shared/components/base-page';
 import {ErrorNotice} from '../../../shared/components/error-notice';
+import {ExampleManifests} from '../../../shared/components/example-manifests';
 import {Loading} from '../../../shared/components/loading';
 import {ResourceEditor} from '../../../shared/components/resource-editor/resource-editor';
 import {Timestamp} from '../../../shared/components/timestamp';
@@ -68,6 +69,9 @@ export class ClusterWorkflowTemplateList extends BasePage<RouteComponentProps<an
  services.clusterWorkflowTemplate.create(wfTmpl).then(wf => ctx.navigation.goto(uiUrl(`cluster-workflow-templates/${wf.metadata.name}`)))
  }
  />
+ <p>
+ <ExampleManifests />.
+ </p>
  </SlidingPanel>
  </Page>
  )}
@@ -94,7 +98,9 @@ export class ClusterWorkflowTemplateList extends BasePage<RouteComponentProps<an
  return (
  <ZeroState title='No cluster workflow templates'>
  <p>You can create new templates here or using the CLI.</p>
- <p>{learnMore}.</p>
+ <p>
+ <ExampleManifests />. {learnMore}.
+ </p>
  </ZeroState>
  );
  }
@@ -120,7 +126,8 @@ export class ClusterWorkflowTemplateList extends BasePage<RouteComponentProps<an
  ))}
  </div>
  <p>
- <i className='fa fa-info-circle' /> Cluster scoped Workflow templates are reusable templates you can create new workflows from. {learnMore}.
+ <i className='fa fa-info-circle' /> Cluster scoped Workflow templates are reusable templates you can create new workflows from. <ExampleManifests />.{' '}
+ {learnMore}.
  </p>
  </div>
  </div>

diff --git a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-summary-panel.tsx b/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-summary-panel.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import {WorkflowTemplate} from '../../../models';
+import {ExampleManifests} from '../../shared/components/example-manifests';
 import {ResourceEditor} from '../../shared/components/resource-editor/resource-editor';
 import {Timestamp} from '../../shared/components/timestamp';
 import {services} from '../../shared/services';
@@ -38,6 +39,9 @@ export const ClusterWorkflowTemplateSummaryPanel = (props: Props) => {
  services.clusterWorkflowTemplate.update(value, props.template.metadata.name).then(clusterWorkflowTemplate => props.onChange(clusterWorkflowTemplate))
  }
  />
+ <p>
+ <ExampleManifests />
+ </p>
  </div>
  </div>
  </div>

diff --git a/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx b/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx
@@ -5,6 +5,7 @@ import * as models from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {BasePage} from '../../../shared/components/base-page';
 import {ErrorNotice} from '../../../shared/components/error-notice';
+import {ExampleManifests} from '../../../shared/components/example-manifests';
 import {Loading} from '../../../shared/components/loading';
 import {NamespaceFilter} from '../../../shared/components/namespace-filter';
 import {ResourceEditor} from '../../../shared/components/resource-editor/resource-editor';
@@ -85,6 +86,9 @@ export class CronWorkflowList extends BasePage<RouteComponentProps<any>, State>
  editing={true}
  kind='CronWorkflow'
  />
+ <p>
+ <ExampleManifests />.
+ </p>
  </SlidingPanel>
  </Page>
  )}
@@ -116,7 +120,9 @@ export class CronWorkflowList extends BasePage<RouteComponentProps<any>, State>
  return (
  <ZeroState title='No cron workflows'>
  <p>You can create new cron workflows here or using the CLI.</p>
- <p>{learnMore}.</p>
+ <p>
+ <ExampleManifests />. {learnMore}.
+ </p>
  </ZeroState>
  );
  }
@@ -148,7 +154,7 @@ export class CronWorkflowList extends BasePage<RouteComponentProps<any>, State>
  ))}
  </div>
  <p>
- <i className='fa fa-info-circle' /> Cron workflows are workflows that run on a preset schedule. {learnMore}.
+ <i className='fa fa-info-circle' /> Cron workflows are workflows that run on a preset schedule. <ExampleManifests />. {learnMore}.
  </p>
  </>
  );

diff --git a/ui/src/app/shared/components/example-manifests.tsx b/ui/src/app/shared/components/example-manifests.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export const ExampleManifests = () => (
+ <>
+ You can find manifests <a href='https://github.com/argoproj/argo/tree/master/examples'>in the examples</a> or templates in{' '}
+ <a href='https://argoproj-labs.github.io/argo-workflows-catalog/'>Workflow Template Catalog</a>
+ </>
+);
diff --git a/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx b/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx
@@ -5,6 +5,7 @@ import * as models from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {BasePage} from '../../../shared/components/base-page';
 import {ErrorNotice} from '../../../shared/components/error-notice';
+import {ExampleManifests} from '../../../shared/components/example-manifests';
 import {Loading} from '../../../shared/components/loading';
 import {NamespaceFilter} from '../../../shared/components/namespace-filter';
 import {ResourceEditor} from '../../../shared/components/resource-editor/resource-editor';
@@ -83,6 +84,9 @@ export class WorkflowTemplateList extends BasePage<RouteComponentProps<any>, Sta
  }
  editing={true}
  />
+ <p>
+ <ExampleManifests />.
+ </p>
  </SlidingPanel>
  </Page>
  )}
@@ -114,7 +118,9 @@ export class WorkflowTemplateList extends BasePage<RouteComponentProps<any>, Sta
  return (
  <ZeroState title='No workflow templates'>
  <p>You can create new templates here or using the CLI.</p>
- <p>{learnMore}.</p>
+ <p>
+ <ExampleManifests />. {learnMore}.
+ </p>
  </ZeroState>
  );
  }
@@ -145,7 +151,7 @@ export class WorkflowTemplateList extends BasePage<RouteComponentProps<any>, Sta
  ))}
  </div>
  <p>
- <i className='fa fa-info-circle' /> Workflow templates are reusable templates you can create new workflows from. {learnMore}.
+ <i className='fa fa-info-circle' /> Workflow templates are reusable templates you can create new workflows from. <ExampleManifests />. {learnMore}.
  </p>
  </div>
  </div>

diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -19,6 +19,7 @@ import * as Actions from '../../../shared/workflow-operations-map';
 
 import {CostOptimisationNudge} from '../../../shared/components/cost-optimisation-nudge';
 import {ErrorNotice} from '../../../shared/components/error-notice';
+import {ExampleManifests} from '../../../shared/components/example-manifests';
 import {PaginationPanel} from '../../../shared/components/pagination-panel';
 import {ResourceEditor} from '../../../shared/components/resource-editor/resource-editor';
 import {Pagination, parseLimit} from '../../../shared/pagination';
@@ -192,6 +193,9 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
  .then(wf => ctx.navigation.goto(uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`)))
  }
  />
+ <p>
+ <ExampleManifests />.
+ </p>
  </SlidingPanel>
  </Page>
  )}
@@ -293,6 +297,9 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
  return (
  <ZeroState title='No workflows'>
  <p>To create a new workflow, use the button above.</p>
+ <p>
+ <ExampleManifests />.
+ </p>
  </ZeroState>
  );
  }