Create OCS Service workflow

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { K8sResourceKind, K8sKind } from '@console/internal/module/k8s';
+import { ListPage } from '@console/internal/components/factory';
+import { NodeModel } from '@console/internal/models';
+import { ClusterServiceVersionKind } from '@console/internal/components/operator-lifecycle-manager/index';
+import { NodeList } from './node-list';
+
+import './ocs-install.scss';
+
+export const CreateOCSServiceForm: React.FC<CreateOCSServiceFormProps> = (props) => {
+  const title = 'Create New OCS Service';
+
+  return (
+    <div className="co-m-pane__body co-m-pane__form">
+      <h1 className="co-m-pane__heading co-m-pane__heading--baseline">
+        <div className="co-m-pane__name">{title}</div>
+      </h1>
+      <p className="co-m-pane__explanation">
+        OCS runs as a cloud-native service for optimal integration with applications in need of
+        storage, and handles the scenes such as provisioning and management.
+      </p>
+      <form className="co-m-pane__body-group">
+        <div className="form-group co-create-route__name">
+          <label htmlFor="select-node-help">Select Nodes</label>
+          <p className="co-m-pane__explanation">
+            A minimum of 3 nodes needs to be labeled with{' '}
+            <code>cluster.ocs.openshift.io/openshift-storage=&quot;&quot;</code> in order to create
+            the OCS Service.
+          </p>
+          <Alert
+            className="co-alert"
+            variant="info"
+            title="An AWS bucket will be created to provide the OCS Service."
+            isInline
+          />
+          <p className="co-legend co-required ceph-ocs-desc__legend">
+            Select at least 3 nodes you wish to use.
+          </p>
+          <ListPage
+            kind={NodeModel.kind}
+            showTitle={false}
+            ListComponent={(nodeProps) => <NodeList {...nodeProps} ocsProps={props} />}
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+type CreateOCSServiceFormProps = {
+  operandModel: K8sKind;
+  sample?: K8sResourceKind;
+  namespace: string;
+  clusterServiceVersion: ClusterServiceVersionKind;
+};

frontend/packages/ceph-storage-plugin/src/components/ocs-install/create-ocs-service.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { match } from 'react-router';
+import {
+  K8sResourceKind,
+  K8sKind,
+  k8sGet,
+  K8sResourceKindReference,
+} from '@console/internal/module/k8s';
+import { BreadCrumbs } from '@console/internal/components/utils/index';
+import { ClusterServiceVersionModel } from '@console/internal/models';
+import { ClusterServiceVersionKind } from '@console/internal/components/operator-lifecycle-manager/index';
+import { OCSServiceModel } from '../../models';
+import { CreateOCSServiceForm } from './create-form';
+import { CreateOCSServiceYAML } from './create-yaml';
+
+/**
+ * Component which wraps the YAML editor and form together
+ */
+export const CreateOCSService: React.FC<CreateOCSServiceProps> = React.memo((props) => {
+  const [sample, setSample] = React.useState(null);
+  const [method, setMethod] = React.useState<'yaml' | 'form'>('form');
+  const [clusterServiceVersion, setClusterServiceVersion] = React.useState(null);
+
+  React.useEffect(() => {
+    k8sGet(ClusterServiceVersionModel, props.match.params.appName, props.match.params.ns)
+      .then((clusterServiceVersionObj) => {
+        try {
+          setSample(
+            JSON.parse(_.get(clusterServiceVersionObj.metadata.annotations, 'alm-examples'))[0],
+          );
+          setClusterServiceVersion(clusterServiceVersionObj);
+        } catch (e) {
+          setClusterServiceVersion(null);
+        }
+      })
+      .catch(() => setClusterServiceVersion(null));
+  }, [props.match.params.appName, props.match.params.ns]);
+
+  return (
+    <React.Fragment>
+      <div className="co-create-operand__header">
+        <div className="co-create-operand__header-buttons">
+          {clusterServiceVersion !== null && (
+            <BreadCrumbs
+              breadcrumbs={[
+                {
+                  name: clusterServiceVersion.spec.displayName,
+                  path: props.match.url.replace('/~new', ''),
+                },
+                { name: `Create ${OCSServiceModel.label}`, path: props.match.url },
+              ]}
+            />
+          )}
+        </div>
+      </div>
+      <div className="ceph-yaml__link">
+        {method === 'form' && (
+          <button type="button" className="btn btn-link" onClick={() => setMethod('yaml')}>
+            Edit YAML
+          </button>
+        )}
+      </div>
+      {(method === 'form' && (
+        <CreateOCSServiceForm
+          namespace={props.match.params.ns}
+          operandModel={OCSServiceModel}
+          sample={sample}
+          clusterServiceVersion={clusterServiceVersion !== null && clusterServiceVersion}
+        />
+      )) ||
+        (method === 'yaml' && <CreateOCSServiceYAML match={props.match} sample={sample} />)}
+    </React.Fragment>
+  );
+});
+
+type CreateOCSServiceProps = {
+  match: match<{ appName: string; ns: string; plural: K8sResourceKindReference }>;
+  operandModel: K8sKind;
+  sample?: K8sResourceKind;
+  namespace: string;
+  loadError?: any;
+  clusterServiceVersion: ClusterServiceVersionKind;
+};

frontend/packages/ceph-storage-plugin/src/components/ocs-install/create-yaml.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { match } from 'react-router';
+import { safeDump } from 'js-yaml';
+import { K8sResourceKind, K8sResourceKindReference } from '@console/internal/module/k8s';
+import { CreateYAML } from '@console/internal/components/create-yaml';
+import { OCSServiceModel } from '../../models';
+
+export const CreateOCSServiceYAML: React.FC<CreateOCSServiceYAMLProps> = (props) => {
+  const template = _.attempt(() => safeDump(props.sample));
+  if (_.isError(template)) {
+    // eslint-disable-next-line no-console
+    console.error('Error parsing example JSON from annotation. Falling back to default.');
+  }
+
+  return (
+    <CreateYAML
+      {...props as any}
+      template={template}
+      match={props.match}
+      hideHeader
+      plural={OCSServiceModel.plural}
+    />
+  );
+};
+
+type CreateOCSServiceYAMLProps = {
+  sample?: K8sResourceKind;
+  match: match<{ appName: string; ns: string; plural: K8sResourceKindReference }>;
+};