feat(core/managed): Group resources under EnvironmentRow (spinnaker#8081

) Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
pdk27 · Mar 24, 2020 · 26a0213 · 26a0213
1 parent 611416b
commit 26a0213
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 21 deletions.
diff --git a/app/scripts/modules/core/src/managed/ArtifactDetail.tsx b/app/scripts/modules/core/src/managed/ArtifactDetail.tsx
@@ -11,6 +11,7 @@ import { NoticeCard } from './NoticeCard';
 import { Pill } from './Pill';
 import { ManagedResourceObject } from './ManagedResourceObject';
 import { parseName } from './Frigga';
+import { EnvironmentRow } from './EnvironmentRow';
 
 import './ArtifactDetail.less';
 
@@ -55,8 +56,7 @@ export const ArtifactDetail = ({
             parseName(replacedBy || '') || {};
 
           return (
-            <div key={name}>
-              <h3>{name.toUpperCase()}</h3>
+            <EnvironmentRow key={name} name={name} isProd={true}>
               {state === 'deploying' && (
                 <NoticeCard
                   className="sp-margin-l-right"
@@ -137,7 +137,7 @@ export const ArtifactDetail = ({
                   <ManagedResourceObject key={resource.id} resource={resource} />
                 </div>
               ))}
-            </div>
+            </EnvironmentRow>
           );
         })}
       </div>

