@spinnaker/google 2026.2.2 → 2026.3.0

package/src/loadBalancer/configure/http/GceHttpLoadBalancerResourceEditors.spec.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import {
+  GceHttpLoadBalancerBackendServiceEditor,
+  GceHttpLoadBalancerHealthCheckEditor,
+} from './GceHttpLoadBalancerResourceEditors';
+
+describe('GceHttpLoadBalancerResourceEditors', () => {
+  it('edits complete health-check objects without dropping unknown fields', () => {
+    const onChange = jasmine.createSpy('onChange');
+    const wrapper = shallow(
+      <GceHttpLoadBalancerHealthCheckEditor
+        healthCheck={{
+          checkIntervalSec: 10,
+          healthCheckType: 'HTTP',
+          name: 'check-a',
+          port: 80,
+          requestPath: '/health',
+          timeoutSec: 5,
+          unknownField: 'keep',
+        }}
+        healthChecks={[{ name: 'check-a' }]}
+        onChange={onChange}
+        onRemove={jasmine.createSpy('onRemove')}
+      />,
+    );
+
+    wrapper.find('[data-testid="health-check-port"]').simulate('change', { target: { value: '8080' } });
+
+    expect(onChange).toHaveBeenCalledWith(
+      jasmine.objectContaining({ name: 'check-a', port: 8080, requestPath: '/health', unknownField: 'keep' }),
+    );
+    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+  });
+
+  it('supports HTTP2 request paths and GRPC service names', () => {
+    const onChange = jasmine.createSpy('onChange');
+    const wrapper = shallow(
+      <GceHttpLoadBalancerHealthCheckEditor
+        healthCheck={{ healthCheckType: 'GRPC', name: 'grpc-check', port: 443 }}
+        healthChecks={[]}
+        onChange={onChange}
+        onRemove={jasmine.createSpy('onRemove')}
+      />,
+    );
+
+    expect(
+      wrapper.find('[data-testid="health-check-protocol"] option').map((option) => option.prop('value')),
+    ).toContain('HTTP2');
+    expect(
+      wrapper.find('[data-testid="health-check-protocol"] option').map((option) => option.prop('value')),
+    ).toContain('GRPC');
+    expect(wrapper.find('[data-testid="health-check-grpc-service-name"]').length).toBe(1);
+  });
+
+  it('selects complete backend-service and health-check references', () => {
+    const onChange = jasmine.createSpy('onChange');
+    const backendServices = [
+      {
+        healthCheck: { name: 'check-a', selfLink: 'https://compute/healthChecks/check-a' },
+        name: 'backend-a',
+        portName: 'http',
+        sessionAffinity: 'NONE',
+        unknownField: 'keep',
+      },
+    ];
+    const wrapper = shallow(
+      <GceHttpLoadBalancerBackendServiceEditor
+        backendService={{ name: '' }}
+        backendServices={backendServices}
+        healthChecks={[{ name: 'check-a', selfLink: 'https://compute/healthChecks/check-a' }]}
+        loadBalancerType="HTTP"
+        onChange={onChange}
+        onRemove={jasmine.createSpy('onRemove')}
+      />,
+    );
+
+    wrapper.find('[data-testid="backend-service-reference"]').simulate('change', {
+      target: { value: 'backend-a' },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(backendServices[0]);
+    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+  });
+});

package/src/loadBalancer/configure/http/GceHttpLoadBalancerResourceEditors.tsx

@@ -0,0 +1,284 @@
+import React from 'react';
+
+import type {
+  GceLoadBalancerType,
+  IGceLoadBalancerBackendService,
+  IGceLoadBalancerDataItem,
+  IGceLoadBalancerHealthCheck,
+  IGceResourceReference,
+} from '../common';
+
+function numberValue(value: string): number | undefined {
+  return value === '' ? undefined : Number(value);
+}
+
+function selectedReference(name: string, options: IGceLoadBalancerDataItem[]): IGceResourceReference | undefined {
+  if (!name) {
+    return undefined;
+  }
+  return (options.find((option) => option.name === name) || { name }) as IGceResourceReference;
+}
+
+export interface IGceHttpLoadBalancerHealthCheckEditorProps {
+  healthCheck: IGceLoadBalancerHealthCheck;
+  healthChecks: IGceLoadBalancerDataItem[];
+  onChange: (healthCheck: IGceLoadBalancerHealthCheck) => void;
+  onRemove: () => void;
+}
+
+export function GceHttpLoadBalancerHealthCheckEditor({
+  healthCheck,
+  healthChecks,
+  onChange,
+  onRemove,
+}: IGceHttpLoadBalancerHealthCheckEditorProps): JSX.Element {
+  const updateNumber = (field: string, value: string): void =>
+    onChange({ ...healthCheck, [field]: numberValue(value) });
+
+  return (
+    <fieldset className="gce-http-health-check">
+      <legend>Health check</legend>
+      <label>
+        Existing health check
+        <select
+          data-testid="health-check-reference"
+          value={healthCheck.name || ''}
+          onChange={(event) => {
+            const selected = healthChecks.find(({ name }) => name === event.target.value);
+            onChange(selected ? ({ ...selected } as IGceLoadBalancerHealthCheck) : { ...healthCheck, name: '' });
+          }}
+        >
+          <option value="">Create new...</option>
+          {healthChecks.map((option) => (
+            <option key={option.name} value={option.name}>
+              {option.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Protocol
+        <select
+          data-testid="health-check-protocol"
+          value={healthCheck.healthCheckType || 'HTTP'}
+          onChange={(event) =>
+            onChange({
+              ...healthCheck,
+              healthCheckType: event.target.value as IGceLoadBalancerHealthCheck['healthCheckType'],
+            })
+          }
+        >
+          {['HTTP', 'HTTPS', 'HTTP2', 'GRPC', 'TCP', 'SSL'].map((protocol) => (
+            <option key={protocol} value={protocol}>
+              {protocol}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Name
+        <input
+          data-testid="health-check-name"
+          required
+          type="text"
+          value={healthCheck.name || ''}
+          onChange={(event) => onChange({ ...healthCheck, name: event.target.value })}
+        />
+      </label>
+      {(healthCheck.healthCheckType === 'HTTP' ||
+        healthCheck.healthCheckType === 'HTTPS' ||
+        healthCheck.healthCheckType === 'HTTP2') && (
+        <label>
+          Request path
+          <input
+            data-testid="health-check-path"
+            required
+            type="text"
+            value={healthCheck.requestPath || ''}
+            onChange={(event) => onChange({ ...healthCheck, requestPath: event.target.value })}
+          />
+        </label>
+      )}
+      {healthCheck.healthCheckType === 'GRPC' && (
+        <label>
+          Service name
+          <input
+            data-testid="health-check-grpc-service-name"
+            type="text"
+            value={healthCheck.grpcServiceName || ''}
+            onChange={(event) => onChange({ ...healthCheck, grpcServiceName: event.target.value })}
+          />
+        </label>
+      )}
+      <label>
+        Port
+        <input
+          data-testid="health-check-port"
+          max={65535}
+          min={1}
+          required
+          type="number"
+          value={healthCheck.port ?? ''}
+          onChange={(event) => updateNumber('port', event.target.value)}
+        />
+      </label>
+      {[
+        ['timeoutSec', 'Timeout'],
+        ['checkIntervalSec', 'Interval'],
+        ['healthyThreshold', 'Healthy threshold'],
+        ['unhealthyThreshold', 'Unhealthy threshold'],
+      ].map(([field, label]) => (
+        <label key={field}>
+          {label}
+          <input
+            data-testid={`health-check-${field}`}
+            min={0}
+            type="number"
+            value={(healthCheck[field] as number | undefined) ?? ''}
+            onChange={(event) => updateNumber(field, event.target.value)}
+          />
+        </label>
+      ))}
+      <button type="button" className="btn btn-sm btn-default" onClick={onRemove}>
+        Remove health check
+      </button>
+    </fieldset>
+  );
+}
+
+export interface IGceHttpLoadBalancerBackendServiceEditorProps {
+  backendService: IGceLoadBalancerBackendService;
+  backendServices: IGceLoadBalancerDataItem[];
+  healthChecks: IGceLoadBalancerDataItem[];
+  loadBalancerType: GceLoadBalancerType;
+  onChange: (backendService: IGceLoadBalancerBackendService) => void;
+  onRemove: () => void;
+}
+
+export function GceHttpLoadBalancerBackendServiceEditor({
+  backendService,
+  backendServices,
+  healthChecks,
+  loadBalancerType,
+  onChange,
+  onRemove,
+}: IGceHttpLoadBalancerBackendServiceEditorProps): JSX.Element {
+  return (
+    <fieldset className="gce-http-backend-service">
+      <legend>Backend service</legend>
+      <label>
+        Existing backend service
+        <select
+          data-testid="backend-service-reference"
+          value={backendService.name}
+          onChange={(event) => {
+            const selected = backendServices.find(({ name }) => name === event.target.value);
+            onChange(selected ? ({ ...selected } as IGceLoadBalancerBackendService) : { ...backendService, name: '' });
+          }}
+        >
+          <option value="">Create new...</option>
+          {backendServices.map((option) => (
+            <option key={option.name} value={option.name}>
+              {option.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Name
+        <input
+          data-testid="backend-service-name"
+          required
+          type="text"
+          value={backendService.name}
+          onChange={(event) => onChange({ ...backendService, name: event.target.value })}
+        />
+      </label>
+      <label>
+        Health check
+        <select
+          data-testid="backend-service-health-check"
+          required
+          value={backendService.healthCheck?.name || ''}
+          onChange={(event) =>
+            onChange({
+              ...backendService,
+              healthCheck: selectedReference(event.target.value, healthChecks),
+            })
+          }
+        >
+          <option value="">Select...</option>
+          {healthChecks.map((option) => (
+            <option key={option.name} value={option.name}>
+              {option.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Session affinity
+        <select
+          data-testid="backend-service-session-affinity"
+          value={String(backendService.sessionAffinity || 'NONE')}
+          onChange={(event) => onChange({ ...backendService, sessionAffinity: event.target.value })}
+        >
+          {['NONE', 'CLIENT_IP', 'GENERATED_COOKIE', 'HEADER_FIELD', 'HTTP_COOKIE'].map((affinity) => (
+            <option key={affinity} value={affinity}>
+              {affinity}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Port name
+        <input
+          data-testid="backend-service-port-name"
+          required
+          type="text"
+          value={String(backendService.portName || '')}
+          onChange={(event) => onChange({ ...backendService, portName: event.target.value })}
+        />
+      </label>
+      <label>
+        Connection draining timeout
+        <input
+          data-testid="backend-service-draining"
+          min={0}
+          type="number"
+          value={(backendService.connectionDrainingTimeoutSec as number | undefined) ?? ''}
+          onChange={(event) =>
+            onChange({ ...backendService, connectionDrainingTimeoutSec: numberValue(event.target.value) })
+          }
+        />
+      </label>
+      {loadBalancerType === 'HTTP' && (
+        <label>
+          <input
+            data-testid="backend-service-cdn"
+            checked={Boolean(backendService.enableCDN)}
+            type="checkbox"
+            onChange={(event) => onChange({ ...backendService, enableCDN: event.target.checked })}
+          />
+          Enable CDN
+        </label>
+      )}
+      {backendService.sessionAffinity === 'GENERATED_COOKIE' && (
+        <label>
+          Affinity cookie TTL seconds
+          <input
+            data-testid="backend-service-cookie-ttl"
+            max={86400}
+            min={0}
+            required
+            type="number"
+            value={(backendService.affinityCookieTtlSec as number | undefined) ?? ''}
+            onChange={(event) => onChange({ ...backendService, affinityCookieTtlSec: numberValue(event.target.value) })}
+          />
+        </label>
+      )}
+      <button type="button" className="btn btn-sm btn-default" onClick={onRemove}>
+        Remove backend service
+      </button>
+    </fieldset>
+  );
+}

package/src/loadBalancer/configure/http/GceHttpLoadBalancerRoutingEditor.spec.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import {
+  GceHttpLoadBalancerHostRuleEditor,
+  GceHttpLoadBalancerPathRuleEditor,
+} from './GceHttpLoadBalancerRoutingEditor';
+
+describe('GceHttpLoadBalancerRoutingEditor', () => {
+  const backendServices = [
+    { name: 'default-backend', selfLink: 'https://compute/backendServices/default-backend' },
+    { name: 'api-backend', selfLink: 'https://compute/backendServices/api-backend' },
+  ];
+
+  it('adds and removes exact nested path-rule rows with non-submit buttons', () => {
+    const onChange = jasmine.createSpy('onChange');
+    const wrapper = shallow(
+      <GceHttpLoadBalancerHostRuleEditor
+        backendServices={backendServices}
+        hostRule={{
+          hostPatterns: ['api.example.com'],
+          pathMatcher: {
+            defaultService: backendServices[0],
+            pathRules: [{ backendService: backendServices[1], paths: ['/v1'] }],
+          },
+        }}
+        onChange={onChange}
+        onRemove={jasmine.createSpy('onRemove')}
+      />,
+    );
+
+    wrapper.find('[data-testid="add-path-rule"]').simulate('click');
+
+    expect(onChange).toHaveBeenCalledWith({
+      hostPatterns: ['api.example.com'],
+      pathMatcher: {
+        defaultService: backendServices[0],
+        pathRules: [{ backendService: backendServices[1], paths: ['/v1'] }, { paths: [] }],
+      },
+    });
+    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+  });
+
+  it('edits path lists and preserves complete unresolved backend references', () => {
+    const onChange = jasmine.createSpy('onChange');
+    const wrapper = shallow(
+      <GceHttpLoadBalancerPathRuleEditor
+        backendServices={backendServices}
+        onChange={onChange}
+        onRemove={jasmine.createSpy('onRemove')}
+        pathRule={{ backendService: backendServices[1], paths: ['/v1'] }}
+      />,
+    );
+
+    wrapper.find('[data-testid="path-rule-paths"]').simulate('change', { target: { value: '/v1, /v2' } });
+    wrapper.find('[data-testid="path-rule-backend"]').simulate('change', {
+      target: { value: 'default-backend' },
+    });
+
+    expect(onChange.calls.argsFor(0)[0]).toEqual({ backendService: backendServices[1], paths: ['/v1', '/v2'] });
+    expect(onChange.calls.argsFor(1)[0]).toEqual({ backendService: backendServices[0], paths: ['/v1'] });
+    expect(wrapper.find('button').everyWhere((button) => button.prop('type') === 'button')).toBe(true);
+  });
+
+  it('requires every path matcher to select an explicit default backend', () => {
+    const wrapper = shallow(
+      <GceHttpLoadBalancerHostRuleEditor
+        backendServices={backendServices}
+        hostRule={{
+          hostPatterns: ['api.example.com'],
+          pathMatcher: { defaultService: backendServices[0], pathRules: [] },
+        }}
+        onChange={jasmine.createSpy('onChange')}
+        onRemove={jasmine.createSpy('onRemove')}
+      />,
+    );
+    const select = wrapper.find('[data-testid="host-rule-default-backend"]');
+
+    expect(select.prop('required')).toBe(true);
+    expect(select.find('option').map((option) => option.prop('value'))).toEqual(['default-backend', 'api-backend']);
+  });
+});

package/src/loadBalancer/configure/http/GceHttpLoadBalancerRoutingEditor.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+
+import type {
+  IGceLoadBalancerDataItem,
+  IGceLoadBalancerHostRule,
+  IGceLoadBalancerPathRule,
+  IGceResourceReference,
+} from '../common';
+
+function parseList(value: string): string[] {
+  return value
+    .split(/[\n,]/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function selectedReference(name: string, options: IGceLoadBalancerDataItem[]): IGceResourceReference | undefined {
+  if (!name) {
+    return undefined;
+  }
+  return (options.find((option) => option.name === name) || { name }) as IGceResourceReference;
+}
+
+export interface IGceHttpLoadBalancerPathRuleEditorProps {
+  backendServices: IGceLoadBalancerDataItem[];
+  onChange: (pathRule: IGceLoadBalancerPathRule) => void;
+  onRemove: () => void;
+  pathRule: IGceLoadBalancerPathRule;
+}
+
+export function GceHttpLoadBalancerPathRuleEditor({
+  backendServices,
+  onChange,
+  onRemove,
+  pathRule,
+}: IGceHttpLoadBalancerPathRuleEditorProps): JSX.Element {
+  return (
+    <fieldset className="gce-http-path-rule">
+      <legend>Path rule</legend>
+      <label>
+        Paths
+        <input
+          data-testid="path-rule-paths"
+          required
+          type="text"
+          value={pathRule.paths.join(', ')}
+          onChange={(event) => onChange({ ...pathRule, paths: parseList(event.target.value) })}
+        />
+      </label>
+      <label>
+        Backend service
+        <select
+          data-testid="path-rule-backend"
+          required
+          value={pathRule.backendService?.name || ''}
+          onChange={(event) =>
+            onChange({
+              ...pathRule,
+              backendService: selectedReference(event.target.value, backendServices),
+            })
+          }
+        >
+          <option value="">Select...</option>
+          {backendServices.map((service) => (
+            <option key={service.name} value={service.name}>
+              {service.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      <button type="button" className="btn btn-sm btn-default" onClick={onRemove}>
+        Remove path rule
+      </button>
+    </fieldset>
+  );
+}
+
+export interface IGceHttpLoadBalancerHostRuleEditorProps {
+  backendServices: IGceLoadBalancerDataItem[];
+  hostRule: IGceLoadBalancerHostRule;
+  onChange: (hostRule: IGceLoadBalancerHostRule) => void;
+  onRemove: () => void;
+}
+
+export function GceHttpLoadBalancerHostRuleEditor({
+  backendServices,
+  hostRule,
+  onChange,
+  onRemove,
+}: IGceHttpLoadBalancerHostRuleEditorProps): JSX.Element {
+  return (
+    <fieldset className="gce-http-host-rule">
+      <legend>Host rule</legend>
+      <label>
+        Host patterns
+        <input
+          data-testid="host-rule-patterns"
+          type="text"
+          value={hostRule.hostPatterns.join(', ')}
+          onChange={(event) => onChange({ ...hostRule, hostPatterns: parseList(event.target.value) })}
+        />
+      </label>
+      <label>
+        Default backend service
+        <select
+          data-testid="host-rule-default-backend"
+          required
+          value={hostRule.pathMatcher.defaultService?.name || ''}
+          onChange={(event) =>
+            onChange({
+              ...hostRule,
+              pathMatcher: {
+                ...hostRule.pathMatcher,
+                defaultService: selectedReference(event.target.value, backendServices),
+              },
+            })
+          }
+        >
+          {backendServices.map((service) => (
+            <option key={service.name} value={service.name}>
+              {service.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      {hostRule.pathMatcher.pathRules.map((pathRule, index) => (
+        <GceHttpLoadBalancerPathRuleEditor
+          backendServices={backendServices}
+          key={index}
+          onChange={(updated) =>
+            onChange({
+              ...hostRule,
+              pathMatcher: {
+                ...hostRule.pathMatcher,
+                pathRules: hostRule.pathMatcher.pathRules.map((current, currentIndex) =>
+                  currentIndex === index ? updated : current,
+                ),
+              },
+            })
+          }
+          onRemove={() =>
+            onChange({
+              ...hostRule,
+              pathMatcher: {
+                ...hostRule.pathMatcher,
+                pathRules: hostRule.pathMatcher.pathRules.filter((_, currentIndex) => currentIndex !== index),
+              },
+            })
+          }
+          pathRule={pathRule}
+        />
+      ))}
+      <button
+        type="button"
+        className="add-new btn btn-block"
+        data-testid="add-path-rule"
+        onClick={() =>
+          onChange({
+            ...hostRule,
+            pathMatcher: {
+              ...hostRule.pathMatcher,
+              pathRules: [...hostRule.pathMatcher.pathRules, { paths: [] }],
+            },
+          })
+        }
+      >
+        Add path rule
+      </button>
+      <button type="button" className="btn btn-sm btn-default" onClick={onRemove}>
+        Remove host rule
+      </button>
+    </fieldset>
+  );
+}

package/src/loadBalancer/configure/http/httpLoadBalancerWizard.component.less

@@ -3,22 +3,41 @@
     margin: 10px 0 0 5px;
     position: absolute;
   }
+}
+
+.gce-http-load-balancer-editor {
+  section {
+    margin-bottom: 20px;
+  }
+
+  fieldset {
+    border: 0;
+    margin: 0 0 15px;
+    padding: 0;
+  }
+
+  fieldset > label {
+    align-items: center;
+    display: flex;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
 
-  help-field.help-field-absolute {
-    span {
-      position: absolute;
-      top: 7px;
-      right: 2px;
-    }
+  fieldset > label > input,
+  fieldset > label > select {
+    font-weight: normal;
+    margin-left: 15px;
+    width: 66.6667%;
   }
 
-  .ui-select-multiple[tagging] {
-    width: 220px;
+  fieldset > label > input:not([type='checkbox']),
+  fieldset > label > select {
+    display: block;
+    height: 30px;
+    padding: 5px 10px;
   }
 
-  gce-host-rule {
-    hr.host-rule {
-      border-top: 1px solid var(--color-concrete);
-    }
+  fieldset > label > input[type='checkbox'] {
+    margin: 0 8px 0 33.3333%;
   }
 }