Add a component for creating baremetal hosts

Author: honza

src/components/CreateBaremetalHost/CreateBaremetalHost.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Col, Button, Alert } from 'patternfly-react';
+
+import { FormFactory } from '../Form/FormFactory';
+import { createBaremetalHost } from '../../k8s/request';
+
+const formFields = {
+  name: {
+    id: 'name',
+    title: 'Name',
+    required: false,
+  },
+  controller: {
+    id: 'controller',
+    title: 'Management Controller Address',
+    required: true,
+  },
+  username: {
+    id: 'username',
+    title: 'Username',
+    required: true,
+  },
+  password: {
+    id: 'password',
+    title: 'Password',
+    type: 'password',
+    required: true,
+  },
+};
+
+export class CreateBaremetalHost extends React.Component {
+  state = {
+    form: {
+      value: {},
+      valid: false,
+    },
+    isSubmitting: false,
+    errorMessage: null,
+  };
+
+  onFormChange = (newValue, target, formValid) => {
+    this.setState(state => {
+      const form = { ...state.form };
+      form.value[target] = {
+        ...newValue,
+      };
+      form.valid = formValid;
+      return { form, errorMessage: null };
+    });
+  };
+
+  onSubmit = async () => {
+    this.setState(state => ({
+      ...state,
+      isSubmitting: true,
+    }));
+    const data = this.state.form.value;
+    const namespace = this.props.selectedNamespace.metadata.name;
+    const secretName = `${data.name.value}-secret`;
+
+    const secret = {
+      apiVersion: 'v1',
+      kind: 'Secret',
+      metadata: {
+        namespace,
+        name: secretName,
+      },
+      data: {
+        username: data.username.value,
+        password: data.password.value,
+      },
+      type: 'Opaque',
+    };
+
+    const bmo = {
+      apiVersion: 'metalkube.org/v1alpha1',
+      kind: 'BareMetalHost',
+      metadata: {
+        name: data.name.value || '',
+        namespace,
+      },
+      spec: {
+        bmc: {
+          address: data.controller.value,
+          credentialsName: secretName,
+        },
+      },
+    };
+
+    return createBaremetalHost(this.props.k8sCreate, {
+      secret,
+      bmo,
+    })
+      .then(result => {
+        this.setState(state => ({
+          ...state,
+          isSubmitting: false,
+        }));
+        this.props.onClose();
+        return result;
+      })
+      .catch(({ message }) => {
+        this.setState(state => ({
+          ...state,
+          isSubmitting: false,
+          errorMessage: message,
+        }));
+      });
+  };
+
+  render() {
+    return (
+      <Modal show bsSize="large" onHide={this.props.onClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Add Host</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Col sm={12}>
+            <p style={{ marginTop: '20px' }}>
+              Specify the host&apos;s name, management controller IP address, and credentials to add it to the cluster.
+            </p>
+            <FormFactory
+              fields={formFields}
+              fieldsValues={this.state.form.value}
+              onFormChange={this.onFormChange}
+              horizontal={false}
+            />
+          </Col>
+        </Modal.Body>
+        <Modal.Footer>
+          {this.state.errorMessage && <Alert type="error">{this.state.errorMessage}</Alert>}
+          {this.state.isSubmitting && <span className="spinner spinner-xs spinner-inline" />}
+          <Button bsStyle="default" onClick={this.props.onClose}>
+            Cancel
+          </Button>
+          <Button
+            bsStyle="primary"
+            disabled={!this.state.form.valid || this.state.isSubmitting}
+            onClick={this.onSubmit}
+          >
+            Add Host
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+CreateBaremetalHost.defaultProps = {
+  selectedNamespace: null,
+};
+
+CreateBaremetalHost.propTypes = {
+  k8sCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  selectedNamespace: PropTypes.object,
+};

src/components/CreateBaremetalHost/fixtures/CreateBaremetalHost.fixture.js

@@ -0,0 +1,10 @@
+import { CreateBaremetalHost } from '../CreateBaremetalHost';
+
+export default {
+  component: CreateBaremetalHost,
+  props: {
+    k8sCreate: () => {},
+    onClose: () => {},
+    selectedNamespace: {},
+  },
+};

src/components/CreateBaremetalHost/index.js

@@ -0,0 +1 @@
+export * from './CreateBaremetalHost';

src/components/CreateBaremetalHost/tests/CreateBaremetalHost.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import CreateBaremetalHostFixture from '../fixtures/CreateBaremetalHost.fixture';
+import { CreateBaremetalHost } from '../CreateBaremetalHost';
+
+const testCreateBaremetalHost = () => <CreateBaremetalHost {...CreateBaremetalHostFixture.props} />;
+
+describe('<CreateBaremetalHost />', () => {
+  it('renders correctly', () => {
+    const component = shallow(testCreateBaremetalHost());
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/CreateBaremetalHost/tests/__snapshots__/CreateBaremetalHost.test.js.snap

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CreateBaremetalHost /> renders correctly 1`] = `
+<Modal
+  animation={true}
+  autoFocus={true}
+  backdrop={true}
+  bsClass="modal"
+  bsSize="large"
+  dialogComponentClass={[Function]}
+  enforceFocus={true}
+  keyboard={true}
+  manager={
+    ModalManager {
+      "add": [Function],
+      "containers": Array [],
+      "data": Array [],
+      "handleContainerOverflow": true,
+      "hideSiblingNodes": true,
+      "isTopModal": [Function],
+      "modals": Array [],
+      "remove": [Function],
+    }
+  }
+  onHide={[Function]}
+  renderBackdrop={[Function]}
+  restoreFocus={true}
+  show={true}
+>
+  <ModalHeader
+    bsClass="modal-header"
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle
+      bsClass="modal-title"
+      componentClass="h4"
+    >
+      Add Host
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody
+    bsClass="modal-body"
+    componentClass="div"
+  >
+    <Col
+      bsClass="col"
+      componentClass="div"
+      sm={12}
+    >
+      <p
+        style={
+          Object {
+            "marginTop": "20px",
+          }
+        }
+      >
+        Specify the host's name, management controller IP address, and credentials to add it to the cluster.
+      </p>
+      <FormFactory
+        controlSize={5}
+        fields={
+          Object {
+            "controller": Object {
+              "id": "controller",
+              "required": true,
+              "title": "Management Controller Address",
+            },
+            "name": Object {
+              "id": "name",
+              "required": false,
+              "title": "Name",
+            },
+            "password": Object {
+              "id": "password",
+              "required": true,
+              "title": "Password",
+              "type": "password",
+            },
+            "username": Object {
+              "id": "username",
+              "required": true,
+              "title": "Username",
+            },
+          }
+        }
+        fieldsValues={Object {}}
+        horizontal={false}
+        labelSize={3}
+        onFormChange={[Function]}
+        showLabels={true}
+        textPosition="text-right"
+      />
+    </Col>
+  </ModalBody>
+  <ModalFooter
+    bsClass="modal-footer"
+    componentClass="div"
+  >
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="default"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Cancel
+    </Button>
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="primary"
+      disabled={true}
+      onClick={[Function]}
+    >
+      Add Host
+    </Button>
+  </ModalFooter>
+</Modal>
+`;

src/index.js

@@ -10,6 +10,7 @@ export * from './components/Dashboard';
 export * from './components/Details';
 export * from './components/Dialog';
 export * from './components/Form';
+export * from './components/CreateBaremetalHost';
 // Loading component group not exported
 // Table component group not exported
 export * from './components/TemplateSource';

src/k8s/request.js

@@ -12,7 +12,15 @@ import {
   getDataVolumeStorageClassName,
   getPvcStorageClassName,
 } from '../selectors';
-import { VirtualMachineModel, ProcessedTemplatesModel, TemplateModel, DataVolumeModel, SecretModel } from '../models';
+
+import {
+  VirtualMachineModel,
+  ProcessedTemplatesModel,
+  TemplateModel,
+  DataVolumeModel,
+  SecretModel,
+  BaremetalHostModel,
+} from '../models';
 
 import {
   ANNOTATION_DEFAULT_DISK,
@@ -504,3 +512,10 @@ const getDefaultInterface = (vm, template) => {
   const defaultInterfaceName = getTemplateAnnotations(template, ANNOTATION_DEFAULT_NETWORK);
   return getDevice(vm, 'interfaces', defaultInterfaceName);
 };
+
+export const createBaremetalHost = async (k8sCreate, data) => {
+  const results = [];
+  results.push(await k8sCreate(SecretModel, data.secret));
+  results.push(await k8sCreate(BaremetalHostModel, data.bmo));
+  return results;
+};