Merge pull request #6493 from abhinandan13jan/time-inline

Bug 1875809: Restyle Time to inlineblock for Topology - Pipeline & Builds
openshift · Sep 11, 2020 · f988ecb · f988ecb
2 parents 04b3fed + 3e0fa8b
commit f988ecb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/...tend/packages/dev-console/src/components/pipelines/pipeline-overview/PipelineRunItem.scss b/...tend/packages/dev-console/src/components/pipelines/pipeline-overview/PipelineRunItem.scss
@@ -0,0 +1,5 @@
+.odc-pipeline-run-item {
+  &__time {
+    display: inline-block;
+  }
+}
diff --git a/frontend/packages/dev-console/src/components/pipelines/pipeline-overview/PipelineRunItem.tsx b/frontend/packages/dev-console/src/components/pipelines/pipeline-overview/PipelineRunItem.tsx
@@ -10,6 +10,7 @@ import { PipelineRunModel } from '../../../models';
 import { PipelineRun } from '../../../utils/pipeline-augment';
 import LogSnippetBlock from '../../pipelineruns/logs/LogSnippetBlock';
 import { getLogSnippet } from '../../pipelineruns/logs/pipelineRunLogSnippet';
+import './PipelineRunItem.scss';
 
 type PipelineRunItemProps = {
   pipelineRun: PipelineRun;
@@ -27,11 +28,20 @@ const PipelineRunItem: React.FC<PipelineRunItemProps> = ({ pipelineRun }) => {
   const logDetails = getLogSnippet(pipelineRun);
 
   return (
-    <li className="list-group-item">
+    <li className="odc-pipeline-run-item list-group-item">
       <Grid hasGutter>
         <GridItem span={6}>
-          <Link to={`${path}`}>{name}</Link>
-          {lastUpdated && <span className="text-muted">&nbsp;({fromNow(lastUpdated)})</span>}
+          <div>
+            <Link to={`${path}`}>{name}</Link>
+            {lastUpdated && (
+              <>
+                {' '}
+                <span className="odc-pipeline-run-item__time text-muted">
+                  ({fromNow(lastUpdated)})
+                </span>
+              </>
+            )}
+          </div>
         </GridItem>
         <GridItem span={3}>
           <Status status={pipelineRunStatus(pipelineRun) || 'Pending'} />

diff --git a/frontend/public/components/overview/_build-overview.scss b/frontend/public/components/overview/_build-overview.scss
@@ -9,6 +9,10 @@
   align-items: center;
 }
 
+.build-overview__item-time {
+  display: inline-block;
+}
+
 .build-overview__status {
   flex-wrap: wrap;
 }
diff --git a/frontend/public/components/overview/build-overview.tsx b/frontend/public/components/overview/build-overview.tsx
@@ -40,13 +40,15 @@ const BuildOverviewItem: React.SFC<BuildOverviewListItemProps> = ({ build }) =>
   const lastUpdated = completionTimestamp || startTimestamp || creationTimestamp;
 
   const statusTitle = (
-    <>
-      Build &nbsp;
-      <BuildNumberLink build={build} />
-      &nbsp;
-      {conjugateBuildPhase(phase)}
-      {lastUpdated && <span className="text-muted">&nbsp;({fromNow(lastUpdated)})</span>}
-    </>
+    <div>
+      Build <BuildNumberLink build={build} /> {conjugateBuildPhase(phase)}
+      {lastUpdated && (
+        <>
+          {' '}
+          <span className="build-overview__item-time text-muted">({fromNow(lastUpdated)})</span>
+        </>
+      )}
+    </div>
   );
 
   return (