@spinnaker/appengine 2026.2.2 → 2026.3.0

package/src/domain/index.ts

@@ -2,5 +2,4 @@ export * from './IAppengineAccount';
 export * from './IAppengineInstance';
 export * from './IAppengineLoadBalancer';
 export * from './IAppengineServerGroup';
-export * from './IAppengineStageScope';
 export * from './IAppengineTriggers';

package/src/index.ts

@@ -1 +1 @@
-export { APPENGINE_MODULE } from './appengine.module';
+import './appengine.module';

package/src/instance/details/AppengineInstanceDetails.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface IAppengineInstanceDetailsProps {
+  instance: {
+    account: string;
+    instanceId: string;
+    provider: string;
+    region: string;
+  };
+}
+
+export function AppengineInstanceDetails({ instance }: IAppengineInstanceDetailsProps) {
+  return (
+    <div className="details-panel">
+      <div className="header">
+        <div className="header-text horizontal middle">
+          <i className="fa icon-instance" />
+          <h3 className="horizontal middle space-between flex-1">{instance.instanceId}</h3>
+        </div>
+      </div>
+      <div className="content">
+        <dl className="dl-horizontal dl-narrow">
+          <dt>Account</dt>
+          <dd>{instance.account}</dd>
+          <dt>Region</dt>
+          <dd>{instance.region}</dd>
+          <dt>Provider</dt>
+          <dd>{instance.provider}</dd>
+        </dl>
+      </div>
+    </div>
+  );
+}

package/src/loadBalancer/configure/AppengineCreateLoadBalancerModal.tsx

