@spinnaker/core 0.14.2 → 0.16.1

package/src/managed/overview/artifact/{PendingVersion.tsx → ArtifactVersions.tsx}

@@ -1,37 +1,42 @@
 import { isEmpty } from 'lodash';
 import React from 'react';
 
+import { ArtifactCollapsibleSection } from './ArtifactCollapsibleSection';
 import { Constraints } from './Constraints';
-import { GitLink } from './GitLink';
+import { VersionTitle } from './VersionTitle';
+import { ArtifactActions } from '../../artifactActions/ArtifactActions';
 import type { QueryArtifact, QueryArtifactVersion } from '../types';
-import { useCreateVersionActions } from './utils';
+import { useCreateVersionRollbackActions } from './useCreateRollbackActions.hook';
+import { extractVersionRollbackDetails, isVersionVetoed } from './utils';
 import { useLogEvent } from '../../utils/logging';
 import type { VersionMessageData } from '../../versionMetadata/MetadataComponents';
 import { toPinnedMetadata } from '../../versionMetadata/MetadataComponents';
-import { getBaseMetadata, VersionMetadata } from '../../versionMetadata/VersionMetadata';
+import { getBaseMetadata, getVersionCompareLinks, VersionMetadata } from '../../versionMetadata/VersionMetadata';
 
 export interface IPendingVersionsProps {
   artifact: QueryArtifact;
-  pendingVersions?: QueryArtifactVersion[];
+  title: string;
+  versions?: QueryArtifactVersion[];
+  isDeploying?: boolean;
 }
 
-const NUM_VERSIONS_WHEN_COLLAPSED = 2;
+const NUM_VERSIONS_WHEN_COLLAPSED = 1;
 
