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

Signed-off-by: Unperceivable <[email protected]>
AKJUS · Dec 31, 2024 · 14dedc8 · 14dedc8
1 parent 81993b5
commit 14dedc8
Show file tree

Hide file tree

Showing 4 changed files with 235 additions and 43 deletions.
diff --git a/ui/src/workflows/components/workflow-artifacts.tsx b/ui/src/workflows/components/workflow-artifacts.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-import {Timestamp} from '../../shared/components/timestamp';
+import {Timestamp, TimestampSwitch} from '../../shared/components/timestamp';
 import * as models from '../../shared/models';
 import {services} from '../../shared/services';
-import {TIMESTAMP_KEYS} from '../../shared/use-timestamp';
+import useTimestamp, {TIMESTAMP_KEYS} from '../../shared/use-timestamp';
 
 interface Props {
     workflow: models.Workflow;
@@ -12,6 +12,7 @@ interface Props {
 
 export function WorkflowArtifacts(props: Props) {
     const workflowStatusNodes = (props.workflow.status && props.workflow.status.nodes) || {};
+    const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(TIMESTAMP_KEYS.WORKFLOW_NODE_ARTIFACT_CREATED);
     const artifacts =
         Object.keys(workflowStatusNodes)
             .map(nodeName => {
@@ -40,21 +41,33 @@ export function WorkflowArtifacts(props: Props) {
     return (
         <div className='white-box'>
             <div className='white-box__details'>
+                <div className='row header'>
+                    <div className='columns artifact-name'>Name</div>
+                    <div className='columns step-name'>Step Name</div>
+                    <div className='columns path'>Path</div>
+                    <div className='columns created-at'>
+                        Created at <TimestampSwitch storedDisplayISOFormat={storedDisplayISOFormat} setStoredDisplayISOFormat={setStoredDisplayISOFormat} />
+                    </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} displayISOFormat={storedDisplayISOFormat} />
+                            </span>
                         </div>
                     </div>
                 ))}

diff --git a/ui/src/workflows/components/workflow-details/workflow-details.scss b/ui/src/workflows/components/workflow-details/workflow-details.scss
@@ -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;
     }
 
@@ -149,3 +149,87 @@
   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;
+  line-height: 1.2em;
+  padding: 4px 0;
+  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;
+    text-align: left;
+    padding-left: 0;
+
+    &: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;
+  text-align: left;
+
+  &:hover {
+    background-color: $argo-color-gray-3;
+  }
+
+  .columns {
+    padding-left: 0;
+
+    &.artifact-name {
+      display: flex;
+
+      a {
+        margin-right: 1em;
+        text-decoration: none;
+      }
+
+      .artifact-name-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
diff --git a/ui/src/workflows/components/workflow-node-info/workflow-node-info.scss b/ui/src/workflows/components/workflow-node-info/workflow-node-info.scss
@@ -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;
 
@@ -73,4 +72,88 @@
             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;
+        line-height: 1.2em;
+        padding: 4px 0;
+        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;
+            text-align: left;
+            padding-left: 0;
+
+            &: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;
+        text-align: left;
+
+        &:hover {
+            background-color: $argo-color-gray-3;
+        }
+
+        .columns {
+            padding-left: 0;
+
+            &.artifact-name {
+                display: flex;
+
+                a {
+                    margin-right: 1em;
+                    text-decoration: none;
+                }
+
+                .artifact-name-text {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
+}
diff --git a/ui/src/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -11,14 +11,14 @@ import {InlineTable} from '../../../shared/components/inline-table/inline-table'
 import LinkifiedText from '../../../shared/components/linkified-text';
 import {Links} from '../../../shared/components/links';
 import {Phase} from '../../../shared/components/phase';
-import {Timestamp} from '../../../shared/components/timestamp';
+import {Timestamp, TimestampSwitch} from '../../../shared/components/timestamp';
 import * as models from '../../../shared/models';
 import {Artifact, NodeStatus, Workflow} from '../../../shared/models';
 import {getPodName} from '../../../shared/pod-name';
 import {ResourcesDuration} from '../../../shared/resources-duration';
 import {services} from '../../../shared/services';
 import {getResolvedTemplates} from '../../../shared/template-resolution';
-import {TIMESTAMP_KEYS} from '../../../shared/use-timestamp';
+import useTimestamp, {TIMESTAMP_KEYS} from '../../../shared/use-timestamp';
 
 import './workflow-node-info.scss';
 
@@ -412,6 +412,7 @@ function WorkflowNodeContainers(props: Props) {
 }
 
 function WorkflowNodeArtifacts(props: {workflow: Workflow; node: NodeStatus; archived: boolean; isInput: boolean; artifacts: Artifact[]}) {
+    const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(TIMESTAMP_KEYS.WORKFLOW_NODE_ARTIFACT_CREATED);
     const artifacts =
         (props.artifacts &&
             props.artifacts.map(artifact =>
@@ -423,6 +424,7 @@ function WorkflowNodeArtifacts(props: {workflow: Workflow; node: NodeStatus; arc
                 })
             )) ||
         [];
+
     return (
         <div className='white-box'>
             {artifacts.length === 0 && (
@@ -435,30 +437,40 @@ 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>
-                    </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.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 <TimestampSwitch storedDisplayISOFormat={storedDisplayISOFormat} setStoredDisplayISOFormat={setStoredDisplayISOFormat} />
                         </div>
                     </div>
+
+                    {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} displayISOFormat={storedDisplayISOFormat} />
+                                </span>
+                            </div>
+                        </div>
+                    ))}
                 </div>
-            ))}
+            )}
         </div>
     );
 }