feat(ui): Add drawer with more details for each workflow in Workflow List #3151
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
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
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
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 |
|---|---|---|
|
|
@@ -32,7 +32,11 @@ export class WorkflowsService { | |
| } | ||
|
|
||
| public watch(filter: {namespace?: string; name?: string; phases?: Array<string>; labels?: Array<string>}): Observable<models.kubernetes.WatchEvent<Workflow>> { | ||
| const params = this.queryParams(filter); | ||
| params.push( | ||
| `fields=result.object.metadata.name,result.object.metadata.namespace,result.object.status.finishedAt,result.object.status.startedAt,result.object.status.phase` | ||
| ); | ||
| const url = `api/v1/workflow-events/${filter.namespace || ''}?${params.join('&')}`; | ||
|
There was a problem hiding this comment. This seems to be fixing the |
||
|
|
||
| return requests.loadEventSource(url, true).map(data => JSON.parse(data).result as models.kubernetes.WatchEvent<Workflow>); | ||
| } | ||
|
|
||
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,123 @@ | ||
| @import 'node_modules/argo-ui/src/styles/config'; | ||
|
|
||
| .workflow-drawer { | ||
| height: 100%; | ||
| font-size: .8125em; | ||
| background-color: $argo-color-gray-1; | ||
| margin-top: -8px; | ||
| padding: 1.5em 15px; | ||
| border-radius: 0 0 3px 3px; | ||
|
|
||
| &__section { | ||
| padding: 1em 0; | ||
| box-sizing: border-box; | ||
| border-top: 2px solid $argo-color-gray-3; | ||
|
|
||
| &:first-child { | ||
| padding-top: 0; | ||
| } | ||
|
|
||
| &:last-child { | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| &:only-child { | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| &__message { | ||
|
|
||
| &--label { | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| &--content { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| &__labels { | ||
| border-top: none; | ||
| &--list { | ||
| margin-top: 0.5em; | ||
| } | ||
| } | ||
|
|
||
| .tag { | ||
| line-height: normal; | ||
| background-color: $argo-color-gray-3; | ||
| border-radius: 3px; | ||
| height: auto; | ||
| margin: 0.5em 0; | ||
| margin-right: 10px; | ||
| display: flex; | ||
| overflow: hidden; | ||
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| .key { | ||
| color: $argo-color-teal-5; | ||
| } | ||
| .value { | ||
| color: $argo-color-gray-3; | ||
| } | ||
| } | ||
|
|
||
| .key, .value { | ||
| padding: 0.5em 8px; | ||
| } | ||
|
|
||
| .key { | ||
| color: $argo-color-gray-6; | ||
| } | ||
|
|
||
| .value { | ||
| color: white; | ||
| background-color: $argo-color-teal-5; | ||
| } | ||
| } | ||
|
|
||
| &__resourcesDuration { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| $gutter: 2em; | ||
|
|
||
| &--label { | ||
| margin-left: 0.5em; | ||
| } | ||
|
|
||
| &--value { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| &--container { | ||
| padding-left: $gutter / 2; | ||
| margin-left: $gutter / 2; | ||
| border-left: 1px solid $argo-color-gray-3; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| &__conditions { | ||
| display: flex; | ||
| margin-top: 0.5em; | ||
|
|
||
| .tag { | ||
| cursor: default; | ||
| &:hover { | ||
|
|
||
| .key { | ||
| color: $argo-color-gray-6; | ||
| } | ||
|
|
||
| .value { | ||
| color: white; | ||
| } | ||
|
|
||
| } | ||
| } | ||
| } | ||
| } |
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,75 @@ | ||
| import * as React from 'react'; | ||
| import * as models from '../../../../models'; | ||
|
|
||
| import {WorkflowLabels} from '../workflow-labels/workflow-labels'; | ||
|
|
||
| require('./workflow-drawer.scss'); | ||
|
|
||
| interface WorkflowDrawerProps { | ||
| workflow: models.Workflow; | ||
| onChange: (key: string) => void; | ||
| } | ||
|
|
||
| export class WorkflowDrawer extends React.Component<WorkflowDrawerProps, {}> { | ||
|
There was a problem hiding this comment. I would change the ordering things are displayed here to be
|
||
| public render() { | ||
| const wf = this.props.workflow; | ||
| return ( | ||
| <div className='workflow-drawer'> | ||
| <div className='workflow-drawer__section workflow-drawer__labels'> | ||
| <div className='workflow-drawer__title'>LABELS</div> | ||
| <div className='workflow-drawer__labels--list'> | ||
| <WorkflowLabels | ||
| workflow={wf} | ||
| onChange={key => { | ||
| this.props.onChange(key); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| {!wf.status.message ? null : ( | ||
| <div className='workflow-drawer__section workflow-drawer__message'> | ||
| <div className='workflow-drawer__title workflow-drawer__message--label'>MESSAGE</div> | ||
| <div className='workflow-drawer__message--content'>{wf.status.message}</div> | ||
| </div> | ||
| )} | ||
| {!wf.status.resourcesDuration ? null : ( | ||
| <div className='workflow-drawer__section'> | ||
| <div className='workflow-drawer__resourcesDuration'> | ||
| <div className='workflow-drawer__title'> | ||
| RESOURCES DURATION | ||
| <a href='https://github.com/argoproj/argo/blob/master/docs/resource-duration.md' target='_blank'> | ||
| <i className='fas fa-info-circle' /> | ||
| </a> | ||
| </div> | ||
| <div className='workflow-drawer__resourcesDuration--container'> | ||
| <div> | ||
| <span className='workflow-drawer__resourcesDuration--value'>{wf.status.resourcesDuration.cpu} sec</span> | ||
| <span className='workflow-drawer__resourcesDuration--label'>(*1 CPU)</span> | ||
| </div> | ||
| <div> | ||
| <span className='workflow-drawer__resourcesDuration--value'>{wf.status.resourcesDuration.memory} sec</span> | ||
| <span className='workflow-drawer__resourcesDuration--label'>(*100Mi Memory)</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| {!wf.status.conditions ? null : ( | ||
| <div className='workflow-drawer__section'> | ||
| <div className='workflow-drawer__title'>CONDITIONS</div> | ||
| <div className='workflow-drawer__conditions'> | ||
| {wf.status.conditions.map(condition => { | ||
| return ( | ||
| <div className='tag' key={`${wf.metadata.namespace}-${wf.metadata.name}-${condition.type}-${condition.status}`}> | ||
| <div className='key'>{condition.type}</div> | ||
| <div className='value'>{condition.status}</div> | ||
|
There was a problem hiding this comment. With So I'm not sure the There was a problem hiding this comment. Ah I see. With context, I agree - when I first saw that example, I thought that the SpecWarning portion was not itself a condition, but a constant warning displayed for every workflow. |
||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
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
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
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Likewise here. Shouldn't this be done in #3165 instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was due to a gap in my understanding of git - my commits from the #3165 branch were added to this branch. I was trying to debug this enhancement with the changes I made in #3165 without considering that accordingly those changes would be added to this branch.
To resolve this, should I simply delete the lines in question and recommit?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No worries. Yes, I would simply delete these lines and make sure that they are reverted exactly to what they were before by making sure they didn't change with
git diff master