@spinnaker/core 0.14.2 → 0.15.0

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 { useMarkVersionAsBad } from './hooks';
+import { HoverablePopover, Markdown, useApplicationContextSafe } from '../../../presentation';
 import type { QueryArtifact, QueryArtifactVersion } from '../types';
-import { tooltipShowHideProps } from '../../utils/defaults';
-import { toPinnedMetadata } from '../../versionMetadata/MetadataComponents';
+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);
+    }
+  }
+}

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

@@ -1,28 +1,97 @@
 import React from 'react';
 
 import { Illustration } from '@spinnaker/presentation';
+
+import { GitLink } from './GitLink';
+import { LabeledValue } from '../../../presentation';
 import { logger } from '../../../utils';
+import type { ICurrentVersion, IVersionDetails, IVersionRelativeAgeToCurrent } from './utils';
+import { extractVersionRollbackDetails } from './utils';
 import type { IArtifactActionModalProps } from '../../utils/ActionModal';
 import { ActionModal } from '../../utils/ActionModal';
 import { getDocsUrl } from '../../utils/defaults';
 
-type InternalModalProps = Omit<IArtifactActionModalProps, 'logCategory'> & { application: string };
+import './ArtifactActionModal.less';
 
 const MARK_BAD_DOCS_URL = getDocsUrl('markAsBad');
 const PINNING_DOCS_URL = getDocsUrl('pinning');
 
