src/components/root/Home.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 
 import { callAPI } from "../actions/API";
 import Cards from "./Pages/Cards";
+import SideMigrations from "./common/Migrations/SideMigrations";
 import GenericList from "../root/Pages/GenericList";
 
 // Homepage/Cards, first API call here to pass down to cards
@@ -52,6 +53,7 @@ export class Home extends Component {
           <div className="section">
             <div className="col s12">
               <GenericList APILINK="/pending/"/>
+              {/* <SideMigrations /> */}
             </div>
           </div>
           <div className="divider"></div>
@@ -61,4 +63,7 @@ export class Home extends Component {
   }
 }
 
-export default Home;
+export default Home;
+
+// Broken
+// <SideMigrations migs={this.state.migs} />

src/components/root/Pages/Migrations.js

@@ -1,11 +1,13 @@
 import React, { Component } from "react";
 
+import IdSearchForm from "../common/Functionality/IdSearchForm";
 import ReportSingleMigration from "../common/Forms/ReportSingleMigration";
 import { callAPI } from "../../actions/API";
 
 // /migrations in the address bar,
 // Allows the modification of migrations, and also populating a form
-// by UUID,
+// by UUID.
+// IDSearchForm is the UUID form at the top of the page,
 // ReportSingleMigration is the actual form, witha PUT API request on that page.
 
 export default class Migrations extends Component {
@@ -34,6 +36,7 @@ export default class Migrations extends Component {
     };
     return (
       <div>
+        <IdSearchForm api={onSubmit} />
         <ReportSingleMigration
           key={this.state.migs.id}
           item={this.state.migs}

src/components/root/common/Functionality/IdSearchForm.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { FormGroup, Label } from "reactstrap";
+import { Formik, Form } from "formik";
+import { Input, Submit } from "formstrap";
+
+// Needs to be changed, to not use a library,
+// currently the form populates the fields on migrations, if you
+// enter a UUID into field,
+
+export default function IdSearchForm({ api }) {
+  const initialValues = {};
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={api}>
+      {/* <Container>
+        
+          <Row>
+            <Col> */}
+      <Form>
+        <FormGroup>
+          <Label for="migrationId"></Label>
+          <Input
+            type="text"
+            name="migrationId"
+            id="migrationId"
+            placeholder="uuid"
+          />
+        </FormGroup>
+        <Submit withSpinner>Submit</Submit>
+      </Form>
+      {/* </Col>
+          </Row>
+
+      </Container> */}
+    </Formik>
+  );
+}

src/components/root/common/Migrations/SideMigrations.js

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import { SingleSide } from "../Tables/SingleSide";
+import { callAPI } from "../../../actions/API";
+
+// Side Migrations is displayed on the Home page,
+// This page contains the API request, and storing state for the request,
+
+export default class SideMigrations extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      migs: [],
+    };
+  }
+  componentDidMount() {
+    callAPI
+      .get("/pending/")
+      .then((request) => {
+        this.setState({
+          migs: request.data,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
+  render() {
+    return <SingleSide key={this.state.migs.id} data={this.state.migs} />;
+  }
+}

src/components/root/common/Tables/SingleSide.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
+import "../../../../react-bootstrap-table.css";
+
+// Single Side is directly referenced on the SideMigrations page,
+// receives data from the get request and only displays small amounts of info
+// this could be fleshed out/ linked to UUID's
+
+export const SingleSide = ({ data }) => {
+  return (
+    <div>
+      <BootstrapTable data={data} height="100%" striped hover condensed>
+        <TableHeaderColumn isKey dataField="domain" width="45%">
+          Domain
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="booked_time" width="35%">
+          Booked Time
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_status" width="20%">
+          Status
+        </TableHeaderColumn>
+      </BootstrapTable>
+    </div>
+  );
+  //
+};
+{
+}