Extension for customized components for provisioner #5842

a2batic · 2020-06-29T08:50:23Z

Helps to add customized components for provisoners in storage class creation form.

Adds extension getStorageClassProvisioner to fetch provisioners defined in different operators
Provides a way to add custom components for Provisioners
Introduces an attribute value for parameters, which help to take default values of provisioner's parameter

Thanks @rawagner
cc @rawagner @cloudbehl @bipuladh

a2batic · 2020-06-30T21:41:44Z

afreen23 · 2020-07-01T12:23:01Z

frontend/packages/ceph-storage-plugin/src/plugin.ts

+    type: 'StorageClass/Proviosner',
+    properties: {
+      getStorageClassProvisoner,


Suggested change

type: 'StorageClass/Proviosner',

properties: {

getStorageClassProvisoner,

type: 'StorageClass/Provisioner',

properties: {

getStorageClassProvisioner,

afreen23 · 2020-07-01T12:25:01Z

frontend/packages/console-plugin-sdk/src/typings/storage-class-params.ts

+namespace ExtensionProperties {
+  export interface StorageClassProviosner {
+    getStorageClassProvisoner: () => any;
+  }
+}
+
+export interface StorageClassProviosner
+  extends Extension<ExtensionProperties.StorageClassProviosner> {
+  type: 'StorageClass/Proviosner';
+}
+
+export function isStorageClassProvisioner(e: Extension): e is StorageClassProviosner {
+  return e.type === 'StorageClass/Proviosner';
+}


This is specific to OCS hence we can keep it in ceph package. If required in future we can move to shared.
We already have one extensions folder under /src

Can we contribute type definitions to SDK from plugins?

@afreen23 imo, we shouldnt contribute type definations to sdk from plugins if they are to be used in public component.

I missed this PR. Sorry for late response.
Many plugins have their extensions in their own package. We have one for ceph too already (which is stale now).
I think ceph csi is the consumer for this extension hence moving to ceph package makes sense to me.

console/frontend/packages/ceph-storage-plugin/src/extensions/dashboards.ts

Lines 1 to 12 in dccfe8f

import { Extension } from '@console/plugin-sdk';

interface DashboardsExtensionProperties {

/** Feature flags which are required for this extension to be effective. */

required?: string | string[];

/** Feature flags which are disallowed for this extension to be effective. */

disallowed?: string | string[];

}

namespace ExtensionProperties {

export interface DashboardsStorageCapacityDropdownItem extends DashboardsExtensionProperties {

@afreen23 Im not sure I follow. The current place is ok. ceph-storage-plugin/src/extensions/*.ts is for other plugins that want to extend ceph-storage-plugin. In this case we are extending core so the extension definition should live in console-plugin-sdk.

@afreen23 the plugin is generic, it can be used both by csi and non-csi provisioners. It can help put custom components to any provisioner. imo, Its better to keep it in SDK for its better usage.

@afreen23 Im not sure I follow. The current place is ok. ceph-storage-plugin/src/extensions/*.ts is for other plugins that want to extend ceph-storage-plugin. In this case we are extending core so the extension definition should live in console-plugin-sdk.

Agree, seems like I was suggesting to derail from current patterns. My bad !

@afreen23 the plugin is generic, it can be used both by csi and non-csi provisioners. It can help put custom components to any provisioner. imo, Its better to keep it in SDK for its better usage.

Sure @a2batic 👍

afreen23 · 2020-07-01T12:27:36Z

frontend/packages/ceph-storage-plugin/src/constants/resources.ts

+  kind: referenceForModel(CephBlockPoolModel),
+  namespaced: false,
+  isList: true,
+  prop: 'pool',


Suggested change

prop: 'pool',

prop: 'pools',

afreen23 · 2020-07-01T12:51:55Z

frontend/packages/console-plugin-sdk/src/registry.ts

+  public getStorageClassProvisioner() {
+    return this.extensions.filter(isStorageClassProvisioner);
+  }


You dont need registry when you use the useExtension hook.

+1
registry is deprecated so we should not add any new code here

afreen23 · 2020-07-01T12:54:05Z

frontend/public/components/storage-class-form.tsx

+  getExtensionsStorageClassProvisioners = (provionerType: string) => {
+    const extensionCSIProvisoners = {};
+    _.forEach(plugins.registry.getStorageClassProvisioner(), (operator: any) => {
+      if (operator) {
+        _.forEach(operator.properties.getStorageClassProvisoner(), (params, type) => {
+          extensionCSIProvisoners[type] = params;
+        });
+      }
+    });
+    return extensionCSIProvisoners[provionerType];
+  };


Use the useExtension hook.
const scProvisioners = useExtension<StorageClassProvisioner>(isStorageClassProvisioner);

Hooks cannot be used inside class components.

Use withExtensions HOC.

I see. This is still a class based component.

I understand withExtensions will work here, but the aim is to do minimal changes in public component to add the extension.

afreen23 · 2020-07-01T12:57:01Z

frontend/packages/console-plugin-sdk/src/typings/storage-class-params.ts

+  }
+}
+
+export interface StorageClassProviosner


Nits ! fix everywhere

Suggested change

export interface StorageClassProviosner

export interface StorageClassProvisioner

bipuladh · 2020-07-01T13:13:17Z

frontend/packages/console-plugin-sdk/src/typings/storage-class-params.ts

+  type: 'StorageClass/Proviosner';
+}
+
+export function isStorageClassProvisioner(e: Extension): e is StorageClassProviosner {


Please use arrow functions

bipuladh · 2020-07-01T13:25:22Z

frontend/public/components/storage-class-form.tsx

+  getExtensionsStorageClassProvisioners = (provionerType: string) => {
+    const extensionCSIProvisoners = {};
+    _.forEach(plugins.registry.getStorageClassProvisioner(), (operator: any) => {
+      if (operator) {
+        _.forEach(operator.properties.getStorageClassProvisoner(), (params, type) => {
+          extensionCSIProvisoners[type] = params;
+        });
+      }
+    });
+    return extensionCSIProvisoners[provionerType];
+  };


Use withExtensions HOC.

cloudbehl · 2020-07-01T13:09:28Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+import { CaretDownIcon } from '@patternfly/react-icons';
+
+const PoolResourceComponent: React.FC<PoolParams> = ({ onParamChange }) => {
+  const [data, loaded, loadError] = useK8sWatchResource<K8sResourceKind[]>(cephBlockPoolResource);


Suggested change

const [data, loaded, loadError] = useK8sWatchResource<K8sResourceKind[]>(cephBlockPoolResource);

const [poolData, poolDataLoaded, poolDataLoadError] = useK8sWatchResource<K8sResourceKind[]>(cephBlockPoolResource);

spadgett · 2020-07-01T14:23:01Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+
+const PoolResourceComponent: React.FC<PoolParams> = ({ onParamChange }) => {
+  const [data, loaded, loadError] = useK8sWatchResource<K8sResourceKind[]>(cephBlockPoolResource);
+  const [isOpen, setOpen] = React.useState<boolean>(false);


Maybe it's my background as a Java programmer, but I have a strong preference for isOpen/setOpen

That works! 👍

When I was reading setOpen it looked to me like its the setter for some other variable not for isOpen.

cloudbehl · 2020-07-01T13:11:47Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+    onParamChange(e.currentTarget.id);
+  };
+
+  const poolDropdownItems = _.map(data, (pool, key) => (


Suggested change

const poolDropdownItems = _.map(data, (pool, key) => (

const poolDropdownItems = data.map((pool, key) => (

I believe this would need to be data?.map if not using lodash

cloudbehl · 2020-07-01T13:12:02Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import * as _ from 'lodash';


Suggested change

import * as _ from 'lodash';

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

cloudbehl · 2020-07-01T13:33:41Z

frontend/packages/console-plugin-sdk/src/registry.ts

@@ -1,6 +1,7 @@
 import * as _ from 'lodash';

 import { ActivePlugin, Extension, isKebabActions } from './typings';
+import { isStorageClassProvisioner } from './typings/storage-class-params';


spell check

cloudbehl · 2020-07-01T13:34:41Z

frontend/packages/ceph-storage-plugin/src/utils/storage-class-params.ts

+import { StorageClassFormProvisoners } from '../components/ocs-storage-class-form';
+
+export const getStorageClassProvisoner = () => {
+  return StorageClassFormProvisoners;
+};


Why doing this? why not just import StorageClassFormProvisoners where ever required.

cloudbehl · 2020-07-01T13:41:54Z

frontend/public/components/storage-class-form.tsx

@@ -64,105 +65,29 @@ export class StorageClassForm_ extends React.Component<

  storageTypes = {};

+  // Fetch Storage type provisoners from different operators
+  // For CSI - provionerType: 'csi'
+  // For Defaults - provionerType: 'other'


Suggested change

// For Defaults - provionerType: 'other'

// For Defaults - provionerType: 'others'

cloudbehl · 2020-07-01T13:44:14Z

frontend/public/components/storage-class-form.tsx

+  // Fetch Storage type provisoners from different operators
+  // For CSI - provionerType: 'csi'
+  // For Defaults - provionerType: 'other'
+  getExtensionsStorageClassProvisioners = (provionerType: string) => {


Suggested change

getExtensionsStorageClassProvisioners = (provionerType: string) => {

getExtensionsStorageClassProvisioners = (provionerType = 'others') => {

cloudbehl · 2020-07-01T13:46:59Z

frontend/public/components/storage-class-form.tsx

+  addDefaultParams = () => {
+    const defaultParams = this.state.newStorageClass.type
+      ? this.storageTypes[this.state.newStorageClass.type].parameters
+      : {};
+    const hiddenParmas = {};
+    _.each(defaultParams, (values, param) => {
+      if (values.visible && !values.visible() && values.value) {
+        hiddenParmas[param] = values;
+      }
+    });
+    const value = { ...this.state.newStorageClass.parameters, ...hiddenParmas };
+    const newParams = {
+      ...this.state.newStorageClass,
+      parameters: value,
+    };
+
+    return newParams;
+  };
+


I Need to relook into this.

gnehapk · 2020-07-02T01:14:46Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+const PoolResourceComponent: React.FC<PoolParams> = ({ onParamChange }) => {
+  const [data, loaded, loadError] = useK8sWatchResource<K8sResourceKind[]>(cephBlockPoolResource);
+  const [isOpen, setOpen] = React.useState<boolean>(false);
+  const [poolName, setPoolName] = React.useState('');


Suggested change

const [poolName, setPoolName] = React.useState('');

const [poolName, setPoolName] = React.useState<string>('');

Implicit from ''. It would only be necessary when used null.

Since type has been added to isOpen too, either we remove that too or add it here.

gnehapk · 2020-07-02T01:16:03Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+  const [poolName, setPoolName] = React.useState('');
+
+  const handleDropdownChange = (e) => {
+    setPoolName(e.currentTarget.id);


Suggested change

setPoolName(e.currentTarget.id);

const id = e.currentTarget.id;

setPoolName(id);

onParamChange(id);

gnehapk · 2020-07-02T01:17:49Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+  const [isOpen, setOpen] = React.useState<boolean>(false);
+  const [poolName, setPoolName] = React.useState('');
+
+  const handleDropdownChange = (e) => {


Suggested change

const handleDropdownChange = (e) => {

const handleDropdownChange = (e: React.FormEvent<HTMLInputElement>) => {

gnehapk · 2020-07-02T01:22:05Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+    onParamChange(e.currentTarget.id);
+  };
+
+  const poolDropdownItems = _.map(data, (pool, key) => (


poolDropdownItems will be reloaded each time the component's state changes. Shouldn't this be inside React.useEffect

@gnehapk I have changed the resource type from FirehoseResource to WatchK8sResource. It will restrict the number of calls for Pool list.

gnehapk · 2020-07-02T01:24:13Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+            title="Select Pool"
+            className="dropdown dropdown--full-width"
+            toggle={
+              <DropdownToggle id="toggle-id" onToggle={onToggle} iconComponent={CaretDownIcon}>


You can directly call setOpen(!isOpen); here instead of separate function.

gnehapk · 2020-07-02T01:30:52Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+    setOpen(!isOpen);
+  };
+  const onSelect = React.useCallback(() => {
+    setOpen(false);


Will this value be always false here?

Yes, the dropdown should close everytime we select a value.

gnehapk · 2020-07-02T01:31:24Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+            }
+            isOpen={isOpen}
+            dropdownItems={poolDropdownItems}
+            onSelect={onSelect}


You can directly call setOpen here

gnehapk · 2020-07-02T01:34:23Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+};
+
+type PoolParams = {
+  onParamChange: Function;


Suggested change

onParamChange: Function;

onParamChange: (id: string) => void;

I don't think it makes much of a difference.

It does here as (id: string) or (id: string, name:string) for eg. will both fit for Function and that's not we follow across other views.

bipuladh · 2020-07-02T05:39:56Z

frontend/public/components/storage-class-form.tsx

@@ -842,6 +791,11 @@ export class StorageClassForm_ extends React.Component<
        return null;
      }

+      if (parameter.Component) {
+        const Component = parameter.Component;


Suggested change

const Component = parameter.Component;

const { Component } = parameter;

bipuladh · 2020-07-02T05:43:25Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+  const onToggle = () => {
+    setOpen(!isOpen);
+  };
+  const onSelect = React.useCallback(() => {


This doesn't need to be a callback. You can make it a regular function.

frontend/public/components/storage-class-form.tsx

bipuladh · 2020-07-14T12:53:06Z

frontend/packages/ceph-storage-plugin/src/constants/index.ts

@@ -13,3 +13,4 @@ export const OCS_INDEPENDENT_CR_NAME = 'ocs-external-storagecluster';
 export const OCS_CONVERGED_CR_NAME = 'ocs-storagecluster';
 export const NO_PROVISIONER = 'kubernetes.io/no-provisioner';
 export const OCS_SUPPORT_ANNOTATION = 'features.ocs.openshift.io/enabled';
+export const OCS_NAMESPACE = 'openshift-storage';


Look at line 5.

bipuladh · 2020-07-14T12:56:23Z

frontend/packages/console-plugin-sdk/src/typings/storage-class-params.ts

+          value?: string;
+          visible?: () => boolean;
+          required?: boolean;
+          Component?: any;


Suggested change

Component?: any;

component?: React.Component;

bipuladh · 2020-07-14T12:57:19Z

frontend/public/components/storage-class-form.tsx

+  // For CSI - provionerType: 'csi'
+  // For Defaults - provionerType: 'others'
+  getExtensionsStorageClassProvisioners = (provionerType = 'others') => {
+    const extensionCSIProvisoners = {};


Suggested change

const extensionCSIProvisoners = {};

const extensionCSIProvisioners = {};

bipuladh · 2020-07-14T12:58:39Z

frontend/public/components/storage-class-form.tsx

+  // Fetch Storage type provisoners from different operators
+  // For CSI - provionerType: 'csi'
+  // For Defaults - provionerType: 'others'


Suggested change

// Fetch Storage type provisoners from different operators

// For CSI - provionerType: 'csi'

// For Defaults - provionerType: 'others'

// Fetch Storage type provisoners from different operators

// For CSI - provionerType: 'csi'

// For Defaults - provionerType: 'others'

enum Provisioner {

CSI = 'csi',

OTHERS = 'others'

}

bipuladh · 2020-07-14T13:01:30Z

frontend/public/components/storage-class-form.tsx

+  // Fetch Storage type provisoners from different operators
+  // For CSI - provionerType: 'csi'
+  // For Defaults - provionerType: 'others'
+  getExtensionsStorageClassProvisioners = (provionerType = 'others') => {


Suggested change

getExtensionsStorageClassProvisioners = (provionerType = 'others') => {

getExtensionsStorageClassProvisioners = (provisionerType = Provisioner.OTHERS) => {

bipuladh · 2020-07-14T13:06:09Z

frontend/public/components/storage-class-form.tsx

+    const defaultParams = this.state.newStorageClass.type
+      ? this.storageTypes[this.state.newStorageClass.type].parameters
+      : {};


Suggested change

const defaultParams = this.state.newStorageClass.type

? this.storageTypes[this.state.newStorageClass.type].parameters

: {};

const defaultParams = this.storageTypes?.[this.state?.newStorageClass?.type]?.parameters ?? {};

bipuladh · 2020-07-14T13:17:22Z

frontend/public/components/storage-class-form.tsx

+      k8sCreate(StorageClassModel, data)
+        .then(() => {
+          this.setState({ loading: false });
+          history.push('/k8s/cluster/storageclasses');


This is not a new thing. But isn't the default side effect of creation is that we move to the details page of the created resource? @spadgett

Yes, that's true, We need to move to the details page if the resource is created.

I saw mockups in UX call of CNV & storage where there will be a success page and use can go to multiple pages from there but that not implemented right now.

bipuladh · 2020-07-14T13:18:14Z

frontend/public/components/storage-class-form.tsx

+  handleComponentParams = (value: string, key: string) => {
+    this.setParameterHandler(key, value, false);
+  };


Suggested change

handleComponentParams = (value: string, key: string) => {

this.setParameterHandler(key, value, false);

};

handleComponentParams = (value: string, key: string) => this.setParameterHandler(key, value, false);

since this is only used in one place. We could also use it directly. but it's up to you.

cloudbehl

Looks good mostly.

cloudbehl · 2020-07-14T14:25:28Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+                onToggle={() => setOpen(!isOpen)}
+                toggleIndicator={CaretDownIcon}
+              >
+                {poolName || 'Select a Pool'}


Why not select a pool by default?

@cloudbehl just trying to follow the pattern. In storageClass form, we dont have any dropdowns with default selection.

Just for the ease of use. I'm not sure about pattern.

a2batic · 2020-07-15T05:35:51Z

/test e2e-gcp-console

rawagner · 2020-07-15T06:24:02Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Dropdown } from '@patternfly/react-core/dist/js/components/Dropdown/Dropdown';


why the long path

Suggested change

import { Dropdown } from '@patternfly/react-core/dist/js/components/Dropdown/Dropdown';

import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';

rawagner · 2020-07-15T06:24:56Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+
+  const poolDropdownItems = poolData?.map((pool, key) => (
+    <DropdownItem
+      key={key}


Suggested change

key={key}

key={pool.metadata.uid}

rawagner · 2020-07-15T06:26:13Z

frontend/packages/ceph-storage-plugin/src/components/ocs-storage-class-form.tsx

+
+  return (
+    <>
+      {poolDataLoaded && !poolDataLoadError && (


So if the fetch fails we show nothing ? Dont you want to show some kind of error message ?

ack, added error message for this.

rawagner · 2020-07-15T06:28:34Z

frontend/packages/console-plugin-sdk/src/typings/storage-class-params.ts

+
+namespace ExtensionProperties {
+  export interface StorageClassProvisioner {
+    getStorageClassProvisioner: () => ExtensionSCProvisionerProp;


any reason to have this as function and not just

Suggested change

getStorageClassProvisioner: () => ExtensionSCProvisionerProp;

storageClassProvisioner: ExtensionSCProvisionerProp;

?

rawagner · 2020-07-15T06:34:00Z

frontend/public/components/storage-class-form.tsx

+  // For Defaults - provisionerType: 'others'
+  getExtensionsStorageClassProvisioners = (provisionerType = Provisioner.OTHERS) => {
+    const extensionCSIProvisioners = {};
+    const externsionItems = this.props.params.map((item) => item.properties);


you could simplify the map and following _.forEach into one reduce

rawagner · 2020-07-15T06:44:18Z

frontend/packages/console-plugin-sdk/src/typings/storage-class-params.ts

+          value?: string;
+          visible?: () => boolean;
+          required?: boolean;
+          Component?: React.ComponentType<any>;


shouldn't be any but

Suggested change

Component?: React.ComponentType<any>;

Component?: React.ComponentType<ProvisionerProps>;

export type ProvisionerProps = { onParamChange: (id: string) => void; };

You can also reuse the ProvisionerProps in PoolResourceComponent

rawagner · 2020-07-15T12:38:37Z

frontend/public/components/storage-class-form.tsx

+      this.props.params,
+      (res, value) => {
+        const obj = value.properties.getStorageClassProvisioner || {};
+        if (obj) {


i think you still need to return res

Suggested change

if (obj) {

if (obj) {

const key = provisionerType;

const keyValue = obj[provisionerType];

res[key] = keyValue;

}

return res;

a2batic · 2020-07-15T14:54:49Z

/test e2e-gcp-console

a2batic · 2020-07-16T05:36:37Z

/test e2e-gcp-console

Helps to add customized components for provisioners in storage class creation form. - Adds extension getStorageClassProvisioner to fetch provisioners defined in different operators - Provides a way to add custom components for Provisioners - Introduces an attribute value for parameters, which help to take default values of provisioner's parameter Signed-off-by: Kanika <kmurarka@redhat.com>

a2batic · 2020-07-16T05:54:18Z

@rawagner addressed comments, please review.

rawagner · 2020-07-16T10:30:34Z

/lgtm

openshift-ci-robot · 2020-07-16T10:30:54Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: a2batic, gnehapk, rawagner

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [rawagner]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-ci-robot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. component/ceph Related to ceph-storage-plugin labels Jun 29, 2020

openshift-ci-robot requested review from rawagner and vojtechszocs June 29, 2020 08:50

openshift-ci-robot added component/core Related to console core functionality component/sdk Related to console-plugin-sdk labels Jun 29, 2020

a2batic marked this pull request as draft June 30, 2020 06:00

a2batic force-pushed the poc-sc-plugin branch 2 times, most recently from 14452bf to 909bbeb Compare June 30, 2020 21:27

a2batic changed the title ~~[WIP] Extension for customized components for proviosner~~ Extension for customized components for proviosner Jun 30, 2020

a2batic marked this pull request as ready for review June 30, 2020 21:29

openshift-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jun 30, 2020

openshift-ci-robot assigned bipuladh and spadgett Jun 30, 2020

a2batic force-pushed the poc-sc-plugin branch from 909bbeb to 69febfa Compare July 1, 2020 09:58

afreen23 suggested changes Jul 1, 2020

View reviewed changes

bipuladh suggested changes Jul 1, 2020

View reviewed changes

cloudbehl reviewed Jul 1, 2020

View reviewed changes

gnehapk reviewed Jul 2, 2020

View reviewed changes

bipuladh reviewed Jul 2, 2020

View reviewed changes

frontend/public/components/storage-class-form.tsx Show resolved Hide resolved

a2batic requested review from rawagner and bipuladh July 14, 2020 05:34

a2batic changed the title ~~Extension for customized components for proviosner~~ Extension for customized components for provisioner Jul 14, 2020

bipuladh reviewed Jul 14, 2020

View reviewed changes

cloudbehl reviewed Jul 14, 2020

View reviewed changes

a2batic force-pushed the poc-sc-plugin branch from 1df9835 to e85bb10 Compare July 14, 2020 22:25

a2batic requested review from cloudbehl and bipuladh July 14, 2020 22:26

gnehapk approved these changes Jul 15, 2020

View reviewed changes

rawagner suggested changes Jul 15, 2020

View reviewed changes

a2batic force-pushed the poc-sc-plugin branch from e85bb10 to b652203 Compare July 15, 2020 11:35

rawagner suggested changes Jul 15, 2020

View reviewed changes

a2batic force-pushed the poc-sc-plugin branch from b652203 to d80a7d4 Compare July 15, 2020 13:38

openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jul 15, 2020

a2batic force-pushed the poc-sc-plugin branch from d80a7d4 to 2d76569 Compare July 15, 2020 13:51

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jul 15, 2020

a2batic requested a review from rawagner July 15, 2020 16:06

a2batic force-pushed the poc-sc-plugin branch from 2d76569 to 5c0d45a Compare July 16, 2020 05:52

openshift-ci-robot assigned rawagner Jul 16, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jul 16, 2020

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jul 16, 2020

openshift-merge-robot merged commit f5683ed into openshift:master Jul 16, 2020

spadgett added this to the v4.6 milestone Jul 16, 2020

	import { Extension } from '@console/plugin-sdk';

	interface DashboardsExtensionProperties {
	/** Feature flags which are required for this extension to be effective. */
	required?: string \| string[];

	/** Feature flags which are disallowed for this extension to be effective. */
	disallowed?: string \| string[];
	}

	namespace ExtensionProperties {
	export interface DashboardsStorageCapacityDropdownItem extends DashboardsExtensionProperties {

	export interface StorageClassProviosner
	export interface StorageClassProvisioner

	const [data, loaded, loadError] = useK8sWatchResource<K8sResourceKind[]>(cephBlockPoolResource);
	const [poolData, poolDataLoaded, poolDataLoadError] = useK8sWatchResource<K8sResourceKind[]>(cephBlockPoolResource);

	const poolDropdownItems = _.map(data, (pool, key) => (
	const poolDropdownItems = data.map((pool, key) => (

		@@ -0,0 +1,174 @@
		import * as React from 'react';
		import * as _ from 'lodash';

	// For Defaults - provionerType: 'other'
	// For Defaults - provionerType: 'others'

	getExtensionsStorageClassProvisioners = (provionerType: string) => {
	getExtensionsStorageClassProvisioners = (provionerType = 'others') => {

	const [poolName, setPoolName] = React.useState('');
	const [poolName, setPoolName] = React.useState<string>('');

-    setPoolName(e.currentTarget.id);
+    const id = e.currentTarget.id;
+    setPoolName(id);
+    onParamChange(id);

	const handleDropdownChange = (e) => {
	const handleDropdownChange = (e: React.FormEvent<HTMLInputElement>) => {

	onParamChange: Function;
	onParamChange: (id: string) => void;

	const Component = parameter.Component;
	const { Component } = parameter;

	const extensionCSIProvisoners = {};
	const extensionCSIProvisioners = {};

		@@ -0,0 +1,69 @@
		import * as React from 'react';
		import { Dropdown } from '@patternfly/react-core/dist/js/components/Dropdown/Dropdown';

	import { Dropdown } from '@patternfly/react-core/dist/js/components/Dropdown/Dropdown';
	import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';

	getStorageClassProvisioner: () => ExtensionSCProvisionerProp;
	storageClassProvisioner: ExtensionSCProvisionerProp;

	Component?: React.ComponentType<any>;
	Component?: React.ComponentType<ProvisionerProps>;

-        if (obj) {
+        if (obj) {
+          const key = provisionerType;
+          const keyValue = obj[provisionerType];
+          res[key] = keyValue;
+        }
+        return res;

Extension for customized components for provisioner #5842

Extension for customized components for provisioner #5842

Conversation

a2batic commented Jun 29, 2020 • edited

a2batic commented Jun 30, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cloudbehl Jul 1, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gnehapk Jul 2, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gnehapk Jul 4, 2020 • edited

Choose a reason for hiding this comment

bipuladh Jul 2, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cloudbehl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a2batic commented Jul 15, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a2batic Jul 15, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a2batic commented Jun 29, 2020 •

edited

cloudbehl Jul 1, 2020 •

edited

gnehapk Jul 2, 2020 •

edited

gnehapk Jul 4, 2020 •

edited

bipuladh Jul 2, 2020 •

edited

a2batic Jul 15, 2020 •

edited