@spinnaker/kubernetes 0.0.0-main-2

package/src/pipelines/stages/deployManifest/ManifestBindArtifactsSelector.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import type { IArtifact, IExpectedArtifact, IPipeline, IStage } from '@spinnaker/core';
+import { ArtifactTypePatterns, StageArtifactSelector } from '@spinnaker/core';
+
+export interface IManifestBindArtifact {
+  expectedArtifactId?: string;
+  artifact?: IArtifact;
+}
+
+export interface IManifestBindArtifactsSelectorProps {
+  pipeline: IPipeline;
+  stage: IStage;
+  bindings?: IManifestBindArtifact[];
+  onChangeBindings: (_: IManifestBindArtifact[]) => void;
+}
+
+export class ManifestBindArtifactsSelector extends React.Component<IManifestBindArtifactsSelectorProps> {
+  private onChangeBinding = (index: number, binding: IManifestBindArtifact) => {
+    const bindings = (this.props.bindings || []).slice(0);
+    bindings[index] = binding;
+    this.props.onChangeBindings(bindings);
+  };
+
+  private onRemoveBinding = (index: number) => {
+    const bindings = (this.props.bindings || []).slice(0);
+    bindings.splice(index, 1);
+    this.props.onChangeBindings(bindings);
+  };
+
+  public render() {
+    const { stage, pipeline, bindings } = this.props;
+
+    const renderSelect = (i: number, binding?: IManifestBindArtifact) => {
+      const key = (!binding && 'new') || binding.expectedArtifactId || (binding.artifact && binding.artifact.id);
+      return (
+        <div className="row" key={key}>
+          <div className="col-md-10">
+            <StageArtifactSelector
+              pipeline={pipeline}
+              stage={stage}
+              expectedArtifactId={binding && binding.expectedArtifactId}
+              artifact={!!binding && binding.artifact}
+              onArtifactEdited={(artifact: IArtifact) => this.onChangeBinding(i, { artifact: artifact })}
+              onExpectedArtifactSelected={(expectedArtifact: IExpectedArtifact) =>
+                this.onChangeBinding(i, { expectedArtifactId: expectedArtifact.id })
+              }
+              excludedArtifactIds={bindings.map((b) => b.expectedArtifactId)}
+              excludedArtifactTypePatterns={[ArtifactTypePatterns.FRONT50_PIPELINE_TEMPLATE]}
+            />
+          </div>
+          {binding && (
+            <div className="col-md-2">
+              <a className="glyphicon glyphicon-trash" onClick={() => this.onRemoveBinding(i)} />
+            </div>
+          )}
+        </div>
+      );
+    };
+    const renderSelectEditable = (binding: IManifestBindArtifact, i: number) => renderSelect(i, binding);
+
+    return (
+      <>
+        {bindings.map(renderSelectEditable)}
+        {renderSelect(bindings.length)}
+      </>
+    );
+  }
+}

package/src/pipelines/stages/deployManifest/ManifestCopier.spec.ts

