@spinnaker/core 0.14.2 → 0.15.0

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

@@ -2,14 +2,10 @@ import { groupBy } from 'lodash';
 import { DateTime } from 'luxon';
 
 import { ACTION_DISPLAY_NAMES, getActionStatusData } from './VersionOperation';
-import type { MdArtifactStatusInEnvironment } from '../../graphql/graphql-sdk';
-import { useMarkVersionAsBad, useMarkVersionAsGood, usePinVersion, useUnpinVersion } from './hooks';
-import { useApplicationContextSafe } from '../../../presentation';
+import type { FetchCurrentVersionQuery } from '../../graphql/graphql-sdk';
 import type { QueryArtifactVersion, QueryConstraint, QueryLifecycleStep } from '../types';
 import { timeDiffToString } from '../../../utils';
-import { copyTextToClipboard } from '../../../utils/clipboard/copyTextToClipboard';
-import { getIsDebugMode } from '../../utils/debugMode';
-import type { VersionAction } from '../../versionMetadata/MetadataComponents';
+import type { HistoryArtifactVersionExtended, SingleVersionArtifactVersion } from '../../versionsHistory/types';
 
 export const getConstraintsStatusSummary = (constraints: QueryConstraint[]) => {
   let finalStatus: QueryConstraint['status'] = 'PASS';
@@ -84,82 +80,53 @@ export const getLifecycleEventSummary = (
   };
 };
 
