@spinnaker/cloudrun 2026.2.3 → 2026.3.0

package/src/instance/details/CloudrunInstanceDetails.tsx

@@ -0,0 +1,164 @@
+import { UISref } from '@uirouter/react';
+import { flattenDeep } from 'lodash';
+import React from 'react';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+import {
+  AccountTag,
+  CollapsibleSection,
+  InstanceReader,
+  RecentHistoryService,
+  Spinner,
+  timestamp,
+} from '@spinnaker/core';
+
+import type { ICloudrunInstance } from '../../common/domain';
+
+interface ICloudrunInstanceDetailsProps {
+  app: Application;
+  instance: {
+    instanceId: string;
+  };
+}
+
+interface InstanceManager {
+  account: string;
+  region: string;
+  category: string;
+  name: string;
+  instances: ICloudrunInstance[];
+}
+
+interface ICloudrunInstanceDetailsState {
+  loading: boolean;
+  instance?: ICloudrunInstance;
+  instanceIdNotFound?: string;
+}
+
+export class CloudrunInstanceDetails extends React.Component<
+  ICloudrunInstanceDetailsProps,
+  ICloudrunInstanceDetailsState
+> {
+  public state: ICloudrunInstanceDetailsState = { loading: true };
+  private isUnmounted = false;
+
+  public componentDidMount(): void {
+    this.props.app
+      .ready()
+      .then(() => this.retrieveInstance())
+      .then((instance) => !this.isUnmounted && this.setState({ instance, loading: false }))
+      .catch(
+        () =>
+          !this.isUnmounted && this.setState({ instanceIdNotFound: this.props.instance.instanceId, loading: false }),
+      );
+  }
+
+  public componentWillUnmount(): void {
+    this.isUnmounted = true;
+  }
+
+  private retrieveInstance(): Promise<ICloudrunInstance> {
+    const { app, instance } = this.props;
+    const dataSources: InstanceManager[] = flattenDeep([
+      app.getDataSource('serverGroups').data,
+      app.getDataSource('loadBalancers').data,
+      app.getDataSource('loadBalancers').data.map((loadBalancer: ILoadBalancer) => loadBalancer.serverGroups),
+    ]);
+    const instanceManager = dataSources.find((dataSource) =>
+      dataSource.instances.some((possibleMatch) => possibleMatch.id === instance.instanceId),
+    );
+
+    if (!instanceManager) {
+      return Promise.reject();
+    }
+
+    const recentHistoryExtraData: { [key: string]: string } = {
+      region: instanceManager.region,
+      account: instanceManager.account,
+    };
+    if (instanceManager.category === 'serverGroup') {
+      recentHistoryExtraData.serverGroup = instanceManager.name;
+    }
+    RecentHistoryService.addExtraDataToLatest('instances', recentHistoryExtraData);
+
+    return InstanceReader.getInstanceDetails(instanceManager.account, instanceManager.region, instance.instanceId).then(
+      (instanceDetails: ICloudrunInstance) => ({
+        ...instanceDetails,
+        account: instanceManager.account,
+        region: instanceManager.region,
+      }),
+    );
+  }
+
+  public render() {
+    const { loading, instance, instanceIdNotFound } = this.state;
+    const upToolTip = "A Cloud Run instance is 'Up' if a load balancer is directing traffic to its server group.";
+    const outOfServiceToolTip =
+      "A Cloud Run instance is 'Out Of Service' if no load balancers are directing traffic to its server group.";
+
+    return (
+      <div className="details-panel">
+        <div className="header">
+          <div className="header-text horizontal middle">
+            <h3 className="horizontal middle space-between flex-1">{instance ? instance.name : instanceIdNotFound}</h3>
+          </div>
+          {loading && <Spinner size="small" />}
+        </div>
+        {!loading && instance && (
+          <div className="content">
+            <CollapsibleSection heading="Instance Information" defaultExpanded={true}>
+              <dl className="dl-horizontal dl-narrow">
+                <dt>Launched</dt>
+                <dd>{instance.launchTime && timestamp(instance.launchTime)}</dd>
+                <dt>In</dt>
+                <dd>
+                  <AccountTag account={instance.account} />
+                </dd>
+                {instance.serverGroup && <dt>Server Group</dt>}
+                {instance.serverGroup && (
+                  <dd>
+                    <UISref
+                      to="^.serverGroup"
+                      params={{
+                        region: instance.region,
+                        accountId: instance.account,
+                        serverGroup: instance.serverGroup,
+                        provider: 'cloudrun',
+                      }}
+                    >
+                      <a>{instance.serverGroup}</a>
+                    </UISref>
+                  </dd>
+                )}
+                <dt>Region</dt>
+                <dd>{instance.region}</dd>
+                {instance.vmZoneName && <dt>Zone</dt>}
+                {instance.vmZoneName && <dd>{instance.vmZoneName}</dd>}
+              </dl>
+            </CollapsibleSection>
+            <CollapsibleSection heading="Status" defaultExpanded={true}>
+              <dl>
+                <dt>Load Balancer</dt>
+                <dd>
+                  <span className="pull-left" title={instance.healthState === 'Up' ? upToolTip : outOfServiceToolTip}>
+                    <span className={`glyphicon glyphicon-${instance.healthState}-triangle`} />{' '}
+                    {instance.loadBalancers?.[0]}
+                  </span>
+                </dd>
+              </dl>
+            </CollapsibleSection>
+          </div>
+        )}
+        {!loading && !instance && (
+          <div className="content">
+            <div className="content-section">
+              <div className="content-body text-center">
+                <h3>Instance not found.</h3>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}

package/src/loadBalancer/configure/wizard/CloudrunLoadBalancerModal.spec.tsx

@@ -0,0 +1,85 @@
+import { CloudrunLoadBalancerModalComponent as CloudrunLoadBalancerModal } from './CloudrunLoadBalancerModal';
+
+describe('CloudrunLoadBalancerModal', () => {
+  function buildModal(overrides: any = {}) {
+    const props = {
+      app: {
+        loadBalancers: { refresh: jasmine.createSpy('refresh'), onNextRefresh: jasmine.createSpy('onNextRefresh') },
+      },
+      closeModal: jasmine.createSpy('closeModal'),
+      dismissModal: jasmine.createSpy('dismissModal'),
+      isNew: false,
+      loadBalancer: { name: 'service', account: 'test', region: 'us-central1' },
+      router: {},
+      stateParams: {},
+      stateService: { go: jasmine.createSpy('go'), includes: () => false },
+      ...overrides,
+    } as any;
+
+    return new CloudrunLoadBalancerModal(props);
+  }
+
+  it('dismisses the modal when edit conversion fails', async () => {
+    const modal = buildModal();
+    (modal as any).transformer = {
+      convertLoadBalancerForEditing: () => Promise.reject(new Error('conversion failed')),
+    };
+
+    modal.componentDidMount();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(modal.props.dismissModal).toHaveBeenCalled();
+  });
+
+  it('ignores application refresh callbacks after unmount', () => {
+    const modal = buildModal();
+
+    modal.componentWillUnmount();
+    (modal as any).onApplicationRefresh();
+
+    expect(modal.props.dismissModal).not.toHaveBeenCalled();
+  });
+
+  it('owns its refresh subscription across replacement and unmount', () => {
+    const firstUnsubscribe = jasmine.createSpy('firstUnsubscribe');
+    const secondUnsubscribe = jasmine.createSpy('secondUnsubscribe');
+    const callbacks: Array<() => void> = [];
+    const onNextRefresh = jasmine.createSpy('onNextRefresh').and.callFake((callback: () => void) => {
+      callbacks.push(callback);
+      return callbacks.length === 1 ? firstUnsubscribe : secondUnsubscribe;
+    });
+    const refresh = jasmine.createSpy('refresh');
+    const modal = buildModal({ app: { loadBalancers: { onNextRefresh, refresh } } }) as any;
+
+    modal.onTaskComplete();
+
+    expect(onNextRefresh.calls.first().invocationOrder).toBeLessThan(refresh.calls.first().invocationOrder);
+
+    modal.onTaskComplete();
+
+    expect(firstUnsubscribe).toHaveBeenCalledTimes(1);
+
+    modal.componentWillUnmount();
+    callbacks[1]();
+
+    expect(secondUnsubscribe).toHaveBeenCalledTimes(1);
+    expect(modal.applicationRefreshUnsubscribe).toBeUndefined();
+    expect(modal.props.dismissModal).not.toHaveBeenCalled();
+    expect(modal.props.stateService.go).not.toHaveBeenCalled();
+  });
+
+  it('opens updated load balancer details through the injected state service', () => {
+    const modal = buildModal();
+    modal.state.loadBalancer = { credentials: 'test', name: 'service', region: 'us-central1' } as any;
+
+    (modal as any).onApplicationRefresh();
+
+    expect(modal.props.stateService.go).toHaveBeenCalledWith('.loadBalancerDetails', {
+      accountId: 'test',
+      name: 'service',
+      provider: 'cloudrun',
+      region: 'us-central1',
+    });
+  });
+});

package/src/loadBalancer/configure/wizard/CloudrunLoadBalancerModal.tsx

@@ -0,0 +1,395 @@
+import { cloneDeep, difference, uniq } from 'lodash';
+import React from 'react';
+
+import type { ILoadBalancerModalProps, IRouterInjectedProps } from '@spinnaker/core';
+import { HelpField, LoadBalancerWriter, ReactModal, StageConstants, TaskMonitor, withRouter } from '@spinnaker/core';
+
+import { LoadBalancerMessage } from '../../../common/LoadBalancerMessage';
+import type { ICloudrunLoadBalancer } from '../../../common/domain';
+import type { ICloudrunAllocationDescription, ICloudrunTrafficSplitDescription } from '../../loadBalancerTransformer';
+import { CloudrunLoadBalancerTransformer, CloudrunLoadBalancerUpsertDescription } from '../../loadBalancerTransformer';
+
+export interface ICloudrunLoadBalancerModalState {
+  loading: boolean;
+  loadBalancer?: CloudrunLoadBalancerUpsertDescription;
+  taskMonitor: TaskMonitor;
+}
+
+export interface ICloudrunLoadBalancerModalProps extends ILoadBalancerModalProps {
+  isNew?: boolean;
+}
+
+function allocationTotalIsValid(splitDescription: ICloudrunTrafficSplitDescription): boolean {
+  return (
+    splitDescription.allocationDescriptions.reduce((sum, description) => sum + Number(description.percent), 0) === 100
+  );
+}
+
+export class CloudrunLoadBalancerModalComponent extends React.Component<
+  ICloudrunLoadBalancerModalProps & IRouterInjectedProps,
+  ICloudrunLoadBalancerModalState
+> {
+  public static show(props: ICloudrunLoadBalancerModalProps): Promise<CloudrunLoadBalancerUpsertDescription> {
+    return ReactModal.show(CloudrunLoadBalancerModal, props, { dialogClassName: 'wizard-modal modal-lg' });
+  }
+
+  private transformer = new CloudrunLoadBalancerTransformer();
+  private isUnmounted = false;
+  private applicationRefreshUnsubscribe?: () => void;
+
+  constructor(props: ICloudrunLoadBalancerModalProps & IRouterInjectedProps) {
+    super(props);
+    this.state = {
+      loading: !props.isNew,
+      taskMonitor: new TaskMonitor({
+        application: props.app,
+        title: 'Updating your load balancer',
+        onDismiss: () => props.dismissModal(),
+        onTaskComplete: this.onTaskComplete,
+      }),
+    };
+  }
+
+  public componentDidMount(): void {
+    const { app, isNew, loadBalancer } = this.props;
+    if (isNew) {
+      return;
+    }
+    this.transformer
+      .convertLoadBalancerForEditing(loadBalancer as ICloudrunLoadBalancer, app)
+      .then((convertedLoadBalancer) => {
+        if (this.isUnmounted) {
+          return;
+        }
+        const command = this.transformer.convertLoadBalancerToUpsertDescription(
+          convertedLoadBalancer as ICloudrunLoadBalancer,
+        );
+        if ((loadBalancer as ICloudrunLoadBalancer).split && !command.splitDescription) {
+          command.splitDescription = CloudrunLoadBalancerUpsertDescription.convertTrafficSplitToTrafficSplitDescription(
+            (loadBalancer as ICloudrunLoadBalancer).split,
+          );
+        } else {
+          command.splitDescription = (loadBalancer as any).splitDescription;
+        }
+        command.mapAllocationsToPercentages();
+        this.setState({ loadBalancer: command, loading: false });
+      })
+      .catch(() => {
+        if (!this.isUnmounted) {
+          this.props.dismissModal();
+        }
+      });
+  }
+
+  public componentWillUnmount(): void {
+    this.isUnmounted = true;
+    this.clearApplicationRefreshSubscription();
+  }
+
+  private onTaskComplete = (): void => {
+    this.clearApplicationRefreshSubscription();
+    this.applicationRefreshUnsubscribe = this.props.app.loadBalancers.onNextRefresh(this.onApplicationRefresh);
+    this.props.app.loadBalancers.refresh();
+  };
+
+  private onApplicationRefresh = (): void => {
+    this.clearApplicationRefreshSubscription();
+    if (this.isUnmounted) {
+      return;
+    }
+    const { loadBalancer } = this.state;
+    this.props.dismissModal();
+    const newStateParams = {
+      name: loadBalancer.name,
+      accountId: loadBalancer.credentials,
+      region: loadBalancer.region,
+      provider: 'cloudrun',
+    };
+    if (!this.props.stateService.includes('**.loadBalancerDetails')) {
+      this.props.stateService.go('.loadBalancerDetails', newStateParams);
+    } else {
+      this.props.stateService.go('^.loadBalancerDetails', newStateParams);
+    }
+  };
+
+  private clearApplicationRefreshSubscription = (): void => {
+    this.applicationRefreshUnsubscribe?.();
+    this.applicationRefreshUnsubscribe = undefined;
+  };
+
+  private submit = (): void => {
+    const description = cloneDeep(this.state.loadBalancer);
+    description.mapAllocationsToPercentages();
+    delete description.serverGroups;
+
+    if (this.props.forPipelineConfig) {
+      this.props.closeModal(description);
+    } else {
+      this.state.taskMonitor.submit(() => LoadBalancerWriter.upsertLoadBalancer(description, this.props.app, 'Update'));
+    }
+  };
+
+  private updateLoadBalancer = (loadBalancer: CloudrunLoadBalancerUpsertDescription): void => {
+    this.setState({ loadBalancer });
+  };
+
+  public render() {
+    const { dismissModal, forPipelineConfig, isNew, loadBalancer: sourceLoadBalancer } = this.props;
+    const { loading, loadBalancer, taskMonitor } = this.state;
+    const heading = isNew
+      ? 'Create New Load Balancer'
+      : `Edit ${[
+          sourceLoadBalancer.name,
+          sourceLoadBalancer.region,
+          sourceLoadBalancer.account || sourceLoadBalancer.credentials,
+        ].join(':')}`;
+    const submitButtonLabel = forPipelineConfig ? 'Done' : 'Update';
+    const canSubmit = loadBalancer?.splitDescription && allocationTotalIsValid(loadBalancer.splitDescription);
+
+    return (
+      <form name="form">
+        <div className="modal-header">
+          <button type="button" className="close" onClick={dismissModal}>
+            <span>&times;</span>
+          </button>
+          <h4 className="modal-title">{heading}</h4>
+        </div>
+        <div className="modal-body">
+          {loading && !isNew && (
+            <div style={{ height: 200 }} className="horizontal center middle">
+              Loading...
+            </div>
+          )}
+          {isNew && <LoadBalancerMessage showCreateMessage={true} />}
+          {!loading && !isNew && loadBalancer && (
+            <CloudrunLoadBalancerBasicSettings
+              loadBalancer={loadBalancer}
+              forPipelineConfig={forPipelineConfig}
+              onChange={this.updateLoadBalancer}
+            />
+          )}
+        </div>
+        <div className="modal-footer">
+          <button type="button" className="btn btn-default" onClick={dismissModal}>
+            Cancel
+          </button>
+          {!isNew && canSubmit && (
+            <button
+              type="button"
+              className="btn btn-primary"
+              disabled={taskMonitor.submitting || loading}
+              onClick={this.submit}
+            >
+              {submitButtonLabel}
+            </button>
+          )}
+        </div>
+      </form>
+    );
+  }
+}
+
+export const CloudrunLoadBalancerModal = Object.assign(withRouter(CloudrunLoadBalancerModalComponent), {
+  show: CloudrunLoadBalancerModalComponent.show,
+});
+
+interface ICloudrunLoadBalancerBasicSettingsProps {
+  loadBalancer: CloudrunLoadBalancerUpsertDescription;
+  forPipelineConfig: boolean;
+  onChange: (loadBalancer: CloudrunLoadBalancerUpsertDescription) => void;
+}
+
+class CloudrunLoadBalancerBasicSettings extends React.Component<ICloudrunLoadBalancerBasicSettingsProps> {
+  private serverGroupsWithoutAllocation(loadBalancer = this.props.loadBalancer): string[] {
+    const serverGroupsWithAllocation = loadBalancer.splitDescription.allocationDescriptions.map(
+      (description) => description.revisionName,
+    );
+    const allServerGroups = loadBalancer.serverGroups.map((serverGroup) => serverGroup.name);
+    return difference(allServerGroups, serverGroupsWithAllocation);
+  }
+
+  private changeLoadBalancer(mutator: (loadBalancer: CloudrunLoadBalancerUpsertDescription) => void): void {
+    const loadBalancer = cloneDeep(this.props.loadBalancer);
+    mutator(loadBalancer);
+    this.props.onChange(loadBalancer);
+  }
+
+  private addAllocation = (): void => {
+    this.changeLoadBalancer((loadBalancer) => {
+      const remainingServerGroups = this.serverGroupsWithoutAllocation(loadBalancer);
+      loadBalancer.splitDescription.allocationDescriptions.push({
+        revisionName: remainingServerGroups[0] || '',
+        percent: 0,
+      });
+    });
+  };
+
+  private removeAllocation = (index: number): void => {
+    this.changeLoadBalancer((loadBalancer) => loadBalancer.splitDescription.allocationDescriptions.splice(index, 1));
+  };
+
+  private updateAllocation = (index: number, changes: Partial<ICloudrunAllocationDescription>): void => {
+    this.changeLoadBalancer((loadBalancer) => {
+      loadBalancer.splitDescription.allocationDescriptions[index] = {
+        ...loadBalancer.splitDescription.allocationDescriptions[index],
+        ...changes,
+      };
+    });
+  };
+
+  public render() {
+    const { forPipelineConfig, loadBalancer } = this.props;
+    const serverGroupOptions = this.serverGroupsWithoutAllocation();
+    const showAddButton = forPipelineConfig || serverGroupOptions.length > 0;
+    const allocationIsInvalid = !allocationTotalIsValid(loadBalancer.splitDescription);
+
+    return (
+      <div className="row">
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            Allocations <HelpField id="cloudrun.loadBalancer.allocations" />
+          </div>
+          <div className="col-md-9">
+            {loadBalancer.splitDescription.allocationDescriptions.map((description, index) => (
+              <CloudrunAllocationConfigurationRow
+                key={index}
+                allocationDescription={description}
+                loadBalancer={loadBalancer}
+                forPipelineConfig={forPipelineConfig}
+                serverGroupOptions={serverGroupOptions}
+                onChange={(changes) => this.updateAllocation(index, changes)}
+                onRemove={() => this.removeAllocation(index)}
+              />
+            ))}
+            {showAddButton && (
+              <button type="button" className="add-new col-md-11" onClick={this.addAllocation}>
+                <span className="glyphicon glyphicon-plus-sign" /> Add allocation
+              </button>
+            )}
+          </div>
+        </div>
+        {allocationIsInvalid && (
+          <div className="form-group">
+            <div className="col-md-12 text-center">
+              <p className="alert alert-warning">Allocations must sum to 100%.</p>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+interface ICloudrunAllocationConfigurationRowProps {
+  allocationDescription: ICloudrunAllocationDescription;
+  loadBalancer: CloudrunLoadBalancerUpsertDescription;
+  forPipelineConfig: boolean;
+  serverGroupOptions: string[];
+  onChange: (changes: Partial<ICloudrunAllocationDescription>) => void;
+  onRemove: () => void;
+}
+
+function CloudrunAllocationConfigurationRow({
+  allocationDescription,
+  forPipelineConfig,
+  loadBalancer,
+  onChange,
+  onRemove,
+  serverGroupOptions,
+}: ICloudrunAllocationConfigurationRowProps) {
+  const options = allocationDescription.revisionName
+    ? uniq(serverGroupOptions.concat(allocationDescription.revisionName))
+    : serverGroupOptions;
+  const target = StageConstants.TARGET_LIST.find(
+    (targetOption: any) => targetOption.val === allocationDescription.target,
+  );
+  const targetLabel = target ? target.label : '';
+
+  return (
+    <>
+      <div className="form-group">
+        <div className="row">
+          <div className="col-md-7">
+            {forPipelineConfig ? (
+              <input
+                value={
+                  allocationDescription.cluster && allocationDescription.target
+                    ? `${targetLabel} (${allocationDescription.cluster})`
+                    : ''
+                }
+                type="text"
+                className="form-control input-sm"
+                readOnly={true}
+              />
+            ) : (
+              <select
+                value={allocationDescription.revisionName || ''}
+                className="form-control input-sm"
+                onChange={(event) => onChange({ revisionName: event.target.value })}
+              >
+                {options.map((serverGroup) => (
+                  <option key={serverGroup} value={serverGroup}>
+                    {serverGroup}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+          <div className="col-md-3">
+            <div className="input-group input-group-sm">
+              <input
+                type="number"
+                value={allocationDescription.percent}
+                required={true}
+                className="form-control input-sm"
+                min={0}
+                max={100}
+                onChange={(event) => onChange({ percent: Number(event.target.value) })}
+              />
+              <span className="input-group-addon">%</span>
+            </div>
+          </div>
+          <div className="col-md-2">
+            <button type="button" className="btn btn-link sm-label" onClick={onRemove}>
+              <span className="glyphicon glyphicon-trash" />
+            </button>
+          </div>
+        </div>
+      </div>
+      {forPipelineConfig && (
+        <div className="form-group">
+          <div className="well col-md-11" style={{ paddingTop: 5, paddingBottom: 10 }}>
+            <div className="row">
+              <div className="form-group">
+                <div className="col-md-3 sm-label-right">Cluster</div>
+                <div className="col-md-7" style={{ marginBottom: 10 }}>
+                  <input
+                    value={allocationDescription.cluster || loadBalancer.name}
+                    type="text"
+                    className="form-control input-sm"
+                    readOnly={true}
+                  />
+                </div>
+                <div className="col-md-3 sm-label-right">Target</div>
+                <div className="col-md-7">
+                  <select
+                    value={allocationDescription.target || ''}
+                    className="form-control input-sm"
+                    onChange={(event) => onChange({ target: event.target.value, cluster: loadBalancer.name })}
+                  >
+                    <option value="">Select...</option>
+                    {StageConstants.TARGET_LIST.map((targetOption: any) => (
+                      <option key={targetOption.val} value={targetOption.val}>
+                        {targetOption.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}