Fix design of log view (#17765)

airbytehq · Oct 10, 2022 · fb523af · fb523af
1 parent 9cc86d8
commit fb523af
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 45 deletions.
diff --git a/airbyte-webapp/src/components/JobItem/components/AttemptDetails.module.scss b/airbyte-webapp/src/components/JobItem/components/AttemptDetails.module.scss
@@ -7,7 +7,7 @@
   color: colors.$grey;
 }
 
-.details > *:not(:last-child)::after {
+.details > *:not(:last-child, .lastAttempt)::after {
   content: "|";
   padding: 0 variables.$spacing-sm;
 }
@@ -18,3 +18,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.lastAttempt {
+  margin-right: variables.$spacing-sm;
+
+  &.failed {
+    color: colors.$red;
+  }
+}
diff --git a/airbyte-webapp/src/components/JobItem/components/AttemptDetails.tsx b/airbyte-webapp/src/components/JobItem/components/AttemptDetails.tsx
@@ -5,20 +5,20 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import Status from "core/statuses";
 
-import { AttemptRead, JobConfigType } from "../../../core/request/AirbyteClient";
+import { AttemptRead } from "../../../core/request/AirbyteClient";
 import styles from "./AttemptDetails.module.scss";
 
-interface IProps {
+interface AttemptDetailsProps {
   className?: string;
   attempt: AttemptRead;
-  configType?: JobConfigType;
+  hasMultipleAttempts?: boolean;
 }
 
 const getFailureFromAttempt = (attempt: AttemptRead) => {
   return attempt.failureSummary && attempt.failureSummary.failures[0];
 };
 
-const AttemptDetails: React.FC<IProps> = ({ attempt, className }) => {
+const AttemptDetails: React.FC<AttemptDetailsProps> = ({ attempt, className, hasMultipleAttempts }) => {
   const { formatMessage } = useIntl();
 
   if (attempt.status !== Status.SUCCEEDED && attempt.status !== Status.FAILED) {
@@ -67,6 +67,11 @@ const AttemptDetails: React.FC<IProps> = ({ attempt, className }) => {
   return (
     <div className={classNames(styles.container, className)}>
       <div className={styles.details}>
+        {hasMultipleAttempts && (
+          <strong className={classNames(styles.lastAttempt, { [styles.failed]: isFailed })}>
+            <FormattedMessage id="sources.lastAttempt" />
+          </strong>
+        )}
         <span>{formatBytes(attempt?.totalStats?.bytesEmitted)}</span>
         <span>
           <FormattedMessage

diff --git a/airbyte-webapp/src/components/JobItem/components/MainInfo.module.scss b/airbyte-webapp/src/components/JobItem/components/MainInfo.module.scss
@@ -25,12 +25,6 @@
       }
     }
 
-    .lastAttempt {
-      font-size: 12px;
-      font-weight: bold;
-      color: colors.$grey;
-    }
-
     .justification {
       width: 80%;
       display: flex;
@@ -41,19 +35,6 @@
     }
   }
 
-  &.open {
-    .arrow {
-      transform: rotate(-0deg);
-    }
-  }
-
-  &.failed {
-    .arrow,
-    .lastAttempt {
-      color: colors.$red;
-    }
-  }
-
   .timestampCell {
     display: flex;
     justify-content: flex-end;
@@ -64,21 +45,6 @@
       line-height: 15px;
       color: colors.$red;
     }
-
-    .arrow {
-      transform: rotate(-90deg);
-      transition: variables.$transition;
-      opacity: 0;
-      color: colors.$dark-blue-50;
-      font-size: 22px;
-      margin: 0 30px 0 50px;
-
-      div:hover > &,
-      div:hover > div > &,
-      div:hover > div > div > & {
-        opacity: 1;
-      }
-    }
   }
 
   &.open:not(.failed) {
@@ -89,3 +55,26 @@
     border-bottom: variables.$border-thin solid colors.$red-50;
   }
 }
+
+.arrow {
+  transform: rotate(-90deg);
+  transition: variables.$transition;
+  opacity: 0;
+  color: colors.$dark-blue-50;
+  font-size: 22px;
+  margin: 0 30px 0 50px;
+
+  .open & {
+    transform: rotate(-0deg);
+  }
+
+  .failed & {
+    color: colors.$red;
+  }
+
+  div:hover > &,
+  div:hover > div > &,
+  div:hover > div > div > & {
+    opacity: 1;
+  }
+}
diff --git a/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx b/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx
@@ -89,15 +89,10 @@ const MainInfo: React.FC<MainInfoProps> = ({ job, attempts = [], isOpen, onExpan
           {label}
           {attempts.length > 0 && (
             <>
-              {attempts.length > 1 && (
-                <div className={styles.lastAttempt}>
-                  <FormattedMessage id="sources.lastAttempt" />
-                </div>
-              )}
               {jobConfigType === "reset_connection" ? (
                 <ResetStreamsDetails isOpen={isOpen} names={streamsToReset?.map((stream) => stream.name)} />
               ) : (
-                <AttemptDetails attempt={attempts[attempts.length - 1]} configType={getJobConfig(job)} />
+                <AttemptDetails attempt={attempts[attempts.length - 1]} hasMultipleAttempts={attempts.length > 1} />
               )}
             </>
           )}