@spinnaker/cloudrun 0.1.6

package/src/pipeline/stages/deployManifest/manifestStatus/DeployStatus.tsx

@@ -0,0 +1,108 @@
+import { get } from 'lodash';
+import React from 'react';
+
+import type { IExecutionDetailsSectionProps, IManifest } from '@spinnaker/core';
+import { ExecutionDetailsSection, StageFailureMessage } from '@spinnaker/core';
+
+import { ManifestStatus } from './ManifestStatus';
+import type { IStageManifest } from '../../../../manifest/manifest.service';
+import { CloudrunManifestService } from '../../../../manifest/manifest.service';
+
+export interface IManifestSubscription {
+  id: string;
+  unsubscribe: () => void;
+  manifest: IManifest;
+}
+
+export interface IDeployStatusState {
+  subscriptions: IManifestSubscription[];
+  manifestIds: string[];
+}
+
+export class DeployStatus extends React.Component<IExecutionDetailsSectionProps, IDeployStatusState> {
+  public static title = 'deployStatus';
+
+  constructor(props: IExecutionDetailsSectionProps) {
+    super(props);
+    this.state = { subscriptions: [], manifestIds: [] };
+  }
+
+  public componentDidMount() {
+    this.componentDidUpdate(this.props, this.state);
+  }
+
+  public componentWillUnmount() {
+    this.unsubscribeAll();
+  }
+
+  public componentDidUpdate(_prevProps: IExecutionDetailsSectionProps, prevState: IDeployStatusState) {
+    const manifests: IStageManifest[] = get(this.props.stage, ['context', 'outputs.manifests'], []).filter((m) => !!m);
+    const manifestIds = manifests.map((m) => CloudrunManifestService.manifestIdentifier(m)).sort();
+    if (prevState.manifestIds.join('') !== manifestIds.join('')) {
+      this.unsubscribeAll();
+      const subscriptions = manifests.map((manifest) => {
+        const id = CloudrunManifestService.manifestIdentifier(manifest);
+        return {
+          id,
+          unsubscribe: this.subscribeToManifestUpdates(id, manifest),
+          manifest: this.stageManifestToIManifest(manifest, this.props.stage.context.account),
+        };
+      });
+      this.setState({ subscriptions, manifestIds });
+    }
+  }
+
+  private subscribeToManifestUpdates(id: string, manifest: IStageManifest): () => void {
+    const params = CloudrunManifestService.stageManifestToManifestParams(manifest, this.props.stage.context.account);
+    return CloudrunManifestService.subscribe(this.props.application, params, (updated: IManifest) => {
+      const idx = this.state.subscriptions.findIndex((sub) => sub.id === id);
+      if (idx !== -1) {
+        const subscription = { ...this.state.subscriptions[idx], manifest: updated };
+        const subscriptions = [...this.state.subscriptions];
+        subscriptions[idx] = subscription;
+        this.setState({ subscriptions });
+      }
+    });
+  }
+
+  private unsubscribeAll() {
+    this.state.subscriptions.forEach(({ unsubscribe }) => unsubscribe());
+  }
+
+  private stageManifestToIManifest(manifest: IStageManifest, account: string): IManifest {
+    return {
+      name: get(manifest, 'metadata.name', ''),
+      moniker: null,
+      account,
+      cloudProvider: 'cloudrun',
+      location: get(manifest, 'metadata.namespace', ''),
+      manifest: manifest,
+      status: {},
+      artifacts: [],
+      events: [],
+    };
+  }
+
+  public render() {
+    const { name: sectionName, current: currentSection, stage } = this.props;
+    const manifests: IManifest[] = this.state.subscriptions.filter((sub) => !!sub.manifest).map((sub) => sub.manifest);
+    return (
+      <ExecutionDetailsSection name={sectionName} current={currentSection}>
+        <StageFailureMessage stage={stage} message={stage.failureMessage} />
+        {manifests && (
+          <div className="row">
+            <div className="col-md-12">
+              <div className="well alert alert-info">
+                {manifests.map((manifest) => {
+                  const uid =
+                    manifest.manifest.metadata.uid || CloudrunManifestService.manifestIdentifier(manifest.manifest);
+                  return <ManifestStatus key={uid} manifest={manifest} account={stage.context.account} />;
+                })}
+              </div>
+            </div>
+          </div>
+        )}
+      </ExecutionDetailsSection>
+    );
+  }
+}

