@spinnaker/kubernetes 2025.1.4 → 2025.2.0

package/src/manifest/scale/ScaleModal.tsx

@@ -0,0 +1,115 @@
+import type { FormikProps } from 'formik';
+import { Form } from 'formik';
+import React, { useState } from 'react';
+import { Button, Modal } from 'react-bootstrap';
+
+import type { Application, IModalComponentProps, IModalProps } from '@spinnaker/core';
+import {
+  ManifestWriter,
+  ModalClose,
+  robotToHuman,
+  SpinFormik,
+  SubmitButton,
+  TaskMonitorWrapper,
+  TaskReason,
+  UserVerification,
+  useTaskMonitor,
+} from '@spinnaker/core';
+
+import { ScaleSettingsForm } from './ScaleSettingsForm';
+import type { IAnyKubernetesResource } from '../../interfaces';
+import type { IScaleCommand } from './scale.controller';
+
+export interface IKubernetesScaleModalProps
+  extends Pick<IModalProps, 'isOpen'>,
+    Pick<IModalComponentProps, 'dismissModal'> {
+  application: Application;
+  resource: IAnyKubernetesResource;
+  currentReplicas: number;
+}
+
+export interface IKubernetesScaleValues {
+  reason?: string;
+  replicas: number;
+}
+
+export function ScaleModal({
+  application,
+  resource,
+  currentReplicas,
+  isOpen,
+  dismissModal,
+}: IKubernetesScaleModalProps) {
+  const initialValues: IKubernetesScaleValues = {
+    replicas: currentReplicas,
+  };
+  const [verified, setVerified] = useState<boolean>(false);
+  const taskMonitor = useTaskMonitor(
+    {
+      application,
+      title: `Scaling ${resource.name} in ${resource.namespace}`,
+      onTaskComplete: () => application.serverGroups.refresh(true),
+    },
+    dismissModal,
+  );
+
+  const submit = (values: IKubernetesScaleValues): void => {
+    const payload = {
+      cloudProvider: 'kubernetes',
+      manifestName: resource.name,
+      location: resource.namespace,
+      account: resource.account,
+      reason: values.reason,
+      replicas: values.replicas,
+    };
+    return taskMonitor.submit(() => ManifestWriter.scaleManifest(payload, application));
+  };
+
+  const onOptionChange = (formik: FormikProps<IKubernetesScaleValues>, values: IScaleCommand): void => {
+    formik.setFieldValue('replicas', values.replicas);
+  };
+
+  return (
+    <Modal show={isOpen} onHide={dismissModal}>
+      <TaskMonitorWrapper monitor={taskMonitor} />
+      <SpinFormik<IKubernetesScaleValues>
+        initialValues={initialValues}
+        onSubmit={submit}
+        render={(formik) => (
+          <>
+            <ModalClose dismiss={dismissModal} />
+            <Modal.Header>
+              <Modal.Title>
+                Scale {robotToHuman(resource.name)} in {resource.namespace}
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <Form className="form-horizontal">
+                <ScaleSettingsForm
+                  onChange={(options: IScaleCommand) => onOptionChange(formik, options)}
+                  options={
+                    ({
+                      replicas: formik.values.replicas,
+                    } as unknown) as IScaleCommand
+                  }
+                />
+                <TaskReason reason={formik.values.reason} onChange={(val) => formik.setFieldValue('reason', val)} />
+              </Form>
+            </Modal.Body>
+            <Modal.Footer>
+              <UserVerification account={resource.account} onValidChange={setVerified} />
+              <Button onClick={dismissModal}>Cancel</Button>
+              <SubmitButton
+                onClick={() => submit(formik.values)}
+                isDisabled={!formik.isValid || formik.isSubmitting || !verified}
+                isFormSubmit={true}
+                submitting={formik.isSubmitting}
+                label={`Scale ${resource.name}`}
+              />
+            </Modal.Footer>
+          </>
+        )}
+      />
+    </Modal>
+  );
+}

package/src/manifest/selector/ManifestSelector.spec.tsx

@@ -1,5 +1,4 @@
 import { mount } from 'enzyme';
-import { $q } from 'ngimport';
 import React from 'react';
 import type { Option } from 'react-select';
 import Select, { Creatable } from 'react-select';
