@spinnaker/cloudrun 2026.2.2 → 2026.3.0

package/src/loadBalancer/details/CloudrunLoadBalancerActions.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Dropdown, MenuItem } from 'react-bootstrap';
+
+import type { ILoadBalancerActionsProps, ILoadBalancerDeleteCommand } from '@spinnaker/core';
+import { ConfirmationModalService, LoadBalancerWriter } from '@spinnaker/core';
+
+import type { ICloudrunLoadBalancer } from '../../common/domain';
+import { CloudrunLoadBalancerModal } from '../configure/wizard/CloudrunLoadBalancerModal';
+
+export function CloudrunLoadBalancerActions({ app, loadBalancer }: ILoadBalancerActionsProps) {
+  const cloudrunLoadBalancer = loadBalancer as ICloudrunLoadBalancer;
+  const canDeleteLoadBalancer = cloudrunLoadBalancer.name !== 'default';
+
+  const editLoadBalancer = () => {
+    CloudrunLoadBalancerModal.show({ app, loadBalancer: cloudrunLoadBalancer, isNew: false, forPipelineConfig: false });
+  };
+  const getConfirmationModalBodyHtml = (): string => {
+    const serverGroupNames = cloudrunLoadBalancer.serverGroups.map((serverGroup) => serverGroup.name);
+    if (!serverGroupNames?.length) {
+      return null;
+    }
+    if (serverGroupNames.length > 1) {
+      const listOfServerGroupNames = serverGroupNames.map((name) => `<li>${name}</li>`).join('');
+      return `<div class="alert alert-warning"><p>Deleting <b>${cloudrunLoadBalancer.name}</b> will destroy the following server groups:<ul>${listOfServerGroupNames}</ul></p></div>`;
+    }
+    return `<div class="alert alert-warning"><p>Deleting <b>${cloudrunLoadBalancer.name}</b> will destroy <b>${serverGroupNames[0]}</b>.</p></div>`;
+  };
+  const deleteLoadBalancer = () => {
+    const submitMethod = () => {
+      const command: ILoadBalancerDeleteCommand = {
+        cloudProvider: cloudrunLoadBalancer.cloudProvider,
+        loadBalancerName: cloudrunLoadBalancer.name,
+        credentials: cloudrunLoadBalancer.account,
+      };
+      return LoadBalancerWriter.deleteLoadBalancer(command, app);
+    };
+
+    ConfirmationModalService.confirm({
+      header: `Really delete ${cloudrunLoadBalancer.name}?`,
+      buttonText: `Delete ${cloudrunLoadBalancer.name}`,
+      body: getConfirmationModalBodyHtml(),
+      account: cloudrunLoadBalancer.account,
+      taskMonitorConfig: {
+        application: app,
+        title: `Deleting ${cloudrunLoadBalancer.name}`,
+      },
+      submitMethod,
+    });
+  };
+
+  return (
+    <Dropdown className="dropdown" id="cloudrun-load-balancer-actions-dropdown">
+      <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">Load Balancer Actions</Dropdown.Toggle>
+      <Dropdown.Menu>
+        <MenuItem onClick={editLoadBalancer}>Edit Load Balancer</MenuItem>
+        {canDeleteLoadBalancer ? (
+          <MenuItem onClick={deleteLoadBalancer}>Delete Load Balancer</MenuItem>
+        ) : (
+          <MenuItem disabled={true} title="You cannot delete a default service.">
+            Delete Load Balancer
+          </MenuItem>
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}

package/src/loadBalancer/details/sections.spec.ts

@@ -0,0 +1,19 @@
+import { compareCloudrunLoadBalancerServerGroups } from './sections';
+
+describe('compareCloudrunLoadBalancerServerGroups', () => {
+  it('sorts enabled server groups first and names descending within each state', () => {
+    const sorted = [
+      { name: 'alpha', isDisabled: true },
+      { name: 'zulu', isDisabled: false },
+      { name: 'alpha', isDisabled: false },
+      { name: 'zulu', isDisabled: true },
+    ].sort(compareCloudrunLoadBalancerServerGroups as any);
+
+    expect(sorted.map((serverGroup) => `${serverGroup.isDisabled}:${serverGroup.name}`)).toEqual([
+      'false:zulu',
+      'false:alpha',
+      'true:zulu',
+      'true:alpha',
+    ]);
+  });
+});

package/src/loadBalancer/details/sections.tsx

@@ -0,0 +1,91 @@
+import { UISref } from '@uirouter/react';
+import React from 'react';
+
+import type { ILoadBalancerDetailsSectionProps } from '@spinnaker/core';
+import { AccountTag, CollapsibleSection, HealthCounts } from '@spinnaker/core';
+
+import { ComponentUrlDetails } from '../../common/ComponentUrlDetails';
+import type { ICloudrunLoadBalancer } from '../../common/domain';
+
+export function compareCloudrunLoadBalancerServerGroups(a: any, b: any): number {
+  if (a.isDisabled !== b.isDisabled) {
+    return a.isDisabled ? 1 : -1;
+  }
+  return b.name.localeCompare(a.name);
+}
+
+export function CloudrunLoadBalancerDetailsSection({ loadBalancer }: ILoadBalancerDetailsSectionProps) {
+  const cloudrunLoadBalancer = loadBalancer as ICloudrunLoadBalancer;
+  return (
+    <CollapsibleSection heading="Load Balancer Details" defaultExpanded={true}>
+      <dl className="dl-horizontal dl-narrow">
+        <dt>In</dt>
+        <dd>
+          <AccountTag account={cloudrunLoadBalancer.account} />
+        </dd>
+        <dt>Region</dt>
+        <dd>{cloudrunLoadBalancer.region}</dd>
+        {!!cloudrunLoadBalancer.serverGroups.length && <dt>Server Groups</dt>}
+        {!!cloudrunLoadBalancer.serverGroups.length && (
+          <dd>
+            <ul>
+              {cloudrunLoadBalancer.serverGroups
+                .slice()
+                .sort(compareCloudrunLoadBalancerServerGroups)
+                .map((serverGroup) => (
+                  <li key={serverGroup.name}>
+                    <UISref
+                      to="^.serverGroup"
+                      params={{
+                        region: serverGroup.region,
+                        accountId: serverGroup.account,
+                        serverGroup: serverGroup.name,
+                        provider: 'cloudrun',
+                      }}
+                    >
+                      <a>{serverGroup.name}</a>
+                    </UISref>
+                  </li>
+                ))}
+            </ul>
+          </dd>
+        )}
+      </dl>
+    </CollapsibleSection>
+  );
+}
+
+export function CloudrunLoadBalancerStatusSection({ loadBalancer }: ILoadBalancerDetailsSectionProps) {
+  return (
+    <CollapsibleSection heading="Status" defaultExpanded={true}>
+      <HealthCounts className="pull-left" container={loadBalancer.instanceCounts} />
+    </CollapsibleSection>
+  );
+}
+
+export function CloudrunLoadBalancerTrafficSplitSection({ loadBalancer }: ILoadBalancerDetailsSectionProps) {
+  const cloudrunLoadBalancer = loadBalancer as ICloudrunLoadBalancer;
+  return (
+    <CollapsibleSection heading="Traffic Split" defaultExpanded={true}>
+      <dl className="dl-horizontal dl-narrow">
+        <ul>
+          {cloudrunLoadBalancer.split?.trafficTargets?.map((trafficTarget) => (
+            <li key={trafficTarget.revisionName}>
+              {trafficTarget.revisionName}:<span className="pull-right">{trafficTarget.percent}</span>
+            </li>
+          ))}
+        </ul>
+      </dl>
+    </CollapsibleSection>
+  );
+}
+
+export function CloudrunLoadBalancerDnsSection({ loadBalancer }: ILoadBalancerDetailsSectionProps) {
+  return (
+    <CollapsibleSection heading="DNS" defaultExpanded={true}>
+      <dl className="dl-narrow">
+        <ComponentUrlDetails component={loadBalancer as any} />
+      </dl>
+    </CollapsibleSection>
+  );
+}

package/src/loadBalancer/details/useCloudrunLoadBalancerDetails.ts

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+
+import { useDataSource } from '@spinnaker/core';
+import type { IUseDetailsHookProps, UseDetailsHook, UseDetailsResult } from '@spinnaker/core';
+
+import type { ICloudrunLoadBalancer } from '../../common/domain';
+
+export const useCloudrunLoadBalancerDetails: UseDetailsHook<ICloudrunLoadBalancer> = ({
+  app,
+  loadBalancerParams,
+  autoClose,
+}: IUseDetailsHookProps): UseDetailsResult<ICloudrunLoadBalancer> => {
+  const dataSource = app.getDataSource('loadBalancers');
+  const { data: loadBalancers, loaded, error, refresh } = useDataSource<ICloudrunLoadBalancer[]>(dataSource);
+  const data = useMemo(() => {
+    if (!loaded || error) {
+      return undefined;
+    }
+
+    const loadBalancer = findCloudrunLoadBalancer(loadBalancers, loadBalancerParams);
+    if (!loadBalancer) {
+      autoClose();
+      return undefined;
+    }
+
+    return loadBalancer;
+  }, [
+    loaded,
+    error,
+    loadBalancers,
+    loadBalancerParams.name,
+    loadBalancerParams.accountId,
+    loadBalancerParams.region,
+    autoClose,
+  ]);
+
+  return {
+    data,
+    loading: !loaded,
+    error: error || null,
+    refetch: async () => refresh(),
+  };
+};
+
+export function findCloudrunLoadBalancer(
+  loadBalancers: ICloudrunLoadBalancer[],
+  loadBalancerParams: IUseDetailsHookProps['loadBalancerParams'],
+) {
+  return loadBalancers.find((candidate) => {
+    return (
+      candidate.name === loadBalancerParams.name &&
+      candidate.account === loadBalancerParams.accountId &&
+      candidate.region === loadBalancerParams.region
+    );
+  });
+}

package/src/loadBalancer/index.ts

@@ -1,3 +1,5 @@
 export * from './loadBalancerTransformer';
-export * from './details/details.controller';
-export * from './configure/wizard/wizard.controller';
+export * from './configure/wizard/CloudrunLoadBalancerModal';
+export * from './details/CloudrunLoadBalancerActions';
+export * from './details/sections';
+export * from './details/useCloudrunLoadBalancerDetails';

package/src/loadBalancer/loadBalancerTransformer.ts

@@ -1,4 +1,3 @@
-import { module } from 'angular';
 import { camelCase, chain, cloneDeep, filter, get, has, reduce } from 'lodash';
 
 import type {
@@ -75,9 +74,7 @@ export class CloudrunLoadBalancerUpsertDescription implements ILoadBalancerUpser
 }
 
 export class CloudrunLoadBalancerTransformer {
-  public static $inject = ['$q'];
-  constructor(private $q: ng.IQService) {}
-  public normalizeLoadBalancer(loadBalancer: ILoadBalancer): PromiseLike<ILoadBalancer> {
+  public normalizeLoadBalancer(loadBalancer: ILoadBalancer): Promise<ILoadBalancer> {
     loadBalancer.provider = loadBalancer.type;
     loadBalancer.instanceCounts = this.buildInstanceCounts(loadBalancer.serverGroups);
     loadBalancer.instances = [];
@@ -95,13 +92,13 @@ export class CloudrunLoadBalancerTransformer {
 
     const activeServerGroups = filter(loadBalancer.serverGroups, { isDisabled: false });
     loadBalancer.instances = chain(activeServerGroups).map('instances').flatten().value() as IInstance[];
-    return this.$q.resolve(loadBalancer);
+    return Promise.resolve(loadBalancer);
   }
 
   public convertLoadBalancerForEditing(
     loadBalancer: ICloudrunLoadBalancer,
     application: Application,
-  ): PromiseLike<ICloudrunLoadBalancer> {
+  ): Promise<ICloudrunLoadBalancer> {
     return application
       .getDataSource('loadBalancers')
       .ready()
@@ -159,10 +156,3 @@ export class CloudrunLoadBalancerTransformer {
     return instance as IInstance;
   }
 }
-
-export const CLOUDRUN_LOAD_BALANCER_TRANSFORMER = 'spinnaker.cloudrun.loadBalancer.transformer.service';
-
-module(CLOUDRUN_LOAD_BALANCER_TRANSFORMER, []).service(
-  'cloudrunLoadBalancerTransformer',
-  CloudrunLoadBalancerTransformer,
-);

package/src/manifest/manifest.service.ts

@@ -10,6 +10,23 @@ export interface IStageManifest {
   };
 }
 
+// A manifest that the artifact-store entity storage feature has replaced with a
+// reference, rather than expanding it back into a real manifest before deck ever
+// sees it (e.g. gate isn't configured to expand these on read).
+export interface IStoredManifestReference {
+  type: string;
+  reference: string;
+}
+
+export function isStoredManifestReference(manifest: unknown): manifest is IStoredManifestReference {
+  return (
+    !!manifest &&
+    typeof manifest === 'object' &&
+    (manifest as IStoredManifestReference).type === 'remote/map/base64' &&
+    typeof (manifest as IStoredManifestReference).reference === 'string'
+  );
+}
+
 export interface IManifestParams {
   account: string;
   location: string;
@@ -21,7 +38,7 @@ export type IManifestCallback = (manifest: IManifest) => void;
 export class CloudrunManifestService {
   public static subscribe(app: Application, params: IManifestParams, fn: IManifestCallback): () => void {
     CloudrunManifestService.updateManifest(params, fn);
-    return app.onRefresh(null, () => CloudrunManifestService.updateManifest(params, fn));
+    return app.onRefresh(() => CloudrunManifestService.updateManifest(params, fn));
   }
 
   private static updateManifest(params: IManifestParams, fn: IManifestCallback) {

package/src/manifest/manifestCommandBuilder.service.ts

@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash';
-import { $q } from 'ngimport';
 
-import type { Application, IAccountDetails, IArtifactAccount, IMoniker } from '@spinnaker/core';
+import type { Application, IMoniker } from '@spinnaker/core';
 import { AccountService } from '@spinnaker/core';
 
 import { ManifestSource } from './ManifestSource';
@@ -56,61 +55,55 @@ export class CloudrunManifestCommandBuilder {
     sourceManifest?: any,
     sourceMoniker?: IMoniker,
     sourceAccount?: string,
-  ): PromiseLike<ICloudrunManifestCommandData> {
+  ): Promise<ICloudrunManifestCommandData> {
     const dataToFetch = {
       accounts: AccountService.getAllAccountDetailsForProvider('cloudrun'),
       artifactAccounts: AccountService.getArtifactAccounts(),
     };
 
-    return $q
-      .all(dataToFetch)
-      .then((backingData: { accounts: IAccountDetails[]; artifactAccounts: IArtifactAccount[] }) => {
-        const { accounts, artifactAccounts } = backingData;
-
-        const account = accounts.some((a) => a.name === sourceAccount)
-          ? accounts.find((a) => a.name === sourceAccount).name
-          : accounts.length
-          ? accounts[0].name
-          : null;
-
-        let manifestArtifactAccount: string = null;
-        const [artifactAccountData] = artifactAccounts;
-        if (artifactAccountData) {
-          manifestArtifactAccount = artifactAccountData.name;
-        }
-
-        const cloudProvider = 'cloudrun';
-        const moniker = sourceMoniker || {
-          app: app.name,
-        };
-
-        const relationships = {
-          loadBalancers: [] as string[],
-          securityGroups: [] as string[],
-        };
-
-        const versioned: any = null;
-
-        return {
-          command: {
-            cloudProvider,
-            manifest: null,
-            manifests: Array.isArray(sourceManifest)
-              ? sourceManifest
-              : sourceManifest != null
-              ? [sourceManifest]
-              : null,
-            relationships,
-            moniker,
-            account,
-            versioned,
-            manifestArtifactAccount,
-            source: ManifestSource.TEXT,
-          },
-          metadata: {
-            backingData,
-          },
-        } as ICloudrunManifestCommandData;
-      });
+    return Promise.all([dataToFetch.accounts, dataToFetch.artifactAccounts]).then(([accounts, artifactAccounts]) => {
+      const backingData = { accounts, artifactAccounts };
+
+      const account = accounts.some((a) => a.name === sourceAccount)
+        ? accounts.find((a) => a.name === sourceAccount).name
+        : accounts.length
+        ? accounts[0].name
+        : null;
+
+      let manifestArtifactAccount: string = null;
+      const [artifactAccountData] = artifactAccounts;
+      if (artifactAccountData) {
+        manifestArtifactAccount = artifactAccountData.name;
+      }
+
+      const cloudProvider = 'cloudrun';
+      const moniker = sourceMoniker || {
+        app: app.name,
+      };
+
+      const relationships = {
+        loadBalancers: [] as string[],
+        securityGroups: [] as string[],
+      };
+
+      const versioned: any = null;
+
+      return {
+        command: {
+          cloudProvider,
+          manifest: null,
+          manifests: Array.isArray(sourceManifest) ? sourceManifest : sourceManifest != null ? [sourceManifest] : null,
+          relationships,
+          moniker,
+          account,
+          versioned,
+          manifestArtifactAccount,
+          source: ManifestSource.TEXT,
+        },
+        metadata: {
+          backingData,
+        },
+      } as ICloudrunManifestCommandData;
+    });
   }
 }

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

@@ -2,11 +2,11 @@ import { get } from 'lodash';
 import React from 'react';
 
 import type { IExecutionDetailsSectionProps, IManifest } from '@spinnaker/core';
-import { ExecutionDetailsSection, StageFailureMessage } from '@spinnaker/core';
+import { ExecutionDetailsSection, ManifestYaml, StageFailureMessage } from '@spinnaker/core';
 
 import { ManifestStatus } from './ManifestStatus';
-import type { IStageManifest } from '../../../../manifest/manifest.service';
-import { CloudrunManifestService } from '../../../../manifest/manifest.service';
+import type { IStageManifest, IStoredManifestReference } from '../../../../manifest/manifest.service';
+import { CloudrunManifestService, isStoredManifestReference } from '../../../../manifest/manifest.service';
 
 export interface IManifestSubscription {
   id: string;
@@ -36,7 +36,9 @@ export class DeployStatus extends React.Component<IExecutionDetailsSectionProps,
   }
 
   public componentDidUpdate(_prevProps: IExecutionDetailsSectionProps, prevState: IDeployStatusState) {
-    const manifests: IStageManifest[] = get(this.props.stage, ['context', 'outputs.manifests'], []).filter((m) => !!m);
+    const manifests: IStageManifest[] = get(this.props.stage, ['context', 'outputs.manifests'], [])
+      .filter((m) => !!m)
+      .filter((m) => !isStoredManifestReference(m));
     const manifestIds = manifests.map((m) => CloudrunManifestService.manifestIdentifier(m)).sort();
     if (prevState.manifestIds.join('') !== manifestIds.join('')) {
       this.unsubscribeAll();
@@ -69,6 +71,16 @@ export class DeployStatus extends React.Component<IExecutionDetailsSectionProps,
     this.state.subscriptions.forEach(({ unsubscribe }) => unsubscribe());
   }
 
+  // Manifests the artifact-store entity storage feature replaced with a reference instead
+  // of expanding them before deck saw them. We can't determine their kind/name/namespace
+  // (and so can't subscribe to live status for them) without fetching the content, so we
+  // let the user load them on demand instead, same as a baked manifest's YAML.
+  private get storedManifestRefs(): IStoredManifestReference[] {
+    return get(this.props.stage, ['context', 'outputs.manifests'], [])
+      .filter((m: unknown) => !!m)
+      .filter(isStoredManifestReference);
+  }
+
   private stageManifestToIManifest(manifest: IStageManifest, account: string): IManifest {
     return {
       name: get(manifest, 'metadata.name', ''),
@@ -102,6 +114,23 @@ export class DeployStatus extends React.Component<IExecutionDetailsSectionProps,
             </div>
           </div>
         )}
+        {!!this.storedManifestRefs.length && (
+          <div className="row">
+            <div className="col-md-12">
+              <div className="well alert alert-info">
+                {this.storedManifestRefs.map((ref, i) => (
+                  <div key={i}>
+                    <ManifestYaml
+                      linkName="Load Manifest Details"
+                      modalTitle="Manifest"
+                      manifestUri={ref.reference.replace(/^ref?:\/\//, '')}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
       </ExecutionDetailsSection>
     );
   }

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

@@ -0,0 +1,35 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { AccountService } from '@spinnaker/core';
+
+import { ManifestDetailsLinkComponent } from './ManifestDetailsLink';
+
+describe('Cloud Run ManifestDetailsLink', () => {
+  it('builds its link through the injected state service', async () => {
+    spyOn(AccountService, 'getAccountDetails').and.returnValue(
+      Promise.resolve({ spinnakerKindMap: { Service: 'unclassified' } } as any) as any,
+    );
+    const href = jasmine.createSpy('href').and.returnValue('#/manifest');
+    const component = shallow(
+      <ManifestDetailsLinkComponent
+        {...({ router: {}, stateParams: {}, stateService: { href } } as any)}
+        accountId="test-account"
+        linkName="Manifest"
+        manifest={{ manifest: { kind: 'Service', metadata: { annotations: {}, name: 'test-service' } } } as any}
+      />,
+    );
+
+    await Promise.resolve();
+    component.update();
+
+    expect(href).toHaveBeenCalledWith('home.applications.application.insight.clusters.cloudrunResource', {
+      accountId: 'test-account',
+      cloudrunResource: 'service test-service',
+      provider: 'cloudrun',
+      reg: '',
+      region: '_',
+    });
+    expect(component.find('a').prop('href')).toBe('#/manifest');
+  });
+});

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

@@ -1,8 +1,8 @@
 import { get, trim } from 'lodash';
 import React from 'react';
 
-import type { IManifest } from '@spinnaker/core';
-import { AccountService, ReactInjector } from '@spinnaker/core';
+import type { IManifest, IRouterInjectedProps } from '@spinnaker/core';
+import { AccountService, withRouter } from '@spinnaker/core';
 
 const UNMAPPED_K8S_RESOURCE_STATE_KEY = 'cloudrunResource';
 
@@ -16,14 +16,17 @@ export interface IManifestDetailsState {
   url: string;
 }
 
-export class ManifestDetailsLink extends React.Component<IManifestDetailsProps, IManifestDetailsState> {
+export class ManifestDetailsLinkComponent extends React.Component<
+  IManifestDetailsProps & IRouterInjectedProps,
+  IManifestDetailsState
+> {
   private spinnakerKindStateMap: { [k: string]: string } = {
     // keys from clouddriver's CloudrunSpinnakerKindMap
     serverGroupManagers: 'serverGroupManager',
     serverGroups: 'serverGroup',
   };
 
-  constructor(props: IManifestDetailsProps) {
+  constructor(props: IManifestDetailsProps & IRouterInjectedProps) {
     super(props);
     this.state = {
       url: '',
@@ -73,7 +76,7 @@ export class ManifestDetailsLink extends React.Component<IManifestDetailsProps,
       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);
+      const url = this.props.stateService.href(`home.applications.application.insight.clusters.${stateKey}`, params);
       this.setState({ url });
     });
   }
@@ -90,3 +93,5 @@ export class ManifestDetailsLink extends React.Component<IManifestDetailsProps,
     }
   }
 }
+
+export const ManifestDetailsLink = withRouter(ManifestDetailsLinkComponent);

package/src/pipeline/stages/editLoadBalancer/CloudrunEditLoadBalancerExecutionDetails.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import type { IExecutionDetailsSectionProps, ILoadBalancer } from '@spinnaker/core';
+import { AccountTag, ExecutionDetailsSection, StageFailureMessage } from '@spinnaker/core';
+
+import type { ICloudrunAllocationDescription } from '../../../loadBalancer/loadBalancerTransformer';
+
+export function CloudrunEditLoadBalancerExecutionDetails(props: IExecutionDetailsSectionProps) {
+  const { current, name, stage } = props;
+  const loadBalancers = ((stage.context || {}).loadBalancers || []) as ILoadBalancer[];
+
+  return (
+    <ExecutionDetailsSection name={name} current={current}>
+      <div className="row">
+        <div className="col-md-12">
+          <table className="table table-condensed">
+            <thead>
+              <tr>
+                <th>Account</th>
+                <th>Name</th>
+                <th>Region</th>
+                <th>Allocations</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loadBalancers.map((loadBalancer) => (
+                <tr key={getLoadBalancerCompositeKey(loadBalancer)}>
+                  <td>
+                    <AccountTag account={loadBalancer.credentials || loadBalancer.account} />
+                  </td>
+                  <td>{loadBalancer.name}</td>
+                  <td>{loadBalancer.region}</td>
+                  <td>{renderAllocations((loadBalancer as any).splitDescription?.allocationDescriptions)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <StageFailureMessage stage={stage} message={stage.failureMessage} />
+    </ExecutionDetailsSection>
+  );
+}
+
+CloudrunEditLoadBalancerExecutionDetails.title = 'editLoadBalancerConfig';
+
+export function getLoadBalancerCompositeKey(loadBalancer: Partial<ILoadBalancer>): string {
+  return [
+    loadBalancer.name || '',
+    loadBalancer.credentials || loadBalancer.account || '',
+    loadBalancer.region || '',
+  ].join(':');
+}
+
+function renderAllocations(allocationDescriptions: ICloudrunAllocationDescription[] = []): React.ReactNode {
+  if (!allocationDescriptions.length) {
+    return null;
+  }
+
+  return (
+    <ul className="list-unstyled no-margin">
+      {allocationDescriptions.map((allocation, index) => (
+        <li key={`${allocation.revisionName || allocation.target || allocation.cluster || 'allocation'}:${index}`}>
+          {allocation.revisionName || allocation.target || allocation.cluster || 'Allocation'}:{' '}
+          <span>{allocation.percent}%</span>
+        </li>
+      ))}
+    </ul>
+  );
+}