-export const PinActionModal = ({ application, ...props }: InternalModalProps) => {
+const CLASS_NAME = 'ArtifactActionModal';
+
+export interface IVersionActionsProps {
+  application: string;
+  environment: string;
+  reference: string;
+  version: string;
+  selectedVersion: IVersionDetails;
+  isPinned: boolean;
+  isVetoed?: boolean;
+  isCurrent?: boolean;
+}
+
+const VersionDetails = ({ buildNumber, commitMessage, commitSha, title }: IVersionDetails & { title: string }) => {
   return (
-    <ActionModal logCategory="Environments::Artifact" {...props}>
+    <div className="sp-margin-xl-top">
+      <div className="uppercase bold">{title}</div>
+      <dl className="details sp-margin-s-top">
+        {commitMessage && (
+          <LabeledValue
+            label="Commit"
+            value={
+              <GitLink gitMetadata={{ commitInfo: { message: commitMessage }, commit: commitSha }} asLink={false} />
+            }
+          />
+        )}
+        {buildNumber && <LabeledValue label="Build #" value={buildNumber} />}
+      </dl>
+    </div>
+  );
+};
+
+type InternalModalProps<T = any> = Omit<IArtifactActionModalProps, 'logCategory'> & {
+  actionProps: IVersionActionsProps & T;
+};
+
+export const PinActionModal = ({
+  actionProps,
+  ...props
+}: InternalModalProps<
+  IVersionActionsProps & { ageRelativeToCurrent: IVersionRelativeAgeToCurrent; currentVersion?: ICurrentVersion }
+>) => {
+  const {
+    application,
+    selectedVersion: { buildNumber },
+    isCurrent,
+    environment,
+    ageRelativeToCurrent,
+    currentVersion,
+  } = actionProps;
+  const rollingType = ageRelativeToCurrent === 'NEWER' ? 'forward' : 'back';
+  return (
+    <ActionModal logCategory="Environments::Artifact" className={CLASS_NAME} {...props}>
       <div className="flex-container-h middle sp-margin-xl-bottom">
         <span className="sp-margin-m-right" style={{ minWidth: 145 }}>
           <Illustration name="pinArtifactVersion" />
         </span>
         <span>
           <p>
-            Pinning ensures an environment uses a specific version, even if Spinnaker would've normally deployed a
-            different one. If you pin a version, it'll remain pinned until you manually unpin it.
-          </p>{' '}
+            {isCurrent ? (
+              `Pinning ensures an environment uses a specific version, even if Spinnaker would've normally deployed a
+  different one. New versions won't be deployed until you unpin this version.`
+            ) : (
+              <>
+                Rolling {rollingType} will:
+                <ul className="sp-margin-xs-top">
+                  <li>Ignore any constraints on this version</li>
+                  <li>Deploy this version immediately</li>
+                  <li>
+                    Pin this version to {environment.toLocaleUpperCase()} so no other versions deploy until you unpin
+                  </li>
+                </ul>
+              </>
+            )}
+          </p>
+          For more information{' '}
           <a
             target="_blank"
             onClick={() =>
@@ -34,22 +103,29 @@ export const PinActionModal = ({ application, ...props }: InternalModalProps) =>
             }
             href={PINNING_DOCS_URL}
           >
-            Check out our documentation
-          </a>{' '}
-          for more information.
+            check out our documentation
+          </a>
+          .<p></p>
+          {isCurrent ? (
+            <p>Version #{buildNumber} is already live and no actions will be take immediately</p>
+          ) : (
+            <div>
+              {currentVersion && (
+                <VersionDetails title="Live Version" {...extractVersionRollbackDetails(currentVersion)} />
+              )}
+              <VersionDetails title={`Rolling ${rollingType} to`} {...actionProps.selectedVersion} />
+            </div>
+          )}
         </span>
       </div>
     </ActionModal>
   );
 };
 
-export const UnpinActionModal = ({
-  application,
-  environment,
-  ...props
-}: InternalModalProps & { environment: string }) => {
+export const UnpinActionModal = ({ actionProps, ...props }: InternalModalProps) => {
+  const { application, environment, isCurrent } = actionProps;
   return (
-    <ActionModal logCategory="Environments::Artifact" {...props}>
+    <ActionModal logCategory="Environments::Artifact" className={CLASS_NAME} {...props}>
       <div className="flex-container-h middle sp-margin-xl-bottom">
         <span className="sp-margin-m-right" style={{ minWidth: 145 }}>
           <Illustration name="unpinArtifactVersion" />
@@ -57,79 +133,85 @@ export const UnpinActionModal = ({
         <span>
           <p>
             When you unpin this version from {environment.toUpperCase()}, Spinnaker will use the latest version that's
-            approved for deployment.
-          </p>{' '}
-          <a
-            target="_blank"
-            onClick={() =>
-              logger.log({
-                category: 'Environments - unpin version modal',
-                action: 'Pinning docs link clicked',
-                data: { label: application, application },
-              })
-            }
-            href={PINNING_DOCS_URL}
-          >
-            Check out our documentation
-          </a>{' '}
-          for more information.
+            approved for deployment. For more information,{' '}
+            <a
+              target="_blank"
+              onClick={() =>
+                logger.log({
+                  category: 'Environments - unpin version modal',
+                  action: 'Pinning docs link clicked',
+                  data: { label: application, application },
+                })
+              }
+              href={PINNING_DOCS_URL}
+            >
+              Check out our documentation
+            </a>
+            .
+          </p>
+          <VersionDetails title={isCurrent ? 'Current version' : 'Unpinned version'} {...actionProps.selectedVersion} />
         </span>
       </div>
     </ActionModal>
   );
 };
 
-export const MarkAsBadActionModal = ({ application, ...props }: InternalModalProps) => {
+export const MarkAsBadActionModal = ({ actionProps, ...props }: InternalModalProps) => {
+  const {
+    application,
+    isCurrent,
+    selectedVersion: { buildNumber },
+  } = actionProps;
+  const environment = actionProps.environment.toUpperCase();
   return (
-    <ActionModal logCategory="Environments::Artifact" {...props}>
+    <ActionModal logCategory="Environments::Artifact" className={CLASS_NAME} {...props}>
       <div className="flex-container-h middle sp-margin-xl-bottom">
         <span className="sp-margin-m-right" style={{ minWidth: 145 }}>
           <Illustration name="markArtifactVersionAsBad" />
         </span>
         <span>
           <p>
-            If you mark a version as bad in an environment, Spinnaker will never deploy it there. If the version is
-            already deployed there, Spinnaker will immediately replace it with the latest good version approved for
-            deployment.
-          </p>{' '}
-          <a
-            target="_blank"
-            onClick={() =>
-              logger.log({
-                category: 'Environments - mark version as bad modal',
-                action: 'Mark as bad docs link clicked',
-                data: { label: application, application },
-              })
-            }
-            href={MARK_BAD_DOCS_URL}
-          >
-            Check out our documentation
-          </a>{' '}
-          for more information.
+            {isCurrent
+              ? `Spinnaker will immediately deploy the latest version approved for deployment to ${environment}. Version #${buildNumber} will be rejected and will not be deployed again`
+              : `This action will reject version ${buildNumber} and Spinnaker will not be deploy it to ${environment}. This will not affect the live version`}
+            . For more information,{' '}
+            <a
+              target="_blank"
+              onClick={() =>
+                logger.log({
+                  category: 'Environments - mark version as bad modal',
+                  action: 'Mark as bad docs link clicked',
+                  data: { label: application, application },
+                })
+              }
+              href={MARK_BAD_DOCS_URL}
+            >
+              Check out our documentation
+            </a>
+            .
+          </p>
+          <VersionDetails title="Rejected version" {...actionProps.selectedVersion} />
         </span>
       </div>
     </ActionModal>
   );
 };
 
-const MarkAsGoodIntro = () => (
-  <div className="flex-container-h middle sp-margin-xl-bottom">
-    <span className="sp-margin-m-right" style={{ minWidth: 145 }}>
-      <Illustration name="markArtifactVersionAsGood" />
-    </span>
-    <span>
-      <p>
-        By marking this version as good, Spinnaker will be able to deploy it again. If this is the latest version, it
-        will be deployed immediately.
-      </p>
-    </span>
-  </div>
-);
-
-export const MarkAsGoodActionModal = ({ application, ...props }: InternalModalProps) => {
+export const MarkAsGoodActionModal = ({ actionProps, ...props }: InternalModalProps) => {
   return (
-    <ActionModal logCategory="Environments::Artifact" {...props}>
-      <MarkAsGoodIntro />
+    <ActionModal logCategory="Environments::Artifact" className={CLASS_NAME} {...props}>
+      <div className="flex-container-h middle sp-margin-xl-bottom">
+        <span className="sp-margin-m-right" style={{ minWidth: 145 }}>
+          <Illustration name="markArtifactVersionAsGood" />
+        </span>
+        <span>
+          <p>
+            This action will allow Spinnaker to deploy this version again. If this is the latest version, it will be
+            deployed immediately.
+          </p>
+          <VersionDetails title="Allowed Version" {...actionProps.selectedVersion} />
+        </span>
+      </div>
     </ActionModal>
   );
 };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ICollapsibleSectionProps } from '../../../presentation';
+import { CollapsibleSection } from '../../../presentation';
+
+interface IArtifactCollapsibleSectionProps extends ICollapsibleSectionProps {
+  isUpdating?: boolean;
+}
+
+export const ArtifactCollapsibleSection: React.FC<IArtifactCollapsibleSectionProps> = ({
+  heading,
+  isUpdating,
+  ...props
+}) => {
+  return (
+    <CollapsibleSection
+      outerDivClassName="artifact-section"
+      bodyClassName="sp-padding-xl-bottom sp-padding-l-left"
+      toggleClassName="artifact-section-title sp-margin-l-bottom"
+      enableCaching={false}
+      expandIconSize="14px"
+      expandIconPosition="left"
+      heading={({ chevron }) => (
+        <div className="horizontal middle">
+          {chevron}
+          {heading}
+          {isUpdating && <span className="in-progress-dot" />}
+        </div>
+      )}
+      {...props}
+    />
+  );
+};

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

@@ -38,6 +38,7 @@ interface IArtifactVersionTaskProps extends IBaseTaskProps {
   task: QueryArtifactVersionTask;
 }
 
+// Example of a task: postDeploy and verification
 const ArtifactVersionTask = ({ type, artifact, task }: IArtifactVersionTaskProps) => {
   const status = task.status || 'PENDING';
   const { link, startedAt, completedAt } = task;
@@ -111,6 +112,7 @@ interface IArtifactVersionTasksProps extends IBaseTaskProps {
   tasks?: QueryArtifactVersionTask[];
 }
 
+// Example of tasks: postDeploys and verifications
 export const ArtifactVersionTasks = ({ tasks, ...restProps }: IArtifactVersionTasksProps) => {
   if (!tasks || !tasks.length) return null;
   return (