feat(core/managed): remove non-deploying state indicators (#8101)

spinnaker · Mar 27, 2020 · d34f8f3 · d34f8f3
1 parent 83f65d3
commit d34f8f3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 28 deletions.
diff --git a/app/scripts/modules/core/src/managed/ArtifactDetail.less b/app/scripts/modules/core/src/managed/ArtifactDetail.less
@@ -18,33 +18,12 @@
     height: 16px;
     border-radius: 16px;
     border-radius: 50%;
-
-    &.current {
-      background-color: #00b237;
-    }
-
-    &.approved {
-      border: 1px solid var(--color-status-info);
-    }
+    // Negative margin, boooo. But we need it to keep the icons
+    // for each resource aligned with other, non-deploying ones.
+    margin-left: -8px;
 
     &.deploying {
       background-color: var(--color-status-info);
     }
-
-    &.pending {
-      border: 1px solid rgba(0, 0, 0, 0.5);
-    }
-
-    &.previous {
-      background-color: var(--color-nobel);
-    }
-
-    &.vetoed {
-      background-color: var(--color-status-error);
-    }
-
-    i.fa {
-      color: var(--color-white);
-    }
   }
 }
diff --git a/app/scripts/modules/core/src/managed/ArtifactDetail.tsx b/app/scripts/modules/core/src/managed/ArtifactDetail.tsx
@@ -135,10 +135,16 @@ export const ArtifactDetail = ({
                 .filter(resource => shouldDisplayResource(name, type, resource))
                 .map(resource => (
                   <div key={resource.id} className="flex-container-h middle">
-                    <div
-                      className={classNames('resource-badge flex-container-h center middle sp-margin-s-right', state)}
-                    ></div>
-                    <ManagedResourceObject key={resource.id} resource={resource} />
+                    {state === 'deploying' && (
+                      <div
+                        className={classNames('resource-badge flex-container-h center middle sp-margin-s-right', state)}
+                      />
+                    )}
+                    <ManagedResourceObject
+                      key={resource.id}
+                      resource={resource}
+                      depth={state === 'deploying' ? 0 : 1}
+                    />
                   </div>
                 ))}
             </EnvironmentRow>

diff --git a/app/scripts/modules/core/src/managed/ManagedResourceObject.tsx b/app/scripts/modules/core/src/managed/ManagedResourceObject.tsx
@@ -11,6 +11,7 @@ import { parseName } from './Frigga';
 export interface IManagedResourceObjectProps {
   resource: IManagedResourceSummary;
   artifact?: IManagedEnviromentSummary['artifacts'][0];
+  depth?: number;
 }
 
 const kindIconMap: { [kind: string]: IconNames } = {
@@ -30,12 +31,14 @@ export const ManagedResourceObject = ({
     moniker: { app, stack, detail },
   },
   artifact,
+  depth,
 }: IManagedResourceObjectProps) => {
   const { version: currentVersion, buildNumber: currentBuild } = parseName(artifact?.versions.current || '') || {};
   return (
     <ObjectRow
       icon={getIconTypeFromKind(kind)}
       title={[app, stack, detail].filter(Boolean).join('-')}
+      depth={depth}
       metadata={
         artifact?.versions.current && (
           <Pill text={currentBuild ? `#${currentBuild}` : currentVersion || artifact.versions.current || 'unknown'} />