Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create OCS Service workflow #2359

Merged
merged 1 commit into from
Aug 29, 2019

Conversation

gnehapk
Copy link
Contributor

@gnehapk gnehapk commented Aug 15, 2019

Screenshots for the current implementation -
ocs-install2

ocs-install1

Planning to send a separate PR for the following pending items -

  1. Pre-select the nodes if they are already labeled
  2. Few issues - sorting, on selection the page is getting reloaded

@vojtechszocs @spadgett @priley86 Please review

@openshift-ci-robot openshift-ci-robot added the size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. label Aug 15, 2019
@openshift-ci-robot openshift-ci-robot added component/ceph Related to ceph-storage-plugin component/core Related to console core functionality labels Aug 15, 2019
@@ -230,13 +230,13 @@ const VirtualBody: React.SFC<VirtualBodyProps> = (props) => {
);
Copy link
Contributor

@priley86 priley86 Aug 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks @gnehapk - updates in Table.tsx look correct to me per our last discussion. I think customData should be any type and can be used to pass selection state back to the view if desired. The event.preventDefault() is necessary since we are not handling this in PF React.

@lizsurette
Copy link

@yuvalgalanti @shirimordechay Would you guys be able to give this a review from a UXD standpoint?

path: labelPath,
},
];
patch[0].value = { ...patch[0].value, 'cluster.ocs.openshift.io/openshift-storage': '' };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we make 'cluster.ocs.openshift.io/openshift-storage': '' as const nodeLabel?

const taints = node.spec.taints
? [
...node.spec.taints,
{ key: 'node.ocs.openshift.io/storage', value: 'true', effect: 'NoSchedule' },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make 'node.ocs.openshift.io/storage' as const ocsTaint or something? Prevents repetition and helps making changes easier.

...node.spec.taints,
{ key: 'node.ocs.openshift.io/storage', value: 'true', effect: 'NoSchedule' },
]
: [{ key: 'node.ocs.openshift.io/storage', value: 'true', effect: 'NoSchedule' }];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as before

}),
);

const obj: K8sResourceKind = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we keep this as a template in a different file? Having YAML definition in between UI logic looks messy to me.

