@spinnaker/core 0.14.0 → 0.15.1

package/src/healthCounts/HealthCounts.spec.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { mount, shallow } from 'enzyme';
+import React from 'react';
 
 import { HealthCounts } from './HealthCounts';
-import { IInstanceCounts } from '../domain';
+import type { IInstanceCounts } from '../domain';
 
 describe('<HealthCounts />', () => {
   it('displays nothing when container has no health info', () => {

package/src/history/recentHistory.service.spec.ts

@@ -1,7 +1,8 @@
 import { range, some } from 'lodash';
 
+import type { ICache } from '../cache/deckCacheFactory';
+import { DeckCacheFactory } from '../cache/deckCacheFactory';
 import { RecentHistoryService } from '../history/recentHistory.service';
-import { DeckCacheFactory, ICache } from '../cache/deckCacheFactory';
 
 describe('recent history service', () => {
   let backingCache: ICache;

package/src/insight/InsightMenu.spec.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
 import { mock } from 'angular';
-import { ReactWrapper, mount } from 'enzyme';
-import { IInsightMenuProps, IInsightMenuState, InsightMenu } from './InsightMenu';
-import { IModalService } from 'angular-ui-bootstrap';
-import { OverrideRegistry } from '../overrideRegistry/override.registry';
-import { CacheInitializerService } from '../cache/cacheInitializer.service';
+import type { IModalService } from 'angular-ui-bootstrap';
+import type { ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import React from 'react';
 import { Button } from 'react-bootstrap';
 
+import type { IInsightMenuProps, IInsightMenuState } from './InsightMenu';
+import { InsightMenu } from './InsightMenu';
+import type { CacheInitializerService } from '../cache/cacheInitializer.service';
+import { OverrideRegistry } from '../overrideRegistry/override.registry';
+
 beforeEach(() => {
   mock.module(($provide: any) => {
     $provide.value('$uibModal', {} as IModalService);

package/src/instance/instance.write.service.spec.ts

@@ -1,15 +1,16 @@
 import { mock } from 'angular';
 
+import type { Application } from '../application/application.model';
+import { ApplicationModelBuilder } from '../application/applicationModel.builder';
 import { PROVIDER_SERVICE_DELEGATE } from '../cloudProvider';
-import { IMultiInstanceGroup, InstanceWriter } from './instance.write.service';
-import { Application } from '../application/application.model';
+import type { IInstance, IServerGroup } from '../domain';
+import type { IMultiInstanceGroup } from './instance.write.service';
+import { InstanceWriter } from './instance.write.service';
 import { REACT_MODULE } from '../reactShims';
-import { ApplicationModelBuilder } from '../application/applicationModel.builder';
-import { IInstance, IServerGroup } from '../domain';
-import * as State from '../state';
-
 import { ServerGroupReader } from '../serverGroup/serverGroupReader.service';
-import { IJob, ITaskCommand, TaskExecutor } from '../task/taskExecutor';
+import * as State from '../state';
+import type { IJob, ITaskCommand } from '../task/taskExecutor';
+import { TaskExecutor } from '../task/taskExecutor';
 
 describe('Service: instance writer', function () {
   let $q: ng.IQService;

package/src/instance/instanceType.service.ts

@@ -1,4 +1,5 @@
 import { module } from 'angular';
+import { uniq } from 'lodash';
 import type { ProviderServiceDelegate } from '../cloudProvider/providerService.delegate';
 import { PROVIDER_SERVICE_DELEGATE } from '../cloudProvider/providerService.delegate';
 
@@ -15,8 +16,8 @@ export interface IInstanceTypesByRegion {
 
 export interface IInstanceStorage {
   type: string;
-  size: number;
-  count: number;
+  size?: number;
+  count?: number;
   isDefault?: boolean;
 }
 
@@ -81,6 +82,15 @@ export class InstanceTypeService {
     });
   }
 
+  public getCategoryForMultipleInstanceTypes(cloudProvider: string, instanceTypes: string[]) {
+    const promises = instanceTypes.map((it) => this.getCategoryForInstanceType(cloudProvider, it));
+
+    return Promise.all(promises).then((categories: string[]) => {
+      const distinctCategories = uniq(categories);
+      return distinctCategories.length === 1 ? distinctCategories[0] : 'custom';
+    });
+  }
+
   public getInstanceTypeDetails(cloudProvider: string, instanceType: string): PromiseLike<IPreferredInstanceType> {
     return this.getInstanceTypeCategory(cloudProvider, instanceType).then((category: IInstanceTypeCategory) => {
       if (category && category.families && category.families.length && category.families[0].instanceTypes) {

package/src/instance/instanceTypeService.spec.ts

@@ -1,6 +1,7 @@
 import { mock } from 'angular';
 
-import { INSTANCE_TYPE_SERVICE, InstanceTypeService, IInstanceTypeCategory } from './instanceType.service';
+import type { IInstanceTypeCategory, InstanceTypeService } from './instanceType.service';
+import { INSTANCE_TYPE_SERVICE } from './instanceType.service';
 
 describe('Service: instanceTypeService', function () {
   let instanceTypeService: InstanceTypeService, $q: ng.IQService, $scope: ng.IScope;

package/src/loadBalancer/LoadBalancersTag.spec.tsx

@@ -1,12 +1,14 @@
-import { mock, IQService, IScope } from 'angular';
+import type { IQService, IScope } from 'angular';
+import { mock } from 'angular';
+import type { ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
-import { ReactWrapper, mount } from 'enzyme';
 
-import { Application } from '../application/application.model';
-import { ApplicationModelBuilder } from '../application/applicationModel.builder';
-import { ILoadBalancersTagProps } from './LoadBalancersTagWrapper';
 import { LoadBalancersTag } from './LoadBalancersTag';
-import { IServerGroup } from '../domain';
+import type { ILoadBalancersTagProps } from './LoadBalancersTagWrapper';
+import type { Application } from '../application/application.model';
+import { ApplicationModelBuilder } from '../application/applicationModel.builder';
+import type { IServerGroup } from '../domain';
 import { HoverablePopover } from '../presentation';
 
 describe('<LoadBalancersTag />', () => {

package/src/loadBalancer/filter/LoadBalancerFilterService.spec.ts

@@ -1,6 +1,6 @@
-import { Application } from '../../application/application.model';
+import type { Application } from '../../application/application.model';
 import { ApplicationModelBuilder } from '../../application/applicationModel.builder';
-import { ILoadBalancer, IServerGroup, ILoadBalancerGroup, IManagedResourceSummary } from '../../domain';
+import type { ILoadBalancer, ILoadBalancerGroup, IManagedResourceSummary, IServerGroup } from '../../domain';
 import { LoadBalancerState } from '../../state';
 
 // Most of this logic has been moved to filter.model.service.js, so these act more as integration tests

package/src/managed/Environments.less

@@ -1,7 +1,7 @@
-.Environments2 {
+.Environments {
   width: 100%;
   padding: 0 var(--l-spacing);
-  --base-horizontal-padding: var(--xl-spacing);
+  --base-horizontal-padding: 20px;
 
   @media (max-width: 768px) {
     padding: 0;
@@ -55,11 +55,11 @@
     display: grid;
     gap: var(--m-spacing);
     align-items: flex-start;
-    --row-element-icon-width: 40px;
+    --row-element-icon-width: 32px;
 
     &.grid-view {
       gap: var(--xl-spacing) var(--m-spacing);
-      --row-element-icon-width: 32px;
+      --row-element-icon-width: 26px;
     }
   }
 }

package/src/managed/Environments.tsx

@@ -31,7 +31,7 @@ export const Environments = () => {
   }, [params]);
 
   return (
-    <div className="vertical Environments2">
+    <div className="vertical Environments">
       <HorizontalTabs
         tabs={tabs}
         rightElement={!state.name?.endsWith('.config') ? <EnvironmentsDirectionController /> : undefined}

package/src/managed/RelativeTimestamp.tsx

@@ -31,6 +31,13 @@ export const DurationRender: React.FC<{ startedAt: string; completedAt?: string
   return <>{timeDiffToString(startAtDateTime, endTime)}</>;
 };
 
+const toDateTime = (timestamp: DateTime | string | number) =>
+  typeof timestamp === 'number'
+    ? DateTime.fromMillis(timestamp)
+    : typeof timestamp === 'string'
+    ? DateTime.fromISO(timestamp)
+    : timestamp;
+
 export const formatToRelativeTimestamp = (timestamp: DateTime, withSuffix: boolean) => {
   const distance = getDistanceFromNow(timestamp);
   const suffix = withSuffix ? ' ago' : '';
@@ -68,12 +75,7 @@ export const RelativeTimestamp = memo(
     removeStyles,
     withSuffix = false,
   }: IRelativeTimestampProps) => {
-    const dateTimeTimestamp =
-      typeof originalTimestamp === 'number'
-        ? DateTime.fromMillis(originalTimestamp)
-        : typeof originalTimestamp === 'string'
-        ? DateTime.fromISO(originalTimestamp)
-        : originalTimestamp;
+    const dateTimeTimestamp = toDateTime(originalTimestamp);
     const timestamp = TIMEZONE ? dateTimeTimestamp.setZone(TIMEZONE) : dateTimeTimestamp;
     const [formattedTimestamp, setFormattedTimestamp] = useState(formatToRelativeTimestamp(timestamp, withSuffix));
 

package/src/managed/artifactActions/ArtifactActions.tsx

@@ -0,0 +1,77 @@
+import classnames from 'classnames';
+import React from 'react';
+import { Dropdown, MenuItem } from 'react-bootstrap';
+
+import { ACTION_BUTTON_CLASS_NAME } from '../utils/defaults';
+import { useLogEvent } from '../utils/logging';
+import type { ICompareLinks } from '../versionMetadata/MetadataComponents';
+
+export interface VersionAction {
+  onClick?: () => void;
+  href?: string;
+  content: string;
+  disabled?: boolean;
+}
+
+interface IArtifactActionsProps {
+  actions?: VersionAction[];
+  version: string;
+  buildNumber?: string;
+  compareLinks?: ICompareLinks;
+  className?: string;
+}
+
+export const ArtifactActions = ({ version, buildNumber, actions, compareLinks, className }: IArtifactActionsProps) => {
+  const compareActions: VersionAction[] = [
+    { content: 'Current version', href: compareLinks?.current, disabled: !compareLinks?.current },
+    { content: 'Previous version', href: compareLinks?.previous, disabled: !compareLinks?.previous },
+  ];
+  return (
+    <div className={classnames('horizontal md-actions-gap', className)}>
+      {actions?.map((action) => (
+        <button
+          key={action.content}
+          className={ACTION_BUTTON_CLASS_NAME}
+          disabled={action.disabled}
+          onClick={action.onClick}
+        >
+          {action.content}
+        </button>
+      ))}
+      <CompareToMenu id={`${version}-${buildNumber}-compare`} title="Compare to" actions={compareActions} />
+    </div>
+  );
+};
+
+export interface ICompareToMenuProps {
+  id: string;
+  actions: VersionAction[];
+  title: string;
+  className?: string;
+  pullRight?: boolean;
+}
+
+const CompareToMenu = ({ id, title, actions, className, pullRight }: ICompareToMenuProps) => {
+  const logEvent = useLogEvent('ArtifactActions');
+  return (
+    <Dropdown id={id} className={classnames('ArtifactActionsMenu', className)} pullRight={pullRight}>
+      <Dropdown.Toggle className="md-btn md-action-button">{title}</Dropdown.Toggle>
+      <Dropdown.Menu>
+        {actions.map((action, index) => (
+          <MenuItem
+            key={index}
+            disabled={action.disabled}
+            onClick={() => {
+              action.onClick?.();
+              logEvent({ action: `Compare to - ${action.content}` });
+            }}
+            href={action.href}
+            target="_blank"
+          >
+            {action.content}
+          </MenuItem>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};

package/src/managed/constraints/AllowedTimes.spec.ts

@@ -1,4 +1,5 @@
-import { groupConsecutiveNumbers, groupDays, groupHours, GroupRange } from './AllowedTimes';
+import type { GroupRange } from './AllowedTimes';
+import { groupConsecutiveNumbers, groupDays, groupHours } from './AllowedTimes';
 
 describe('days and hours grouping', () => {
   it('test grouping', () => {

package/src/managed/constraints/registry.tsx

@@ -29,6 +29,7 @@ export interface IConstraintHandler<K = string> {
   /** The icon can be a string (from IconNames) or a partial map from statuses to IconNames */
   iconName: IconNames | { [status in ConstraintStatus | 'DEFAULT']?: IconNames };
 
+  /** Stricter format of the title */
   displayTitle?: {
     /** A user friendly name of the constraint */
     displayName: string;
@@ -37,7 +38,7 @@ export interface IConstraintHandler<K = string> {
     displayStatus: (props: { constraint: RelaxedConstraint }) => string;
   };
 
-  /** Render function of the constraint title. If displayTitle exists it takes precedence */
+  /** DEPRECATED - Render function of the constraint title. If displayTitle exists it takes precedence */
   titleRender?: React.ComponentType<{ constraint: RelaxedConstraint }>;
 
   /** Optional render function of the constraint description */
@@ -45,6 +46,12 @@ export interface IConstraintHandler<K = string> {
 
   /** Display actions to override the constraint - (fail or pass) */
   overrideActions?: { [status in ConstraintStatus]?: IConstraintOverrideAction[] };
+
+  /** determines when to show the restart constraint button. By default, only when the status is FAIL  */
+  restartProps?: {
+    isVisible?: (props: { constraint: RelaxedConstraint }) => boolean;
+    displayName?: string;
+  };
 }
 
 class ConstraintsManager extends BasePluginManager<IConstraintHandler> {
@@ -107,6 +114,19 @@ class ConstraintsManager extends BasePluginManager<IConstraintHandler> {
     const actions = this.getHandler(constraint.type)?.overrideActions;
     return actions?.[constraint.status];
   }
+
+  private defaultShowRestart = ({ constraint }: { constraint: RelaxedConstraint }) => {
+    return constraint.status === 'FAIL';
+  };
+
+  isRestartVisible(constraint: IConstraint): boolean {
+    const showRestartFunc = this.getHandler(constraint.type)?.restartProps?.isVisible || this.defaultShowRestart;
+    return showRestartFunc({ constraint });
+  }
+
+  getRestartDisplayName(constraint: IConstraint): string {
+    return this.getHandler(constraint.type)?.restartProps?.displayName || 'Reset';
+  }
 }
 
 const baseHandlers: Array<IConstraintHandler<IConstraint['type']>> = [
@@ -126,6 +146,9 @@ const baseHandlers: Array<IConstraintHandler<IConstraint['type']>> = [
         },
       ],
     },
+    restartProps: {
+      isVisible: () => false,
+    },
   },
   {
     kind: 'depends-on',
@@ -134,6 +157,9 @@ const baseHandlers: Array<IConstraintHandler<IConstraint['type']>> = [
       displayName: 'Depends on',
       displayStatus: getDependsOnStatus,
     },
+    restartProps: {
+      isVisible: () => false,
+    },
   },
   {
     kind: 'manual-judgement',

package/src/managed/environmentBaseElements/BaseEnvironment.less

@@ -14,8 +14,8 @@
     flex-direction: column;
     justify-content: center;
     padding: var(--m-spacing) var(--base-horizontal-padding);
-    color: var(--color-primary);
-    background-color: var(--color-accent-g4);
+    color: var(--color-white);
+    background-color: var(--color-primary-g1);
     border-radius: @borderRadius @borderRadius 0 0;
 
     .env-link {
@@ -35,7 +35,7 @@
       &:not(.preview-env) {
         text-transform: uppercase;
       }
-      font-size: 18px;
+      font-size: 20px;
       font-weight: 700;
     }
 

package/src/managed/environmentBaseElements/EnvironmentItem.tsx

@@ -6,12 +6,14 @@ import { IconTooltip } from '../../presentation';
 
 import { TOOLTIP_DELAY_SHOW } from '../utils/defaults';
 
-interface IEnvironmentItemProps {
+export interface IEnvironmentItemProps {
   title: string | React.ReactElement;
   className?: string;
   iconTooltip: string;
   iconName: IIconProps['name'];
+  withPadding?: boolean;
   size?: 'regular' | 'small';
+  rightElement?: React.ReactElement;
 }
 
 export const EnvironmentItem: React.FC<IEnvironmentItemProps> = ({
@@ -20,21 +22,26 @@ export const EnvironmentItem: React.FC<IEnvironmentItemProps> = ({
   iconName,
   iconTooltip,
   className,
+  rightElement,
+  withPadding = true,
   children,
 }) => {
   return (
-    <div className={classnames(className, 'environment-row-element')}>
+    <div className={classnames(className, 'environment-row-element', { 'with-padding': withPadding })}>
       <div className={classnames('row-icon', size)}>
         <IconTooltip
           tooltip={iconTooltip}
           name={iconName}
           color="primary-g1"
-          size={size === 'regular' ? '18px' : '16px'}
+          size={size === 'regular' ? '17px' : '15px'}
           delayShow={TOOLTIP_DELAY_SHOW}
         />
       </div>
       <div className="row-details">
-        <div className={classnames('row-title', size)}>{title}</div>
+        <div className={classnames('row-title', size)}>
+          {title}
+          {rightElement && <div>{rightElement}</div>}
+        </div>
         {children}
       </div>
     </div>