package/src/pipeline/stages/deployManifest/manifestStatus/DeployStatusPills.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { IManifest } from '@spinnaker/core';
+
+interface IStatusClasses {
+  [key: string]: string;
+}
+
+const STATUS_PILLS: IStatusClasses = {
+  available: 'success',
+  stable: 'success',
+  paused: 'warn',
+  failed: 'danger',
+};
+
+export interface IDeployManifestStatusProps {
+  manifest: IManifest;
+}
+
+export class DeployManifestStatusPills extends React.Component<IDeployManifestStatusProps> {
+  public render() {
+    const { manifest } = this.props;
+    if (manifest == null || manifest.status == null) {
+      return null;
+    }
+    return Object.keys(manifest.status).map((statusKey, i) => {
+      const statusDescription = manifest.status[statusKey];
+      const statusClass = STATUS_PILLS[statusKey] || '';
+      const isStable = statusDescription.state;
+      const isUnstableWithMessage = !isStable && statusDescription.message;
+      return (
+        <span key={i}>
+          {isStable && (
+            <span title={statusDescription.message} className={`pill ${statusClass}`}>
+              {statusKey}
+            </span>
+          )}
+          {isUnstableWithMessage && (
+            <span title={statusDescription.message} className="pill warn">
+              {statusKey}
+            </span>
+          )}
+          <span>&nbsp;</span>
+        </span>
+      );
+    });
+  }
+}

package/src/pipeline/stages/deployManifest/manifestStatus/ManifestDetailsLink.tsx

@@ -0,0 +1,92 @@
+import { get, trim } from 'lodash';
+import React from 'react';
+
+import type { IManifest } from '@spinnaker/core';
+import { AccountService, ReactInjector } from '@spinnaker/core';
+
+const UNMAPPED_K8S_RESOURCE_STATE_KEY = 'cloudrunResource';
+
+export interface IManifestDetailsProps {
+  manifest: IManifest;
+  linkName: string;
+  accountId: string;
+}
+
+export interface IManifestDetailsState {
+  url: string;
+}
+
+export class ManifestDetailsLink extends React.Component<IManifestDetailsProps, IManifestDetailsState> {
+  private spinnakerKindStateMap: { [k: string]: string } = {
+    // keys from clouddriver's CloudrunSpinnakerKindMap
+    serverGroupManagers: 'serverGroupManager',
+    serverGroups: 'serverGroup',
+  };
+
+  constructor(props: IManifestDetailsProps) {
+    super(props);
+    this.state = {
+      url: '',
+    };
+    this.loadUrl();
+  }
+
+  private canOpen(): boolean {
+    return !!this.props.manifest.manifest && !!this.state.url;
+  }
+
+  private spinnakerKindFromCloudrunKind(kind: string, kindMap: { [k: string]: string }) {
+    const foundKind = Object.keys(kindMap).find((k) => k.toLowerCase() === kind.toLowerCase());
+    return kindMap[foundKind];
+  }
+
+  private resourceRegion(): string {
+    return trim(
+      get(this.props, ['manifest', 'manifest', 'metadata', 'annotations', 'artifact.spinnaker.io/location'], ''),
+    );
+  }
+
+  private getStateParams(stateKey: string): any {
+    const kind = this.props.manifest.manifest.kind.toLowerCase();
+    const name = this.props.manifest.manifest.metadata.name;
+    const region = this.resourceRegion();
+    const params: { [k: string]: string } = {
+      accountId: this.props.accountId,
+      provider: 'cloudrun',
+      region,
+      reg: region, // Filters the list of clusters on the Clusters screen to those in the same namespace
+      [stateKey]: `${kind} ${name}`,
+    };
+    if (!params.region && kind === 'namespace' && stateKey === UNMAPPED_K8S_RESOURCE_STATE_KEY) {
+      params.region = name;
+    }
+    if (!params.region || params.region === '') {
+      params.region = '_';
+    }
+    return params;
+  }
+
+  private loadUrl() {
+    const kind: string = get(this.props, ['manifest', 'manifest', 'kind'], '');
+    const { accountId } = this.props;
+    AccountService.getAccountDetails(accountId).then((account) => {
+      const spinnakerKind = this.spinnakerKindFromCloudrunKind(kind, account.spinnakerKindMap);
+      const stateKey = this.spinnakerKindStateMap[spinnakerKind] || UNMAPPED_K8S_RESOURCE_STATE_KEY;
+      const params = this.getStateParams(stateKey);
+      const url = ReactInjector.$state.href(`home.applications.application.insight.clusters.${stateKey}`, params);
+      this.setState({ url });
+    });
+  }
+
+  public render() {
+    if (this.canOpen()) {
+      return (
+        <a href={this.state.url} className="clickable">
+          {this.props.linkName}
+        </a>
+      );
+    } else {
+      return null;
+    }
+  }
+}

