feat(core/md): verification cards

refactor(md): import path feat(context): added useApplicationContext hook fix(tests): remove fdescribe fix(md): imports refactor(md): verification props refactor(context): move application context next to the application component fix(presentation): missing svg feat(md): verification cards feat(md): new application context and logging mechanism feat(md): duration render feat(md): new icon style(md): improved button styles - use variables docs(md): constraint status fix(utils): disable interval if it's undefined or zero feat(utils): new time formatting
spinnaker · Feb 17, 2021 · 2e6a75a · 2e6a75a
1 parent f3bf8ee
commit 2e6a75a
Show file tree

Hide file tree

Showing 22 changed files with 298 additions and 156 deletions.
diff --git a/app/scripts/modules/core/src/application/ApplicationComponent.tsx b/app/scripts/modules/core/src/application/ApplicationComponent.tsx
@@ -2,6 +2,7 @@ import { ApplicationNavigation } from './nav/ApplicationNavigation';
 import React from 'react';
 import { UIView } from '@uirouter/react';
 
+import { ApplicationContextProvider } from './ApplicationContext';
 import { Application } from './application.model';
 import { RecentHistoryService } from 'core/history';
 import { DebugWindow } from 'core/utils/consoleDebug';
@@ -68,9 +69,11 @@ export class ApplicationComponent extends React.Component<IApplicationComponentP
             </p>
           </div>
         )}
-        <div className="container scrollable-columns">
-          <UIView className="secondary-panel" name="insight" />
-        </div>
+        <ApplicationContextProvider app={app}>
+          <div className="container scrollable-columns">
+            <UIView className="secondary-panel" name="insight" />
+          </div>
+        </ApplicationContextProvider>
       </div>
     );
   }

diff --git a/app/scripts/modules/core/src/application/ApplicationContext.tsx b/app/scripts/modules/core/src/application/ApplicationContext.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Application } from '.';
+
+export const ApplicationContext = React.createContext<Application | undefined>(undefined);
+
+export const ApplicationContextProvider: React.FC<{ app: Application }> = ({ app, children }) => {
+  return <ApplicationContext.Provider value={app}>{children}</ApplicationContext.Provider>;
+};
diff --git a/app/scripts/modules/core/src/domain/IManagedEntity.ts b/app/scripts/modules/core/src/domain/IManagedEntity.ts
@@ -82,6 +82,15 @@ export interface IManagedEnvironmentSummary {
   }>;
 }
 
