[WIP] OCS Service installtion flow

[gnehapk]

What is Done?

• IPI flow i.e create new OCS Service using new nodes
• Node list table for UPI flow(create new OCS Service using existing nodes)

Integration testing with OCS operator is pending. Will do after the availability of OCS operator.

Screenshots -

@alecmerdler @spadgett @vojtechszocs Please review

[openshift-ci-robot]

Hi @gnehapk. Thanks for your PR.

I'm waiting for a openshift member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: gnehapk
To complete the pull request process, please assign alecmerdler
You can assign the PR to them by writing /assign @alecmerdler in a comment when ready.

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

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS

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

[spadgett]

I realize this is WIP and I haven't looked too closely at this, but I wanted to give you some initial comments.

[spadgett]

2 spaces indentation, sort declarations

[spadgett]

Remove empty line

[spadgett]

Add a final newline to the file

[spadgett]

Prefer functional components with hooks instead of class components in new code

[vojtechszocs]

@gnehapk You can still manage state in your component without using the class syntax.

Take public/components/utils/alerts.tsx as an example, it's a functional component (React.FC) that handles its state via React.useState API.

In general, we should prefer multiple smaller functional components over fewer bigger components, favoring composition over extension.

[spadgett]

You should use a label selector in the query instead of filtering on the client

[spadgett]

Add types when possible throughout

[vojtechszocs]

Hm, don't we want to use k8sList here to fetch multiple resources of the same kind?

k8sList(ConfigMapModel, {
  labelSelector: { 'rook.io/node': some.metadata.name },
}).then((configMaps) => {
  // ...
});

[spadgett]

Need to handle JSON.parse errors if it's invalid JSON (here and below)

[vojtechszocs]

I know it's still a WIP, but here are my comments so far.

[vojtechszocs]

Since the OCS install flow is part of ceph-storage-plugin, and since there's already a style [1] using the ceph prefix, you might want to use ceph prefix here as well, e.g. .ceph-ocs-info__alert.

[1] src/components/dashboard-page/storage-dashboard/data-resiliency/data-resiliency.scss

cc @cloudbehl

[vojtechszocs]

Modules under packages should use lodash.

See packages/.eslintrc.js:

Use lodash instead. webpack is configured to use lodash-es automatically.

[vojtechszocs]

I think ESLint will warn about putting each property on a separate line.

Please run yarn lint from the Console monorepo root (frontend directory) and address any code style issues.

#1844 should make it easier to lint a specific package, for example:

yarn eslint packages/ceph-storage-plugin

[vojtechszocs]

Hm, don't we want to use k8sList here to fetch multiple resources of the same kind?

k8sList(ConfigMapModel, {
  labelSelector: { 'rook.io/node': some.metadata.name },
}).then((configMaps) => {
  // ...
});

[vojtechszocs]

I'd suggest to use a function to compute derived data, instead of keeping locally cached data in variables:

const deviceCount = getStorageDeviceCount(node);

This is similar in concept to getNodeRoles function in code above.

[vojtechszocs]

I think devicesCount sounds a bit weird with the plural, I'd use deviceCount instead.

[vojtechszocs]

@gnehapk You can still manage state in your component without using the class syntax.

Take public/components/utils/alerts.tsx as an example, it's a functional component (React.FC) that handles its state via React.useState API.

In general, we should prefer multiple smaller functional components over fewer bigger components, favoring composition over extension.

[vojtechszocs]

Nit: all source files (ts, tsx, scss, etc.) should have a trailing newline.

[vojtechszocs]

Nit: I'd suggest adding at least Service to the name of the model, like OCSServiceModel.

[vojtechszocs]

I suggest using a webpackChunkName value consistent with other loaders above, i.e. ceph-ocs-service.

[openshift-ci-robot]

@gnehapk: PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[wking]

nit: "installtion" -> "installation" in the PR topic

[gnehapk]

Sent out a new PR as there were many conflicts coming after rebasing it with the master.