Fix [Workflows] single-line display issue for pipeline and job errors (…

…#2900)
mlrun · Dec 5, 2024 · 4217d98 · 4217d98
1 parent 5ba4f95
commit 4217d98
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 51 deletions.
diff --git a/src/components/Details/DetailsHeader/DetailsHeader.js b/src/components/Details/DetailsHeader/DetailsHeader.js
@@ -169,55 +169,59 @@ const DetailsHeader = ({
         <div className="item-header__status">
           {/*In the Workflow page we display both Jobs and Functions items. The function contains `updated` property.
             The job contains startTime property.*/}
-          <span className="updated data-ellipsis">
-            {Object.keys(selectedItem).length > 0 &&
-            pageData.page === JOBS_PAGE &&
-            !selectedItem?.updated
-              ? formatDatetime(
-                  selectedItem?.startTime,
-                  stateValue === 'aborted' ? 'N/A' : 'Not yet started'
-                )
-              : selectedItem?.updated
-                ? formatDatetime(selectedItem?.updated, 'N/A')
-                : selectedItem?.spec?.model.includes(':') // 'model-key:model-tag'
-                  ? selectedItem.spec.model.replace(/^.*:/, '') // remove key
-                  : selectedItem?.spec?.model
-                    ? selectedItem?.metadata?.uid
-                    : ''}
-          </span>
-          {stateValue && stateLabel && (
-            <Tooltip className="state" template={<TextTooltipTemplate text={stateLabel} />}>
-              <i className={stateClassName} />
-            </Tooltip>
-          )}
-          {selectedItem.ui?.customError?.title && selectedItem.ui?.customError?.message && (
-            <Tooltip
-              className="error-container"
-              template={
-                <TextTooltipTemplate
-                  text={`${selectedItem.ui.customError.title} ${selectedItem.ui.customError.message}`}
-                />
-              }
-            >
-              {selectedItem.ui.customError.title} {selectedItem.ui.customError.message}
-            </Tooltip>
-          )}
-          {errorMessage && (
-            <Tooltip
-              className="error-container"
-              template={<TextTooltipTemplate text={errorMessage} />}
-            >
-              {errorMessage}
-            </Tooltip>
-          )}
-          {!isEmpty(detailsStore.pods.podsPending) && (
-            <span className="left-margin">
-              {`${detailsStore.pods.podsPending.length} of ${detailsStore.pods.podsList.length} pods are pending`}
+          <div className="item-header__status-row">
+            <span className="updated data-ellipsis">
+              {Object.keys(selectedItem).length > 0 &&
+              pageData.page === JOBS_PAGE &&
+              !selectedItem?.updated
+                ? formatDatetime(
+                    selectedItem?.startTime,
+                    stateValue === 'aborted' ? 'N/A' : 'Not yet started'
+                  )
+                : selectedItem?.updated
+                  ? formatDatetime(selectedItem?.updated, 'N/A')
+                  : selectedItem?.spec?.model.includes(':') // 'model-key:model-tag'
+                    ? selectedItem.spec.model.replace(/^.*:/, '') // remove key
+                    : selectedItem?.spec?.model
+                      ? selectedItem?.metadata?.uid
+                      : ''}
             </span>
-          )}
-          {detailsStore.pods.error && (
-            <span className="item-header__pods-error left-margin">Failed to load pods</span>
-          )}
+            {stateValue && stateLabel && (
+              <Tooltip className="state" template={<TextTooltipTemplate text={stateLabel} />}>
+                <i className={stateClassName} />
+              </Tooltip>
+            )}
+          </div>
+          <div className="item-header__status-row">
+            {selectedItem.ui?.customError?.title && selectedItem.ui?.customError?.message && (
+              <Tooltip
+                className="error-container"
+                template={
+                  <TextTooltipTemplate
+                    text={`${selectedItem.ui.customError.title} ${selectedItem.ui.customError.message}`}
+                  />
+                }
+              >
+                {selectedItem.ui.customError.title} {selectedItem.ui.customError.message}
+              </Tooltip>
+            )}
+            {errorMessage && (
+              <Tooltip
+                className="error-container"
+                template={<TextTooltipTemplate text={errorMessage} />}
+              >
+                {errorMessage}
+              </Tooltip>
+            )}
+            {!isEmpty(detailsStore.pods.podsPending) && (
+              <span className="left-margin">
+                {`${detailsStore.pods.podsPending.length} of ${detailsStore.pods.podsList.length} pods are pending`}
+              </span>
+            )}
+            {detailsStore.pods.error && (
+              <span className="item-header__pods-error left-margin">Failed to load pods</span>
+            )}
+          </div>
         </div>
       </div>
       <div className="item-header__custom-elements">

diff --git a/src/components/Details/details.scss b/src/components/Details/details.scss
@@ -55,10 +55,15 @@
 
         &__status {
           color: $topaz;
-          display: flex;
-          flex-flow: row wrap;
-          align-items: center;
           line-height: 25px;
+
+          &-row {
+            display: flex;
+            flex-flow: row wrap;
+            align-items: center;
+            flex: 1 0 100%;
+            margin-bottom: 5px;
+          }
         }
 
         &__back-btn {
@@ -91,6 +96,7 @@
           }
 
           .state {
+            display: inline-block;
             min-width: 18px;
 
             i {
@@ -99,7 +105,14 @@
           }
 
           .error-container {
+            flex: 1;
             margin-left: 0;
+
+            &:not(:last-child) {
+              border-right: $secondaryBorder;
+              margin-right: 1em;
+              padding-right: 1em;
+            }
           }
         }