@@ -0,0 +1,110 @@
+import type { IQService, IScope } from 'angular';
+import { mock } from 'angular';
+
+import type { Application } from '@spinnaker/core';
+import { ApplicationModelBuilder, noop } from '@spinnaker/core';
+import { ManifestCopier } from './ManifestCopier';
+
+describe('<ManifestCopier />', () => {
+  let application: Application;
+
+  beforeEach(
+    mock.inject(($q: IQService, $rootScope: IScope) => {
+      const $scope = $rootScope.$new();
+      // The application model implicitly depends on a bunch of Angular things, which is why
+      // we need the Angular mock environment (even though we're testing a React component).
+      application = ApplicationModelBuilder.createApplicationForTests(
+        'app',
+        {
+          key: 'serverGroups',
+          loader: () =>
+            $q.resolve([
+              // Replica sets in same cluster, no manager.
+              {
+                name: 'replicaSet my-replicaSet-v002',
+                region: 'default',
+                category: 'serverGroup',
+                account: 'my-k8s-account',
+                cloudProvider: 'kubernetes',
+                cluster: 'replicaSet my-replicaSet',
+              },
+              {
+                name: 'replicaSet my-replicaSet-v001',
+                region: 'default',
+                category: 'serverGroup',
+                account: 'my-k8s-account',
+                cloudProvider: 'kubernetes',
+                cluster: 'replicaSet my-replicaSet',
+              },
+              // Replica set managed by deployment.
+              {
+                name: 'replicaSet my-managed-replicaSet-v001',
+                region: 'default',
+                category: 'serverGroup',
+                account: 'my-k8s-account',
+                cloudProvider: 'kubernetes',
+                cluster: 'deployment my-deployment',
+                serverGroupManagers: [{ name: 'deployment my-deployment' }],
+              },
+            ]),
+          onLoad: (_app: Application, data: any) => $q.resolve(data),
+          defaultData: [],
+        },
+        {
+          key: 'serverGroupManagers',
+          loader: () =>
+            $q.resolve([
+              {
+                name: 'deployment my-deployment',
+                region: 'default',
+                account: 'my-k8s-account',
+                cloudProvider: 'kubernetes',
+              },
+            ]),
+          onLoad: (_app: Application, data: any) => $q.resolve(data),
+          defaultData: [],
+        },
+        {
+          key: 'securityGroups',
+          loader: () => $q.resolve([]),
+          onLoad: (_app: Application, data: any) => $q.resolve(data),
+          defaultData: [],
+        },
+        {
+          key: 'loadBalancers',
+          loader: () => $q.resolve([]),
+          onLoad: (_app: Application, data: any) => $q.resolve(data),
+          defaultData: [],
+        },
+      );
+      application.refresh();
+      $scope.$digest();
+    }),
+  );
+
+  describe('dropdown grouping & ordering', () => {
+    it('sorts deployments to the top of the list', () => {
+      const state = ManifestCopier.getState(buildProps(application));
+      expect(state.manifests.map((manifest) => manifest.name)[0]).toEqual('my-deployment');
+    });
+
+    it('only includes the most recent versioned resource', () => {
+      const state = ManifestCopier.getState(buildProps(application));
+      expect(state.manifests.map((manifest) => manifest.name)).toContain('my-replicaSet-v002');
+      expect(state.manifests.map((manifest) => manifest.name)).not.toContain('my-replicaSet-v001');
+    });
+
+    it('does not include managed server groups', () => {
+      const state = ManifestCopier.getState(buildProps(application));
+      expect(state.manifests.map((manifest) => manifest.name)).not.toContain('my-managed-replicaSet-v001');
+    });
+  });
+});
+
+const buildProps = (application: Application) => ({
+  application,
+  cloudProvider: 'kubernetes',
+  onDismiss: noop,
+  onManifestSelected: noop,
+  show: true,
+});

package/src/pipelines/stages/deployManifest/ManifestCopier.tsx

