@spinnaker/core 0.12.0 → 0.15.0

package/src/managed/versionMetadata/MetadataComponents.tsx

@@ -1,16 +1,17 @@
 import { useSref } from '@uirouter/react';
 import classnames from 'classnames';
 import { sortBy } from 'lodash';
-import { DateTime } from 'luxon';
+import type { DateTime } from 'luxon';
 import React from 'react';
-import { Dropdown, MenuItem } from 'react-bootstrap';
 
-import { Icon, IconNames } from '@spinnaker/presentation';
+import type { IconNames } from '@spinnaker/presentation';
+import { Icon } from '@spinnaker/presentation';
 
-import { RelativeTimestamp } from '../RelativeTimestamp';
-import { LifecycleEventSummary } from '../overview/artifact/utils';
-import { Tooltip } from '../../presentation';
-import { TOOLTIP_DELAY_SHOW } from '../utils/defaults';
+import { formatToRelativeTimestamp, RelativeTimestamp } from '../RelativeTimestamp';
+import type { LifecycleEventSummary } from '../overview/artifact/utils';
+import { HoverablePopover, IconTooltip, LabeledValue, Tooltip } from '../../presentation';
+import { copyTextToClipboard } from '../../utils/clipboard/copyTextToClipboard';
+import { ABSOLUTE_TIME_FORMAT, TOOLTIP_DELAY_SHOW } from '../utils/defaults';
 import { useLogEvent } from '../utils/logging';
 
 import './VersionMetadata.less';