+export interface IVerification {
+  id: string;
+  type: string;
+  status: 'NOT_EVALUATED' | 'PENDING' | 'PASS' | 'FAIL' | 'OVERRIDE_PASS' | 'OVERRIDE_FAIL';
+  startedAt?: string;
+  completedAt?: string;
+  link?: string;
+}
+
 export interface IManagedArtifactVersion {
   version: string;
   displayName: string;
@@ -105,6 +114,7 @@ export interface IManagedArtifactVersion {
     statefulConstraints?: IStatefulConstraint[];
     statelessConstraints?: IStatelessConstraint[];
     compareLink?: string;
+    verifications?: IVerification[];
   }>;
   lifecycleSteps?: Array<{
     // likely more scopes + types later, but hard-coding to avoid premature abstraction for now

diff --git a/app/scripts/modules/core/src/managed/Button.less b/app/scripts/modules/core/src/managed/Button.less
@@ -2,19 +2,20 @@
 // really it should be a real button component we put somewhere central.
 // for now it's entirely experimental and might totally go away
 // or be replaced.
+@baseColor: rgb(90, 95, 180);
 
 .action-button {
-  color: rgb(90, 95, 180);
+  color: @baseColor;
   background-color: transparent;
-  font-size: 16px;
-  border: 1px solid rgb(90, 95, 180);
+  font-size: 14px;
+  border: 1px solid @baseColor;
   border-radius: 2px;
   padding: 4px 20px;
   transition: all 90ms ease-in;
 }
 
 .action-button-primary {
-  background-color: rgb(90, 95, 180);
+  background-color: @baseColor;
   color: var(--color-white);
 }
 
@@ -28,31 +29,28 @@
 }
 
 .action-button:not([disabled]):hover {
-  transform: scale(1.03);
-  background-color: rgba(90, 95, 180, 0.15);
+  background-color: fade(@baseColor, 15%);
 }
 
 .action-button-primary:not([disabled]):hover {
-  background-color: rgba(90, 95, 180, 0.66);
+  background-color: darken(@baseColor, 15%);
 }
 
 .action-button:not([disabled]):focus,
 .action-button:not([disabled]):active {
   outline: none;
-  transform: scale(1.04);
 }
 
 .action-button:not([disabled]):focus {
-  box-shadow: 2px 2px 0px rgba(90, 95, 180, 0.66);
 }
 
 .action-button:not([disabled]):active {
   box-shadow: none !important;
-  background-color: rgba(90, 95, 180, 0.66);
+  background-color: fade(@baseColor, 80%);
   color: var(--color-white);
 }
 
 .action-button-primary:not([disabled]):active {
-  background-color: rgba(90, 95, 180, 0.15);
-  color: rgb(90, 95, 180);
+  background-color: fade(@baseColor, 20%);
+  color: @baseColor;
 }
diff --git a/app/scripts/modules/core/src/managed/Environments.tsx b/app/scripts/modules/core/src/managed/Environments.tsx
@@ -64,7 +64,7 @@ interface IEnvironmentsProps {
   app: Application;
 }
 
-export function Environments({ app }: IEnvironmentsProps) {
+export const Environments: React.FC<IEnvironmentsProps> = ({ app }) => {
   const dataSource: ApplicationDataSource<IManagedApplicationEnvironmentSummary> = app.getDataSource('environments');
   const {
     data: { environments, artifacts, resources },
@@ -200,4 +200,4 @@ export function Environments({ app }: IEnvironmentsProps) {
       </div>
     </div>
   );
-}
+};
diff --git a/app/scripts/modules/core/src/managed/EnvironmentsList.tsx b/app/scripts/modules/core/src/managed/EnvironmentsList.tsx
@@ -57,6 +57,7 @@ export function EnvironmentsList({
                     showReferenceName={allArtifacts.length > 1}
                     artifactVersionsByState={artifactVersionsByState}
                     artifactDetails={artifactDetails}
+                    depth={0}
                   />
                 );
               })}

diff --git a/app/scripts/modules/core/src/managed/ObjectRow.less b/app/scripts/modules/core/src/managed/ObjectRow.less
@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
   flex: auto;
-  box-shadow: inset 0 -1px 0 0 var(--color-porcelain);
   height: 44px;
   font-size: 14px;
 

diff --git a/app/scripts/modules/core/src/managed/RelativeTimestamp.tsx b/app/scripts/modules/core/src/managed/RelativeTimestamp.tsx
@@ -2,7 +2,7 @@ import React, { memo, useEffect, useState } from 'react';
 import { DateTime, Duration } from 'luxon';
 
 import { SETTINGS } from '../config';
