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.

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

refactor(ui): artifacts table Fixes #8306 #14037

Merged
merged 8 commits into from
Dec 31, 2024
36 changes: 23 additions & 13 deletions ui/src/workflows/components/workflow-artifacts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,21 +40,31 @@ export function WorkflowArtifacts(props: Props) {
return (
<div className='white-box'>
<div className='white-box__details'>
<div className='row header'>
<div className='columns artifact-name'>Artifact Name</div>
<div className='columns step-name'>Step Name</div>
<div className='columns path'>Path</div>
<div className='columns created-at'>Created at</div>
</div>

{artifacts.map(artifact => (
<div className='row white-box__details-row' key={artifact.downloadUrl}>
<div className='columns small-2'>
<span>
<a href={artifact.downloadUrl}>
{' '}
<i className='fa fa-download' />
</a>{' '}
{artifact.name}
</span>
<div className='row artifact-row' key={artifact.name}>
<div className='columns artifact-name'>
<a href={artifact.downloadUrl}>
<i className='fa fa-download' />
</a>
<span className='hoverable'>{artifact.name}</span>
</div>
<div className='columns small-4'>{artifact.stepName}</div>
<div className='columns small-3'>{artifact.path}</div>
<div className='columns small-3'>
<Timestamp date={artifact.dateCreated} timestampKey={TIMESTAMP_KEYS.WORKFLOW_ARTIFACTS_CREATED} />
<div className='columns step-name'>
<span className='hoverable'>{artifact.stepName}</span>
</div>
<div className='columns path'>
<span className='hoverable'>{artifact.path}</span>
</div>
<div className='columns created-at'>
<span className='hoverable'>
<Timestamp date={artifact.dateCreated} timestampKey={TIMESTAMP_KEYS.WORKFLOW_NODE_ARTIFACT_CREATED} />
</span>
</div>
</div>
))}
Expand Down
89 changes: 86 additions & 3 deletions ui/src/workflows/components/workflow-details/workflow-details.scss
Original file line number Diff line number Diff line change
Expand Up @@ -109,18 +109,18 @@
display: grid;
grid-template-columns: auto minmax(50%, 1fr);

& > * {
&>* {
align-items: center;
display: flex;
min-height: 50px;
padding: 14px 0;
}

& > *:nth-child(odd) {
&>*:nth-child(odd) {
padding-right: 4em;
}

& > *:not(:nth-last-child(-n+2)) {
&>*:not(:nth-last-child(-n+2)) {
border-bottom: 1px solid $argo-color-gray-3;
}

Expand Down Expand Up @@ -149,3 +149,86 @@
font-weight: bold;
min-height: 2em;
}

.row.header {
color: $argo-color-gray-8;
background-color: $argo-color-gray-1;
border-bottom: 1px solid $argo-color-gray-5;
display: flex;
align-items: center;
line-height: 1.2em;
padding: 4px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

&:hover {
overflow: visible;
white-space: normal;
}

.columns {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;

&:hover {
overflow: visible;
white-space: normal;

}
}
}


.hoverable {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s ease-in-out;
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;

&:hover {
overflow: visible;
white-space: normal;
position: relative;
z-index: 1;
}
}

.artifact-row {
color: $argo-color-gray-8;
display: flex;
border-bottom: 1px solid $argo-color-gray-5;
padding: 8px 0;

&:hover {
background-color: $argo-color-gray-3;
}



}

.artifact-row .columns.artifact-name {
display: flex;
align-items: center;
padding: 0;
}

.artifact-row .columns.artifact-name a {
margin-right: 1.0em;
text-decoration: none;
}

.artifact-row .columns.artifact-name .artifact-name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import 'node_modules/argo-ui/src/styles/config';

.workflow-node-info {

height: calc(100vh - 2 * #{$top-bar-height});
overflow-y: auto;

Expand Down Expand Up @@ -73,4 +72,83 @@
padding: 1em 0;
}
}
}

.row.header {
color: $argo-color-gray-8;
background-color: $argo-color-gray-1;
border-bottom: 1px solid $argo-color-gray-5;
display: flex;
align-items: center;
line-height: 1.2em;
padding: 4px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

&:hover {
overflow: visible;
white-space: normal;
}

.columns {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;

&:hover {
overflow: visible;
white-space: normal;
}
}
}


.hoverable {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s ease-in-out;
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;

&:hover {
overflow: visible;
white-space: normal;
position: relative;
z-index: 1;
}
}

.artifact-row {
color: $argo-color-gray-8;
display: flex;
border-bottom: 1px solid $argo-color-gray-5;
padding: 8px 0;

&:hover {
background-color: $argo-color-gray-3;
}
}

.artifact-row .columns.artifact-name {
display: flex;
align-items: center;
padding: 0;
}

.artifact-row .columns.artifact-name a {
margin-right: 1.0em;
text-decoration: none;
}

.artifact-row .columns.artifact-name .artifact-name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -423,6 +423,7 @@ function WorkflowNodeArtifacts(props: {workflow: Workflow; node: NodeStatus; arc
})
)) ||
[];

return (
<div className='white-box'>
{artifacts.length === 0 && (
Expand All @@ -435,30 +436,38 @@ function WorkflowNodeArtifacts(props: {workflow: Workflow; node: NodeStatus; arc
<i className='fa fa-exclamation-triangle' /> Artifacts for archived workflows may be overwritten by a more recent workflow with the same name.
</p>
)}
{artifacts.map(artifact => (
<div className='row' key={artifact.name}>
<div className='columns small-1'>
<a href={artifact.downloadUrl}>
{' '}
<i className='fa fa-download' />
</a>
{artifacts.length > 0 && (
<div className='white-box__details'>
<div className='row header'>
<div className='columns artifact-name'>Artifact Name</div>
<div className='columns node-name'>Node Name</div>
<div className='columns path'>Path</div>
<div className='columns created-at'>Created at</div>
</div>
<div className='columns small-11'>
<span className='title'>{artifact.name}</span>
<div className='workflow-node-info__artifact-details'>
<span title={artifact.nodeName} className='muted'>
{artifact.nodeName}
</span>
<span title={artifact.path} className='muted'>
{artifact.path}
</span>
<span title={artifact.dateCreated} className='muted'>
<Timestamp date={artifact.dateCreated} timestampKey={TIMESTAMP_KEYS.WORKFLOW_NODE_ARTIFACT_CREATED} />
</span>

{artifacts.map(artifact => (
<div className='row artifact-row' key={artifact.name}>
<div className='columns artifact-name'>
<a href={artifact.downloadUrl}>
<i className='fa fa-download' />
</a>
<span className='hoverable'>{artifact.name}</span>
</div>
<div className='columns node-name'>
<span className='hoverable'>{artifact.nodeName}</span>
</div>
<div className='columns path'>
<span className='hoverable'>{artifact.path}</span>
</div>
<div className='columns created-at'>
<span className='hoverable'>
<Timestamp date={artifact.dateCreated} timestampKey={TIMESTAMP_KEYS.WORKFLOW_NODE_ARTIFACT_CREATED} />
</span>
</div>
</div>
</div>
))}
</div>
))}
)}
</div>
);
}
Expand Down