-interface ICreateVersionActionsProps {
-  environment: string;
-  reference: string;
-  version: string;
+export const isVersionVetoed = (version?: QueryArtifactVersion | SingleVersionArtifactVersion) =>
+  version?.status === 'VETOED';
+
+export const isVersionPending = (version?: QueryArtifactVersion | SingleVersionArtifactVersion) =>
+  version?.status === 'APPROVED' || version?.status === 'PENDING';
+
+export type ICurrentVersion = NonNullable<
+  NonNullable<
+    NonNullable<FetchCurrentVersionQuery['application']>['environments'][number]['state']['artifacts']
+  >[number]['versions']
+>[number];
+
+export type IVersionRelativeAgeToCurrent = 'CURRENT' | 'NEWER' | 'OLDER';
+
+export const getRelativeAgeToCurrent = ({
+  isCurrent,
+  createdAt,
+  currentVersion,
+}: {
+  isCurrent?: boolean;
+  createdAt?: string;
+  currentVersion?: ICurrentVersion;
+}): IVersionRelativeAgeToCurrent => {
+  if (isCurrent) return 'CURRENT';
+  if (
+    !createdAt ||
+    !currentVersion?.createdAt ||
+    new Date(createdAt).getTime() < new Date(currentVersion.createdAt).getTime()
+  )
+    return 'OLDER';
+  return 'NEWER';
+};
+
+export interface IVersionDetails {
   buildNumber?: string;
   commitMessage?: string;
-  isPinned: boolean;
-  status?: MdArtifactStatusInEnvironment;
-  compareLinks?: {
-    previous?: string;
-    current?: string;
-  };
+  commitSha?: string;
+  createdAt?: string;
 }
 
-export const useCreateVersionActions = ({
-  environment,
-  reference,
-  version,
-  status,
-  buildNumber,
-  commitMessage,
-  isPinned,
-  compareLinks,
-}: ICreateVersionActionsProps): VersionAction[] | undefined => {
-  const application = useApplicationContextSafe();
-
-  const basePayload = { application: application.name, environment, reference, version };
-
-  const onUnpin = useUnpinVersion(basePayload, [`Unpin #${buildNumber}`, commitMessage].filter(Boolean).join(' - '));
-  const onPin = usePinVersion(basePayload, [`Pin #${buildNumber}`, commitMessage].filter(Boolean).join(' - '));
-
-  const onMarkAsBad = useMarkVersionAsBad(
-    basePayload,
-    [`Mark #${buildNumber} as Bad`, commitMessage].filter(Boolean).join(' - '),
-  );
-
-  const onMarkAsGood = useMarkVersionAsGood(
-    basePayload,
-    [`Mark #${buildNumber} as Good`, commitMessage].filter(Boolean).join(' - '),
-  );
-
-  const actions: VersionAction[] = [
-    isPinned
-      ? {
-          content: 'Unpin version',
-          onClick: onUnpin,
-        }
-      : {
-          content: 'Pin version',
-          onClick: onPin,
-        },
-    status === 'VETOED'
-      ? {
-          content: 'Mark as good',
-          onClick: onMarkAsGood,
-        }
-      : {
-          content: 'Mark as bad',
-          onClick: onMarkAsBad,
-        },
-  ];
-  if (compareLinks?.current) {
-    actions.push({ content: 'Compare to current version', href: compareLinks.current });
-  }
-  if (compareLinks?.previous) {
-    actions.push({ content: 'Compare to previous version', href: compareLinks.previous });
-  }
-
-  if (getIsDebugMode()) {
-    actions.push({
-      content: 'Copy artifact version [Debug]',
-      onClick: () => {
-        copyTextToClipboard(version);
-      },
-    });
-  }
-
-  return actions.length ? actions : undefined;
+export const extractVersionRollbackDetails = (
+  version: QueryArtifactVersion | HistoryArtifactVersionExtended | ICurrentVersion,
+): IVersionDetails => {
+  return {
+    buildNumber: version.buildNumber,
+    commitMessage: version.gitMetadata?.commitInfo?.message,
+    commitSha: version.gitMetadata?.commit,
+    createdAt: version.createdAt,
+  };
 };

package/src/managed/overview/baseStyles.less

@@ -1,117 +1,153 @@
-.environment-row-element {
-  display: grid;
-  grid-template-columns: [icon] var(--row-element-icon-width) [details] 1fr;
-  padding: var(--l-spacing) var(--base-horizontal-padding) var(--s-spacing) var(--base-horizontal-padding);
-
-  @media (max-width: 768px) {
-    grid-template-columns: [icon] 30px [details] 1fr;
-  }
-
-  .no-items-message {
-    grid-column: ~'1 / 3';
-  }
+.Environments,
+.ActionModal {
+  .environment-row-element {
+    display: grid;
+    grid-template-columns: [icon] var(--row-element-icon-width) [details] 1fr;
+    position: relative;
+
+    &.with-padding {
+      padding: var(--l-spacing) var(--base-horizontal-padding) var(--s-spacing) var(--base-horizontal-padding);
+    }
 
-  .row-details {
-    grid-column: details;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
+    @media (max-width: 768px) {
+      grid-template-columns: [icon] 30px [details] 1fr;
+    }
 
-  .row-icon {
-    grid-column: icon;
-    display: flex;
-    align-self: flex-start;
-    padding-top: var(~'--2xs-spacing');
+    .no-items-message {
+      grid-column: ~'1 / 3';
+    }
 
-    &.small {
-      padding-top: var(~'--3xs-spacing');
+    .row-details {
+      grid-column: details;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
     }
-  }
 
-  .row-title {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.3;
-    color: var(--color-charcoal);
+    .row-icon {
+      grid-column: icon;
+      display: flex;
+      align-self: flex-start;
+      padding-top: var(~'--2xs-spacing');
 
-    &.small {
-      font-size: 14px;
+      &.small {
+        padding-top: var(~'--3xs-spacing');
+      }
     }
 
-    & > a {
-      color: inherit;
+    .row-title {
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--color-charcoal);
+      display: grid;
+      grid-template-columns: 1fr auto;
+
+      &.small {
+        font-size: 14px;
+      }
+
+      & > a {
+        color: inherit;
+      }
     }
   }
-}
 
-.md-icon-success {
-  color: var(--color-status-success);
-}
+  .md-icon-success {
+    color: var(--color-status-success);
+  }
 
-.md-icon-pending {
-  color: var(--color-titanium);
-}
+  .md-icon-pending {
+    color: var(--color-titanium);
+  }
 
-.md-icon-fail {
-  color: var(--color-status-error);
-}
+  .md-icon-fail {
+    color: var(--color-status-error);
+  }
 
-.delimited-element {
-  &:not(:last-child) {
-    margin-right: 6px;
+  .delimited-element {
+    &:not(:last-child) {
+      margin-right: 6px;
+    }
+    &:not(:first-child)::before {
+      content: '•';
+      margin-right: 6px;
+    }
   }
-  &:not(:first-child)::before {
-    content: '•';
-    margin-right: 6px;
+
+  .delimited-elements {
+    > * {
+      .delimited-element();
+    }
   }
-}
 
-.delimited-elements {
-  > * {
-    .delimited-element();
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-}
 
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  button.md-btn {
+    background-color: transparent;
+    &:hover {
+      background-color: var(--color-cirrus);
+    }
+    box-shadow: 1px 2px 2px 0px rgb(0 0 0 / 6%), 0px 1px 3px 0px rgb(0 0 0 / 3%);
 
-button.md-btn {
-  background-color: transparent;
-  &:hover {
-    background-color: var(--color-cirrus);
+    &:active,
+    &:focus {
+      outline: none;
+    }
   }
-}
 
-button.md-btn-primary,
-button.md-btn-primary:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
-}
+  button.md-btn-accent,
+  button.md-btn-accent:hover {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
 
-button.md-btn-accent,
-button.md-btn-accent:hover {
-  color: var(--color-accent);
-  border-color: var(--color-accent);
-}
+  button.md-btn-success,
+  button.md-btn-success:hover {
+    color: var(--color-validation-success);
+    border-color: var(--color-validation-success);
+  }
 
-button.md-btn-success,
-button.md-btn-success:hover {
-  color: var(--color-validation-success);
-  border-color: var(--color-validation-success);
-}
+  button.md-btn-danger,
+  button.md-btn-danger:hover {
+    color: var(--color-danger);
+    border: 1px solid var(--color-danger);
+  }
 
-button.md-btn-danger,
-button.md-btn-danger:hover {
-  color: var(--color-danger);
-  border: 1px solid var(--color-danger);
-}
+  .md-action-button {
+    padding: 0 var(--xs-spacing);
+    text-transform: uppercase;
+    color: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    padding: 2px var(--s-spacing);
+    color: var(--color-primary-g1);
+    letter-spacing: 0.2px;
+
+    &:hover {
+      background-color: var(--color-alabaster);
+    }
+  }
+
+  .no-underline {
+    text-decoration: none;
+  }
+
+  .md-actions-gap {
+    gap: var(--s-spacing);
+  }
 
-.no-underline {
-  text-decoration: none;
+  .in-progress-dot {
+    height: 8px;
+    width: 8px;
+    border-radius: 999px;
+    display: flex;
+    animation: deployingAnimation 2s infinite;
+  }
 }
 
 @keyframes deployingAnimation {

package/src/managed/overview/queries.graphql

@@ -90,11 +90,26 @@ fragment baseEnvironmentFields on MdEnvironment {
   basedOn
 }
 
+fragment baesResourceFields on MdResource {
+  id
+  kind
+  displayName
+  moniker {
+    app
+    stack
+    detail
+  }
+  location {
+    account
+    regions
+  }
+  rawDefinition
+}
+
 query fetchApplication($appName: String!, $statuses: [MdArtifactStatusInEnvironment!]) {
   application(appName: $appName) {
     id
     name
-    account
     config {
       id
       previewEnvironmentsConfigured
@@ -114,21 +129,44 @@ query fetchApplication($appName: String!, $statuses: [MdArtifactStatusInEnvironm
             ...detailedVersionFields
           }
           ...artifactPinnedVersionFields
+          resources {
+            ...baesResourceFields
+          }
         }
         resources {
+          ...baesResourceFields
+        }
+      }
+    }
+  }
+}
+
+query fetchCurrentVersion($appName: String!) {
+  application(appName: $appName) {
+    id
+    name
+    environments {
+      id
+      name
+      state {
+        artifacts {
           id
-          kind
-          displayName
-          moniker {
-            app
-            stack
-            detail
-          }
-          location {
-            account
-            regions
+          name
+          reference
+          environment
+          versions(statuses: [CURRENT]) {
+            id
+            version
+            buildNumber
+            createdAt
+            gitMetadata {
+              commit
+              commitInfo {
+                sha
+                message
+              }
+            }
           }
-          rawDefinition
         }
       }
     }
@@ -139,7 +177,6 @@ query fetchVersionsHistory($appName: String!, $limit: Int) {
   application(appName: $appName) {
     id
     name
-    account
     environments {
       ...baseEnvironmentFields
       state {
@@ -347,3 +384,7 @@ mutation ImportDeliveryConfig($application: String!) {
 mutation ToggleResourceManagement($payload: MdToggleResourceManagementPayload) {
   toggleResourceManagement(payload: $payload)
 }
+
+mutation RestartConstraintEvaluation($payload: MdRestartConstraintEvaluationPayload!) {
+  restartConstraintEvaluation(payload: $payload)
+}

package/src/managed/overview/useIsUpdatingResources.hook.ts

@@ -0,0 +1,9 @@
+import { useApplicationContextSafe } from '../..';
+import { useFetchResourceStatusQuery } from '../graphql/graphql-sdk';
+
+export const useIsUpdatingResources = (environment: string) => {
+  const app = useApplicationContextSafe();
+  const { data } = useFetchResourceStatusQuery({ variables: { appName: app.name } });
+  const resources = data?.application?.environments.find((env) => env.name === environment)?.state.resources;
+  return resources?.some((resource) => resource.state?.status !== 'UP_TO_DATE');
+};

package/src/managed/resources/ResourceTitle.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 
-import type { IResourceLinkProps } from './resourceRegistry';
+import type { QueryResource } from '../overview/types';
 import { useGenerateLink } from './useGetResourceLink.hook';
 import { useLogEvent } from '../utils/logging';
 
-export const ResourceTitle = ({ props }: { props: IResourceLinkProps }) => {
-  const { displayName } = props;
-  const linkProps = useGenerateLink(props);
+export const ResourceTitle = ({ resource }: { resource: QueryResource }) => {
+  const account = resource.location?.account;
+  const { displayName, kind } = resource;
+  const linkProps = useGenerateLink({
+    kind: kind,
+    displayName,
+    account,
+    detail: resource.moniker?.detail,
+    stack: resource.moniker?.stack,
+  });
   const logEvent = useLogEvent('Resource');
 
   return (
@@ -16,7 +23,7 @@ export const ResourceTitle = ({ props }: { props: IResourceLinkProps }) => {
           href={linkProps.href}
           {...(linkProps.isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : undefined)}
           onClick={() => {
-            logEvent({ action: 'OpenCommit', data: { kind: props.kind, account: props.account } });
+            logEvent({ action: 'OpenCommit', data: { kind, account } });
           }}
         >
           {displayName}

package/src/managed/utils/ActionModal.tsx

@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import React from 'react';
 
 import { Button } from './Button';
@@ -21,6 +22,7 @@ export interface IArtifactActionModalProps extends IModalComponentProps {
   onAction: (comment?: string) => Promise<void> | PromiseLike<void>;
   onSuccess?: () => void;
   error?: string;
+  className?: string;
 }
 
 export const ActionModal: React.FC<IArtifactActionModalProps> = ({
@@ -32,6 +34,7 @@ export const ActionModal: React.FC<IArtifactActionModalProps> = ({
   actionName,
   withComment = true,
   logCategory,
+  className,
   children,
 }) => {
   const logEvent = useLogEvent(logCategory || 'ActionModal', actionName);
@@ -57,7 +60,7 @@ export const ActionModal: React.FC<IArtifactActionModalProps> = ({
           return (
             <>
               <ModalBody>
-                <div className="flex-container-v middle sp-padding-xl-yaxis">
+                <div className={classnames('flex-container-v middle sp-padding-xl-yaxis ActionModal', className)}>
                   {children}
                   {withComment && (
                     <FormikFormField

package/src/managed/utils/defaults.ts

@@ -10,6 +10,9 @@ export const tooltipShowHideProps: Partial<IHoverablePopoverProps> = {
   delayHide: TOOLTIP_DELAY_HIDE,
 };
 export const MODAL_MAX_WIDTH = 750;
+
+export const ACTION_BUTTON_CLASS_NAME = 'btn btn-default md-btn md-action-button';
+
 export const spinnerProps: ISpinnerProps = {
   size: 'medium',
   fullWidth: true,

package/src/managed/utils/useNotifyOnError.hook.ts

@@ -15,7 +15,7 @@ export const useNotifyOnError = ({
     if (!error) return;
     NotifierService.publish({
       key,
-      content: content ? `${content} - ` : '' + error.message,
+      content: (content ? `${content} - ` : '') + error.message,
       options: { type: 'error' },
     });
   }, [error]);