@spinnaker/core 0.0.0-2025.1-0

package/src/pipeline/config/templates/v2/PipelineTemplatesV2.tsx

@@ -0,0 +1,315 @@
+import { UISref } from '@uirouter/react';
+import { flatMap, get, memoize } from 'lodash';
+import { DateTime } from 'luxon';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import type { Subscription } from 'rxjs';
+
+import { DeletePipelineTemplateV2Modal } from './DeletePipelineTemplateV2Modal';
+import { PipelineTemplateReader } from '../PipelineTemplateReader';
+import { ShowPipelineTemplateJsonModal } from '../../actions/templateJson/ShowPipelineTemplateJsonModal';
+import { CreatePipelineFromTemplate } from './createPipelineFromTemplate';
+import type {
+  IPipelineTemplateV2,
+  IPipelineTemplateV2Collections,
+  IPipelineTemplateV2VersionSelections,
+} from '../../../../domain/IPipelineTemplateV2';
+import { PipelineTemplateV2Service } from './pipelineTemplateV2.service';
+import { ReactSelectInput } from '../../../../presentation';
+import type { IStateChange } from '../../../../reactShims';
+import { ReactInjector } from '../../../../reactShims';
+
+import './PipelineTemplatesV2.less';
+
+const { convertTemplateVersionToId, getTemplateVersion } = PipelineTemplateV2Service;
+
+export interface IPipelineTemplatesV2State {
+  fetchError: string;
+  searchValue: string;
+  viewTemplateVersion?: string;
+  deleteTemplateVersion?: string;
+  selectedTemplate: IPipelineTemplateV2;
+  templateVersionSelections: IPipelineTemplateV2VersionSelections;
+  templates: IPipelineTemplateV2Collections;
+}
+
+export const PipelineTemplatesV2Error = (props: { message: string }) => {
+  return (
+    <div className="pipeline-templates-error-banner horizontal middle center heading-4">
+      <i className="fa fa-exclamation-triangle" />
+      <span>{props.message}</span>
+    </div>
+  );
+};
+
+export class PipelineTemplatesV2 extends React.Component<{}, IPipelineTemplatesV2State> {
+  private routeChangedSubscription: Subscription = null;
+
+  public state: IPipelineTemplatesV2State = {
+    fetchError: null,
+    searchValue: '',
+    selectedTemplate: null,
+    templates: {},
+    viewTemplateVersion: ReactInjector.$stateParams.templateId,
+    templateVersionSelections: {},
+  };
+
+  public componentDidMount() {
+    this.fetchTemplates();
+    this.routeChangedSubscription = ReactInjector.stateEvents.stateChangeSuccess.subscribe(this.onRouteChanged);
+  }
+
+  public componentWillUnmount() {
+    this.routeChangedSubscription.unsubscribe();
+  }
+
+  private fetchTemplates() {
+    PipelineTemplateReader.getV2PipelineTemplateList().then(
+      (templates) => this.setState({ templates, templateVersionSelections: {} }),
+      (err) => {
+        const errorString = get(err, 'data.message', get(err, 'message', ''));
+        if (errorString) {
+          this.setState({ fetchError: errorString });
+        } else {
+          this.setState({ fetchError: 'An unknown error occurred while fetching templates' });
+        }
+      },
+    );
+  }
+
+  private onRouteChanged = (stateChange: IStateChange) => {
+    const { to, toParams } = stateChange;
+    if (to.name === 'home.pipeline-templates') {
+      this.setState({ viewTemplateVersion: null });
+    } else if (to.name === 'home.pipeline-templates.pipeline-templates-detail') {
+      const { templateId } = toParams as { templateId?: string };
+      this.setState({ viewTemplateVersion: templateId || null });
+    }
+  };
+
+  private sortTemplates = (
+    templates: Array<[string, IPipelineTemplateV2[]]>,
+  ): Array<[string, IPipelineTemplateV2[]]> => {
+    return templates.sort(([a]: [string, IPipelineTemplateV2[]], [b]: [string, IPipelineTemplateV2[]]) => {
+      const caseInsensitiveA = a.toLowerCase();
+      const caseInsensitiveB = b.toLowerCase();
+      if (caseInsensitiveA > caseInsensitiveB) {
+        return 1;
+      } else if (caseInsensitiveA < caseInsensitiveB) {
+        return -1;
+      }
+      return 0;
+    });
+  };
+
+  private getUpdateTimeForTemplate = (template: IPipelineTemplateV2) => {
+    const millis = Number.parseInt(template.updateTs, 10);
+    if (isNaN(millis)) {
+      return '';
+    }
+    const dt = DateTime.fromMillis(millis);
+    return dt.toLocaleString(DateTime.DATETIME_SHORT);
+  };
+
+  private dismissDetailsModal = () => {
+    ReactInjector.$state.go('home.pipeline-templates');
+  };
+
+  private onSearchFieldChanged = (event: React.SyntheticEvent<HTMLInputElement>) => {
+    const searchValue: string = get(event, 'target.value', '');
+    this.setState({ searchValue });
+  };
+
+  // Creates a cache key suitable for _.memoize
+  private filterMemoizeResolver = (
+    templateCollections: Array<[string, IPipelineTemplateV2[]]>,
+    query: string,
+  ): string => {
+    const templateIds = flatMap(templateCollections, ([, templateCollection]) =>
+      templateCollection.map((template) => getTemplateVersion(template)),
+    );
+    return `${templateIds.join('')}${query}`;
+  };
+
+  private filterSearchResults = memoize(
+    (
+      templateCollections: Array<[string, IPipelineTemplateV2[]]>,
+      query: string,
+    ): Array<[string, IPipelineTemplateV2[]]> => {
+      const searchValue = query.trim().toLowerCase();
+
+      if (!searchValue) {
+        return templateCollections;
+      } else {
+        return templateCollections.filter(([, templateCollection]) =>
+          templateCollection.some(
+            ({ metadata: { name = '', description = '', owner = '' } = {} }) =>
+              name.toLowerCase().includes(searchValue) ||
+              description.toLowerCase().includes(searchValue) ||
+              owner.toLowerCase().includes(searchValue),
+          ),
+        );
+      }
+    },
+    this.filterMemoizeResolver,
+  );
+
+  private getViewTemplate = () => this.findTemplate('viewTemplateVersion');
+  private getDeleteTemplate = () => this.findTemplate('deleteTemplateVersion');
+
+  private findTemplate(actionKey: 'viewTemplateVersion' | 'deleteTemplateVersion') {
+    const { [actionKey]: templateVersion, templates } = this.state;
+    const templateId = convertTemplateVersionToId(templateVersion);
+    const { [templateId]: templateCollection = [] } = templates;
+    return templateCollection.find((template) => getTemplateVersion(template) === templateVersion);
+  }
+
+  private handleCreatePipelineClick(template: IPipelineTemplateV2): void {
+    this.setState({ selectedTemplate: template });
+  }
+
+  public handleCreatePipelineModalClose = () => {
+    this.setState({ selectedTemplate: null });
+  };
+
+  private handleSelectedTemplateVersionChange = (e: React.ChangeEvent<HTMLSelectElement>, templateId: string) =>
+    this.setState({
+      templateVersionSelections: { ...this.state.templateVersionSelections, [templateId]: e.target.value },
+    });
+
+  public render() {
+    const {
+      templates,
+      selectedTemplate,
+      searchValue,
+      fetchError,
+      viewTemplateVersion,
+      deleteTemplateVersion,
+      templateVersionSelections,
+    } = this.state;
+    const detailsTemplate = viewTemplateVersion ? this.getViewTemplate() : null;
+    const searchPerformed = searchValue.trim() !== '';
+    const filteredResults = this.sortTemplates(this.filterSearchResults(Object.entries(templates), searchValue));
+    const resultsAvailable = filteredResults.length > 0;
+    const deleteTemplate = deleteTemplateVersion ? this.getDeleteTemplate() : null;
+
+    return (
+      <>
+        <div className="infrastructure">
+          <div className="infrastructure-section search-header">
+            <div className="container">
+              <h2 className="header-section">
+                <span className="search-label">Pipeline Templates</span>
+                <input
+                  type="search"
+                  placeholder="Search pipeline templates"
+                  className="form-control input-md"
+                  ref={(input) => input && input.focus()}
+                  onChange={this.onSearchFieldChanged}
+                  value={searchValue}
+                />
+              </h2>
+            </div>
+          </div>
+          <div className="infrastructure-section container">
+            {fetchError && (
+              <PipelineTemplatesV2Error message={`There was an error fetching pipeline templates: ${fetchError}`} />
+            )}
+            {searchPerformed && !resultsAvailable && (
+              <h4 className="infrastructure-section__message">No matches found for '{searchValue}'</h4>
+            )}
+            {resultsAvailable && (
+              <table className="table templates-table">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Owner</th>
+                    <th>Updated</th>
+                    <th>
+                      <span className="sort-toggle clickable">
+                        Version
+                        <span className="glyphicon glyphicon-Down-triangle" />
+                      </span>
+                    </th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredResults.map(([templateId, templateCollection]) => {
+                    const templateVersion =
+                      templateVersionSelections[templateId] || getTemplateVersion(templateCollection[0]);
+                    const currentTemplate = templateCollection.find(
+                      (template) => getTemplateVersion(template) === templateVersion,
+                    );
+                    const { metadata } = currentTemplate;
+
+                    return (
+                      <tr key={templateVersion}>
+                        <td className="templates-table__template-name">{metadata.name || '-'}</td>
+                        <td>{metadata.owner || '-'}</td>
+                        <td>{this.getUpdateTimeForTemplate(currentTemplate) || '-'}</td>
+                        <td className="templates-table__template-versions">
+                          <ReactSelectInput
+                            clearable={false}
+                            onChange={(e) => this.handleSelectedTemplateVersionChange(e, templateId)}
+                            value={templateVersion}
+                            stringOptions={templateCollection.map((templateOption) =>
+                              getTemplateVersion(templateOption),
+                            )}
+                          />
+                        </td>
+                        <td className="templates-table__template-actions">
+                          <UISref to={`.pipeline-templates-detail`} params={{ templateId: templateVersion }}>
+                            <button className="link">View</button>
+                          </UISref>
+                          <button
+                            className="link"
+                            onClick={() => this.setState({ deleteTemplateVersion: templateVersion })}
+                          >
+                            Delete
+                          </button>
+                          <button
+                            className="link link--create"
+                            onClick={() => this.handleCreatePipelineClick(currentTemplate)}
+                          >
+                            Create Pipeline
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+        {detailsTemplate && (
+          <Modal show={true} dialogClassName="modal-lg modal-fullscreen" onHide={() => {}}>
+            <ShowPipelineTemplateJsonModal
+              template={detailsTemplate}
+              editable={false}
+              modalHeading="View Pipeline Template"
+              descriptionText="The JSON below contains the metadata, variables and pipeline definition for this template."
+              dismissModal={this.dismissDetailsModal}
+            />
+          </Modal>
+        )}
+        {deleteTemplate && (
+          <DeletePipelineTemplateV2Modal
+            template={deleteTemplate}
+            onClose={() => {
+              this.fetchTemplates();
+              this.setState({ deleteTemplateVersion: null });
+            }}
+          />
+        )}
+        {selectedTemplate && (
+          <CreatePipelineFromTemplate
+            closeModalCallback={this.handleCreatePipelineModalClose}
+            template={selectedTemplate}
+          />
+        )}
+      </>
+    );
+  }
+}

package/src/pipeline/config/templates/v2/configurePipelineTemplateModalV2.controller.spec.ts

@@ -0,0 +1,305 @@
+import type { IQService, IScope } from 'angular';
+import { mock } from 'angular';
+
+import { PipelineTemplateReader } from '../PipelineTemplateReader';
+import type { Application } from '../../../../application/application.model';
+import { ApplicationModelBuilder } from '../../../../application/applicationModel.builder';
+import type { ConfigurePipelineTemplateModalV2Controller } from './configurePipelineTemplateModalV2.controller';
+import { CONFIGURE_PIPELINE_TEMPLATE_MODAL_V2_CTRL } from './configurePipelineTemplateModalV2.controller';
+import type { IVariable } from '../inputs/variableInput.service';
+import { PIPELINE_TEMPLATE_MODULE } from '../pipelineTemplate.module';
+
+describe('Controller: ConfigurePipelineTemplateModalV2Ctrl', () => {
+  let ctrl: ConfigurePipelineTemplateModalV2Controller, $scope: IScope, $q: IQService, application: Application;
+
+  const templateObjVariable = [
+    {
+      name: 'orca-test',
+      region: 'us-west-2',
+      availabilityZones: [] as any[],
+      capacity: 1,
+      keyPair: 'example-keypair',
+      loadBalancers: ['orca-test'],
+      securityGroups: [] as any[],
+      strategy: 'highlander',
+      instanceType: 'm3.xlarge',
+    },
+  ];
+
+  const parsedTemplateObjVariable = `[
+    {
+      "name": "orca-test",
+      "region": "us-west-2",
+      "availabilityZones": [],
+      "capacity": 1,
+      "keyPair": "example-keypair",
+      "loadBalancers": ["orca-test"],
+      "securityGroups": [],
+      "strategy": "highlander",
+      "instanceType": "m3.xlarge"
+    }
+  ]`.replace(/\s/g, '');
+
+  const template: any = {
+    variables: [
+      {
+        name: 'credentials',
+        group: 'Basic Settings',
+        type: 'string',
+        defaultValue: 'my-google-account',
+      },
+      {
+        name: 'cloudProvider',
+        group: 'Basic Settings',
+        type: 'string',
+        defaultValue: 'gce',
+      },
+      {
+        name: 'someObject',
+        group: 'Advanced Settings',
+        type: 'object',
+        defaultValue: templateObjVariable,
+      },
+      {
+        name: 'someList',
+        group: 'Advanced Settings',
+        type: 'list',
+        defaultValue: ['a', 'b', 'c'],
+      },
+      {
+        name: 'someInt',
+        type: 'int',
+        defaultValue: 42,
+      },
+    ],
+  };
+
+  beforeEach(mock.module(CONFIGURE_PIPELINE_TEMPLATE_MODAL_V2_CTRL, PIPELINE_TEMPLATE_MODULE));
+
+  beforeEach(() => {
+    mock.inject(($controller: ng.IControllerService, $rootScope: ng.IRootScopeService, _$q_: IQService) => {
+      application = ApplicationModelBuilder.createStandaloneApplication('app');
+      $scope = $rootScope.$new();
+      $q = _$q_;
+      ctrl = $controller('ConfigurePipelineTemplateModalV2Ctrl', {
+        $scope,
+        application,
+        $uibModalInstance: { close: $q.resolve(null) },
+        pipelineTemplateConfig: {
+          name: 'My Managed Pipeline',
+          template: {
+            artifactAccount: 'front50ArtifactCredentials',
+            reference: 'spinnaker://myPipelineId',
+            type: 'front50/pipelineTemplate',
+          },
+        },
+        pipelineId: '1234',
+        executionId: null,
+        isNew: true,
+      }) as ConfigurePipelineTemplateModalV2Controller;
+    });
+  });
+
+  describe('data initialization', () => {
+    beforeEach(() => {
+      spyOn(PipelineTemplateReader, 'getPipelineTemplateFromSourceUrl').and.callFake(() => {
+        return $q.resolve(template);
+      });
+    });
+
+    it('sets `variableMetadataGroups` on the controller, groups by variable metadata `groupName`', () => {
+      ctrl.initialize();
+      $scope.$digest();
+
+      expect(ctrl.variableMetadataGroups).toBeDefined();
+      expect(ctrl.variableMetadataGroups.length).toEqual(3);
+      expect(ctrl.variableMetadataGroups.find((g) => g.name === 'Basic Settings').variableMetadata.length).toEqual(2);
+    });
+
+    it('sets `variables` on the controller, each with a property `value` provided by variable metadata `defaultValue`', () => {
+      ctrl.initialize();
+      $scope.$digest();
+
+      expect(ctrl.variables).toBeDefined();
+      expect(ctrl.variables.length).toEqual(5);
+      expect(ctrl.variables.map((v) => v.value)).toEqual([
+        'my-google-account',
+        'gce',
+        parsedTemplateObjVariable,
+        ['a', 'b', 'c'],
+        42,
+      ]);
+    });
+
+    it('initializes variables on controller with variables provided from the pipeline template config ', () => {
+      const variables = {
+        credentials: 'my-credentials',
+        cloudProvider: 'gce',
+        someObject: { key: 'value' },
+        someList: ['a'],
+        someInt: 123,
+      };
+      ctrl.pipelineTemplateConfig.variables = variables;
+      ctrl.initialize();
+      $scope.$digest();
+
+      expect(ctrl.variables.map((v) => v.value)).toEqual(['my-credentials', 'gce', '{"key":"value"}', ['a'], 123]);
+    });
+  });
+
+  describe('modal behavior if the underlying template changes', () => {
+    let templateA: any, templateB: any;
+
+    beforeEach(() => {
+      templateA = {
+        variables: [
+          {
+            name: 'letters',
+            group: 'Basic Settings',
+            type: 'list',
+            defaultValue: ['a', 'b', 'c'],
+          },
+        ],
+      };
+
+      templateB = {
+        variables: [
+          {
+            name: 'letters',
+            group: 'Basic Settings',
+            type: 'list',
+            defaultValue: ['a', 'b', 'c'],
+          },
+          {
+            name: 'numbers',
+            group: 'Basic Settings',
+            type: 'list',
+            defaultValue: [1, 2, 3],
+          },
+        ],
+      };
+    });
+
+    // This test should replicate the following steps:
+    // 1). User creates and saves template config using the `templateA` template.
+    // 2). User updates the template to add another variable (now the template is `templateB`).
+    // 3). User reopens the config modal - the new variable should be initialized with its default value.
+    it('initializes a new variable field with its default value', () => {
+      const spy = spyOn(PipelineTemplateReader, 'getPipelineTemplateFromSourceUrl');
+      spy.and.callFake(() => $q.resolve(templateA));
+
+      ctrl.initialize();
+      $scope.$digest();
+
+      ctrl.pipelineTemplateConfig = ctrl.buildConfig();
+
+      spy.and.callFake(() => $q.resolve(templateB));
+      ctrl.initialize();
+      $scope.$digest();
+
+      expect(ctrl.buildConfig().variables).toEqual({
+        letters: ['a', 'b', 'c'],
+        numbers: [1, 2, 3],
+      });
+    });
+
+    // This test should replicate the following steps:
+    // 1). User creates and saves template config using the `templateB` template.
+    // 2). User updates the template to remove a variable (now the template is `templateA`).
+    // 3). User reopens the config modal - on save, the removed variable should no longer exist in the config.
+    it('prunes variables from the config if they no longer exist on the template', () => {
+      const spy = spyOn(PipelineTemplateReader, 'getPipelineTemplateFromSourceUrl');
+      spy.and.callFake(() => $q.resolve(templateB));
+
+      ctrl.initialize();
+      $scope.$digest();
+
+      ctrl.pipelineTemplateConfig = ctrl.buildConfig();
+
+      spy.and.callFake(() => $q.resolve(templateA));
+      ctrl.initialize();
+      $scope.$digest();
+
+      expect(ctrl.buildConfig().variables).toEqual({
+        letters: ['a', 'b', 'c'],
+      });
+    });
+  });
+
+  describe('config creation', () => {
+    beforeEach(() => {
+      spyOn(PipelineTemplateReader, 'getPipelineTemplateFromSourceUrl').and.callFake(() => {
+        return $q.resolve(template);
+      });
+    });
+
+    it('builds map of variables', () => {
+      ctrl.initialize();
+      $scope.$digest();
+      const templateConfig = ctrl.buildConfig();
+
+      expect(templateConfig.variables).toEqual({
+        credentials: 'my-google-account',
+        cloudProvider: 'gce',
+        someObject: templateObjVariable,
+        someList: ['a', 'b', 'c'],
+        someInt: 42,
+      });
+    });
+  });
+
+  describe('input validation', () => {
+    const createVariable = (type: string, value: any): IVariable => {
+      return {
+        type,
+        value,
+        name: 'variableName',
+      };
+    };
+
+    beforeEach(() => {
+      spyOn(PipelineTemplateReader, 'getPipelineTemplateFromSourceUrl').and.callFake(() => {
+        return $q.resolve(template);
+      });
+    });
+
+    it('verifies that input variables are not empty', () => {
+      ctrl.initialize();
+      $scope.$digest();
+
+      let v = createVariable('string', '');
+      ctrl.handleVariableChange(v);
+      expect(v.errors).toEqual([{ message: 'Field is required.' }]);
+
+      v = createVariable('object', '');
+      ctrl.handleVariableChange(v);
+      expect(v.errors).toEqual([{ message: 'Field is required.' }]);
+
+      v = createVariable('float', '');
+      ctrl.handleVariableChange(v);
+      expect(v.errors).toEqual([{ message: 'Field is required.' }]);
+
+      v = createVariable('int', '');
+      ctrl.handleVariableChange(v);
+      expect(v.errors).toEqual([{ message: 'Field is required.' }]);
+
+      v = createVariable('list', ['']);
+      ctrl.handleVariableChange(v);
+      expect(v.errors).toEqual([{ message: 'Field is required.', key: 0 }]);
+    });
+
+    it('validates json', () => {
+      ctrl.initialize();
+      $scope.$digest();
+
+      let v = createVariable('object', parsedTemplateObjVariable);
+      ctrl.handleVariableChange(v);
+      expect(v.errors.length).toEqual(0);
+
+      const badJson = `{ "dropped": "quote }`;
+      v = createVariable('object', badJson);
+      ctrl.handleVariableChange(v);
+      expect(v.errors.length).toEqual(1);
+    });
+  });
+});