@@ -19,12 +20,7 @@ export const MetadataElement: React.FC<{ className?: string }> = ({ className, c
   return <span className={classnames('delimited-element horizontal middle', className)}>{children}</span>;
 };
 
-export interface VersionAction {
-  onClick?: () => void;
-  href?: string;
-  content: string;
-  disabled?: boolean;
-}
+export const METADATA_TEXT_COLOR = 'nobel';
 
 export interface VersionMessageData {
   by?: string;
@@ -32,6 +28,11 @@ export interface VersionMessageData {
   comment?: string;
 }
 
+export interface ICompareLinks {
+  previous?: string;
+  current?: string;
+}
+
 export const toPinnedMetadata = (data: {
   pinnedAt?: string;
   pinnedBy?: string;
@@ -54,59 +55,27 @@ export const toVetoedMetadata = (data: {
 
 export interface IVersionMetadataProps {
   build?: IVersionBuildProps['build'];
-  version: string;
-  sha?: string;
   author?: string;
   deployedAt?: string;
-  createdAt?: IVersionCreatedAtProps['createdAt'];
-  buildDuration?: string;
   buildsBehind?: number;
   isDeploying?: boolean;
-  baking?: LifecycleEventSummary;
+  isPending?: boolean;
+  bake?: LifecycleEventSummary;
   pinned?: VersionMessageData;
   vetoed?: VersionMessageData;
-  actions?: VersionAction[];
-}
-
-export interface IVersionMetadataActionsProps {
-  id: string;
-  actions: VersionAction[];
+  isCurrent?: boolean;
 }
 
-export const VersionMetadataActions = ({ id, actions }: IVersionMetadataActionsProps) => {
-  const logEvent = useLogEvent('ArtifactActions');
-  return (
-    <MetadataElement>
-      <Dropdown id={id}>
-        <Dropdown.Toggle className="element-actions-menu-toggle">Actions</Dropdown.Toggle>
-        <Dropdown.Menu>
-          {actions.map((action, index) => (
-            <MenuItem
-              key={index}
-              disabled={action.disabled}
-              onClick={() => {
-                action.onClick?.();
-                logEvent({ action: `OpenModal - ${action.content}` });
-              }}
-              href={action.href}
-              target="_blank"
-            >
-              {action.content}
-            </MenuItem>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
-    </MetadataElement>
-  );
+const useCreateVersionLink = (linkProps: IVersionCreatedAtProps['linkProps']) => {
+  return useSref('home.applications.application.environments.history', linkProps);
 };
-
 interface IVersionCreatedAtProps {
   createdAt?: string | DateTime;
   linkProps: Record<string, string>;
 }
 
 export const VersionCreatedAt = ({ createdAt, linkProps }: IVersionCreatedAtProps) => {
-  const { href, onClick } = useSref('home.applications.application.environments.history', linkProps);
+  const { href } = useCreateVersionLink(linkProps);
   if (!createdAt) return null;
 
   return (
@@ -114,7 +83,13 @@ export const VersionCreatedAt = ({ createdAt, linkProps }: IVersionCreatedAtProp
       <Tooltip delayShow={TOOLTIP_DELAY_SHOW} value="Created at">
         <i className="far fa-calendar-alt metadata-icon" />
       </Tooltip>
-      <a href={href} onClick={onClick}>
+      <a
+        href={href}
+        onClick={(e) => {
+          href && copyTextToClipboard([window.location.origin, href].join('/'));
+          e.stopPropagation();
+        }}
+      >
         <RelativeTimestamp timestamp={createdAt} delayShow={TOOLTIP_DELAY_SHOW} removeStyles withSuffix />
       </a>
     </MetadataElement>
@@ -124,6 +99,7 @@ export const VersionCreatedAt = ({ createdAt, linkProps }: IVersionCreatedAtProp
 const badgeTypeToDetails = {
   deploying: { className: 'version-deploying', text: 'Deploying' },
   baking: { className: 'version-baking', text: 'Baking' },
+  deployed: { className: 'version-deployed', text: 'Live' },
 };
 
 interface IMetadataBadgeProps {
@@ -168,7 +144,7 @@ const versionTypeProps: { [key in IVersionMessage['type']]: { text: string; clas
     icon: 'pin',
   },
   vetoed: {
-    text: 'Marked as bad by',
+    text: 'Rejected by',
     className: 'version-vetoed',
     icon: 'artifactBad',
   },
@@ -180,7 +156,7 @@ export const VersionMessage = ({ data, type, newRow = true }: IVersionMessage) =
     <>
       {newRow && <div className="flex-break sp-margin-s-top" />}
       <div className={classnames('version-message', typeProps.className)}>
-        <Icon name={typeProps.icon} size="14px" color="black" className="sp-margin-2xs-top" />
+        <Icon name={typeProps.icon} size="14px" color={METADATA_TEXT_COLOR} className="sp-margin-2xs-top" />
         <div>
           <div>
             {typeProps.text} {data.by},{' '}
@@ -212,21 +188,21 @@ export const VersionBranch = ({ branch }: IVersionBranchProps) => {
   if (!branch) return null;
   return (
     <MetadataElement>
-      <Icon name="spCIBranch" size="11px" className="sp-margin-xs-right" color="concrete" /> {branch}
+      <Icon name="spCIBranch" size="11px" className="sp-margin-xs-right" color={METADATA_TEXT_COLOR} /> {branch}
     </MetadataElement>
   );
 };
 
 interface IVersionBuildProps {
-  build: { buildNumber?: string; buildLink?: string; version?: string };
+  build: { buildNumber?: string; version?: string } & Partial<LifecycleEventSummary>;
   withPrefix?: boolean;
 }
 
 export const VersionBuild = ({ build, withPrefix }: IVersionBuildProps) => {
   const logEvent = useLogEvent('ArtifactBuild', 'OpenBuild');
   const text = `${withPrefix ? `Build ` : ''}#${build.buildNumber}`;
-  const content = build.buildLink ? (
-    <a href={build.buildLink} onClick={() => logEvent({ data: { build: build.buildNumber } })}>
+  const content = build.link ? (
+    <a href={build.link} onClick={() => logEvent({ data: { build: build.buildNumber } })}>
       {text}
     </a>
   ) : (
@@ -234,9 +210,12 @@ export const VersionBuild = ({ build, withPrefix }: IVersionBuildProps) => {
   );
 
   return build.version ? (
-    <Tooltip value={build.version} delayShow={TOOLTIP_DELAY_SHOW}>
+    <HoverablePopover
+      Component={() => <LifecycleEventDetails {...build} title="Build" showLink={false} />}
+      delayShow={TOOLTIP_DELAY_SHOW}
+    >
       <span>{content}</span>
-    </Tooltip>
+    </HoverablePopover>
   ) : (
     <>{content}</>
   );
@@ -271,3 +250,86 @@ export const VersionBuilds = ({ builds }: IVersionBuildsProps) => {
 export const BaseVersionMetadata: React.FC = ({ children }) => {
   return <div className="VersionMetadata">{children}</div>;
 };
+
+interface ILifecycleEventDetailsProps extends Partial<LifecycleEventSummary> {
+  title: string;
+  showLink?: boolean;
+  version?: string;
+}
+
+export const LifecycleEventDetails = ({
+  version,
+  duration,
+  link,
+  startedAt,
+  title,
+  showLink = true,
+}: ILifecycleEventDetailsProps) => {
+  return (
+    <div className="LifecycleEventDetails">
+      <div>
+        <div className="title sp-margin-xs-bottom">{title}</div>
+        <dl className="details sp-margin-s-bottom">
+          {version && <LabeledValue label="Version" value={version} />}
+          <LabeledValue
+            label="Started at"
+            value={
+              `${startedAt?.toFormat(ABSOLUTE_TIME_FORMAT) || 'N/A'}` +
+              ` ` +
+              `${startedAt ? ` (${formatToRelativeTimestamp(startedAt, true)})` : ''}`
+            }
+          />
+          <LabeledValue label="Duration" value={duration || 'N/A'} />
+          {showLink && link && <LabeledValue label="Link" value={<a href={link}>Open</a>} />}
+        </dl>
+      </div>
+    </div>
+  );
+};
+
+type IDeploymentStatusProps = Pick<IVersionMetadataProps, 'deployedAt' | 'isPending' | 'isCurrent' | 'isDeploying'>;
+
+const statusToProps = {
+  CURRENT: {
+    icon: 'cloudDeployed',
+    tooltip: 'Deployed at',
+  },
+  PENDING: {
+    icon: 'cloudWaiting',
+    tooltip: 'Deployment pending',
+  },
+  PREVIOUS: {
+    icon: 'cloudDecommissioned',
+    tooltip: 'Replaced by another version',
+  },
+  SKIPPED: {
+    icon: 'artifactSkipped',
+    tooltip: 'Deployment skipped',
+  },
+} as const;
+
+export const DeploymentStatus = ({ deployedAt, isCurrent, isPending, isDeploying }: IDeploymentStatusProps) => {
+  if (!deployedAt && isDeploying) return null; // We'll show the deploying badge so no reason to show this component if this version is being deployed for the first time
+  const props = statusToProps[deployedAt ? (isCurrent ? 'CURRENT' : 'PREVIOUS') : isPending ? 'PENDING' : 'SKIPPED'];
+  return (
+    <MetadataElement>
+      <IconTooltip
+        tooltip={props.tooltip}
+        name={props.icon}
+        size="14px"
+        wrapperClassName="metadata-icon"
+        delayShow={TOOLTIP_DELAY_SHOW}
+        color={METADATA_TEXT_COLOR}
+      />
+      {deployedAt ? (
+        <>
+          Deployed <RelativeTimestamp timestamp={deployedAt} delayShow={TOOLTIP_DELAY_SHOW} removeStyles withSuffix />
+        </>
+      ) : isPending ? (
+        'Pending'
+      ) : (
+        'Not deployed'
+      )}
+    </MetadataElement>
+  );
+};

package/src/managed/versionMetadata/VersionMetadata.less

@@ -1,12 +1,23 @@
+@textColor: var(--color-nobel);
+
 .VersionMetadata {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-top: var(--xs-spacing);
-  color: var(--color-concrete);
+  margin-top: 6px;
+  color: @textColor;
   white-space: pre-wrap;
   font-size: 13px;
   flex-wrap: wrap;
+  line-height: 1.6;
+
+  i {
+    color: @textColor;
+  }
+
+  .HoverablePopover {
+    text-decoration: none;
+  }
 
   .metadata-icon {
     margin-right: 6px;
@@ -21,25 +32,17 @@
     font-size: 12px;
   }
 
-  .element-actions-menu-toggle {
-    padding: 0 var(--xs-spacing);
-    border: none;
-    font-size: inherit;
-    &:not(:hover) {
-      background-color: transparent;
-    }
-  }
-
   .version-badge {
     border-radius: 3px;
-    padding: 0 var(--s-spacing);
+    padding: 1px var(--s-spacing) 0;
     display: flex;
-    min-width: 60px;
+    min-width: 50px;
     justify-content: center;
     flex-direction: row;
-    & > svg {
-      margin-right: 4px;
-    }
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: 0.4px;
   }
 
   .version-deploying {
@@ -52,6 +55,11 @@
     color: var(--color-black);
   }
 
+  .version-deployed {
+    background-color: var(--color-status-success);
+    color: var(--color-white);
+  }
+
   .version-pinned {
     background-color: var(--color-status-warning-light);
   }
@@ -77,3 +85,24 @@
     }
   }
 }
+
+.LifecycleEventDetails {
+  .title {
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .details {
+    display: grid;
+    grid-template-columns: minmax(80px, auto) auto;
+    column-gap: 10px;
+    align-items: baseline;
+
+    dt {
+      text-transform: uppercase;
+      font-size: 13px;
+      color: var(--color-concrete);
+      font-weight: 600;
+    }
+  }
+}

package/src/managed/versionMetadata/VersionMetadata.tsx

@@ -1,94 +1,90 @@
 import React from 'react';
 
+import type { IVersionMetadataProps } from './MetadataComponents';
+import { METADATA_TEXT_COLOR } from './MetadataComponents';
 import {
   BaseVersionMetadata,
-  IVersionMetadataProps,
+  DeploymentStatus,
+  LifecycleEventDetails,
   MetadataBadge,
   MetadataElement,
   toVetoedMetadata,
   VersionAuthor,
   VersionBuilds,
-  VersionCreatedAt,
   VersionMessage,
-  VersionMetadataActions,
 } from './MetadataComponents';
-import { formatToRelativeTimestamp, RelativeTimestamp } from '../RelativeTimestamp';
-import { getLifecycleEventDuration, getLifecycleEventLink, getLifecycleEventSummary } from '../overview/artifact/utils';
-import { QueryArtifactVersion } from '../overview/types';
-import { IconTooltip } from '../../presentation';
-import { TOOLTIP_DELAY_SHOW } from '../utils/defaults';
-import { SingleVersionArtifactVersion } from '../versionsHistory/types';
+import { formatToRelativeTimestamp } from '../RelativeTimestamp';
+import { getLifecycleEventSummary, isVersionPending } from '../overview/artifact/utils';
+import type { QueryArtifactVersion } from '../overview/types';
+import { HoverablePopover, Icon } from '../../presentation';
+import type { SingleVersionArtifactVersion } from '../versionsHistory/types';
+
+export const getVersionCompareLinks = (version: QueryArtifactVersion | SingleVersionArtifactVersion) => {
+  return {
+    current: version.gitMetadata?.comparisonLinks?.toCurrentVersion,
+    previous: version.gitMetadata?.comparisonLinks?.toPreviousVersion,
+  };
+};
 
 export const getBaseMetadata = (
   version: QueryArtifactVersion | SingleVersionArtifactVersion,
-): Omit<Partial<IVersionMetadataProps>, 'version'> & Pick<IVersionMetadataProps, 'version'> => {
+): Partial<IVersionMetadataProps> => {
+  // The return type above makes everything optional except for the version
   return {
-    version: version.version,
-    sha: version.gitMetadata?.commit,
     build: {
       buildNumber: version.buildNumber,
-      buildLink: getLifecycleEventLink(version, 'BUILD'),
       version: version.version,
+      ...getLifecycleEventSummary(version, 'BUILD'),
     },
     author: version.gitMetadata?.author,
+    isPending: isVersionPending(version),
     deployedAt: version.deployedAt,
-    buildDuration: getLifecycleEventDuration(version, 'BUILD'),
+    isCurrent: version.isCurrent,
     isDeploying: version.status === 'DEPLOYING',
-    baking: getLifecycleEventSummary(version, 'BAKE'),
+    bake: getLifecycleEventSummary(version, 'BAKE'),
     vetoed: version.veto ? toVetoedMetadata(version.veto) : undefined,
   };
 };
 
 export const VersionMetadata = ({
-  version,
-  sha,
   build,
   author,
   deployedAt,
-  createdAt,
-  buildDuration,
-  buildsBehind,
-  baking,
+  isPending,
+  isCurrent,
   isDeploying,
+  buildsBehind,
+  bake,
   pinned,
   vetoed,
-  actions,
 }: IVersionMetadataProps) => {
   return (
     <BaseVersionMetadata>
+      {isCurrent && <MetadataBadge type="deployed" />}
       {isDeploying && <MetadataBadge type="deploying" />}
-      {baking?.isRunning && (
+      {bake?.isRunning && (
         <MetadataBadge
           type="baking"
-          link={baking.link}
-          tooltip={`${baking.startedAt ? formatToRelativeTimestamp(baking.startedAt, true) : ''} (Click to view task)`}
+          link={bake.link}
+          tooltip={`${bake.startedAt ? formatToRelativeTimestamp(bake.startedAt, true) : ''} (Click to view task)`}
         />
       )}
       {build?.buildNumber && <VersionBuilds builds={[build]} />}
-      <VersionCreatedAt createdAt={createdAt} linkProps={sha ? { sha } : { version }} />
       <VersionAuthor author={author} />
-      {deployedAt && (
-        <MetadataElement>
-          <IconTooltip
-            tooltip="Deployed at"
-            name="cloudDeployed"
-            size="12px"
-            wrapperClassName="metadata-icon"
-            delayShow={TOOLTIP_DELAY_SHOW}
-          />
-          <RelativeTimestamp timestamp={deployedAt} delayShow={TOOLTIP_DELAY_SHOW} removeStyles withSuffix />
-        </MetadataElement>
-      )}
-      {buildDuration && (
+      <DeploymentStatus {...{ deployedAt, isCurrent, isPending, isDeploying }} />
+      {bake?.duration && (
         <MetadataElement>
-          <IconTooltip
-            tooltip="Build duration"
-            name="build"
-            size="12px"
-            wrapperClassName="metadata-icon"
-            delayShow={TOOLTIP_DELAY_SHOW}
-          />
-          {buildDuration}
+          <HoverablePopover
+            delayShow={200}
+            wrapperClassName="vertical"
+            Component={() => (
+              <>
+                <LifecycleEventDetails title="Bake" {...bake} />
+              </>
+            )}
+          >
+            <Icon name="bake" size="13px" color={METADATA_TEXT_COLOR} />
+          </HoverablePopover>
         </MetadataElement>
       )}
       {buildsBehind ? (
@@ -96,7 +92,6 @@ export const VersionMetadata = ({
           {buildsBehind} build{buildsBehind > 1 ? 's' : ''} behind
         </MetadataElement>
       ) : null}
-      {actions && <VersionMetadataActions id={`${build?.buildNumber}-actions`} actions={actions} />}
       {pinned && <VersionMessage type="pinned" data={pinned} />}
       {vetoed && <VersionMessage type="vetoed" data={vetoed} />}
     </BaseVersionMetadata>