From 88b5f8cca4b127c91f75ffa1f052f63d67ae5133 Mon Sep 17 00:00:00 2001
From: Cyril <cyril.ajieh@gmail.com>
Date: Tue, 1 Oct 2019 14:47:37 -0400
Subject: [PATCH] modify view update strategy descriptor

---
 .../spec/configure-update-strategy.tsx        | 25 +++++
 .../src/components/descriptors/spec/index.tsx | 26 ++++-
 .../modals/update-strategy-modal.tsx          | 98 +++++++++++++++++++
 .../configure-update-strategy-modal.tsx       |  2 +-
 4 files changed, 145 insertions(+), 6 deletions(-)
 create mode 100644 frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/configure-update-strategy.tsx
 create mode 100644 frontend/packages/operator-lifecycle-manager/src/components/modals/update-strategy-modal.tsx

diff --git a/frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/configure-update-strategy.tsx b/frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/configure-update-strategy.tsx
new file mode 100644
index 00000000000..bdef2fe6e4b
--- /dev/null
+++ b/frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/configure-update-strategy.tsx
@@ -0,0 +1,25 @@
+import { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
+import { updateStrategyModal } from '../../modals/update-strategy-modal';
+import { Descriptor } from '../types';
+
+export const configureUpdateStrategyModal = ({
+  kindObj,
+  resource,
+  specDescriptor,
+  specValue,
+}: ConfigureUpdateStrategyModalProps) => {
+  return updateStrategyModal({
+    resourceKind: kindObj,
+    resource,
+    defaultValue: specValue,
+    title: `Edit ${specDescriptor.displayName}`,
+    path: `/spec/${specDescriptor.path}`,
+  });
+};
+
+type ConfigureUpdateStrategyModalProps = {
+  kindObj: K8sKind;
+  resource: K8sResourceKind;
+  specDescriptor: Descriptor;
+  specValue: any;
+};
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/index.tsx b/frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/index.tsx
index 56ae8ccc287..1ee65ca2c69 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/index.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/index.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { Map as ImmutableMap } from 'immutable';
-import { Tooltip, Switch, Button } from '@patternfly/react-core';
+import { Button, Switch, Tooltip } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon, PencilAltIcon } from '@patternfly/react-icons';
-import { Selector, ResourceLink, LoadingInline } from '@console/internal/components/utils';
+import { LoadingInline, ResourceLink, Selector } from '@console/internal/components/utils';
 import { k8sPatch } from '@console/internal/module/k8s';
 import { YellowExclamationTriangleIcon } from '@console/shared';
 import { SecretValue } from '@console/internal/components/configmap-and-secret-data';
-import { SpecCapability, DescriptorProps, CapabilityProps } from '../types';
+import { CapabilityProps, DescriptorProps, SpecCapability } from '../types';
 import { ResourceRequirementsModalLink } from './resource-requirements';
 import { EndpointList } from './endpoint';
 import { configureSizeModal } from './configure-size';