@@ -0,0 +1,222 @@
+import { groupBy, sortBy } from 'lodash';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import type { Option } from 'react-select';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type {
+  Application,
+  ILoadBalancer,
+  IManifest,
+  ISecurityGroup,
+  IServerGroup,
+  IServerGroupManager,
+} from '@spinnaker/core';
+import { AccountTag, ManifestReader, ModalClose, noop, robotToHuman, TetheredSelect } from '@spinnaker/core';
+
+export interface IManifestCopierProps {
+  application: Application;
+  cloudProvider: string;
+  show: boolean;
+  onDismiss: () => void;
+  onManifestSelected: (manifest: IManifest) => void;
+}
+
+export interface IManifestCopierState {
+  selectedManifest: IManifestOption;
+  manifests: IManifestOption[];
+}
+
+export interface IManifestOption {
+  account: string;
+  location: string;
+  name: string;
+  kind: string;
+  data: any;
+  key: string;
+}
+
+const LAST_APPLIED_CONFIGURATION = 'kubectl.kubernetes.io/last-applied-configuration';
+
+/*
+ * A modal that allows a user to copy a running Kubernetes resource.
+ **/
+export class ManifestCopier extends React.Component<IManifestCopierProps, IManifestCopierState> {
+  private destroy$ = new Subject();
+
+  public static getState = (props: IManifestCopierProps) => {
+    let manifests: IManifestOption[] = [];
+
+    const serverGroups: IServerGroup[] = props.application.getDataSource('serverGroups').data.filter(
+      (s: IServerGroup) =>
+        s.cloudProvider === props.cloudProvider &&
+        s.category === 'serverGroup' &&
+        // Don't include managed server groups - just the manager (see below).
+        !(s.serverGroupManagers || []).length,
+    );
+
+    const grouped = groupBy(serverGroups, (serverGroup) =>
+      [serverGroup.cluster, serverGroup.account, serverGroup.region].join(':'),
+    );
+
+    Object.keys(grouped).forEach((key) => {
+      // Only include the most recent server group in a cluster (e.g., if v001 and v002 exist, only include v002).
+      const latest = sortBy(grouped[key], 'name').pop();
+      const [kind, name] = latest.name.split(' ');
+      manifests.push({
+        account: latest.account,
+        location: latest.region,
+        name: name,
+        kind: kind,
+        data: latest,
+        key: [latest.account, latest.region, latest.name].join(':'),
+      });
+    });
+
+    const serverGroupManagers: IServerGroupManager[] = props.application.getDataSource('serverGroupManagers').data;
+    const loadBalancers: ILoadBalancer[] = props.application.getDataSource('loadBalancers').data;
+    const firewalls: ISecurityGroup[] = props.application.getDataSource('securityGroups').data;
+
+    [...serverGroupManagers, ...loadBalancers, ...firewalls]
+      .filter(
+        (manifest: IServerGroupManager | ILoadBalancer | ISecurityGroup) =>
+          manifest.cloudProvider === props.cloudProvider,
+      )
+      .forEach((manifest: IServerGroupManager | ILoadBalancer | ISecurityGroup) => {
+        const [kind, name] = manifest.name.split(' ');
+        manifests.push({
+          account: manifest.account,
+          location: manifest.region,
+          name,
+          kind,
+          data: manifest,
+          key: [manifest.account, manifest.region, manifest.name].join(':'),
+        });
+      });
+
+    manifests = sortBy(
+      manifests,
+      (manifest) => {
+        // TODO(dpeach): Could load an account here, then use the spinnakerKind -> kubernetesKind map to
+        // construct a more maintainable ordering.
+        const order = [
+          // server group manager
+          'deployment',
+          // server group
+          'replicaSet',
+          'statefulSet',
+          'daemonSet',
+          'jobs',
+          'cronJob',
+          // load balancer
+          'service',
+          'ingress',
+          // firewall
+          'networkPolicy',
+        ];
+        return order.includes(manifest.kind) ? order.indexOf(manifest.kind) : Number.MAX_SAFE_INTEGER;
+      },
+      ['kind', 'name', 'location'],
+    );
+
+    return {
+      selectedManifest: manifests.length ? manifests[0] : null,
+      manifests,
+    };
+  };
+
+  constructor(props: IManifestCopierProps) {
+    super(props);
+    this.state = ManifestCopier.getState(props);
+  }
+
+  public useManifest = (): void => {
+    const {
+      data: { account, region, name },
+    } = this.state.selectedManifest;
+    observableFrom(ManifestReader.getManifest(account, region, name))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((manifest: IManifest) => {
+        this.props.onManifestSelected(JSON.parse(manifest.manifest.metadata.annotations[LAST_APPLIED_CONFIGURATION]));
+      });
+  };
+
+  public manifestChanged = (option: Option) => {
+    this.setState({ selectedManifest: option as IManifestOption });
+  };
+
+  public componentWillUnmount() {
+    this.destroy$.next();
+  }
+
+  public render() {
+    const { selectedManifest, manifests } = this.state;
+
+    return (
+      <Modal show={this.props.show} onHide={noop}>
+        <ModalClose dismiss={this.props.onDismiss} />
+        <div>
+          <Modal.Header>
+            <Modal.Title>Copy Manifest</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <form className="form-horizontal">
+              <div className="form-group">
+                <div className="col-md-4 col-md-offset-1 sm-label-left">
+                  <b>Copy manifest from</b>
+                </div>
+              </div>
+              <div className="form-group">
+                <div className="col-md-10 col-md-offset-1">
+                  <TetheredSelect
+                    value={selectedManifest ? selectedManifest.key : null}
+                    placeholder="Select..."
+                    valueRenderer={this.manifestValueRenderer}
+                    optionRenderer={this.manifestOptionRenderer}
+                    options={manifests}
+                    valueKey="key"
+                    onChange={this.manifestChanged}
+                    clearable={false}
+                  />
+                </div>
+              </div>
+            </form>
+          </Modal.Body>
+          <div className="modal-footer">
+            {selectedManifest && (
+              <button className="btn btn-primary" onClick={this.useManifest}>
+                <span>Use this manifest</span>
+                <span className="glyphicon glyphicon-chevron-right" />
+              </button>
+            )}
+            {!selectedManifest && (
+              <button className="btn" onClick={this.props.onDismiss}>
+                <span>Cancel</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+
+  private manifestValueRenderer = (option: Option) => {
+    const kindLabel = robotToHuman(option.kind).trim();
+    return (
+      <span>
+        <AccountTag account={option.account} />
+        {option.data && <span> {option.name}</span>} ({kindLabel} in {option.location})
+      </span>
+    );
+  };
+
+  private manifestOptionRenderer = (option: Option) => {
+    const kindLabel = robotToHuman(option.kind).trim();
+    return (
+      <h5>
+        <AccountTag account={option.account} /> {option.name} ({kindLabel} in {option.location})
+      </h5>
+    );
+  };
+}

package/src/pipelines/stages/deployManifest/ManifestDeploymentOptions.spec.tsx

@@ -0,0 +1,75 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { StageConfigField } from '@spinnaker/core';
+
+import type { IManifestDeploymentOptionsProps } from './ManifestDeploymentOptions';
+import { defaultTrafficManagementConfig, ManifestDeploymentOptions } from './ManifestDeploymentOptions';
+
+describe('<ManifestDeploymentOptions />', () => {
+  const onConfigChangeSpy = jasmine.createSpy('onConfigChangeSpy');
+  let wrapper: any;
+  let props: IManifestDeploymentOptionsProps;
+
+  beforeEach(() => {
+    props = {
+      accounts: [],
+      config: defaultTrafficManagementConfig,
+      onConfigChange: onConfigChangeSpy,
+      selectedAccount: null,
+    };
+    wrapper = shallow(<ManifestDeploymentOptions {...props} />);
+  });
+
+  describe('view', () => {
+    it('renders only the enable checkbox when config is disabled', () => {
+      expect(wrapper.find(StageConfigField).length).toEqual(1);
+      expect(wrapper.find('input[type="checkbox"]').length).toEqual(1);
+    });
+    it('renders config fields for `namespace`, `services`, `enableTraffic`, and `strategy` when config is enabled', () => {
+      props.config.enabled = true;
+      wrapper = shallow(<ManifestDeploymentOptions {...props} />);
+      expect(wrapper.find(StageConfigField).length).toEqual(5);
+    });
+  });
+
+  describe('functionality', () => {
+    it('updates `config.enabled` when enable checkbox is toggled', () => {
+      wrapper
+        .find('input[type="checkbox"]')
+        .at(0)
+        .simulate('change', { target: { checked: true } });
+      expect(onConfigChangeSpy).toHaveBeenCalledWith({
+        ...defaultTrafficManagementConfig,
+        enabled: true,
+      });
+    });
+    it('disables the traffic checkbox when a non-None rollout strategy is selected', () => {
+      props.config.options.strategy = 'redblack';
+      wrapper = shallow(<ManifestDeploymentOptions {...props} />);
+      expect(wrapper.find('input[type="checkbox"]').at(1).props().disabled).toEqual(true);
+    });
+    it('disables the traffic checkbox when blue/green rollout strategy is selected', () => {
+      props.config.options.strategy = 'bluegreen';
+      wrapper = shallow(<ManifestDeploymentOptions {...props} />);
+      expect(wrapper.find('input[type="checkbox"]').at(1).props().disabled).toEqual(true);
+    });
+
+    it('strategy bluegreen should not display warning label', () => {
+      props.config.options.strategy = 'bluegreen';
+      wrapper = shallow(<ManifestDeploymentOptions {...props} />);
+      expect(wrapper.find('p[id="redBlackWarning"]').exists()).toEqual(false);
+    });
+    it('strategy highlander should not display warning label', () => {
+      props.config.options.strategy = 'highlander';
+      wrapper = shallow(<ManifestDeploymentOptions {...props} />);
+      expect(wrapper.find('p[id="redBlackWarning"]').exists()).toEqual(false);
+    });
+
+    it('strategy redblack should display warning label', () => {
+      props.config.options.strategy = 'redblack';
+      wrapper = shallow(<ManifestDeploymentOptions {...props} />);
+      expect(wrapper.find('p[id="redBlackWarning"]').exists()).toEqual(true);
+    });
+  });
+});

package/src/pipelines/stages/deployManifest/ManifestDeploymentOptions.tsx

@@ -0,0 +1,203 @@
+import { cloneDeep, map, set, split } from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select, { Creatable } from 'react-select';
+
+import type { IAccountDetails, IDeploymentStrategy } from '@spinnaker/core';
+import { Markdown, StageConfigField } from '@spinnaker/core';
+
+import { NamespaceSelector } from './NamespaceSelector';
+import { ManifestKindSearchService } from '../../../manifest/ManifestKindSearch';
+import { rolloutStrategies } from '../../../rolloutStrategy';
+
+export interface ITrafficManagementConfig {
+  enabled: boolean;
+  options: ITrafficManagementOptions;
+}
+
+export interface ITrafficManagementOptions {
+  namespace: string;
+  services: string[];
+  enableTraffic: boolean;
+  strategy: string;
+}
+
+export const defaultTrafficManagementConfig: ITrafficManagementConfig = {
+  enabled: false,
+  options: {
+    namespace: null,
+    services: [],
+    enableTraffic: false,
+    strategy: null,
+  },
+};
+
+export interface IManifestDeploymentOptionsProps {
+  accounts: IAccountDetails[];
+  config: ITrafficManagementConfig;
+  onConfigChange: (config: ITrafficManagementConfig) => void;
+  selectedAccount: string;
+}
+
+export interface IManifestDeploymentOptionsState {
+  services: string[];
+  showRedBlackWarningMessage: boolean;
+}
+
+export class ManifestDeploymentOptions extends React.Component<
+  IManifestDeploymentOptionsProps,
+  IManifestDeploymentOptionsState
+> {
+  public state: IManifestDeploymentOptionsState = { services: [], showRedBlackWarningMessage: false };
+
+  private onConfigChange = (key: string, value: any): void => {
+    this.setState({ showRedBlackWarningMessage: false });
+    if (value === 'redblack') {
+      value = 'bluegreen';
+      this.setState({ showRedBlackWarningMessage: true });
+    }
+    this.updateProps(key, value);
+  };
+
+  private updateProps(key: string, value: any) {
+    const updatedConfig = cloneDeep(this.props.config);
+    set(updatedConfig, key, value);
+    this.props.onConfigChange(updatedConfig);
+  }
+
+  private fetchServices = (): void => {
+    const namespace = this.props.config.options.namespace;
+    const account = this.props.selectedAccount;
+    if (!namespace || !account) {
+      this.setState({
+        services: [],
+      });
+    }
+    ManifestKindSearchService.search('service', namespace, account).then((services) => {
+      this.setState({ services: map(services, 'name') });
+    });
+  };
+
+  private getServiceOptions = (): Array<Option<string>> => {
+    const options = this.state.services.map((service) => ({ label: split(service, ' ')[1], value: service }));
+    (this.props.config.options.services || []).forEach((service) => {
+      if (!this.state.services.includes(service)) {
+        options.push({ label: service, value: service });
+      }
+    });
+    return options;
+  };
+
+  private strategyOptionRenderer = (option: IDeploymentStrategy) => {
+    return (
+      <div className="body-regular">
+        <strong>
+          <Markdown tag="span" message={option.label} />
+        </strong>
+        <div>
+          <Markdown tag="span" message={option.description} />
+        </div>
+      </div>
+    );
+  };
+
+  public componentDidMount() {
+    this.fetchServices();
+    this.setState({ showRedBlackWarningMessage: false });
+    if (this.props.config.options.strategy === 'redblack') {
+      this.setState({ showRedBlackWarningMessage: true });
+      this.updateProps('options.strategy', 'bluegreen');
+    }
+  }
+
+  public componentDidUpdate(prevProps: IManifestDeploymentOptionsProps) {
+    if (prevProps.selectedAccount !== this.props.selectedAccount) {
+      this.updateProps('options.namespace', null);
+    }
+
+    if (prevProps.config.options.namespace !== this.props.config.options.namespace) {
+      this.updateProps('options.services', null);
+      this.fetchServices();
+    }
+
+    if (!this.props.config.options.enableTraffic && !!this.props.config.options.strategy) {
+      this.updateProps('options.enableTraffic', true);
+    }
+  }
+
+  public render() {
+    const { config } = this.props;
+    const { showRedBlackWarningMessage } = this.state;
+    return (
+      <>
+        <h4>Rollout Strategy Options</h4>
+        <StageConfigField helpKey="kubernetes.manifest.rolloutStrategyOptions" fieldColumns={8} label="Enable">
+          <div className="checkbox">
+            <label>
+              <input
+                checked={config.enabled}
+                onChange={(e) => this.onConfigChange('enabled', e.target.checked)}
+                type="checkbox"
+              />
+              Spinnaker manages traffic based on your selected strategy
+            </label>
+          </div>
+        </StageConfigField>
+        {config.enabled && (
+          <>
+            <StageConfigField fieldColumns={8} label="Service(s) Namespace">
+              <NamespaceSelector
+                createable={true}
+                onChange={(namespace: string): void => this.onConfigChange('options.namespace', namespace)}
+                accounts={this.props.accounts}
+                selectedAccount={this.props.selectedAccount}
+                selectedNamespace={config.options.namespace || ''}
+              />
+            </StageConfigField>
+            <StageConfigField fieldColumns={8} label="Service(s)">
+              <Creatable
+                clearable={false}
+                multi={true}
+                onChange={(options) => this.onConfigChange('options.services', map(options, 'value'))}
+                options={this.getServiceOptions()}
+                value={config.options.services}
+              />
+            </StageConfigField>
+            <StageConfigField fieldColumns={8} label="Traffic">
+              <div className="checkbox">
+                <label>
+                  <input
+                    checked={config.options.enableTraffic}
+                    disabled={!!config.options.strategy}
+                    onChange={(e) => this.onConfigChange('options.enableTraffic', e.target.checked)}
+                    type="checkbox"
+                  />
+                  Send client requests to new pods
+                </label>
+              </div>
+            </StageConfigField>
+            <StageConfigField fieldColumns={8} helpKey="kubernetes.manifest.rolloutStrategy" label="Strategy">
+              <Select
+                id={'strategyDropdown'}
+                clearable={false}
+                onChange={(option: Option<IDeploymentStrategy>) => this.onConfigChange('options.strategy', option.key)}
+                options={rolloutStrategies}
+                optionRenderer={this.strategyOptionRenderer}
+                placeholder="None"
+                value={config.options.strategy}
+                valueKey="key"
+                valueRenderer={(o) => <>{o.label}</>}
+              />
+              {showRedBlackWarningMessage && (
+                <p id={'redBlackWarning'} style={{ color: 'orange' }}>
+                  Warning: Red/black strategy is deprecated and will be removed soon. We automatically selected
+                  blue/green instead!
+                </p>
+              )}
+            </StageConfigField>
+          </>
+        )}
+      </>
+    );
+  }
+}