@@ -0,0 +1,342 @@
+import { cloneDeep } from 'lodash';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import type { ILoadBalancerModalProps } from '@spinnaker/core';
+import { LoadBalancerWriter, ModalClose, noop, ReactModal, TaskMonitor, TaskMonitorWrapper } from '@spinnaker/core';
+
+import type { IAppengineLoadBalancer } from '../../domain';
+import type { IAppengineAllocationDescription } from '../transformer';
+import { AppengineLoadBalancerUpsertDescription } from '../transformer';
+
+const TARGET_OPTIONS = [
+  { label: 'Current Server Group', value: 'current_asg_dynamic' },
+  { label: 'Previous Server Group', value: 'ancestor_asg_dynamic' },
+  { label: 'Oldest Server Group', value: 'oldest_asg_dynamic' },
+];
+
+export function updateAllocationLocatorType(
+  allocation: IAppengineAllocationDescription,
+  locatorType: IAppengineAllocationDescription['locatorType'],
+): IAppengineAllocationDescription {
+  const updated = { ...allocation, locatorType };
+  if (locatorType === 'targetCoordinate') {
+    delete updated.serverGroupName;
+    updated.target = updated.target || TARGET_OPTIONS[0].value;
+  } else {
+    delete updated.cluster;
+    delete updated.target;
+  }
+  return updated;
+}
+
+interface IAppengineCreateLoadBalancerModalState {
+  taskMonitor: TaskMonitor;
+}
+
+export class AppengineCreateLoadBalancerModal extends React.Component<
+  ILoadBalancerModalProps,
+  IAppengineCreateLoadBalancerModalState
+> {
+  public static defaultProps: Partial<ILoadBalancerModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  public static show(props: ILoadBalancerModalProps & { isNew?: boolean }): Promise<IAppengineLoadBalancer> {
+    return ReactModal.show(AppengineCreateLoadBalancerModal, props, { dialogClassName: 'modal-lg' });
+  }
+
+  public state: IAppengineCreateLoadBalancerModalState = {
+    taskMonitor: new TaskMonitor({
+      application: this.props.app,
+      title: 'Updating your load balancer',
+      onDismiss: () => this.props.dismissModal(),
+      onTaskComplete: () => this.props.app.getDataSource('loadBalancers').refresh(),
+    }),
+  };
+
+  private command: AppengineLoadBalancerUpsertDescription = this.buildInitialCommand();
+
+  private buildInitialCommand(): AppengineLoadBalancerUpsertDescription {
+    const loadBalancer = (this.props.loadBalancer || {}) as IAppengineLoadBalancer;
+    const command = new AppengineLoadBalancerUpsertDescription({
+      ...loadBalancer,
+      account: loadBalancer.account || loadBalancer.credentials,
+      credentials: loadBalancer.credentials || loadBalancer.account,
+      name: loadBalancer.name,
+      region: loadBalancer.region,
+      serverGroups: loadBalancer.serverGroups || [],
+      cloudProvider: 'appengine',
+      migrateTraffic: loadBalancer.migrateTraffic || false,
+    } as IAppengineLoadBalancer);
+
+    command.splitDescription = loadBalancer.splitDescription ||
+      (loadBalancer.split &&
+        AppengineLoadBalancerUpsertDescription.convertTrafficSplitToTrafficSplitDescription(loadBalancer.split)) || {
+        shardBy: 'UNSPECIFIED',
+        allocationDescriptions: (loadBalancer.serverGroups || []).slice(0, 1).map((serverGroup) => ({
+          allocation: 100,
+          locatorType: 'fromExisting',
+          serverGroupName: serverGroup.name,
+        })),
+      };
+    command.mapAllocationsToPercentages();
+
+    return command;
+  }
+
+  private update = (field: keyof IAppengineLoadBalancer, value: any) => {
+    (this.command as any)[field] = value;
+    this.forceUpdate();
+  };
+
+  private updateSplit = (field: string, value: any) => {
+    (this.command.splitDescription as any)[field] = value;
+    this.forceUpdate();
+  };
+
+  private updateAllocation = (index: number, field: string, value: any) => {
+    (this.command.splitDescription.allocationDescriptions[index] as any)[field] = value;
+    this.forceUpdate();
+  };
+
+  private updateAllocationLocatorType = (
+    index: number,
+    locatorType: IAppengineAllocationDescription['locatorType'],
+  ) => {
+    this.command.splitDescription.allocationDescriptions[index] = updateAllocationLocatorType(
+      this.command.splitDescription.allocationDescriptions[index],
+      locatorType,
+    );
+    this.forceUpdate();
+  };
+
+  private addAllocation = () => {
+    this.command.splitDescription.allocationDescriptions.push({
+      allocation: 0,
+      locatorType: this.props.forPipelineConfig ? 'text' : 'fromExisting',
+      serverGroupName: '',
+    });
+    if (this.command.splitDescription.allocationDescriptions.length > 1 && !this.command.splitDescription.shardBy) {
+      this.command.splitDescription.shardBy = 'IP';
+    }
+    this.forceUpdate();
+  };
+
+  private removeAllocation = (index: number) => {
+    this.command.splitDescription.allocationDescriptions.splice(index, 1);
+    this.forceUpdate();
+  };
+
+  private allocationTotal = () => {
+    return this.command.splitDescription.allocationDescriptions.reduce((sum, description) => {
+      return sum + Number(description.allocation || 0);
+    }, 0);
+  };
+
+  private submit = () => {
+    const description = cloneDeep(this.command);
+    description.mapAllocationsToDecimals();
+    delete description.serverGroups;
+
+    if (this.props.forPipelineConfig) {
+      this.props.closeModal(description as any);
+      return;
+    }
+
+    this.state.taskMonitor.submit(() => LoadBalancerWriter.upsertLoadBalancer(description, this.props.app, 'Update'));
+  };
+
+  private renderAllocationTarget(allocation: IAppengineAllocationDescription, index: number) {
+    if (!this.props.forPipelineConfig) {
+      return (
+        <input
+          className="form-control input-sm"
+          onChange={(event) => this.updateAllocation(index, 'serverGroupName', event.target.value)}
+          value={allocation.serverGroupName || ''}
+        />
+      );
+    }
+
+    return (
+      <div>
+        <div className="radio">
+          <label>
+            <input
+              checked={allocation.locatorType === 'text'}
+              onChange={() => this.updateAllocationLocatorType(index, 'text')}
+              type="radio"
+            />{' '}
+            Text input
+          </label>
+        </div>
+        <div className="radio">
+          <label>
+            <input
+              checked={allocation.locatorType === 'targetCoordinate'}
+              onChange={() => this.updateAllocationLocatorType(index, 'targetCoordinate')}
+              type="radio"
+            />{' '}
+            Target coordinate
+          </label>
+        </div>
+        <div className="radio">
+          <label>
+            <input
+              checked={allocation.locatorType === 'fromExisting'}
+              onChange={() => this.updateAllocationLocatorType(index, 'fromExisting')}
+              type="radio"
+            />{' '}
+            Existing server group
+          </label>
+        </div>
+        {allocation.locatorType === 'targetCoordinate' ? (
+          <div>
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.updateAllocation(index, 'cluster', event.target.value)}
+              placeholder="Cluster"
+              value={allocation.cluster || ''}
+            />
+            <select
+              className="form-control input-sm"
+              onChange={(event) => this.updateAllocation(index, 'target', event.target.value)}
+              value={allocation.target || TARGET_OPTIONS[0].value}
+            >
+              {TARGET_OPTIONS.map((target) => (
+                <option key={target.value} value={target.value}>
+                  {target.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        ) : (
+          <input
+            className="form-control input-sm"
+            onChange={(event) => this.updateAllocation(index, 'serverGroupName', event.target.value)}
+            placeholder={allocation.locatorType === 'text' ? 'Server group expression or name' : 'Server group'}
+            value={allocation.serverGroupName || ''}
+          />
+        )}
+      </div>
+    );
+  }
+
+  public render() {
+    const { dismissModal, isNew } = this.props as ILoadBalancerModalProps & { isNew?: boolean };
+
+    return (
+      <div>
+        <ModalClose dismiss={dismissModal} />
+        <Modal.Header>
+          <Modal.Title>{isNew ? 'Create' : 'Edit'} App Engine Load Balancer</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="form-horizontal">
+            <label>Name</label>
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.update('name', event.target.value)}
+              value={this.command.name || ''}
+            />
+            <label>Account</label>
+            <input
+              className="form-control input-sm"
+              onChange={(event) => {
+                this.update('credentials', event.target.value);
+                this.update('account', event.target.value);
+              }}
+              value={this.command.credentials || this.command.account || ''}
+            />
+            <label>Region</label>
+            <input
+              className="form-control input-sm"
+              onChange={(event) => this.update('region', event.target.value)}
+              value={this.command.region || ''}
+            />
+            <div className="checkbox">
+              <label>
+                <input
+                  checked={!!this.command.migrateTraffic}
+                  onChange={(event) => this.update('migrateTraffic', event.target.checked)}
+                  type="checkbox"
+                />{' '}
+                Migrate traffic
+              </label>
+            </div>
+            {(this.command.splitDescription.allocationDescriptions.length > 1 || this.command.migrateTraffic) && (
+              <div>
+                <label>Shard By</label>
+                <select
+                  className="form-control input-sm"
+                  onChange={(event) => this.updateSplit('shardBy', event.target.value)}
+                  value={this.command.splitDescription.shardBy || 'UNSPECIFIED'}
+                >
+                  <option value="UNSPECIFIED">Unspecified</option>
+                  <option value="IP">IP</option>
+                  <option value="COOKIE">Cookie</option>
+                </select>
+              </div>
+            )}
+            <label>Allocations</label>
+            <table className="table table-condensed">
+              <thead>
+                <tr>
+                  <th>Server Group</th>
+                  <th>Allocation %</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {this.command.splitDescription.allocationDescriptions.map((allocation, index) => (
+                  <tr key={index}>
+                    <td>{this.renderAllocationTarget(allocation, index)}</td>
+                    <td>
+                      <input
+                        className="form-control input-sm"
+                        min={0}
+                        onChange={(event) => this.updateAllocation(index, 'allocation', Number(event.target.value))}
+                        type="number"
+                        value={allocation.allocation || 0}
+                      />
+                    </td>
+                    <td>
+                      <button
+                        className="btn btn-sm btn-link"
+                        onClick={() => this.removeAllocation(index)}
+                        type="button"
+                      >
+                        <span className="glyphicon glyphicon-trash" />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <button className="btn btn-block btn-sm add-new" onClick={this.addAllocation} type="button">
+              <span className="glyphicon glyphicon-plus-sign" /> Add allocation
+            </button>
+            {this.allocationTotal() !== 100 && (
+              <div className="alert alert-warning">Traffic allocations must add up to 100%.</div>
+            )}
+          </div>
+        </Modal.Body>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <Modal.Footer>
+          <button className="btn btn-default" onClick={() => dismissModal()} type="button">
+            Cancel
+          </button>
+          <button
+            className="btn btn-primary"
+            disabled={this.allocationTotal() !== 100}
+            onClick={this.submit}
+            type="button"
+          >
+            {isNew ? 'Create' : 'Done'}
+          </button>
+        </Modal.Footer>
+      </div>
+    );
+  }
+}

package/src/loadBalancer/details/AppengineLoadBalancerActions.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import type { ILoadBalancerActionsProps, ILoadBalancerDeleteCommand } from '@spinnaker/core';
+import { ConfirmationModalService, LoadBalancerWriter } from '@spinnaker/core';
+
+import { AppengineCreateLoadBalancerModal } from '../configure/AppengineCreateLoadBalancerModal';
+
+export function canDeleteAppengineLoadBalancer(loadBalancer: any): boolean {
+  return loadBalancer.name !== 'default';
+}
+
+export function getDeleteLoadBalancerWarning(loadBalancer: any): string {
+  const serverGroupNames = (loadBalancer.serverGroups || []).map((serverGroup: any) => serverGroup.name);
+  if (!serverGroupNames.length) {
+    return null;
+  }
+
+  if (serverGroupNames.length === 1) {
+    return `<div class="alert alert-warning"><p>Deleting <b>${loadBalancer.name}</b> will destroy <b>${serverGroupNames[0]}</b>.</p></div>`;
+  }
+
+  return `<div class="alert alert-warning"><p>Deleting <b>${
+    loadBalancer.name
+  }</b> will destroy the following server groups:<ul>${serverGroupNames
+    .map((name: string) => `<li>${name}</li>`)
+    .join('')}</ul></p></div>`;
+}
+
+export function AppengineLoadBalancerActions({ app, loadBalancer }: ILoadBalancerActionsProps) {
+  const deleteLoadBalancer = () => {
+    const command: ILoadBalancerDeleteCommand = {
+      cloudProvider: loadBalancer.cloudProvider,
+      loadBalancerName: loadBalancer.name,
+      credentials: loadBalancer.account,
+    };
+
+    ConfirmationModalService.confirm({
+      header: `Really delete ${loadBalancer.name}?`,
+      buttonText: `Delete ${loadBalancer.name}`,
+      body: getDeleteLoadBalancerWarning(loadBalancer),
+      account: loadBalancer.account,
+      taskMonitorConfig: { application: app, title: `Deleting ${loadBalancer.name}` },
+      submitMethod: () => LoadBalancerWriter.deleteLoadBalancer(command, app),
+    });
+  };
+
+  return (
+    <div className="actions">
+      <button
+        className="btn btn-sm btn-default"
+        onClick={() => AppengineCreateLoadBalancerModal.show({ app, loadBalancer, isNew: false })}
+        type="button"
+      >
+        Edit
+      </button>
+      <button
+        className="btn btn-sm btn-default"
+        disabled={!canDeleteAppengineLoadBalancer(loadBalancer)}
+        onClick={deleteLoadBalancer}
+        type="button"
+      >
+        Delete
+      </button>
+    </div>
+  );
+}

package/src/loadBalancer/details/AppengineLoadBalancerDetailsSection.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import type { ILoadBalancerDetailsSectionProps } from '@spinnaker/core';
+
+import type { IAppengineLoadBalancer } from '../../domain';
+
+export function AppengineLoadBalancerDetailsSection({ loadBalancer }: ILoadBalancerDetailsSectionProps) {
+  const appengineLoadBalancer = loadBalancer as IAppengineLoadBalancer;
+  const allocations = appengineLoadBalancer.split?.allocations || {};
+
+  return (
+    <div className="content-section">
+      <div className="content-section-heading">Traffic Split</div>
+      <dl className="dl-horizontal dl-narrow">
+        <dt>Account</dt>
+        <dd>{appengineLoadBalancer.account || appengineLoadBalancer.credentials}</dd>
+        <dt>Region</dt>
+        <dd>{appengineLoadBalancer.region}</dd>
+        <dt>Shard By</dt>
+        <dd>{appengineLoadBalancer.split?.shardBy || 'Unspecified'}</dd>
+      </dl>
+      {Object.keys(allocations).length > 0 && (
+        <table className="table table-condensed">
+          <thead>
+            <tr>
+              <th>Server Group</th>
+              <th>Allocation</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.entries(allocations).map(([serverGroup, allocation]) => (
+              <tr key={serverGroup}>
+                <td>{serverGroup}</td>
+                <td>{Math.round(allocation * 1000) / 10}%</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/src/loadBalancer/details/index.ts

@@ -0,0 +1,3 @@
+export * from './AppengineLoadBalancerActions';
+export * from './AppengineLoadBalancerDetailsSection';
+export * from './useAppengineLoadBalancerDetails';

package/src/loadBalancer/details/useAppengineLoadBalancerDetails.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+import type { IUseDetailsHookProps, UseDetailsResult } from '@spinnaker/core';
+
+import type { IAppengineLoadBalancer } from '../../domain';
+
+export function useAppengineLoadBalancerDetails({
+  app,
+  loadBalancerParams,
+  autoClose,
+}: IUseDetailsHookProps): UseDetailsResult<IAppengineLoadBalancer> {
+  const [data, setData] = useState<IAppengineLoadBalancer>();
+  const [loading, setLoading] = useState(true);
+
+  const refetch = async () => {
+    setLoading(true);
+    await app.getDataSource('loadBalancers').ready();
+    const loadBalancer = app.getDataSource('loadBalancers').data.find((candidate: IAppengineLoadBalancer) => {
+      return candidate.name === loadBalancerParams.name && candidate.account === loadBalancerParams.accountId;
+    });
+
+    setData(loadBalancer);
+    setLoading(false);
+
+    if (!loadBalancer) {
+      autoClose();
+    }
+  };
+
+  useEffect(() => {
+    refetch();
+    const unsubscribe = app.getDataSource('loadBalancers').onRefresh(refetch);
+    return () => unsubscribe();
+  }, [loadBalancerParams.name, loadBalancerParams.accountId, loadBalancerParams.region]);
+
+  return { data, loading, error: null, refetch };
+}

package/src/loadBalancer/transformer.ts

@@ -1,4 +1,3 @@
-import { module } from 'angular';
 import { camelCase, chain, cloneDeep, filter, get, has, reduce } from 'lodash';
 
 import type {
@@ -76,10 +75,7 @@ export class AppengineLoadBalancerUpsertDescription implements ILoadBalancerUpse
 }
 
 export class AppengineLoadBalancerTransformer {
-  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 = [];
@@ -97,13 +93,13 @@ export class AppengineLoadBalancerTransformer {
 
     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: IAppengineLoadBalancer,
     application: Application,
-  ): PromiseLike<IAppengineLoadBalancer> {
+  ): Promise<IAppengineLoadBalancer> {
     return application
       .getDataSource('loadBalancers')
       .ready()
@@ -161,10 +157,3 @@ export class AppengineLoadBalancerTransformer {
     return instance as IInstance;
   }
 }
-
-export const APPENGINE_LOAD_BALANCER_TRANSFORMER = 'spinnaker.appengine.loadBalancer.transformer.service';
-
-module(APPENGINE_LOAD_BALANCER_TRANSFORMER, []).service(
-  'appengineLoadBalancerTransformer',
-  AppengineLoadBalancerTransformer,
-);

package/src/pipeline/stages/AppengineExecutionDetails.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import type { IExecutionDetailsSectionProps } from '@spinnaker/core';
+import { ExecutionDetailsSection } from '@spinnaker/core';
+
+function FailureMessages({ stage }: Pick<IExecutionDetailsSectionProps, 'stage'>) {
+  const failures = (stage.context?.exception?.details?.errors || stage.context?.failureMessages || []) as string[];
+  if (!failures.length) {
+    return null;
+  }
+
+  return (
+    <div className="alert alert-danger">
+      {failures.map((message, index) => (
+        <p key={index}>{message}</p>
+      ))}
+    </div>
+  );
+}
+
+export function getServerGroupDisplayName(context: any): string {
+  return context.cluster || context.serverGroupName;
+}
+
+function ServerGroupConfigDetails(props: IExecutionDetailsSectionProps) {
+  const { stage } = props;
+  return (
+    <div>
+      <dl className="dl-horizontal dl-narrow">
+        <dt>Account</dt>
+        <dd>{stage.context.credentials || stage.context.account}</dd>
+        <dt>Region</dt>
+        <dd>{stage.context.region}</dd>
+        <dt>{stage.context.cluster ? 'Cluster' : 'Server Group'}</dt>
+        <dd>{getServerGroupDisplayName(stage.context)}</dd>
+        {stage.context.target && [
+          <dt key="target-label">Target</dt>,
+          <dd key="target-value">{stage.context.target}</dd>,
+        ]}
+      </dl>
+      <FailureMessages stage={stage} />
+    </div>
+  );
+}
+
+export function AppengineStartServerGroupExecutionDetails(props: IExecutionDetailsSectionProps) {
+  return (
+    <ExecutionDetailsSection name={AppengineStartServerGroupExecutionDetails.title} current={props.current}>
+      <ServerGroupConfigDetails {...props} />
+    </ExecutionDetailsSection>
+  );
+}
+AppengineStartServerGroupExecutionDetails.title = 'startServerGroupConfig';
+
+export function AppengineStopServerGroupExecutionDetails(props: IExecutionDetailsSectionProps) {
+  return (
+    <ExecutionDetailsSection name={AppengineStopServerGroupExecutionDetails.title} current={props.current}>
+      <ServerGroupConfigDetails {...props} />
+    </ExecutionDetailsSection>
+  );
+}
+AppengineStopServerGroupExecutionDetails.title = 'stopServerGroupConfig';
+
+export function AppengineEditLoadBalancerExecutionDetails(props: IExecutionDetailsSectionProps) {
+  const loadBalancers = props.stage.context.loadBalancers || [];
+  return (
+    <ExecutionDetailsSection name={AppengineEditLoadBalancerExecutionDetails.title} current={props.current}>
+      <table className="table table-condensed">
+        <thead>
+          <tr>
+            <th>Account</th>
+            <th>Name</th>
+            <th>Region</th>
+          </tr>
+        </thead>
+        <tbody>
+          {loadBalancers.map((loadBalancer: any, index: number) => (
+            <tr key={index}>
+              <td>{loadBalancer.credentials || loadBalancer.account}</td>
+              <td>{loadBalancer.name || loadBalancer.loadBalancerName}</td>
+              <td>{loadBalancer.region}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <FailureMessages stage={props.stage} />
+    </ExecutionDetailsSection>
+  );
+}
+AppengineEditLoadBalancerExecutionDetails.title = 'editLoadBalancerConfig';