-import { CopyToClipboard } from '../utils';
+import { CopyToClipboard, timeDiffToString } from '../utils';
 import { useInterval, Tooltip } from '../presentation';
 
 export interface IRelativeTimestampProps {
@@ -12,6 +12,21 @@ export interface IRelativeTimestampProps {
 
 const TIMEZONE = SETTINGS.feature.displayTimestampsInUserLocalTime ? undefined : SETTINGS.defaultTimeZone;
 
+export const DurationRender: React.FC<{ startedAt: string; completedAt?: string }> = ({ startedAt, completedAt }) => {
+  const [, setRefresh] = React.useState<boolean>(false);
+  useInterval(
+    () => {
+      if (!completedAt) {
+        setRefresh((state) => !state);
+      }
+    },
+    !completedAt ? 1000 : undefined,
+  );
+  const startAtDateTime = DateTime.fromISO(startedAt);
+  const endTime = !completedAt ? DateTime.utc() : DateTime.fromISO(completedAt);
+  return <>{timeDiffToString(startAtDateTime, endTime)}</>;
+};
+
 const formatTimestamp = (timestamp: DateTime, distance: Duration) => {
   if (distance.years || distance.months) {
     if (timestamp.year === DateTime.local().setZone(TIMEZONE).year) {

diff --git a/app/scripts/modules/core/src/managed/StatusCard.less b/app/scripts/modules/core/src/managed/StatusCard.less
@@ -1,7 +1,6 @@
 .StatusCard {
   font-size: 13px;
   color: var(--color-icon-neutral);
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
 
   &.active {
     color: var(--color-charcoal);

diff --git a/app/scripts/modules/core/src/managed/StatusCard.tsx b/app/scripts/modules/core/src/managed/StatusCard.tsx
@@ -15,12 +15,12 @@ export interface IStatusCardProps {
   active?: boolean;
   iconName: IconNames;
   title: React.ReactNode;
-  timestamp?: DateTime;
+  timestamp?: DateTime | string;
   description?: React.ReactNode;
   actions?: React.ReactNode;
 }
 
-export const StatusCard = ({
+export const StatusCard: React.FC<IStatusCardProps> = ({
   appearance,
   background,
   active,
@@ -29,26 +29,35 @@ export const StatusCard = ({
   timestamp,
   description,
   actions,
-}: IStatusCardProps) => (
-  <div
-    className={classNames(
-      'StatusCard flex-container-h space-between middle wrap sp-padding-s-yaxis sp-padding-l-xaxis',
-      `status-card-${appearance}`,
-      { 'with-background': !!background, active: active ?? true },
-    )}
-  >
-    <div className="flex-container-h middle">
-      <div className="flex-container-h center middle sp-margin-l-right">
-        <StatusBubble iconName={iconName} appearance={appearance} size="medium" />
-      </div>
-      <div className="sp-margin-m-right" style={{ minWidth: 33 }}>
-        {timestamp && <RelativeTimestamp timestamp={timestamp} clickToCopy={true} />}
-      </div>
-      <div className="flex-container-v sp-margin-xs-yaxis">
-        <div className="text-bold">{title}</div>
-        {description && <div className="text-regular">{description}</div>}
+}) => {
+  let timestampAsDateTime: DateTime;
+  try {
+    timestampAsDateTime = typeof timestamp === 'string' ? DateTime.fromISO(timestamp) : timestamp;
+  } catch (e) {
+    console.error(`Failed to parse timestamp ${timestamp}`);
+  }
+
+  return (
+    <div
+      className={classNames(
+        'StatusCard flex-container-h space-between middle wrap sp-padding-s-yaxis sp-padding-l-xaxis',
+        `status-card-${appearance}`,
+        { 'with-background': !!background, active: active ?? true },
+      )}
+    >
+      <div className="flex-container-h middle">
+        <div className="flex-container-h center middle sp-margin-l-right">
+          <StatusBubble iconName={iconName} appearance={appearance} size="small" />
+        </div>
+        <div className="sp-margin-m-right" style={{ minWidth: 33 }}>
+          {timestamp && <RelativeTimestamp timestamp={timestampAsDateTime} clickToCopy={true} />}
+        </div>
+        <div className="flex-container-v sp-margin-xs-yaxis">
+          <div className="text-bold">{title}</div>
+          {description && <div className="text-regular">{description}</div>}
+        </div>
       </div>
+      {actions && <div className="flex-container-h right middle flex-grow sp-margin-s-left">{actions}</div>}
     </div>
-    {actions && <div className="flex-container-h right middle flex-grow sp-margin-s-left">{actions}</div>}
-  </div>
-);
+  );
+};
diff --git a/app/scripts/modules/core/src/managed/artifactDetail/ArtifactDetail.less b/app/scripts/modules/core/src/managed/artifactDetail/ArtifactDetail.less
@@ -20,6 +20,12 @@
     }
   }
 
+  .resources-section {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--color-accent-g3);
+  }
+
   .resource-badge {
     width: 16px;
     height: 16px;