@@ -25,8 +24,8 @@ describe('<ManifestSelector />', () => {
   let searchService: Spy;
 
   beforeEach(() => {
-    searchService = spyOn(ManifestKindSearchService, 'search').and.returnValue($q.resolve([]));
-    spyOn(AccountService, 'getAllAccountDetailsForProvider').and.returnValue($q.resolve([]));
+    searchService = spyOn(ManifestKindSearchService, 'search').and.returnValue(Promise.resolve([]));
+    spyOn(AccountService, 'getAllAccountDetailsForProvider').and.returnValue(Promise.resolve([]));
   });
 
   describe('initialization', () => {

package/src/manifest/selector/ManifestSelector.tsx

@@ -1,5 +1,4 @@
 import { get, isEmpty } from 'lodash';
-import { $q } from 'ngimport';
 import React from 'react';
 import type { Option } from 'react-select';
 import Select, { Creatable } from 'react-select';
@@ -247,7 +246,7 @@ export class ManifestSelector extends React.Component<IManifestSelectorProps, IM
 
   private search = (kind: string, namespace: string, account: string): PromiseLike<string[]> => {
     if (this.isExpression(account)) {
-      return $q.resolve([]);
+      return Promise.resolve([]);
     }
     return ManifestKindSearchService.search(kind, namespace, account).then((results) =>
       results.map((result) => result.name).sort(),

package/src/rawResource/rawResource.dataSource.ts

@@ -1,4 +1,3 @@
-import type { IQService } from 'angular';
 import { module } from 'angular';
 
 import type { Application } from '@spinnaker/core';
@@ -13,27 +12,24 @@ type ApiK8sResource = any;
 const fetchK8sResources = (application: Application): PromiseLike<ApiK8sResource> =>
   REST('applications').path(application.name, 'rawResources').get();
 
-const formatK8sResources = ($q: IQService) => (_: Application, result: ApiK8sResource): PromiseLike<ApiK8sResource> =>
-  $q.resolve(result);
+const formatK8sResources = (_: Application, result: ApiK8sResource): PromiseLike<ApiK8sResource> =>
+  Promise.resolve(result);
 
-module(KUBERNETS_RAW_RESOURCE_DATA_SOURCE, []).run([
-  '$q',
-  ($q: IQService) => {
-    ApplicationDataSourceRegistry.registerDataSource({
-      key: KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY,
-      label: 'Kubernetes',
-      category: INFRASTRUCTURE_KEY,
-      sref: KUBERNETS_RAW_RESOURCE_DATA_SOURCE_SREF,
-      primary: true,
-      icon: 'fas fa-xs fa-fw fa-th-large',
-      iconName: 'spMenuK8s',
-      loader: fetchK8sResources,
-      onLoad: formatK8sResources($q),
-      providerField: 'cloudProvider',
-      credentialsField: 'account',
-      regionField: 'region',
-      description: 'Collections of kubernetes resources',
-      defaultData: [],
-    });
-  },
-]);
+module(KUBERNETS_RAW_RESOURCE_DATA_SOURCE, []).run(() => {
+  ApplicationDataSourceRegistry.registerDataSource({
+    key: KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY,
+    label: 'Kubernetes',
+    category: INFRASTRUCTURE_KEY,
+    sref: KUBERNETS_RAW_RESOURCE_DATA_SOURCE_SREF,
+    primary: true,
+    icon: 'fas fa-xs fa-fw fa-th-large',
+    iconName: 'spMenuK8s',
+    loader: fetchK8sResources,
+    onLoad: formatK8sResources,
+    providerField: 'cloudProvider',
+    credentialsField: 'account',
+    regionField: 'region',
+    description: 'Collections of kubernetes resources',
+    defaultData: [],
+  });
+});

package/src/securityGroup/transformer.ts

@@ -1,14 +1,10 @@
-import type { IQService } from 'angular';
 import { module } from 'angular';
 
 import type { ISecurityGroup } from '@spinnaker/core';
 
 class KubernetesV2SecurityGroupTransformer {
-  public static $inject = ['$q'];
-  constructor(private $q: IQService) {}
-
   public normalizeSecurityGroup(securityGroup: ISecurityGroup): PromiseLike<ISecurityGroup> {
-    return this.$q.resolve(securityGroup);
+    return Promise.resolve(securityGroup);
   }
 }
 

package/dist/loadBalancer/details/details.controller.d.ts

@@ -1 +0,0 @@
-export declare const KUBERNETES_LOAD_BALANCER_DETAILS_CTRL = "spinnaker.kubernetes.loadBalancerDetails.controller";

package/src/loadBalancer/details/details.controller.ts

@@ -1,101 +0,0 @@
-import type { StateService } from '@uirouter/angularjs';
-import type { IController, IScope } from 'angular';
-import { module } from 'angular';
-import type { IModalService } from 'angular-ui-bootstrap';
-
-import type { Application, ILoadBalancer, IManifest } from '@spinnaker/core';
-import { ManifestReader, SETTINGS } from '@spinnaker/core';
-
-import type { IKubernetesLoadBalancer } from '../../interfaces';
-import { KubernetesManifestCommandBuilder } from '../../manifest/manifestCommandBuilder.service';
-import { ManifestWizard } from '../../manifest/wizard/ManifestWizard';
-
-interface ILoadBalancerFromStateParams {
-  accountId: string;
-  region: string;
-  name: string;
-}
-
-class KubernetesLoadBalancerDetailsController implements IController {
-  public state = { loading: true };
-  public manifest: IManifest;
-  public loadBalancer: IKubernetesLoadBalancer;
-
-  public static $inject = ['$uibModal', '$state', '$scope', 'loadBalancer', 'app'];
-  constructor(
-    private $uibModal: IModalService,
-    private $state: StateService,
-    private $scope: IScope,
-    loadBalancer: ILoadBalancerFromStateParams,
-    private app: Application,
-  ) {
-    const dataSource = this.app.getDataSource('loadBalancers');
-    dataSource
-      .ready()
-      .then(() => {
-        this.extractLoadBalancer(loadBalancer);
-        this.$scope.isDisabled = !SETTINGS.kubernetesAdHocInfraWritesEnabled;
-        dataSource.onRefresh(this.$scope, () => this.extractLoadBalancer(loadBalancer));
-      })
-      .catch(() => this.autoClose());
-  }
-
-  public deleteLoadBalancer(): void {
-    this.$uibModal.open({
-      templateUrl: require('../../manifest/delete/delete.html'),
-      controller: 'kubernetesV2ManifestDeleteCtrl',
-      controllerAs: 'ctrl',
-      resolve: {
-        coordinates: {
-          name: this.loadBalancer.name,
-          namespace: this.loadBalancer.namespace,
-          account: this.loadBalancer.account,
-        },
-        application: this.app,
-        manifestController: (): string => null,
-      },
-    });
-  }
-
-  public editLoadBalancer(): void {
-    KubernetesManifestCommandBuilder.buildNewManifestCommand(
-      this.app,
-      this.manifest.manifest,
-      this.loadBalancer.moniker,
-      this.loadBalancer.account,
-    ).then((builtCommand) => {
-      ManifestWizard.show({ title: 'Edit Manifest', application: this.app, command: builtCommand });
-    });
-  }
-
-  private extractLoadBalancer({ accountId, name, region }: ILoadBalancerFromStateParams): void {
-    const loadBalancer = this.app.getDataSource('loadBalancers').data.find((test: ILoadBalancer) => {
-      return test.name === name && test.account === accountId && test.region === region;
-    });
-
-    if (!loadBalancer) {
-      return this.autoClose();
-    }
-
-    ManifestReader.getManifest(accountId, region, name).then((manifest: IManifest) => {
-      this.manifest = manifest;
-      this.loadBalancer = loadBalancer;
-      this.state.loading = false;
-    });
-  }
-
-  private autoClose(): void {
-    if (this.$scope.$$destroyed) {
-      return;
-    } else {
-      this.$state.params.allowModalToStayOpen = true;
-      this.$state.go('^', null, { location: 'replace' });
-    }
-  }
-}
-
-export const KUBERNETES_LOAD_BALANCER_DETAILS_CTRL = 'spinnaker.kubernetes.loadBalancerDetails.controller';
-module(KUBERNETES_LOAD_BALANCER_DETAILS_CTRL, []).controller(
-  'kubernetesV2LoadBalancerDetailsCtrl',
-  KubernetesLoadBalancerDetailsController,
-);

package/src/loadBalancer/details/details.html

@@ -1,187 +0,0 @@
-<div class="details-panel">
-  <div ng-if="ctrl.state.loading" class="header">
-    <div class="close-button">
-      <a class="btn btn-link" ui-sref="^">
-        <span class="glyphicon glyphicon-remove"></span>
-      </a>
-    </div>
-    <h4 class="text-center">
-      <span us-spinner="{radius:20, width:6, length: 12}"></span>
-    </h4>
-  </div>
-
-  <div class="header" ng-if="!ctrl.state.loading">
-    <div class="close-button">
-      <a class="btn btn-link" ui-sref="^">
-        <span class="glyphicon glyphicon-remove"></span>
-      </a>
-    </div>
-    <div class="header-text horizontal middle">
-      <cloud-provider-logo
-        provider="ctrl.loadBalancer.cloudProvider"
-        height="'36px'"
-        width="'36px'"
-      ></cloud-provider-logo>
-      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
-        {{ctrl.loadBalancer.displayName}}
-        <render-if-feature feature="entityTags">
-          <entity-notifications
-            ng-if="!state.loading"
-            entity="ctrl.loadBalancer"
-            application="ctrl.app"
-            placement="bottom"
-            h-offset-percent="90%"
-            entity-type="loadBalancer"
-            page-location="details"
-            on-update="ctrl.app.loadBalancers.refresh()"
-          ></entity-notifications>
-        </render-if-feature>
-      </h3>
-    </div>
-    <div class="actions">
-      <div class="dropdown" uib-dropdown dropdown-append-to-body>
-        <button type="button" class="btn btn-sm btn-primary dropdown-toggle" uib-dropdown-toggle ng-hide="isDisabled">
-          {{ctrl.loadBalancer.kind | robotToHuman}} Actions <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu" uib-dropdown-menu role="menu">
-          <li>
-            <a href ng-click="ctrl.deleteLoadBalancer()">Delete</a>
-          </li>
-          <li>
-            <a href ng-click="ctrl.editLoadBalancer()">Edit</a>
-          </li>
-          <render-if-feature feature="entityTags">
-            <add-entity-tag-links
-              component="ctrl.loadBalancer"
-              application="ctrl.app"
-              entity-type="loadBalancer"
-              on-update="ctrl.app.loadBalancers.refresh"
-            ></add-entity-tag-links>
-          </render-if-feature>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <div ng-if="!ctrl.state.loading" class="content">
-    <collapsible-section heading="Information" expanded="true">
-      <dl class="dl-horizontal dl-narrow">
-        <dt>Created</dt>
-        <dd>{{ctrl.loadBalancer.createdTime | timestamp}}</dd>
-        <dt>Account</dt>
-        <dd><account-tag account="ctrl.loadBalancer.account" pad="right"></account-tag></dd>
-        <dt>Namespace</dt>
-        <dd>{{ctrl.loadBalancer.namespace}}</dd>
-        <dt>Kind</dt>
-        <dd>{{ctrl.loadBalancer.kind}}</dd>
-        <dt>Service Type</dt>
-        <dd>{{ctrl.manifest.manifest.spec.type}}</dd>
-        <dt>Sess. Affinity</dt>
-        <dd>{{ctrl.manifest.manifest.spec.sessionAffinity}}</dd>
-      </dl>
-    </collapsible-section>
-    <collapsible-section heading="Status" expanded="true">
-      <dl class="dl-horizontal dl-narrow">
-        <div ng-if="!ctrl.loadBalancer.serverGroups.length">
-          No workloads associated with this {{ctrl.loadBalancer.kind | robotToHuman}}.
-        </div>
-        <dt ng-if="ctrl.loadBalancer.serverGroups.length">Workloads</dt>
-        <dd ng-if="ctrl.loadBalancer.serverGroups.length">
-          <ul>
-            <li ng-repeat="serverGroup in ctrl.loadBalancer.serverGroups | orderBy: ['isDisabled', '-name']">
-              <a
-                ui-sref="^.serverGroup({region: serverGroup.region,
-                                         accountId: serverGroup.account,
-                                         serverGroup: serverGroup.name,
-                                         provider: 'kubernetes'})"
-              >
-                {{serverGroup.name}}
-              </a>
-            </li>
-          </ul>
-        </dd>
-        <div ng-if="ctrl.loadBalancer.serverGroups.length">
-          <dt>Pod status</dt>
-          <dd>
-            <health-counts class="pull-left" container="ctrl.loadBalancer.instanceCounts"></health-counts>
-          </dd>
-        </div>
-        <div ng-if="ctrl.manifest.manifest.spec.clusterIP">
-          <dt>Cluster IP</dt>
-          <dd>
-            <a target="_blank" href="//{{ctrl.manifest.manifest.spec.clusterIP}}">
-              {{ctrl.manifest.manifest.spec.clusterIP}}
-            </a>
-            <copy-to-clipboard
-              class="copy-to-clipboard copy-to-clipboard-sm"
-              text="ctrl.manifest.manifest.spec.clusterIP"
-              tool-tip="'Copy Cluster IP to clipboard'"
-            >
-            </copy-to-clipboard>
-          </dd>
-        </div>
-        <div ng-if="ctrl.manifest.manifest.spec.loadBalancerIP">
-          <dt>Load Balancer IP</dt>
-          <dd>
-            <a target="_blank" href="//{{ctrl.manifest.manifest.spec.loadBalancerIP}}">
-              {{ctrl.manifest.manifest.spec.loadBalancerIP}}
-            </a>
-            <copy-to-clipboard
-              class="copy-to-clipboard copy-to-clipboard-sm"
-              text="ctrl.manifest.manifest.spec.loadBalancerIP"
-              tool-tip="'Copy Load Balancer IP to clipboard'"
-            >
-            </copy-to-clipboard>
-          </dd>
-        </div>
-        <div ng-if="ctrl.manifest.manifest.spec.rules.length">
-          <dt>Host Rules</dt>
-          <dd ng-repeat="ingressRule in ctrl.manifest.manifest.spec.rules">
-            <a ng-if="ingressRule.host" target="_blank" href="//{{ingressRule.host}}"> {{ingressRule.host}} </a>
-            <copy-to-clipboard
-              ng-if="ingressRule.host"
-              class="copy-to-clipboard copy-to-clipboard-sm"
-              text="ingressRule.host"
-              tool-tip="'Copy ingress rule host to clipboard'"
-            >
-            </copy-to-clipboard>
-          </dd>
-        </div>
-        <div ng-if="ctrl.manifest.manifest.status.loadBalancer.ingress.length">
-          <dt>Ingress</dt>
-          <dd ng-repeat="ingress in ctrl.manifest.manifest.status.loadBalancer.ingress">
-            <a ng-if="ingress.hostname" target="_blank" href="//{{ingress.hostname}}"> {{ingress.hostname}} </a>
-            <copy-to-clipboard
-              ng-if="ingress.hostname"
-              class="copy-to-clipboard copy-to-clipboard-sm"
-              text="ingress.hostname"
-              tool-tip="'Copy Ingress hostname to clipboard'"
-            >
-            </copy-to-clipboard>
-            <a ng-if="ingress.ip" target="_blank" href="//{{ingress.ip}}"> {{ingress.ip}} </a>
-            <copy-to-clipboard
-              ng-if="ingress.ip"
-              class="copy-to-clipboard copy-to-clipboard-sm"
-              text="ingress.ip"
-              tool-tip="'Copy Ingress IP to clipboard'"
-            >
-            </copy-to-clipboard>
-          </dd>
-        </div>
-      </dl>
-    </collapsible-section>
-
-    <kubernetes-annotation-custom-sections
-      manifest="ctrl.manifest.manifest"
-      resource="ctrl.loadBalancer"
-    ></kubernetes-annotation-custom-sections>
-
-    <collapsible-section heading="Events" expanded="true">
-      <kubernetes-manifest-events manifest="ctrl.manifest"></kubernetes-manifest-events>
-    </collapsible-section>
-
-    <collapsible-section heading="Labels" expanded="true">
-      <kubernetes-manifest-labels manifest="ctrl.manifest.manifest"></kubernetes-manifest-labels>
-    </collapsible-section>
-  </div>
-</div>