@spinnaker/core 0.12.0 → 0.15.0

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

@@ -1,27 +1,97 @@
 import React from 'react';
 
 import { Illustration } from '@spinnaker/presentation';
+
+import { GitLink } from './GitLink';
+import { LabeledValue } from '../../../presentation';
 import { logger } from '../../../utils';
-import { ActionModal, IArtifactActionModalProps } from '../../utils/ActionModal';
+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={() =>
@@ -33,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" />
@@ -56,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

@@ -4,7 +4,7 @@ import { DurationRender, RelativeTimestamp } from '../../RelativeTimestamp';
 import { VersionOperationIcon } from './VersionOperation';
 import { useRetryVersionActionMutation } from '../../graphql/graphql-sdk';
 import { Tooltip, useApplicationContextSafe } from '../../../presentation';
-import { QueryArtifactVersionTask, QueryArtifactVersionTaskStatus } from '../types';
+import type { QueryArtifactVersionTask, QueryArtifactVersionTaskStatus } from '../types';
 import { TOOLTIP_DELAY_SHOW } from '../../utils/defaults';
 import { useLogEvent } from '../../utils/logging';
 import { useNotifyOnError } from '../../utils/useNotifyOnError.hook';
@@ -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 (

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

@@ -1,36 +1,42 @@
 import { isEmpty } from 'lodash';
 import React from 'react';
 
+import { ArtifactCollapsibleSection } from './ArtifactCollapsibleSection';
 import { Constraints } from './Constraints';
-import { GitLink } from './GitLink';
-import { QueryArtifact, QueryArtifactVersion } from '../types';
-import { useCreateVersionActions } from './utils';
+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 { useLogEvent } from '../../utils/logging';
-import { toPinnedMetadata, VersionMessageData } from '../../versionMetadata/MetadataComponents';
-import { getBaseMetadata, VersionMetadata } from '../../versionMetadata/VersionMetadata';
+import type { VersionMessageData } from '../../versionMetadata/MetadataComponents';
+import { toPinnedMetadata } from '../../versionMetadata/MetadataComponents';
+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
@@ -57,7 +63,7 @@ export const PendingVersions = ({ artifact, pendingVersions }: IPendingVersionsP
           </div>
         ) : undefined}
       </div>
-    </section>
+    </ArtifactCollapsibleSection>
   );
 };
 
@@ -70,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,9 +5,14 @@ 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 { ArtifactVersionProps, QueryConstraint } from '../types';
+import type { ArtifactVersionProps, QueryConstraint } from '../types';
 import { getConstraintsStatusSummary } from './utils';
 import { useLogEvent } from '../../utils/logging';
 import { useNotifyOnError } from '../../utils/useNotifyOnError.hook';
@@ -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=""