@@ -33,6 +33,7 @@ export class RequestSizeInput extends React.Component<RequestSizeInputProps> {
aria-describedby={describedBy}
name={inputName}
required={this.props.required}
value={this.props.defaultRequestSizeValue}
/>
<Dropdown
title={this.props.defaultRequestSizeUnit}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we only allow one value for selection, why not disable this dropdown field for now?

Copy link
Contributor Author

@gnehapk gnehapk Aug 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shirimordechay make sense. Will do the changes.

export const CreateOCSServiceForm: React.FC<CreateOCSServiceFormProps> = React.memo((props) => {
const title = 'Create New OCS Service';
const dropdownUnits = {
TiB: 'TiB',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not much of a dropdown here if there is only 1 option. I know this handles decimals but are you sure you would not like at least GiB?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there is only one item, should it really be a dropdown?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are no longer going to show capacity field. Hence, will remove.

Copy link
Member

@zherman0 zherman0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Nice to see hooks being used.

const tableColumnClasses = [
classNames('col-md-1', 'col-sm-1', 'col-xs-1'),
classNames('col-md-5', 'col-sm-6', 'col-xs-8'),
classNames('col-md-2', 'col-sm-3', 'hidden-2'),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hidden-2? Typo?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should be col-xs-2. Will fix it

classNames('col-md-5', 'col-sm-6', 'col-xs-8'),
classNames('col-md-2', 'col-sm-3', 'hidden-2'),
classNames('col-md-2', 'hidden-sm', 'hidden-xs'),
classNames('col-md-2', 'hidden-2', 'hidden-xs'),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hidden-2?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should be col-sm-2. Will fix it


const getConvertedUnits = (value, initialUnit, preferredUnit) => {
return (
humanizeBinaryBytes(_.slice(value, 0, value.length - 2).join(''), initialUnit, preferredUnit)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should not assume certain units. Instead use the units.js utilities for parsing and displaying memory values.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

type: 'Page/Route',
properties: {
exact: true,
path: `/k8s/ns/:ns/${ClusterServiceVersionModel.plural}/:appName/${apiObjectRef}/~new`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to provide a first-class extension point for creation forms in a future follow-on.

@@ -8,7 +8,7 @@ import { isDefaultClass } from '../storage-class';

/* Component StorageClassDropdown - creates a dropdown list of storage classes */

class StorageClassDropdown_ extends React.Component<StorageClassDropdownProps, StorageClassDropdownState> {
export class StorageClassDropdown_ extends React.Component<StorageClassDropdownProps, StorageClassDropdownState> {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should rename this if we are going to export. The trailing underscore implies it's internal.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack


return (
<CreateYAML
{...props as any}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need as any here? This usually means a type declaration is wrong somewhere.

breadcrumbs={[
{
name: clusterServiceVersion.spec.displayName,
path: window.location.pathname.replace('/~new', ''),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather not use path math here. Is there a helper for generating the path from the resource?

name: clusterServiceVersion.spec.displayName,
path: window.location.pathname.replace('/~new', ''),
},
{ name: `Create ${OCSServiceModel.label}`, path: window.location.pathname },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typically the last breadcrumb is not a link.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the last breadcrumb is not getting displayed as link here.

@eparis
Copy link
Member

eparis commented Aug 22, 2019

/hold
there is currently no exception request for such a late new feature

@openshift-ci-robot openshift-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Aug 22, 2019
@julienlim
Copy link

@eparis An exception request has just been filed -- pending review and approval we hope!

@cloudbehl
Copy link
Contributor

/retest

breadcrumbs={[
{
name: clusterServiceVersion.spec.displayName,
path: window.location.pathname.replace('/~new', ''),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this handles custom context roots correctly. You should be using props.match.url from react-router

https://reacttraining.com/react-router/web/api/match

Suggested change
path: window.location.pathname.replace('/~new', ''),
path: props.match.url.replace('/~new', ''),

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

name: clusterServiceVersion.spec.displayName,
path: window.location.pathname.replace('/~new', ''),
},
{ name: `Create ${OCSServiceModel.label}`, path: window.location.pathname },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{ name: `Create ${OCSServiceModel.label}`, path: window.location.pathname },
{ name: `Create ${OCSServiceModel.label}`, path: props.match.url },

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

title: roles.join(', ') || '-',
},
{
title: `${humanizeCpuCores(_.get(node.status, 'capacity.cpu')).string || '-'} CPU`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The trailing "CPU" is not needed. The column header is "CPU" and humanizeCpuCores handles the units.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 that trailing CPU not needed. Should be showing the unit, e.g. MHz, GHz, etc. instead if possible as it's unclear what the unit is oitherwise.

@gnehapk @shirimordechay @spadgett

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can remove the trailing if the header is fixed (fixing the row header as a user scroll provides context on what column the user is on)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

title: `${humanizeCpuCores(_.get(node.status, 'capacity.cpu')).string || '-'} CPU`,
},
{
title: `${getConvertedUnits(_.get(node.status, 'allocatable.memory'), 'KiB')}`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the existing helpers in units.js instead of writing your own.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spadgett I am using humanizeBinaryBytes utils method inside getConvertedUnits. Are you referring to some other function?

Copy link
Member

@spadgett spadgett Aug 26, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. This function is assuming that a certain unit is used in the YAML. We can't make that assumption. We need to use dehumanize to convert to the base value, and then humanizeBinaryBytes to display.

We could just show the value as-is and humanize in a follow up if needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

});
};

const getAllTableFilters = () => ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this helper needed? Why not just use tableFilters directly?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing types

import { NodeModel } from '@console/internal/models';
import { Tooltip } from '@console/internal/components/utils/tooltip';
import { OCSServiceModel } from '../../models';
import { minSelectedNode, labelObj, ocsRequestData, taintObj } from '../../constants/ocs-install';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

labelObj, ocsRequestData, and taintObj are so tightly coupled to this component, I feel like they are better in this file. I sort of disagree with the earlier comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spadgett The intention was to keep all the constants related to ocs install view separately as it was making the file very lengthy. There are so many constants being used here.

referenceForModel,
} from '@console/internal/module/k8s';
import { NodeModel } from '@console/internal/models';
import { Tooltip } from '@console/internal/components/utils/tooltip';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is removed in #2455. Use the PF4 tooltip


type ocsPropsType = {
namespace: string;
clusterServiceVersion: { metadata: { name: string } };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
clusterServiceVersion: { metadata: { name: string } };
clusterServiceVersion: K8sResourceKind;

@@ -8,7 +8,7 @@ import { isDefaultClass } from '../storage-class';

/* Component StorageClassDropdown - creates a dropdown list of storage classes */

class StorageClassDropdown_ extends React.Component<StorageClassDropdownProps, StorageClassDropdownState> {
export class SCDropdown extends React.Component<StorageClassDropdownProps, StorageClassDropdownState> {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exporting both StorageClassDropdown and SCDropdown is confusing. You need to give better names to make the difference clear.

@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 26, 2019

@spadgett Amended the PR. Please review.

@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 26, 2019

/retest

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added some additional comments. Thanks for your patience.

The text filter that shows up above the node table was broken when I tried it.

return objects;
}

const allTableFilters = { ...tableFilters };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why make a copy of tableFilters? It doesn't look like we're modifying it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

the OCS Service.
</div>
<Alert
className="co-alert ceph-ocs-info__alert"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need a custom class? It seems to have broken the alert formatting. We shouldn't be overriding the Patternfly alert styles.

You will need to add the isInline prop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

}
}
.ceph-ocs-install__form {
max-width: 66%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we have this style? It's inconsistent with other forms. Please use the standard co-m-pane__form class.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, this can be removed.

max-width: 66%;
}

.ceph-yaml__link { position: absolute; margin-top: 1.5rem; margin-left: 60%;}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the normal co-m-pane__heading-link instead

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spadgett adding co-m-pane__heading-link class is not working correctly as the yaml link is not inside the form. Its outside it and it need to be right aligned. Ataching screenshots after adding co-m-pane__heading-link class and how it should look actually.

It should look like this -
Screenshot from 2019-08-27 15-26-26

After adding co-m-pane__heading-link class -
Screenshot from 2019-08-27 15-26-12

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to move the element to match the expected page structure. Here is an example:

https://github.com/openshift/console/blob/master/frontend/public/components/routes/create-route.tsx#L221-L228

We shouldn't create custom classes for this as we have a general class for all forms with links like this.

@@ -0,0 +1,22 @@
.ceph-ocs-info__alert {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe all of these custom styles can be removed since we have standard styles for everything. We should be able to delete this file.

<label className="co-required" htmlFor="select-node-help">
Select Nodes
</label>
<div className="control-label help-block" id="select-node-help">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd use co-m-pane__explanation here, which will give you padding above the alert. It's not actually a control-label.

Suggested change
<div className="control-label help-block" id="select-node-help">
<p className="co-m-pane__explanation">

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

.then((infra) => {
// find infra supported provisioner
provisioner = infraProvisionerMap[_.lowerCase(_.get(infra, 'status.platform'))];
return k8sGet(StorageClassModel);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a k8sList not a k8sGet

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

let provisioner = [];

k8sGet(InfrastructureModel, 'cluster')
.then((infra) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.then((infra) => {
.then((infra: K8sResourceKinde) => {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

provisioner = infraProvisionerMap[_.lowerCase(_.get(infra, 'status.platform'))];
return k8sGet(StorageClassModel);
})
.then((scData) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming you switch to k8sList, this should be

Suggested change
.then((scData) => {
.then((storageClasses: K8sResourceKind[]) => {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

const cephStorageProvisioners = ['ceph.rook.io/block', 'cephfs.csi.ceph.com', 'rbd.csi.ceph.com'];

export const OCSStorageClassDropdown: React.FC<OCSStorageClassDropdownProps> = (props) => (
<Firehose resources={[{ kind: 'StorageClass', prop: 'StorageClass', isList: true }]}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: prefer storageClass as the prop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 27, 2019

@spadgett Updated the PR. Please review. Also, I have checked the text filter. It seems to be working. Attaching gif for the same.
filter

OCS install flow looks like this -
Screenshot from 2019-08-27 18-11-25

@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 27, 2019

/retest

@spadgett
Copy link
Member

Also, I have checked the text filter. It seems to be working.

Sorry, the filter is working. But it seems to clear the selected nodes.

@spadgett
Copy link
Member

We really should have a max-height on the table. If you have dozens or hundreds of nodes, the table will keep growing and push the buttons far down on the page.

@spadgett
Copy link
Member

It's a little odd that both "Select Nodes" and "Select at least 3 nodes you wish to use" have the required asterick, but will defer to @julienlim

@spadgett
Copy link
Member

Table layout is broken at mobile:

OKD 2019-08-27 13-21-45

@spadgett
Copy link
Member

I'd suggest not using the grid breakpoint and just dropping to two columns at mobile

@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 28, 2019

It's a little odd that both "Select Nodes" and "Select at least 3 nodes you wish to use" have the required asterick, but will defer to @julienlim

As per the latest design, the asterick has been removed from "Select Nodes" heading. Will remove it.

@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 28, 2019

Also, I have checked the text filter. It seems to be working.

Sorry, the filter is working. But it seems to clear the selected nodes.

We are working on this issue. Planning to send a separate PR for this bug fix.

@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 28, 2019

Table layout is broken at mobile:

I have modified the code to show 2 columns now. It looks like this now -
Screenshot from 2019-08-28 20-10-58

I verified the table layout of patternfly react table as well on mobile view, and it looks like this only. Attaching its screenshots as well.
Screenshot from 2019-08-28 20-07-29

@cloudbehl
Copy link
Contributor

/test e2e-aws-console

@spadgett
Copy link
Member

For the table, I was suggesting gridBreakPoint={TableGridBreakpoint.none} to avoid the special mobile view, which we don't use in console currently.

}

.node-list__max-height {
max-height: 50vh;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't use vh... This will be tiny on mobile. Just pick an absolute value in px

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ack

.ceph-yaml__link {
position: absolute;
margin-top: 1.5rem;
margin-left: 50%;
Copy link
Member

@spadgett spadgett Aug 28, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is going to be in the wrong spot at mobile... We can clean up in a follow on, however.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted. Will address in follow up PR.

const labelPath = '/metadata/labels';
const labelNodesRequest = selectedNode.map((node: NodeKind) => {
const labels = SelectorInput.arrayify(_.get(node, labelPath.split('/').slice(1)));
const lblVal = { ...SelectorInput.objectify(labels), ...labelObj };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You shouldn't be using SelectorInput if you're not using the label selector widget....

Just patch the one label value you want.

{op: 'add', path: 'metadata/labels/cluster.ocs.openshift.io~1openshift-storage', value: ''}

This is all you need... You should be able to remove all the other logic, and it will avoid possibly overwriting another label change if it comes in at almost the same time. The whole function can be:

const labelNodes = (selectedNodes: NodeKind[]): Promise<NodeKind>[] => {
  return selectedNodes.map((node: NodeKind) => {
    const patch = {op: 'add', path: 'metadata/labels/cluster.ocs.openshift.io~1openshift-storage', value: ''};
    return k8sPatch(NodeModel, node, patch);
  });
};

</Firehose>
);

const StorageClassDropdown = (props) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would be much more straightforward to implement if you had simply passed an optional filter prop the existing dropdown. Then you wouldn't have had to create your own wrapper, and it's a small code change.

We can address in a tech debt follow on.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, will address in follow on. Thanks!

@gnehapk gnehapk force-pushed the ocs-install-v2 branch 2 times, most recently from 3b6ef01 to 42bf875 Compare August 29, 2019 13:38
@gnehapk
Copy link
Contributor Author

gnehapk commented Aug 29, 2019

@spadgett I have amended the PR. Please review.

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/approve
/lgtm

Let's work on follow up PRs for the outstanding code review feedback. Minimally, we should fix the bug where filtering the list clears the selection.

selected: false,
id: node.metadata.name,
metadata: _.clone(node.metadata),
spec: _.clone(node.spec),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need _.clone? Simply

  ...node,

is probably better unless we are mutating the values.

setNodes(formattedNodes);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(data), loaded]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think you need JSON.stringify here. If data is not the same reference, it means it was updated through Firehose and the data is changed. Are you seeing something different?

Suggested change
}, [JSON.stringify(data), loaded]);
}, [data, loaded]);

import './ocs-install.scss';

const ocsLabel = 'cluster.ocs.openshift.io/openshift-storage';
const nodeLabel = 'cluster.ocs.openshift.io~1openshift-storage';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just inline this below. This is only used in one place and should only be used for the specific patch request below since it has the JSON path escaping. It's not obvious when looking at the patch request that things are correctly escaped.


const ocsLabel = 'cluster.ocs.openshift.io/openshift-storage';
const nodeLabel = 'cluster.ocs.openshift.io~1openshift-storage';
const defaultSAnotations = { 'storageclass.kubernetes.io/is-default-class': 'true' };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally we'd have one constant for this.

const defaultClassAnnotation = 'storageclass.kubernetes.io/is-default-class';

We can address in a follow on.

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Aug 29, 2019
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: gnehapk, spadgett, zherman0

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:

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 openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Aug 29, 2019
@spadgett
Copy link
Member

/hold cancel

@openshift-ci-robot openshift-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Aug 29, 2019
@cloudbehl
Copy link
Contributor

/test e2e-aws-console-olm

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/ceph Related to ceph-storage-plugin component/core Related to console core functionality lgtm Indicates that a PR is ready to be merged. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.