@spinnaker/core 0.12.0 → 0.15.0

package/src/managed/overview/Resource.tsx

@@ -1,11 +1,13 @@
+import classnames from 'classnames';
 import React from 'react';
 
 import { ResourceTask } from './ResourceTask';
 import { ConfirmationModalService } from '../../confirmationModal/confirmationModal.service';
+import type { IEnvironmentItemProps } from '../environmentBaseElements/EnvironmentItem';
 import { EnvironmentItem } from '../environmentBaseElements/EnvironmentItem';
+import type { MdResourceActuationState } from '../graphql/graphql-sdk';
 import {
   FetchResourceStatusDocument,
-  MdResourceActuationState,
   useFetchResourceStatusQuery,
   useToggleResourceManagementMutation,
 } from '../graphql/graphql-sdk';
@@ -14,8 +16,8 @@ import { showManagedResourceHistoryModal } from '../resourceHistory/ManagedResou
 import { showResourceDefinitionModal } from '../resources/ResourceDefinitionModal';
 import { ResourceTitle } from '../resources/ResourceTitle';
 import { ToggleResourceManagement } from '../resources/ToggleResourceManagement';
-import { IResourceLinkProps, resourceManager } from '../resources/resourceRegistry';
-import { QueryResource } from './types';
+import { resourceManager } from '../resources/resourceRegistry';
+import type { QueryResource } from './types';
 import { getIsDebugMode } from '../utils/debugMode';
 import { useLogEvent } from '../utils/logging';
 import { Spinner } from '../../widgets';
@@ -115,68 +117,82 @@ const Status = ({ appName, environmentName, resourceId, regions, account }: ISta
   );
 };
 
