-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Added workflow summary to workflow-list page. (#9693)
* feat: Added workflow summary to workflow-list page. Fixes #6535 Signed-off-by: Anil Kumar <anil225sri@gmail.com> * feat: rename jobs to workflows Signed-off-by: Anil Kumar <anil225sri@gmail.com> * feat: Added workflow summary to workflow-list page. Fixes #6535 Signed-off-by: Anil Kumar <anil225sri@gmail.com> * feat: rename jobs to workflows Signed-off-by: Anil Kumar <anil225sri@gmail.com> * feat: add info icon for workflows summary Signed-off-by: Anil Kumar <anil225sri@gmail.com> * feat: add tooltip to workflow status summary Signed-off-by: Anil Kumar <anil225sri@gmail.com> * feat: retrigger checks Signed-off-by: Anil Kumar <anil225sri@gmail.com> Signed-off-by: Anil Kumar <anil225sri@gmail.com>
- Loading branch information
1 parent
82201d5
commit 1bbdf0d
Showing
3 changed files
with
104 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| @import 'node_modules/argo-ui/src/styles/config'; | ||
|
|
||
| .wf-summary-container { | ||
| color: $argo-color-gray-6; | ||
| padding: 5px 0px; | ||
| overflow: visible; | ||
| position: relative; | ||
| border-radius: 5px; | ||
| box-shadow: 1px 1px 3px #8fa4b1; | ||
| padding: 0 1em 0.75em 1em; | ||
| margin: 12px 0; | ||
| background-color: white; | ||
|
|
||
| &__title { | ||
| width: 100%; | ||
| max-width: 100%; | ||
| padding: 8px 0; | ||
| font-size: 15px; | ||
| background-color: transparent; | ||
| border: 0; | ||
| margin: 0; | ||
| margin-top: 1em; | ||
| color: #6d7f8b; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| &__text{ | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| &__subtext { | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| &__running { | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| color: #0DADEA; | ||
| } | ||
|
|
||
| &__others { | ||
| font-size: 12px; | ||
| font-weight: bold; | ||
| } | ||
| } |
57 changes: 57 additions & 0 deletions
57
ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import {Tooltip} from 'argo-ui'; | ||
| import * as React from 'react'; | ||
| import {useEffect, useState} from 'react'; | ||
| import {Workflow} from '../../../../models'; | ||
|
|
||
| require('./workflows-summary-container.scss'); | ||
|
|
||
| type ReduceReturnType = Record<string, number>; | ||
|
|
||
| export const WorkflowsSummaryContainer = (props: {workflows: Workflow[]}) => { | ||
| const [wfSummary, setWfSummary] = useState(null); | ||
| useEffect(() => { | ||
| if (props.workflows) { | ||
| const summary = props.workflows.reduce<ReduceReturnType>((acc, curr) => { | ||
| return {...acc, [curr.status.phase]: acc[curr.status.phase] ? ++acc[curr.status.phase] : 1}; | ||
| }, {}); | ||
| setWfSummary(summary); | ||
| } | ||
| }, [props.workflows]); | ||
|
|
||
| return ( | ||
| <div className='wf-summary-container'> | ||
| <p className='wf-summary-container__title'> | ||
| Workflows Summary{' '} | ||
| <Tooltip content='Only workflows in view are summarized'> | ||
| <i className='fa fa-info-circle' /> | ||
| </Tooltip> | ||
| </p> | ||
| <div className='row'> | ||
| <div className='columns small-12 xlarge-12'> | ||
| <span className='wf-summary-container__text'>Running workflows </span> | ||
| <span className='wf-summary-container__running'>{wfSummary && wfSummary.Running ? wfSummary.Running : 0}</span> | ||
| </div> | ||
| </div> | ||
| <div className='row'> | ||
| <div className='columns small-12 xlarge-6'> | ||
| <span className='wf-summary-container__subtext'>Pending </span> | ||
| <span className='wf-summary-container__others'>{wfSummary && wfSummary.Pending ? wfSummary.Pending : 0}</span> | ||
| </div> | ||
| <div className='columns small-12 xlarge-6'> | ||
| <span className='wf-summary-container__subtext'>Succeeded </span> | ||
| <span className='wf-summary-container__others'>{wfSummary && wfSummary.Succeeded ? wfSummary.Succeeded : 0}</span> | ||
| </div> | ||
| </div> | ||
| <div className='row'> | ||
| <div className='columns small-12 xlarge-6'> | ||
| <span className='wf-summary-container__subtext'>Failed </span> | ||
| <span className='wf-summary-container__others'>{wfSummary && wfSummary.Failed ? wfSummary.Failed : 0}</span> | ||
| </div> | ||
| <div className='columns small-12 xlarge-6'> | ||
| <span className='wf-summary-container__subtext'>Error </span> | ||
| <span className='wf-summary-container__others'>{wfSummary && wfSummary.Error ? wfSummary.Error : 0}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |