Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Allow markdown title and description in CronWorkflows, WorkflowTemplates, & ClusterWorkflowTemplates. Fixes #12644 #12697

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+339 −119
Open

feat: Allow markdown title and description in CronWorkflows, WorkflowTemplates, & ClusterWorkflowTemplates. Fixes #12644 #12697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/assets/title-and-description-markdown-cluster-workflow-template.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...itle-and-description-markdown-complex.png → ...description-markdown-complex-workflow.png
View file
Open in desktop
File renamed without changes
Binary file added docs/assets/title-and-description-markdown-cron-workflow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/title-and-description-markdown-workflow-template.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...rkflow-title-and-description-markdown.png → ...tle-and-description-markdown-workflow.png
View file
Open in desktop
File renamed without changes
0 ...assets/workflow-title-and-description.png → ...assets/title-and-description-workflow.png
View file
Open in desktop
File renamed without changes
69 changes: 66 additions & 3 deletions docs/title-and-description.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ metadata:
```

The above manifest will render as a row like the below image:
![Title and Description Example](assets/workflow-title-and-description.png)
![Title and Description Example](assets/title-and-description-workflow.png)

## Embedded Markdown

Expand All @@ -34,7 +34,7 @@ metadata:
```

The above manifest will render as a row like the below image:
![Markdown Example](assets/workflow-title-and-description-markdown.png)
![Markdown Example](assets/title-and-description-markdown-workflow.png)

Below are a few more examples:

Expand Down Expand Up @@ -76,4 +76,67 @@ metadata:
```

The above examples will render as rows like the below image:
![More Markdown Examples](assets/workflow-title-and-description-markdown-complex.png)
![More Markdown Examples](assets/title-and-description-markdown-complex-workflow.png)

### For `ClusterWorkflowTemplates`

> v3.6 and after

You can also add the `workflows.argoproj.io/title` and `workflows.argoproj.io/description` annotations with embedded markdown to a `ClusterWorkflowTemplate` to display in the list:

```yaml
apiVersion: argoproj.io/v1alpha1
kind: ClusterWorkflowTemplate
metadata:
name: my-cluster-workflow-template
annotations:
workflows.argoproj.io/title: '**Test Title**'
workflows.argoproj.io/description: |
`This is a simple hello world example.`
You can also run it in Python: https://couler-proj.github.io/couler/examples/#hello-world
```

The above manifest will render as a row like the below image:
![ClusterWorkflowTemplate Example](assets/title-and-description-markdown-cluster-workflow-template.png)

### For `CronWorkflows`

> v3.6 and after

You can also add the `workflows.argoproj.io/title` and `workflows.argoproj.io/description` annotations with embedded markdown to a `CronWorkflow` to display in the list:

```yaml
apiVersion: argoproj.io/v1alpha1
kind: CronWorkflow
metadata:
name: my-cron-workflow
annotations:
workflows.argoproj.io/title: '**Test Title**'
workflows.argoproj.io/description: |
`This is a simple hello world example.`
You can also run it in Python: https://couler-proj.github.io/couler/examples/#hello-world
```

The above manifest will render as a row like the below image:
![CronWorkflow Example](assets/title-and-description-markdown-cron-workflow.png)

### For `WorkflowTemplates`

> v3.6 and after

You can also add the `workflows.argoproj.io/title` and `workflows.argoproj.io/description` annotations with embedded markdown to a `WorkflowTemplate` to display in the list:

```yaml
apiVersion: argoproj.io/v1alpha1
kind: WorkflowTemplate
metadata:
name: my-workflow-template
annotations:
workflows.argoproj.io/title: '**Test Title**'
workflows.argoproj.io/description: |
`This is a simple hello world example.`
You can also run it in Python: https://couler-proj.github.io/couler/examples/#hello-world
```

The above manifest will render as a row like the below image:
![WorkflowTemplate Example](assets/title-and-description-markdown-workflow-template.png)
20 changes: 19 additions & 1 deletion ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,22 @@
&__row:hover {
box-shadow: 1px 2px 3px rgba($argo-color-gray-9, .1), 0 0 0 1px rgba($argo-color-teal-5, .5);
}
}
}

.cluster-workflow-templates-list {
padding: 1em;

&__row-container {
a {
color: $argo-color-gray-6;
}

a:hover {
color: $argo-color-teal-5;
}
}
}

.row.pt-60 {
padding-top: 60px;
}
26 changes: 16 additions & 10 deletions ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import {Page, SlidingPanel} from 'argo-ui';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {Link, RouteComponentProps} from 'react-router-dom';
import {RouteComponentProps, Link} from 'react-router-dom';

import * as models from '../../models';
import {uiUrl} from '../shared/base';
import {ErrorNotice} from '../shared/components/error-notice';
import {ExampleManifests} from '../shared/components/example-manifests';
import {InfoIcon} from '../shared/components/fa-icons';
import {Loading} from '../shared/components/loading';
import {Timestamp} from '../shared/components/timestamp';
import {useCollectEvent} from '../shared/use-collect-event';
import {ZeroState} from '../shared/components/zero-state';
import {Context} from '../shared/context';
import {useQueryParams} from '../shared/use-query-params';
import {Footnote} from '../shared/footnote';
import {services} from '../shared/services';
import {Timestamp} from '../shared/components/timestamp';

import {ClusterWorkflowTemplateCreator} from './cluster-workflow-template-creator';
import {ClusterWorkflowTemplateMarkdown} from './cluster-workflow-template-markdown';

import './cluster-workflow-template-list.scss';

Expand Down Expand Up @@ -77,15 +79,19 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP
<div className='columns small-3'>CREATED</div>
</div>
{templates.map(t => (
<Link className='row argo-table-list__row' key={t.metadata.uid} to={uiUrl(`cluster-workflow-templates/${t.metadata.name}`)}>
<div className='columns small-1'>
<i className='fa fa-clone' />
</div>
<div className='columns small-5'>{t.metadata.name}</div>
<div className='columns small-3'>
<Timestamp date={t.metadata.creationTimestamp} />
<div className='cluster-workflow-templates-list__row-container' key={`${t.metadata.namespace}/${t.metadata.name}`}>
<div className='row argo-table-list__row'>
<div className='columns small-1'>
<i className='fa fa-clone' />
</div>
<Link to={{pathname: uiUrl(`cluster-workflow-templates/${t.metadata.name}`)}} className='columns small-5'>
<ClusterWorkflowTemplateMarkdown workflow={t} key={`${t.metadata.namespace}/${t.metadata.name}`} />
</Link>
<div className='columns small-3'>
<Timestamp date={t.metadata.creationTimestamp} />
</div>
</div>
</Link>
</div>
))}
</div>
<Footnote>
Expand Down
8 changes: 8 additions & 0 deletions ui/src/app/cluster-workflow-templates/cluster-workflow-template-markdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import 'node_modules/argo-ui/src/styles/config';

.wf-rows-name {
line-height: 1.5em;
display: inline-block;
vertical-align: middle;
white-space: pre-line;
}
22 changes: 22 additions & 0 deletions ui/src/app/cluster-workflow-templates/cluster-workflow-template-markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';

import {ClusterWorkflowTemplate} from '../../models';
import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../shared/annotations';
import {SuspenseReactMarkdownGfm} from '../shared/components/suspense-react-markdown-gfm';

require('./cluster-workflow-template-markdown.scss');

interface ClusterWorkflowTemplateMarkdownProps {
workflow: ClusterWorkflowTemplate;
}

export function ClusterWorkflowTemplateMarkdown(props: ClusterWorkflowTemplateMarkdownProps) {
const wf = props.workflow;
// title + description vars
const title = wf.metadata.annotations?.[ANNOTATION_TITLE] ?? wf.metadata.name;
const description = (wf.metadata.annotations?.[ANNOTATION_DESCRIPTION] && `\n${wf.metadata.annotations[ANNOTATION_DESCRIPTION]}`) || '';
const hasAnnotation = title !== wf.metadata.name || description !== '';
const markdown = `${title}${description}`;

return <div className='wf-rows-name'>{hasAnnotation ? <SuspenseReactMarkdownGfm markdown={markdown} /> : markdown}</div>;
}
20 changes: 19 additions & 1 deletion ui/src/app/cron-workflows/cron-workflow-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,22 @@
&__row:hover {
box-shadow: 1px 2px 3px rgba($argo-color-gray-9, .1), 0 0 0 1px rgba($argo-color-teal-5, .5);
}
}
}

.cron-workflows-list {
padding: 1em;

&__row-container {
a {
color: $argo-color-gray-6;
}

a:hover {
color: $argo-color-teal-5;
}
}
}

.row.pt-60 {
padding-top: 60px;
}
73 changes: 7 additions & 66 deletions ui/src/app/cron-workflows/cron-workflow-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
import {Page, SlidingPanel, Ticker} from 'argo-ui';
import {Page, SlidingPanel} from 'argo-ui';
import * as React from 'react';
import {useContext, useEffect, useState} from 'react';
import {Link, RouteComponentProps} from 'react-router-dom';
import {RouteComponentProps} from 'react-router-dom';

import {CronWorkflow, CronWorkflowSpec} from '../../models';
import {CronWorkflow} from '../../models';
import {uiUrl} from '../shared/base';
import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../shared/annotations';
import {ErrorNotice} from '../shared/components/error-notice';
import {ExampleManifests} from '../shared/components/example-manifests';
import {InfoIcon} from '../shared/components/fa-icons';
import {Loading} from '../shared/components/loading';
import {Timestamp} from '../shared/components/timestamp';
import {useCollectEvent} from '../shared/use-collect-event';
import {ZeroState} from '../shared/components/zero-state';
import {Context} from '../shared/context';
import {getNextScheduledTime} from '../shared/cron';
import {Footnote} from '../shared/footnote';
import {historyUrl} from '../shared/history';
import {services} from '../shared/services';
import {useQueryParams} from '../shared/use-query-params';
import {Utils} from '../shared/utils';
import {CronWorkflowCreator} from './cron-workflow-creator';
import {CronWorkflowFilters} from './cron-workflow-filters';
import {PrettySchedule} from './pretty-schedule';
import {CronWorkflowRow} from './cron-workflow-row';

import './cron-workflow-list.scss';

Expand Down Expand Up @@ -141,50 +138,9 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
<div className='columns small-1'>CREATED</div>
<div className='columns small-1'>NEXT RUN</div>
</div>
{cronWorkflows.map(w => (
<Link
className='row argo-table-list__row'
key={`${w.metadata.namespace}/${w.metadata.name}`}
to={uiUrl(`cron-workflows/${w.metadata.namespace}/${w.metadata.name}`)}>
<div className='columns small-1'>{w.spec.suspend ? <i className='fa fa-pause' /> : <i className='fa fa-clock' />}</div>
<div className='columns small-3'>
{w.metadata.annotations?.[ANNOTATION_TITLE] ?? w.metadata.name}
{w.metadata.annotations?.[ANNOTATION_DESCRIPTION] ? <p>{w.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
</div>
<div className='columns small-2'>{w.metadata.namespace}</div>
<div className='columns small-1'>{w.spec.timezone}</div>
<div className='columns small-1'>
{w.spec.schedule != ''
? w.spec.schedule
: w.spec.schedules.map(schedule => (
<>
{schedule}
<br />
</>
))}
</div>
<div className='columns small-2'>
{w.spec.schedule != '' ? (
<PrettySchedule schedule={w.spec.schedule} />
) : (
<>
{w.spec.schedules.map(schedule => (
<>
<PrettySchedule schedule={schedule} />
<br />
</>
))}
</>
)}
</div>
<div className='columns small-1'>
<Timestamp date={w.metadata.creationTimestamp} />
</div>
<div className='columns small-1'>
{w.spec.suspend ? '' : <Ticker intervalMs={1000}>{() => <Timestamp date={getCronNextScheduledTime(w.spec)} />}</Ticker>}
</div>
</Link>
))}
{cronWorkflows.map(w => {
return <CronWorkflowRow workflow={w} key={`${w.metadata.namespace}/${w.metadata.name}`} />;
})}
</div>
<Footnote>
<InfoIcon /> Cron workflows are workflows that run on a preset schedule. Next scheduled run assumes workflow-controller is in UTC.{' '}
Expand All @@ -200,18 +156,3 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
</Page>
);
}

function getCronNextScheduledTime(spec: CronWorkflowSpec): Date {
if (spec.schedule != '') {
return getNextScheduledTime(spec.schedule, spec.timezone);
}

let out: Date;
spec.schedules.forEach(schedule => {
const next = getNextScheduledTime(schedule, spec.timezone);
if (!out || next.getTime() < out.getTime()) {
out = next;
}
});
return out;
}
8 changes: 8 additions & 0 deletions ui/src/app/cron-workflows/cron-workflow-row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import 'node_modules/argo-ui/src/styles/config';

.wf-rows-name {
line-height: 1.5em;
display: inline-block;
vertical-align: middle;
white-space: pre-line;
}
Loading
Loading