-export const Resource = ({ resource, environment }: { resource: QueryResource; environment: string }) => {
-  const icon = resourceManager.getIcon(resource.kind);
-  const app = useApplicationContextSafe();
+interface IBaseResourceProps {
+  resource: QueryResource;
+  environment: string;
+}
+
+const ResourceMetadata = ({ resource }: IBaseResourceProps) => {
   const logEvent = useLogEvent('Resource');
   const isDebug = getIsDebugMode();
 
   const account = resource.location?.account;
-
-  const resourceLinkProps: IResourceLinkProps = {
-    kind: resource.kind,
-    displayName: resource.displayName,
-    account,
-    detail: resource.moniker?.detail,
-    stack: resource.moniker?.stack,
-  };
-
   const regions = resource.location?.regions || [];
 
   return (
-    <EnvironmentItem
-      iconName={icon}
-      iconTooltip={resource.kind}
-      className="Resource"
-      title={<ResourceTitle props={resourceLinkProps} />}
-    >
-      <div className="resource-metadata delimited-elements">
-        <span>
-          {regions.map((region, index) => (
-            <span key={region}>
-              {region}
-              {index < regions.length - 1 && ', '}
-            </span>
-          ))}
-        </span>
-        {account && <span>{account}</span>}
+    <div className="resource-metadata delimited-elements">
+      <span>
+        {regions.map((region, index) => (
+          <span key={region}>
+            {region}
+            {index < regions.length - 1 && ', '}
+          </span>
+        ))}
+      </span>
+      {account && <span>{account}</span>}
+      <span>
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            showManagedResourceHistoryModal({ id: resource.id, displayName: resource.displayName || resource.id });
+            logEvent({ action: 'ViewHistory' });
+          }}
+        >
+          View history
+        </a>
+      </span>
+      {isDebug && (
         <span>
           <a
             href="#"
             onClick={(e) => {
               e.preventDefault();
-              showManagedResourceHistoryModal({ id: resource.id, displayName: resource.displayName || resource.id });
-              logEvent({ action: 'ViewHistory' });
+              showResourceDefinitionModal({ resource: resource });
+              logEvent({ action: 'ViewDefinition' });
             }}
           >
-            View history
+            View definition
           </a>
         </span>
-        {isDebug && (
-          <span>
-            <a
-              href="#"
-              onClick={(e) => {
-                e.preventDefault();
-                showResourceDefinitionModal({ resource: resource });
-                logEvent({ action: 'ViewDefinition' });
-              }}
-            >
-              View definition
-            </a>
-          </span>
-        )}
-      </div>
+      )}
+    </div>
+  );
+};
+
+export const Resource = ({
+  resource,
+  environment,
+  withPadding,
+  size,
+  className,
+}: IBaseResourceProps & Pick<IEnvironmentItemProps, 'size' | 'withPadding' | 'className'>) => {
+  const icon = resourceManager.getIcon(resource.kind);
+  const app = useApplicationContextSafe();
+
+  const account = resource.location?.account;
+  const regions = resource.location?.regions || [];
+
+  return (
+    <EnvironmentItem
+      iconName={icon}
+      iconTooltip={resource.kind}
+      className={classnames('Resource', className)}
+      title={<ResourceTitle resource={resource} />}
+      size={size}
+      withPadding={withPadding}
+    >
+      <ResourceMetadata environment={environment} resource={resource} />
       <div>
         <Status
           appName={app.name}

package/src/managed/overview/ResourceDeploymentStatus.tsx

@@ -4,7 +4,7 @@ import { Icon } from '@spinnaker/presentation';
 
 import { AnimatingPill, Pill } from '../Pill';
 import { getArtifactVersionDisplayName } from '../displayNames';
-import { IManagedArtifactSummary, IManagedEnvironmentSummary } from '../../domain';
+import type { IManagedArtifactSummary, IManagedEnvironmentSummary } from '../../domain';
 
 export interface ResourceDeploymentStatusProps {
   environment?: string;

package/src/managed/overview/ResourceTask.tsx

@@ -2,7 +2,7 @@ import { UISref } from '@uirouter/react';
 import React from 'react';
 
 import { RelativeTimestamp } from '../RelativeTimestamp';
-import { IOrchestratedItem } from '../../domain';
+import type { IOrchestratedItem } from '../../domain';
 import { robotToHuman, Tooltip } from '../../presentation';
 import { LoadingAnimation } from '../../presentation/LoadingAnimation';
 import { useDataWithRefresh } from '../../presentation/hooks/useDataWithRefresh.hook';

package/src/managed/overview/artifact/Artifact.less

@@ -1,29 +1,32 @@
 .Artifact {
-  --version-left-padding: 18px;
-
-  @media (max-width: 768px) {
-    --version-left-padding: 14px;
-  }
-
   .artifact-current-version {
     display: flex;
     flex-direction: column;
-    border-radius: 5px;
-    padding-left: var(--version-left-padding);
   }
 
-  .artifact-versions-title {
-    margin-bottom: var(--s-spacing);
+  .artifact-section {
+    margin-left: -16px;
+  }
+
+  .artifact-section-title {
     text-transform: uppercase;
-    color: var(--color-titanium);
-    font-size: 14px;
-    font-weight: 600;
+    color: rgb(45%, 45%, 45%);
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+
+    .section-heading-chevron {
+      margin-top: -1px;
+    }
+
+    .in-progress-dot {
+      margin-left: 6px;
+      margin-top: -1px;
+    }
   }
 
-  .artifact-pending-versions {
-    margin-top: var(--l-spacing);
+  .artifact-versions {
     position: relative;
-    --circle-shift: 6px;
 
     .artifact-pending-versions-list {
       .show-more-versions {
@@ -36,48 +39,12 @@
       .artifact-pending-version {
         display: flex;
         flex-direction: column;
-        padding-right: var(--l-spacing);
         position: relative;
-        padding-left: var(--version-left-padding);
 
         &:not(:last-of-type) {
           padding-bottom: 32px;
         }
 
-        // Line
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: calc(4px);
-          height: 100%;
-          border-left: 2px solid var(--color-accent-g2);
-        }
-
-        // circle
-        &::after {
-          content: '';
-          position: absolute;
-          top: var(--circle-shift);
-          left: 0;
-          width: 10px;
-          height: 10px;
-          background: var(--color-accent-g2);
-          border-radius: 50%;
-        }
-
-        &:last-of-type {
-          &::before {
-            height: var(--circle-shift);
-          }
-        }
-
-        &:first-of-type {
-          &::before {
-            top: var(--circle-shift);
-          }
-        }
-
         .artifact-pending-version-commit {
           font-weight: 600;
           display: flex;
@@ -96,4 +63,12 @@
       color: var(--color-warning);
     }
   }
+
+  .VersionTitle {
+    display: grid;
+    grid-template-columns: minmax(auto, max-content) auto;
+    align-items: baseline;
+    column-gap: 20px;
+    justify-content: flex-start;
+  }
 }

package/src/managed/overview/artifact/Artifact.tsx

@@ -1,13 +1,17 @@
 import { orderBy } from 'lodash';
 import React from 'react';
 
+import { ArtifactCollapsibleSection } from './ArtifactCollapsibleSection';
+import { ArtifactVersions } from './ArtifactVersions';
 import { CurrentVersion } from './CurrentVersion';
-import { PendingVersions } from './PendingVersion';
+import { Resource } from '../Resource';
 import { EnvironmentItem } from '../../environmentBaseElements/EnvironmentItem';
-import { HoverablePopover, Markdown } from '../../../presentation';
-import { QueryArtifact, QueryArtifactVersion } from '../types';
-import { tooltipShowHideProps } from '../../utils/defaults';
-import { toPinnedMetadata } from '../../versionMetadata/MetadataComponents';
+import { useMarkVersionAsBad } from './hooks';
+import { HoverablePopover, Markdown, useApplicationContextSafe } from '../../../presentation';
+import type { QueryArtifact, QueryArtifactVersion } from '../types';
+import { useIsUpdatingResources } from '../useIsUpdatingResources.hook';
+import { isVersionVetoed } from './utils';
+import { ACTION_BUTTON_CLASS_NAME, tooltipShowHideProps } from '../../utils/defaults';
 
 import './Artifact.less';
 
@@ -57,39 +61,99 @@ export const PinnedVersion = ({ version }: { version: NonNullable<QueryArtifact[
     </div>
   );
 };
+interface IRollbackActionProps {
+  currentVersion: QueryArtifactVersion;
+  environment: string;
+  reference: string;
+  isPinned: boolean;
+}
+
+const RollbackAction = ({ currentVersion, environment, reference, isPinned }: IRollbackActionProps) => {
+  const appName = useApplicationContextSafe().name;
+  const onMarkAsBad = useMarkVersionAsBad({
+    application: appName,
+    environment,
+    reference,
+    version: currentVersion.version,
+    isVetoed: isVersionVetoed(currentVersion),
+    isPinned,
+    isCurrent: true,
+    selectedVersion: {
+      buildNumber: currentVersion.buildNumber,
+      commitMessage: currentVersion.gitMetadata?.commitInfo?.message,
+      commitSha: currentVersion.gitMetadata?.commit,
+    },
+  });
+  return (
+    <button className={ACTION_BUTTON_CLASS_NAME} onClick={onMarkAsBad}>
+      Rollback...
+    </button>
+  );
+};
 
 interface IArtifactProps {
   artifact: QueryArtifact;
+  isPreview?: boolean;
 }
 
-export const Artifact = ({ artifact }: IArtifactProps) => {
-  const currentVersion = artifact.versions?.find((version) => version.isCurrent === true);
-  const newerVersions = filterPendingVersions(artifact.versions, currentVersion);
-  const { pinnedVersion } = artifact;
+const ArtifactResources = ({ environment, resources }: Pick<QueryArtifact, 'environment' | 'resources'>) => {
+  const isUpdatingResources = useIsUpdatingResources(environment);
+  return (
+    <ArtifactCollapsibleSection heading="DEPLOYED TO" isUpdating={isUpdatingResources}>
+      {resources?.map((resource) => (
+        <Resource
+          key={resource.id}
+          resource={resource}
+          environment={environment}
+          size="small"
+          className="sp-margin-m-top"
+          withPadding={false}
+        />
+      ))}
+    </ArtifactCollapsibleSection>
+  );
+};
 
+export const Artifact = ({ artifact, isPreview }: IArtifactProps) => {
+  const { environment, type, reference, versions, pinnedVersion, resources } = artifact;
+  const currentVersion = versions?.find((version) => version.isCurrent === true);
+  const newerVersions = filterPendingVersions(versions, currentVersion);
+  const deployingVersion = newerVersions.filter((version) => version.status === 'DEPLOYING');
+  const pendingVersions = newerVersions.filter((version) => version.status !== 'DEPLOYING');
   return (
     <EnvironmentItem
       iconName="artifact"
-      iconTooltip={`Artifact - ${artifact.type}`}
+      iconTooltip={`Artifact - ${type}`}
       className="Artifact"
-      title={artifact.reference}
+      title={reference}
+      rightElement={
+        currentVersion && !isPreview ? (
+          <RollbackAction {...{ environment, currentVersion, reference }} isPinned={Boolean(pinnedVersion)} />
+        ) : undefined
+      }
     >
-      <div className="artifact-versions-title sp-margin-m-top">Current version</div>
-      {currentVersion ? (
+      <div className="sp-margin-m-top sp-margin-xl-bottom">
         <CurrentVersion
           data={currentVersion}
-          environment={artifact.environment}
-          reference={artifact.reference}
+          environment={environment}
+          reference={reference}
           numNewerVersions={newerVersions?.length}
-          pinned={pinnedVersion?.version === currentVersion.version ? toPinnedMetadata(pinnedVersion) : undefined}
+          pinnedVersion={pinnedVersion}
+          isPreview={isPreview}
         />
-      ) : (
-        <div>No version is deployed</div>
-      )}
-      {pinnedVersion && pinnedVersion.buildNumber !== currentVersion?.buildNumber && (
-        <PinnedVersion version={pinnedVersion} />
-      )}
-      <PendingVersions artifact={artifact} pendingVersions={newerVersions} />
+        {pinnedVersion &&
+          pinnedVersion.buildNumber !== currentVersion?.buildNumber && // The current version is not the pinned one
+          !deployingVersion.some((v) => v.buildNumber === pinnedVersion.buildNumber) && ( // we are not already deploy this version
+            <PinnedVersion version={pinnedVersion} />
+          )}
+      </div>
+      <ArtifactVersions title="Now deploying" artifact={artifact} versions={deployingVersion} isDeploying={true} />
+      <ArtifactResources {...{ environment, resources }} />
+      <ArtifactVersions
+        title={`${pendingVersions.length} pending version` + (pendingVersions.length > 1 ? 's' : '')}
+        artifact={artifact}
+        versions={pendingVersions}
+      />
     </EnvironmentItem>
   );
 };

package/src/managed/overview/artifact/ArtifactActionModal.less

@@ -0,0 +1,19 @@
+.ArtifactActionModal {
+  .details {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: 10px;
+    align-items: baseline;
+
+    dd {
+      min-width: 0;
+    }
+
+    dt {
+      font-weight: 600;
+      text-transform: uppercase;
+      font-size: 13px;
+      color: var(--color-concrete);
+    }
+  }
+}