package/src/pipeline/stages/deployManifest/manifestStatus/ManifestEvents.tsx

@@ -0,0 +1,87 @@
+import { get, trim } from 'lodash';
+import { DateTime } from 'luxon';
+import React from 'react';
+
+import type { IManifest, IManifestEvent } from '@spinnaker/core';
+import { JobEventBasedPodNameProvider, JobManifestPodLogs, relativeTime } from '@spinnaker/core';
+
+export interface IManifestEventsProps {
+  manifest: IManifest;
+}
+
+export class ManifestEvents extends React.Component<IManifestEventsProps> {
+  private pillStyle(e: IManifestEvent): string {
+    if (e.type === 'Warning') {
+      return 'alert';
+    } else if (e.type === 'Normal') {
+      return 'success';
+    } else {
+      return '';
+    }
+  }
+
+  public render() {
+    if (!this.props.manifest) {
+      return null;
+    }
+    if (this.props.manifest && (!this.props.manifest.events || this.props.manifest.events.length === 0)) {
+      return <div>No recent events found - Cloud Run does not store events for long.</div>;
+    }
+    const { events } = this.props.manifest;
+    const namespace = trim(
+      get(this.props.manifest, ['manifest', 'metadata', 'annotations', 'artifact.spinnaker.io/location'], ''),
+    );
+    return events.map((e, i) => {
+      const firstTimestamp = get(e, 'firstTimestamp', '');
+      const lastTimestamp = get(e, 'lastTimestamp', '');
+      let firstEpochMilliseconds = 0;
+      let lastEpochMilliseconds = 0;
+      if (firstTimestamp) {
+        firstEpochMilliseconds = DateTime.fromISO(firstTimestamp).toMillis();
+      }
+      if (lastTimestamp) {
+        lastEpochMilliseconds = DateTime.fromISO(lastTimestamp).toMillis();
+      }
+      return (
+        <div key={get(e, ['metadata', 'uid'], String(i))} className="info">
+          <div className="horizontal">
+            {e.count && (
+              <div className={`pill ${this.pillStyle(e)}`}>
+                {e.count} × <b>{e.reason}</b>
+              </div>
+            )}
+          </div>
+          {(e.firstTimestamp || e.lastTimestamp) && (
+            <div>
+              {e.firstTimestamp === e.lastTimestamp && (
+                <div>
+                  <i>{relativeTime(firstEpochMilliseconds)}</i>
+                </div>
+              )}
+              {e.firstTimestamp !== e.lastTimestamp && (
+                <div>
+                  <div>
+                    First Occurrence: <i>{relativeTime(firstEpochMilliseconds)}</i>
+                  </div>
+                  <div>
+                    Last Occurrence: <i>{relativeTime(lastEpochMilliseconds)}</i>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          <div>{e.message}</div>
+          <div>
+            <JobManifestPodLogs
+              account={this.props.manifest.account}
+              location={namespace}
+              podNamesProviders={[new JobEventBasedPodNameProvider(this.props.manifest, e)]}
+              linkName="Console Output (Raw)"
+            />
+          </div>
+          {i !== events.length - 1 && <br />}
+        </div>
+      );
+    });
+  }
+}

package/src/pipeline/stages/deployManifest/manifestStatus/ManifestStatus.less

@@ -0,0 +1,24 @@
+dl.manifest-status {
+  display: block;
+  margin: 0;
+
+  dt,
+  dd {
+    display: inline-block;
+  }
+
+  dt {
+    margin-right: 4px;
+  }
+}
+
+.manifest-support-links {
+  margin: 0 0 1em;
+  a {
+    margin-right: 2em;
+  }
+}
+
+.manifest-events {
+  margin: 0 0 2em;
+}

package/src/pipeline/stages/deployManifest/manifestStatus/ManifestStatus.tsx

@@ -0,0 +1,46 @@
+import { dump } from 'js-yaml';
+import React from 'react';
+
+import type { IManifest } from '@spinnaker/core';
+import { CopyToClipboard, ManifestYaml } from '@spinnaker/core';
+
+import { DeployManifestStatusPills } from './DeployStatusPills';
+import { ManifestDetailsLink } from './ManifestDetailsLink';
+import { ManifestEvents } from './ManifestEvents';
+
+import './ManifestStatus.less';
+
+export interface IManifestStatusProps {
+  account: string;
+  manifest: IManifest;
+}
+
+export function ManifestStatus({ account, manifest }: IManifestStatusProps) {
+  return (
+    <>
+      <dl className="manifest-status" key="manifest-status">
+        <dt>{manifest.manifest.kind}</dt>
+        <dd>
+          <CopyToClipboard
+            displayText={true}
+            text={manifest.manifest.metadata.name}
+            toolTip={`Copy ${manifest.manifest.metadata.name}`}
+          />
+          &nbsp;
+          <DeployManifestStatusPills manifest={manifest} />
+        </dd>
+      </dl>
+      <div className="manifest-support-links" key="manifest-support-links">
+        <ManifestYaml
+          linkName="YAML"
+          manifestText={dump(manifest.manifest)}
+          modalTitle={manifest.manifest.metadata.name}
+        />
+        <ManifestDetailsLink linkName="Details" manifest={manifest} accountId={account} />
+      </div>
+      <div className="manifest-events pad-left" key="manifest-events">
+        <ManifestEvents manifest={manifest} />
+      </div>
+    </>
+  );
+}

package/src/pipeline/stages/deployManifest/serverGroupNamePreview.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export interface IServerGroupNamePreviewProps {
+  application: string;
+  stack: string;
+  details: string;
+}
+
+export class ServerGroupNamePreview extends React.Component<IServerGroupNamePreviewProps> {
+  public render() {
+    const application = this.props.application ? this.props.application : '';
+    const stack = this.props.stack ? `-${this.props.stack}` : '';
+
+    const details = this.props.details ? `-${this.props.details}` : '';
+    return (
+      <pre style={{ textAlign: 'center' }}>
+        <p> Your server group will be in the cluster:</p>
+        <p>
+          <b>
+            {application}
+            {stack}
+            {details}
+          </b>
+        </p>
+      </pre>
+    );
+  }
+}

package/src/pipeline/stages/editLoadBalancer/cloudrunEditLoadBalancerStage.ts

@@ -0,0 +1,74 @@
+import type { IController } from 'angular';
+import { module } from 'angular';
+import type { IModalService } from 'angular-ui-bootstrap';
+import { cloneDeep } from 'lodash';
+
+import type { ILoadBalancer } from '@spinnaker/core';
+import { CloudProviderRegistry, Registry } from '@spinnaker/core';
+
+import { CLOUDRUN_LOAD_BALANCER_CHOICE_MODAL_CTRL } from './loadBalancerChoice.modal.controller';
+
+class CloudrunEditLoadBalancerStageCtrl implements IController {
+  public static $inject = ['$scope', '$uibModal'];
+  constructor(public $scope: any, private $uibModal: IModalService) {
+    $scope.stage.loadBalancers = $scope.stage.loadBalancers || [];
+    $scope.stage.cloudProvider = 'cloudrun';
+  }
+
+  public addLoadBalancer(): void {
+    this.$uibModal
+      .open({
+        templateUrl: require('./loadBalancerChoice.modal.html'),
+        controller: `cloudrunLoadBalancerChoiceModelCtrl as ctrl`,
+        resolve: {
+          application: () => this.$scope.application,
+        },
+      })
+      .result.then((newLoadBalancer: ILoadBalancer) => {
+        this.$scope.stage.loadBalancers.push(newLoadBalancer);
+      })
+      .catch(() => {});
+  }
+
+  public editLoadBalancer(index: number) {
+    const config = CloudProviderRegistry.getValue('cloudrun', 'loadBalancer');
+    this.$uibModal
+      .open({
+        templateUrl: config.createLoadBalancerTemplateUrl,
+        controller: `${config.createLoadBalancerController} as ctrl`,
+        size: 'lg',
+        resolve: {
+          application: () => this.$scope.application,
+          loadBalancer: () => cloneDeep(this.$scope.stage.loadBalancers[index]),
+          isNew: () => false,
+          forPipelineConfig: () => true,
+        },
+      })
+      .result.then((updatedLoadBalancer: ILoadBalancer) => {
+        this.$scope.stage.loadBalancers[index] = updatedLoadBalancer;
+      })
+      .catch(() => {});
+  }
+
+  public removeLoadBalancer(index: number): void {
+    this.$scope.stage.loadBalancers.splice(index, 1);
+  }
+}
+
+export const CLOUDRUN_EDIT_LOAD_BALANCER_STAGE = 'spinnaker.cloudrun.pipeline.stage.editLoadBalancerStage';
+module(CLOUDRUN_EDIT_LOAD_BALANCER_STAGE, [CLOUDRUN_LOAD_BALANCER_CHOICE_MODAL_CTRL])
+  .config(() => {
+    Registry.pipeline.registerStage({
+      label: 'Edit Load Balancer (Cloud Run)',
+      description: 'Edits a load balancer',
+      key: 'upsertCloudrunLoadBalancers',
+      cloudProvider: 'cloudrun',
+      templateUrl: require('./editLoadBalancerStage.html'),
+      executionDetailsUrl: require('./editLoadBalancerExecutionDetails.html'),
+      executionConfigSections: ['editLoadBalancerConfig', 'taskStatus'],
+      controller: 'cloudrunEditLoadBalancerStageCtrl',
+      controllerAs: 'editLoadBalancerStageCtrl',
+      validators: [],
+    });
+  })
+  .controller('cloudrunEditLoadBalancerStageCtrl', CloudrunEditLoadBalancerStageCtrl);

package/src/pipeline/stages/editLoadBalancer/editLoadBalancerExecutionDetails.html

@@ -0,0 +1,33 @@
+<div ng-controller="BaseExecutionDetailsCtrl">
+  <execution-details-section-nav sections="configSections"></execution-details-section-nav>
+  <div class="step-section-details" ng-if="detailsSection === 'editLoadBalancerConfig'">
+    <div class="row">
+      <div class="col-md-12">
+        <table class="table table-condensed">
+          <thead>
+            <tr>
+              <th>Account</th>
+              <th>Name</th>
+              <th>Region</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="loadBalancer in stage.context.loadBalancers">
+              <td>
+                <account-tag account="loadBalancer.credentials"></account-tag>
+              </td>
+              <td>{{ loadBalancer.name }}</td>
+              <td>{{ loadBalancer.region }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <stage-failure-message stage="stage" message="stage.failureMessage"></stage-failure-message>
+  </div>
+  <div class="step-section-details" ng-if="detailsSection === 'taskStatus'">
+    <div class="row">
+      <execution-step-details item="stage"></execution-step-details>
+    </div>
+  </div>
+</div>

package/src/pipeline/stages/editLoadBalancer/editLoadBalancerStage.html

@@ -0,0 +1,51 @@
+<div class="well well-sm clearfix" ng-if="!pipeline.strategy">
+  <div class="row">
+    <div class="col-md-12">
+      <h4 class="text-left">Load Balancers</h4>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <table class="table table-condensed">
+        <thead>
+          <tr>
+            <th>Account</th>
+            <th>Name</th>
+            <th>Region</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="loadBalancer in stage.loadBalancers">
+            <td>
+              <account-tag account="loadBalancer.credentials"></account-tag>
+            </td>
+            <td>{{ loadBalancer.name }}</td>
+            <td>{{ loadBalancer.region }}</td>
+            <td class="condensed-actions">
+              <a class="btn btn-sm btn-link" href ng-click="editLoadBalancerStageCtrl.editLoadBalancer($index)">
+                <span class="glyphicon glyphicon-edit" uib-tooltip="Edit"></span
+              ></a>
+              <a
+                class="btn btn-sm btn-link pad-left"
+                href
+                ng-click="editLoadBalancerStageCtrl.removeLoadBalancer($index)"
+              >
+                <span class="glyphicon glyphicon-trash" uib-tooltip="Remove"></span>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="8">
+              <button class="btn btn-block btn-sm add-new" ng-click="editLoadBalancerStageCtrl.addLoadBalancer()">
+                <span class="glyphicon glyphicon-plus-sign"></span> Add load balancer
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</div>

package/src/pipeline/stages/editLoadBalancer/loadBalancerChoice.modal.controller.ts

@@ -0,0 +1,65 @@
+import type { IController } from 'angular';
+import { module } from 'angular';
+import type { IModalService, IModalServiceInstance } from 'angular-ui-bootstrap';
+import { cloneDeep } from 'lodash';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+import { CloudProviderRegistry } from '@spinnaker/core';
+
+class CloudrunLoadBalancerChoiceModalCtrl implements IController {
+  public state = { loading: true };
+  public loadBalancers: ILoadBalancer[];
+  public selectedLoadBalancer: ILoadBalancer;
+
+  public static $inject = ['$uibModal', '$uibModalInstance', 'application'];
+  constructor(
+    private $uibModal: IModalService,
+    private $uibModalInstance: IModalServiceInstance,
+    private application: Application,
+  ) {
+    this.initialize();
+  }
+
+  public submit(): void {
+    const config = CloudProviderRegistry.getValue('cloudrun', 'loadBalancer');
+    const updatedLoadBalancerPromise = this.$uibModal.open({
+      templateUrl: config.createLoadBalancerTemplateUrl,
+      controller: `${config.createLoadBalancerController} as ctrl`,
+      size: 'lg',
+      resolve: {
+        application: () => this.application,
+        loadBalancer: () => cloneDeep(this.selectedLoadBalancer),
+        isNew: () => false,
+        forPipelineConfig: () => true,
+      },
+    }).result;
+
+    this.$uibModalInstance.close(updatedLoadBalancerPromise);
+  }
+
+  public cancel(): void {
+    this.$uibModalInstance.dismiss();
+  }
+
+  private initialize(): void {
+    this.application
+      .getDataSource('loadBalancers')
+      .ready()
+      .then(() => {
+        this.loadBalancers = (this.application.loadBalancers.data as ILoadBalancer[]).filter(
+          (candidate) => candidate.cloudProvider === 'cloudrun',
+        );
+
+        if (this.loadBalancers.length) {
+          this.selectedLoadBalancer = this.loadBalancers[0];
+        }
+        this.state.loading = false;
+      });
+  }
+}
+
+export const CLOUDRUN_LOAD_BALANCER_CHOICE_MODAL_CTRL = 'spinnaker.Cloudrun.loadBalancerChoiceModal.controller';
+module(CLOUDRUN_LOAD_BALANCER_CHOICE_MODAL_CTRL, []).controller(
+  'cloudrunLoadBalancerChoiceModelCtrl',
+  CloudrunLoadBalancerChoiceModalCtrl,
+);