diff --git a/app/scripts/modules/core/src/managed/EnvironmentRow.less b/app/scripts/modules/core/src/managed/EnvironmentRow.less
@@ -0,0 +1,76 @@
+.EnvironmentRow {
+  max-width: 100%;
+
+  i.ico {
+    font-size: 24px;
+  }
+
+  .srow {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-shadow: inset 0 -1px 0 0 #cccccc;
+    height: 40px;
+    position: relative;
+    font-size: 14px;
+  }
+
+  .srow:hover .select {
+    visibility: visible;
+  }
+  .rowProd {
+    box-shadow: inset 0 -1px 0 0 #be0000;
+  }
+  .rowProd .expand {
+    color: #be0000;
+  }
+
+  .clickableArea {
+    flex: 1 1 auto;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+  }
+
+  .envLabel {
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 4px 8px;
+    border-radius: 2px;
+    display: inline-block;
+    color: #fff;
+  }
+
+  .nonprod {
+    background-color: #666666;
+  }
+
+  .prod {
+    background-color: #be0000;
+  }
+
+  .select {
+    margin-right: -40px;
+    visibility: hidden;
+  }
+  .expand {
+    color: #666666;
+  }
+
+  .select,
+  .expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 100%;
+  }
+
+  //   .clickableArea:hover,
+  //   .select:hover,
+  .expand:hover {
+    background-image: linear-gradient(to bottom, rgba(160, 180, 220, 0.2), rgba(160, 180, 220, 0.2));
+    cursor: pointer;
+  }
+}
diff --git a/app/scripts/modules/core/src/managed/EnvironmentRow.tsx b/app/scripts/modules/core/src/managed/EnvironmentRow.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+
+import './EnvironmentRow.less';
+
+interface IEnvironmentRowProps {
+  name: string;
+  isProd?: boolean;
+  children?: React.ReactNode;
+}
+
+export function EnvironmentRow({ name, isProd = false, children }: IEnvironmentRowProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const envRowClasses = classNames({
+    srow: true,
+    rowProd: isProd,
+  });
+
+  const envLabelClasses = classNames({
+    envLabel: true,
+    prod: isProd,
+    nonprod: !isProd,
+  });
+
+  return (
+    <div className="EnvironmentRow">
+      <div className={envRowClasses}>
+        <span className="clickableArea">
+          <span className={envLabelClasses}>{name}</span>
+        </span>
+        <div className="expand" onClick={() => setIsCollapsed(!isCollapsed)}>
+          {isCollapsed && <i className="ico icon-expand" />}
+          {!isCollapsed && <i className="ico icon-collapse" />}
+        </div>
+        {/* <div className="select">
+            <i className={`ico icon-checkbox-unchecked`}/>
+          </div> */}
+      </div>
+
+      {!isCollapsed && <div style={{ margin: '16px 0 40px 8px' }}>{children}</div>}
+    </div>
+  );
+}
diff --git a/app/scripts/modules/core/src/managed/EnvironmentsList.tsx b/app/scripts/modules/core/src/managed/EnvironmentsList.tsx
@@ -4,6 +4,7 @@ import { IManagedEnviromentSummary, IManagedResourceSummary, IManagedArtifactSum
 
 import { NoticeCard } from './NoticeCard';
 import { ManagedResourceObject } from './ManagedResourceObject';
+import { EnvironmentRow } from './EnvironmentRow';
 
 function shouldDisplayResource(resource: IManagedResourceSummary) {
   //TODO: naively filter on presence of moniker but how should we really decide what to display?
@@ -29,15 +30,14 @@ export function EnvironmentsList({ environments, resourcesById, artifacts }: IEn
         noticeType="success"
       />
       {environments.map(({ name, resources }) => (
-        <div key={name}>
-          <h3>{name.toUpperCase()}</h3>
+        <EnvironmentRow key={name} name={name} isProd={true}>
           {resources
             .map(resourceId => resourcesById[resourceId])
             .filter(shouldDisplayResource)
             .map(resource => (
               <ManagedResourceObject key={resource.id} resource={resource} />
             ))}
-        </div>
+        </EnvironmentRow>
       ))}
     </div>
   );

diff --git a/app/scripts/modules/core/src/managed/Frigga.ts b/app/scripts/modules/core/src/managed/Frigga.ts
@@ -24,5 +24,5 @@ export function parseName(amiName: string): IParsedVersionComponents {
     const buildNumber = buildString?.substring(1);
     return { packageName, version, buildNumber, commit };
   }
-  return null;
+  return { packageName: null, version: null, buildNumber: null, commit: null };
 }
diff --git a/app/scripts/modules/core/src/managed/ObjectRow.module.css b/app/scripts/modules/core/src/managed/ObjectRow.module.css
@@ -10,11 +10,8 @@
   box-shadow: inset 0 -1px 0 0 #cccccc;
   height: 40px;
 
-  margin-right: 36px;
   position: relative;
   font-size: 14px;
-
-  background-color: #f7f7f7;
 }
 
 .active {
@@ -45,7 +42,7 @@
   margin-right: 16px;
 
   pointer-events: none;
-  background-color: rgba(255, 0, 0, 0.1);
+  /* background-color: rgba(255, 0, 0, 0.1); */
 }
 
 .leftCol i {
@@ -65,7 +62,7 @@
   align-items: center;
 
   pointer-events: none;
-  background-color: rgba(0, 255, 0, 0.1);
+  /* background-color: rgba(0, 255, 0, 0.1); */
 }
 
 .ObjectRow:hover .select,

diff --git a/app/scripts/modules/core/src/managed/ObjectRow.tsx b/app/scripts/modules/core/src/managed/ObjectRow.tsx
@@ -6,19 +6,21 @@ interface IObjectRowProps {
   icon: string;
   title: string;
   metadata?: JSX.Element;
+  depth?: number;
 }
 
-export const ObjectRow = ({ icon, title, metadata }: IObjectRowProps) => {
-  const depth = 0;
+export const ObjectRow = ({ icon, title, metadata, depth = 1 }: IObjectRowProps) => {
   return (
     <div className={styles.ObjectRow} style={getStylesFromDepth(depth)}>
-      <div className={styles.leftCol}>
-        <i className={`ico icon-${icon}`} />
-        <span className={styles.rowTitle}>{title}</span>
-      </div>
-      <div className={styles.centerCol} style={{ flex: `0 0 ${200 + depth * 16}px` }}>
-        {metadata}
-      </div>
+      <span className="clickableArea">
+        <div className={styles.leftCol}>
+          <i className={`ico icon-${icon}`} />
+          <span className={styles.rowTitle}>{title}</span>
+        </div>
+        <div className={styles.centerCol} style={{ flex: `0 0 ${200 + depth * 16}px` }}>
+          {metadata}
+        </div>
+      </span>
     </div>
   );
 };