+import { configureUpdateStrategyModal } from './configure-update-strategy';
 
 const Default: React.SFC<SpecCapabilityProps> = ({ value }) => {
   if (_.isEmpty(value) && !_.isNumber(value)) {
@@ -142,8 +143,23 @@ const Secret: React.FC<SpecCapabilityProps> = (props) => {
   );
 };
 
-const UpdateStrategy: React.FC<SpecCapabilityProps> = (props) => (
-  <div>{_.get(props.value, 'type', 'None')}</div>
+const UpdateStrategy: React.FC<SpecCapabilityProps> = ({ model, obj, descriptor, value }) => (
+  <Button
+    type="button"
+    variant="link"
+    isInline
+    onClick={() =>
+      configureUpdateStrategyModal({
+        kindObj: model,
+        resource: obj,
+        specDescriptor: descriptor,
+        specValue: value,
+      })
+    }
+  >
+    {_.get(value, 'type', 'None')}
+    <PencilAltIcon className="co-icon-space-l pf-c-button-icon--plain" />
+  </Button>
 );
 
 const capabilityComponents = ImmutableMap<
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/modals/update-strategy-modal.tsx b/frontend/packages/operator-lifecycle-manager/src/components/modals/update-strategy-modal.tsx
new file mode 100644
index 00000000000..d74de5191a5
--- /dev/null
+++ b/frontend/packages/operator-lifecycle-manager/src/components/modals/update-strategy-modal.tsx
@@ -0,0 +1,98 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { K8sKind, k8sPatch, K8sResourceKind, Patch } from '@console/internal/module/k8s';
+import {
+  createModalLauncher,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalTitle,
+} from '@console/internal/components/factory/modal';
+import { withHandlePromise } from '@console/internal/components/utils';
+import {
+  ConfigureUpdateStrategy,
+  getNumberOrPercent,
+} from '@console/internal/components/modals/configure-update-strategy-modal';
+
+export const UpdateStrategyModal = withHandlePromise((props: UpdateStrategyModalProps) => {
+  const {
+    path,
+    resource,
+    resourceKind,
+    title,
+    handlePromise,
+    errorMessage,
+    inProgress,
+    defaultValue,
+    cancel,
+    close,
+  } = props;
+  const getPath = path.substring(1).replace('/', '.');
+  const [strategyType, setStrategyType] = React.useState(
+    _.get(resource, `${getPath}.type`) || defaultValue,
+  );
+  const [maxUnavailable, setMaxUnavailable] = React.useState(
+    _.get(resource, `${getPath}.rollingUpdate.maxUnavailable`, '25%'),
+  );
+  const [maxSurge, setMaxSurge] = React.useState(
+    _.get(resource, `${getPath}.rollingUpdate.maxSurge`, '25%'),
+  );
+
+  const submit = (event) => {
+    event.preventDefault();
+
+    const patch: Patch = { path: `${path}/rollingUpdate`, op: 'remove' };
+    if (strategyType === 'RollingUpdate') {
+      patch.value = {
+        maxUnavailable: getNumberOrPercent(maxUnavailable || '25%'),
+        maxSurge: getNumberOrPercent(maxSurge || '25%'),
+      };
+      patch.op = 'add';
+    }
+
+    return handlePromise(
+      k8sPatch(resourceKind, resource, [
+        patch,
+        { path: `${path}/type`, value: strategyType, op: 'replace' },
+      ]),
+    ).then(close, () => {});
+  };
+
+  return (
+    <form onSubmit={submit} name="form" className="modal-content">
+      <ModalTitle>{title}</ModalTitle>
+      <ModalBody>
+        <ConfigureUpdateStrategy
+          strategyType={strategyType}
+          maxUnavailable={maxUnavailable}
+          maxSurge={maxSurge}
+          onChangeStrategyType={setStrategyType}
+          onChangeMaxUnavailable={setMaxUnavailable}
+          onChangeMaxSurge={setMaxSurge}
+        />
+      </ModalBody>
+      <ModalSubmitFooter
+        errorMessage={errorMessage}
+        inProgress={inProgress}
+        submitText="Save"
+        cancel={cancel}
+      />
+    </form>
+  );
+});
+
+export const updateStrategyModal = createModalLauncher(UpdateStrategyModal);
+
+UpdateStrategyModal.displayName = 'UpdateStrategyModal';
+
+export type UpdateStrategyModalProps = {
+  defaultValue: any;
+  path: string;
+  resource: K8sResourceKind;
+  resourceKind: K8sKind;
+  title: string;
+  handlePromise: <T>(promise: Promise<T>) => Promise<T>;
+  inProgress: boolean;
+  errorMessage: string;
+  cancel?: () => void;
+  close?: () => void;
+};
diff --git a/frontend/public/components/modals/configure-update-strategy-modal.tsx b/frontend/public/components/modals/configure-update-strategy-modal.tsx
index c3e2605e95e..2bf5080f4a3 100644
--- a/frontend/public/components/modals/configure-update-strategy-modal.tsx
+++ b/frontend/public/components/modals/configure-update-strategy-modal.tsx
@@ -8,7 +8,7 @@ import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '.
 import { pluralize, withHandlePromise } from '../utils';
 import { RadioInput } from '../radio';
 
-const getNumberOrPercent = (value) => {
+export const getNumberOrPercent = (value) => {
   if (typeof value === 'undefined') {
     return null;
   }