-export const PendingVersions = ({ artifact, pendingVersions }: IPendingVersionsProps) => {
-  const numVersions = pendingVersions?.length || 0;
+export const ArtifactVersions = ({ artifact, versions, title, isDeploying }: IPendingVersionsProps) => {
+  const numVersions = versions?.length || 0;
   const [isExpanded, setIsExpanded] = React.useState(false);
   const logEvent = useLogEvent('ArtifactPendingVersion');
 
-  if (!pendingVersions || !numVersions) return null;
+  if (!versions || !numVersions) return null;
 
-  const versionsToShow = isExpanded ? pendingVersions : pendingVersions.slice(0, NUM_VERSIONS_WHEN_COLLAPSED);
-  const numDeploying = pendingVersions.filter((version) => version.status === 'DEPLOYING').length;
+  const versionsToShow = isExpanded ? versions : versions.slice(0, NUM_VERSIONS_WHEN_COLLAPSED);
   const { pinnedVersion } = artifact;
   return (
-    <section className="artifact-pending-versions">
-      <div className="artifact-versions-title">
-        {numVersions} Pending Versions {numDeploying > 0 ? `(${numDeploying} deploying)` : ''}
-      </div>
+    <ArtifactCollapsibleSection
+      outerDivClassName="artifact-versions artifact-section"
+      heading={title}
+      isUpdating={isDeploying}
+    >
       <div className="artifact-pending-versions-list">
         {versionsToShow.map((version, index) => (
           <PendingVersion
@@ -58,7 +63,7 @@ export const PendingVersions = ({ artifact, pendingVersions }: IPendingVersionsP
           </div>
         ) : undefined}
       </div>
-    </section>
+    </ArtifactCollapsibleSection>
   );
 };
 
@@ -71,26 +76,31 @@ interface IPendingVersionProps {
 }
 
 const PendingVersion = ({ data, reference, environment, pinned, index }: IPendingVersionProps) => {
-  const { buildNumber, version, gitMetadata, constraints, status } = data;
-  const actions = useCreateVersionActions({
+  const { version, gitMetadata, constraints, isCurrent } = data;
+  const actions = useCreateVersionRollbackActions({
     environment,
     reference,
-    buildNumber,
     version,
-    status,
-    commitMessage: gitMetadata?.commitInfo?.message,
+    isVetoed: isVersionVetoed(data),
     isPinned: Boolean(pinned),
-    compareLinks: {
-      current: gitMetadata?.comparisonLinks?.toCurrentVersion,
-    },
+    isCurrent,
+
+    selectedVersion: extractVersionRollbackDetails(data),
   });
 
   return (
     <div className="artifact-pending-version">
       <div className="artifact-pending-version-commit">
-        {gitMetadata ? <GitLink gitMetadata={gitMetadata} /> : `Build ${buildNumber}`}
+        <VersionTitle gitMetadata={gitMetadata} buildNumber={data?.buildNumber} version={data.version} />
       </div>
-      <VersionMetadata {...getBaseMetadata(data)} pinned={pinned} createdAt={data.createdAt} actions={actions} />
+      <VersionMetadata {...getBaseMetadata(data)} pinned={pinned} />
+      <ArtifactActions
+        buildNumber={data?.buildNumber}
+        version={data.version}
+        actions={actions}
+        compareLinks={getVersionCompareLinks(data)}
+        className="sp-margin-s-yaxis"
+      />
       {constraints && !isEmpty(constraints) && (
         <Constraints
           key={index} // This is needed on refresh if a new version was added

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

@@ -5,7 +5,12 @@ import React from 'react';
 import { RelativeTimestamp } from '../../RelativeTimestamp';
 import { VersionOperationIcon } from './VersionOperation';
 import { constraintsManager } from '../../constraints/registry';
-import { FetchVersionDocument, useUpdateConstraintMutation } from '../../graphql/graphql-sdk';
+import type { FetchVersionQueryVariables } from '../../graphql/graphql-sdk';
+import {
+  FetchVersionDocument,
+  useRestartConstraintEvaluationMutation,
+  useUpdateConstraintMutation,
+} from '../../graphql/graphql-sdk';
 import { CollapsibleSection, useApplicationContextSafe } from '../../../presentation';
 import type { ArtifactVersionProps, QueryConstraint } from '../types';
 import { getConstraintsStatusSummary } from './utils';
@@ -26,44 +31,77 @@ const ConstraintContent = ({ constraint, versionProps }: IConstraintContentProps
   const application = useApplicationContextSafe();
   const logEvent = useLogEvent('ArtifactConstraints', 'UpdateStatus');
 
-  const [updateConstraint, { loading, error }] = useUpdateConstraintMutation({
-    refetchQueries: [
-      { query: FetchVersionDocument, variables: { appName: application?.name, versions: [versionProps.version] } },
-    ],
+  const refetchVariables: FetchVersionQueryVariables = { appName: application.name, versions: [versionProps.version] };
+  const refetchQueries = [{ query: FetchVersionDocument, variables: refetchVariables }];
+
+  const showRestartButton = constraintsManager.isRestartVisible(constraint);
+
+  const baseRequestProps = {
+    application: application.name,
+    environment: versionProps.environment,
+    version: versionProps.version,
+    reference: versionProps.reference,
+    type: constraint.type,
+  };
+
+  const [
+    updateConstraint,
+    { loading: isUpdatingConstraint, error: updateConstraintError },
+  ] = useUpdateConstraintMutation({ refetchQueries });
+
+  const [
+    restartConstraint,
+    { loading: isRestartingConstraint, error: restartConstraintError },
+  ] = useRestartConstraintEvaluationMutation({
+    variables: { payload: baseRequestProps },
+    refetchQueries,
   });
 
-  useNotifyOnError({ key: 'updateConstraintError', content: `Failed to update constraint`, error });
+  useNotifyOnError({
+    key: 'updateConstraintError',
+    content: `Failed to update constraint`,
+    error: updateConstraintError,
+  });
+
+  useNotifyOnError({
+    key: 'restartConstraintError',
+    content: `Failed to restart constraint`,
+    error: restartConstraintError,
+  });
 
   return (
     <dl className="constraint-content">
       {description && <dd>{description}</dd>}
-      {!isEmpty(actions) && (
+      {(!isEmpty(actions) || showRestartButton) && (
         <dd className={classnames(description ? 'sp-margin-s-top' : undefined, 'horizontal middle')}>
           {actions?.map(({ title, pass }) => (
             <button
               className={classnames('btn md-btn constraint-action-button', pass ? 'md-btn-success' : 'md-btn-danger')}
               key={title}
-              disabled={loading}
+              disabled={isUpdatingConstraint}
               onClick={() => {
                 logEvent({ data: { newStatus: pass } });
                 updateConstraint({
-                  variables: {
-                    payload: {
-                      application: application.name,
-                      environment: versionProps.environment,
-                      version: versionProps.version,
-                      type: constraint.type,
-                      reference: versionProps.reference,
-                      status: pass ? 'FORCE_PASS' : 'FAIL',
-                    },
-                  },
+                  variables: { payload: { ...baseRequestProps, status: pass ? 'FORCE_PASS' : 'FAIL' } },
                 });
               }}
             >
               {title}
             </button>
           ))}
-          {loading && <Spinner mode="circular" size="nano" color="var(--color-accent)" />}
+          {showRestartButton && (
+            <button
+              className="btn md-btn constraint-action-button md-btn-accent"
+              disabled={isUpdatingConstraint}
+              onClick={() => {
+                restartConstraint();
+              }}
+            >
+              {constraintsManager.getRestartDisplayName(constraint)}
+            </button>
+          )}
+          {isUpdatingConstraint ||
+            (isRestartingConstraint && <Spinner mode="circular" size="nano" color="var(--color-accent)" />)}
         </dd>
       )}
     </dl>
@@ -102,7 +140,9 @@ const Constraint = ({ constraint, versionProps }: IConstraintProps) => {
           </div>
         )}
       >
-        {hasContent ? <ConstraintContent constraint={constraint} versionProps={versionProps} /> : undefined}
+        {hasContent || constraintsManager.isRestartVisible(constraint) ? (
+          <ConstraintContent constraint={constraint} versionProps={versionProps} />
+        ) : undefined}
       </CollapsibleSection>
     </div>
   );
@@ -126,7 +166,7 @@ export const Constraints = ({
         <CollapsibleSection
           heading={({ chevron }) => (
             <div className="horizontal">
-              Constraints: {summary.text} {chevron}
+              <span className="uppercase">Constraints</span>: {summary.text} {chevron}
             </div>
           )}
           outerDivClassName=""

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

@@ -3,52 +3,63 @@ import React from 'react';
 import type { ITaskArtifactVersionProps } from './ArtifactVersionTasks';
 import { ArtifactVersionTasks } from './ArtifactVersionTasks';
 import { Constraints } from './Constraints';
-import { GitLink } from './GitLink';
-import type { QueryArtifactVersion } from '../types';
-import { useCreateVersionActions } from './utils';
-import type { VersionMessageData } from '../../versionMetadata/MetadataComponents';
-import { getBaseMetadata, VersionMetadata } from '../../versionMetadata/VersionMetadata';
+import { VersionTitle } from './VersionTitle';
+import { ArtifactActions } from '../../artifactActions/ArtifactActions';
+import type { QueryArtifact, QueryArtifactVersion } from '../types';
+import { useCreateVersionRollbackActions } from './useCreateRollbackActions.hook';
+import { extractVersionRollbackDetails, isVersionVetoed } from './utils';
+import { toPinnedMetadata } from '../../versionMetadata/MetadataComponents';
+import { getBaseMetadata, getVersionCompareLinks, VersionMetadata } from '../../versionMetadata/VersionMetadata';
 
-interface ICurrentVersionProps {
-  data: QueryArtifactVersion;
+interface ICurrentVersionProps<T = QueryArtifactVersion> {
+  data: T;
   environment: string;
   reference: string;
   numNewerVersions?: number;
-  pinned?: VersionMessageData;
+  pinnedVersion: QueryArtifact['pinnedVersion'];
+  isPreview?: boolean;
 }
 
-export const CurrentVersion = ({ data, environment, reference, numNewerVersions, pinned }: ICurrentVersionProps) => {
-  const { gitMetadata, constraints, verifications, postDeploy } = data;
-  const actions = useCreateVersionActions({
+export const CurrentVersionInternal = ({
+  data,
+  environment,
+  reference,
+  numNewerVersions,
+  pinnedVersion,
+  isPreview,
+}: ICurrentVersionProps) => {
+  const { gitMetadata, constraints, verifications, postDeploy, isCurrent } = data;
+  const pinnedMetadata = pinnedVersion?.version === data.version ? toPinnedMetadata(pinnedVersion) : undefined;
+  const actions = useCreateVersionRollbackActions({
     environment,
     reference,
     version: data.version,
-    buildNumber: data.buildNumber,
-    status: data.status,
-    commitMessage: gitMetadata?.commitInfo?.message,
-    isPinned: Boolean(pinned),
-    compareLinks: {
-      previous: gitMetadata?.comparisonLinks?.toPreviousVersion,
-    },
+    isVetoed: isVersionVetoed(data),
+    isPinned: Boolean(pinnedVersion),
+    isCurrent,
+    selectedVersion: extractVersionRollbackDetails(data),
   });
 
   const versionProps: ITaskArtifactVersionProps = {
     environment,
     reference,
     version: data.version,
-    isCurrent: data.isCurrent,
+    isCurrent,
   };
 
   return (
     <div className="artifact-current-version">
-      {gitMetadata ? <GitLink gitMetadata={gitMetadata} /> : <div>Build {data?.version}</div>}
-      <VersionMetadata
-        {...getBaseMetadata(data)}
-        createdAt={data.createdAt}
-        buildsBehind={numNewerVersions}
-        actions={actions}
-        pinned={pinned}
-      />
+      <VersionTitle gitMetadata={gitMetadata} buildNumber={data?.buildNumber} version={data.version} />
+      <VersionMetadata {...getBaseMetadata(data)} buildsBehind={numNewerVersions} pinned={pinnedMetadata} />
+      {!isPreview && (
+        <ArtifactActions
+          buildNumber={data?.buildNumber}
+          version={data.version}
+          actions={actions}
+          compareLinks={getVersionCompareLinks(data)}
+          className="sp-margin-s-yaxis"
+        />
+      )}
       {constraints && (
         <Constraints constraints={constraints} versionProps={{ environment, reference, version: data.version }} />
       )}
@@ -57,3 +68,7 @@ export const CurrentVersion = ({ data, environment, reference, numNewerVersions,
     </div>
   );
 };
+
+export const CurrentVersion = ({ data, ...otherProps }: ICurrentVersionProps<QueryArtifactVersion | undefined>) => {
+  return data ? <CurrentVersionInternal data={data} {...otherProps} /> : <div>No version is deployed</div>;
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { GitLink } from './GitLink';
+import type { QueryArtifactVersion } from '../types';
+
+interface IVersionTitleProps {
+  gitMetadata?: QueryArtifactVersion['gitMetadata'];
+  version: string;
+  buildNumber?: string;
+}
+
+export const VersionTitle = ({ gitMetadata, buildNumber }: IVersionTitleProps) => {
+  return (
+    <div className="VersionTitle">
+      {gitMetadata ? <GitLink gitMetadata={gitMetadata} /> : <div>Build {buildNumber}</div>}
+    </div>
+  );
+};

package/src/managed/overview/artifact/hooks.ts

@@ -1,3 +1,4 @@
+import type { IVersionActionsProps } from './ArtifactActionModal';
 import { MarkAsBadActionModal, MarkAsGoodActionModal, PinActionModal, UnpinActionModal } from './ArtifactActionModal';
 import {
   FetchPinnedVersionsDocument,
@@ -8,55 +9,77 @@ import {
   useUnpinVersionMutation,
 } from '../../graphql/graphql-sdk';
 import { showModal } from '../../../presentation';
+import type { ICurrentVersion, IVersionRelativeAgeToCurrent } from './utils';
 import { MODAL_MAX_WIDTH } from '../../utils/defaults';
 
-interface ActionBasePayload {
-  application: string;
-  environment: string;
-  reference: string;
-  version: string;
-}
-
-export const useUnpinVersion = ({ version, ...payload }: ActionBasePayload, modalTitle: string) => {
+export const useUnpinVersion = (payload: IVersionActionsProps) => {
+  const {
+    application,
+    environment,
+    reference,
+    selectedVersion: { buildNumber, commitMessage },
+  } = payload;
   const [onUnpin] = useUnpinVersionMutation({
-    variables: { payload: payload },
-    refetchQueries: [{ query: FetchPinnedVersionsDocument, variables: { appName: payload.application } }],
+    variables: { payload: { application, environment, reference } },
+    refetchQueries: [{ query: FetchPinnedVersionsDocument, variables: { appName: application } }],
   });
 
   return () => {
     showModal(
       UnpinActionModal,
       {
-        application: payload.application,
-        environment: payload.environment,
-        title: modalTitle,
+        title: [`Unpin #${buildNumber}`, commitMessage].filter(Boolean).join(' - '),
         actionName: 'Unpin',
         onAction: async () => {
           await onUnpin();
         },
         withComment: false,
+        actionProps: payload,
       },
       { maxWidth: MODAL_MAX_WIDTH },
     );
   };
 };
 
-export const usePinVersion = (payload: ActionBasePayload, modalTitle: string) => {
+const pinAction: { [key in IVersionRelativeAgeToCurrent]: string } = {
+  CURRENT: 'Pin',
+  NEWER: 'Roll forward',
+  OLDER: 'Roll back',
+};
+
+export const usePinVersion = (
+  payload: IVersionActionsProps,
+  currentVersion: ICurrentVersion | undefined,
+  ageRelativeToCurrent: IVersionRelativeAgeToCurrent,
+) => {
+  const {
+    application,
+    environment,
+    version,
+    reference,
+    selectedVersion: { buildNumber },
+  } = payload;
   const [onPin] = usePinVersionMutation({
     refetchQueries: [{ query: FetchPinnedVersionsDocument, variables: { appName: payload.application } }],
   });
 
+  const titleOptions: { [key in IVersionRelativeAgeToCurrent]: string } = {
+    CURRENT: `Pin #${buildNumber}`,
+    NEWER: `Roll forward to #${buildNumber} and pin to ${environment.toUpperCase()}`,
+    OLDER: `Roll back to #${buildNumber} and pin to ${environment.toUpperCase()}`,
+  };
+
   return () => {
     showModal(
       PinActionModal,
       {
-        application: payload.application,
-        title: modalTitle,
-        actionName: 'Pin',
+        title: titleOptions[ageRelativeToCurrent],
+        actionName: pinAction[ageRelativeToCurrent],
         onAction: async (comment) => {
           if (!comment) throw new Error('Comment is required');
-          await onPin({ variables: { payload: { ...payload, comment } } });
+          await onPin({ variables: { payload: { application, environment, reference, version, comment } } });
         },
+        actionProps: { ...payload, ageRelativeToCurrent, currentVersion },
       },
 
       { maxWidth: MODAL_MAX_WIDTH },
@@ -64,24 +87,33 @@ export const usePinVersion = (payload: ActionBasePayload, modalTitle: string) =>
   };
 };
 
-export const useMarkVersionAsBad = (payload: ActionBasePayload, modalTitle: string) => {
+export const useMarkVersionAsBad = (payload: IVersionActionsProps) => {
+  const {
+    application,
+    environment,
+    reference,
+    version,
+    isCurrent,
+    selectedVersion: { buildNumber },
+  } = payload;
   const [onMarkAsBad] = useMarkVersionAsBadMutation({
-    refetchQueries: [
-      { query: FetchVersionDocument, variables: { appName: payload.application, versions: [payload.version] } },
-    ],
+    refetchQueries: [{ query: FetchVersionDocument, variables: { appName: payload.application, versions: [version] } }],
   });
 
   return () => {
     showModal(
       MarkAsBadActionModal,
       {
-        application: payload.application,
-        title: modalTitle,
-        actionName: 'Mark as Bad',
+        title:
+          (isCurrent ? `Roll back ${environment.toUpperCase()} to previous version and reject ` : 'Reject') +
+          ` #${buildNumber}`,
+        actionName: 'Rollback',
         onAction: async (comment) => {
           if (!comment) throw new Error('Comment is required');
-          await onMarkAsBad({ variables: { payload: { ...payload, comment } } });
+          await onMarkAsBad({ variables: { payload: { application, environment, reference, version, comment } } });
         },
+        actionProps: payload,
+        isCurrent,
       },
 
       { maxWidth: MODAL_MAX_WIDTH },
@@ -89,24 +121,29 @@ export const useMarkVersionAsBad = (payload: ActionBasePayload, modalTitle: stri
   };
 };
 
-export const useMarkVersionAsGood = (payload: ActionBasePayload, modalTitle: string) => {
+export const useMarkVersionAsGood = (payload: IVersionActionsProps) => {
+  const {
+    application,
+    environment,
+    reference,
+    version,
+    selectedVersion: { buildNumber, commitMessage },
+  } = payload;
   const [onMarkAsBad] = useMarkVersionAsGoodMutation({
-    refetchQueries: [
-      { query: FetchVersionDocument, variables: { appName: payload.application, versions: [payload.version] } },
-    ],
+    refetchQueries: [{ query: FetchVersionDocument, variables: { appName: payload.application, versions: [version] } }],
   });
 
   return () => {
     showModal(
       MarkAsGoodActionModal,
       {
-        application: payload.application,
-        title: modalTitle,
-        actionName: 'Mark as Good',
+        title: [`Allow deploying #${buildNumber}`, commitMessage].filter(Boolean).join(' - '),
+        actionName: 'Allow',
         onAction: async () => {
-          await onMarkAsBad({ variables: { payload: { ...payload } } });
+          await onMarkAsBad({ variables: { payload: { application, environment, reference, version } } });
         },
         withComment: false,
+        actionProps: payload,
       },
 
       { maxWidth: MODAL_MAX_WIDTH },

package/src/managed/overview/artifact/useCreateRollbackActions.hook.ts

@@ -0,0 +1,75 @@
+import type { IVersionActionsProps } from './ArtifactActionModal';
+import type { VersionAction } from '../../artifactActions/ArtifactActions';
+import { useFetchCurrentVersionQuery } from '../../graphql/graphql-sdk';
+import { useMarkVersionAsBad, useMarkVersionAsGood, usePinVersion, useUnpinVersion } from './hooks';
+import { useApplicationContextSafe } from '../../../presentation';
+import type { IVersionRelativeAgeToCurrent } from './utils';
+import { getRelativeAgeToCurrent } from './utils';
+
+const useGetCurrentVersion = (environment: string, reference: string) => {
+  const application = useApplicationContextSafe();
+  const { data: currentVersionData } = useFetchCurrentVersionQuery({ variables: { appName: application.name } });
+  const currentVersion = currentVersionData?.application?.environments
+    .find((e) => e.name === environment)
+    ?.state.artifacts?.find((artifact) => artifact.reference === reference)?.versions?.[0];
+  return currentVersion;
+};
+
+const rollbackText: { [key in IVersionRelativeAgeToCurrent]: string } = {
+  CURRENT: 'Pin version...',
+  NEWER: 'Roll forward to...',
+  OLDER: 'Roll back to...',
+};
+
+export const useCreateVersionRollbackActions = (
+  props: Omit<IVersionActionsProps, 'application'>,
+): VersionAction[] | undefined => {
+  const application = useApplicationContextSafe();
+
+  const { environment, reference, isPinned, isVetoed, isCurrent, selectedVersion } = props;
+
+  const currentVersion = useGetCurrentVersion(environment, reference);
+  const relativeAgeToCurrent = getRelativeAgeToCurrent({
+    isCurrent,
+    createdAt: selectedVersion.createdAt,
+    currentVersion,
+  });
+
+  const basePayload: IVersionActionsProps = { application: application.name, ...props };
+
+  const onUnpin = useUnpinVersion(basePayload);
+
+  const onPin = usePinVersion(basePayload, currentVersion, relativeAgeToCurrent);
+
+  const onMarkAsBad = useMarkVersionAsBad(basePayload);
+
+  const onMarkAsGood = useMarkVersionAsGood(basePayload);
+
+  const actions: VersionAction[] = [
+    isPinned
+      ? {
+          content: 'Unpin version...',
+          onClick: onUnpin,
+        }
+      : {
+          content: rollbackText[relativeAgeToCurrent],
+          onClick: onPin,
+        },
+  ];
+
+  if (isVetoed) {
+    actions.push({
+      content: 'Allow deploying...',
+      onClick: onMarkAsGood,
+    });
+  } else {
+    if (!isCurrent) {
+      actions.push({
+        content: isCurrent ? 'Rollback...' : 'Reject...',
+        onClick: onMarkAsBad,
+      });
+    }
+  }
+
+  return actions;
+};

package/src/managed/overview/artifact/utils.spec.ts

@@ -1,4 +1,4 @@
-import { QueryConstraint } from '../types';
+import type { QueryConstraint } from '../types';
 import { getConstraintsStatusSummary } from './utils';
 
 describe('Constraints status summary', () => {