package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "migration-tracker",
+  "name": "axios-test",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "migration-tracker",
+  "name": "axios-test",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/components/actions/Msgbox.js

@@ -9,7 +9,7 @@ function Msgbox(props) {
           <span className="card-title">
             { props.error ? <span> { "Unable to update: " + props.error } </span> : null }
             { props.msg ? <span className="white-text">{ "Updated migration details for: " + props.msg }</span> : null }
-            { props.linkid ? <a href={ process.env.REACT_APP_SITE_URL + "migrations/" +  props.linkid } className="white-link">{process.env.REACT_APP_SITE_URL + "migrations/" +  props.linkid }</a> : null }
+            { props.linkid ? <a href={ process.env.REACT_APP_SITE_URL +  props.linkid } className="white-link">{process.env.REACT_APP_SITE_URL +  props.linkid }</a> : null }
         </span>
         </center>
       </div>

src/components/root/Navigation.js

@@ -10,7 +10,7 @@ export class Navigation extends Component {
       <nav>
         <div className="navbar-fixed grey darken-1">
           <div className="nav-wrapper">
-            <ul className="left">
+            <ul className="left hide-on-med-and-down">
               <li>
                 <Link className="active" to="/">
                   Dashboard
@@ -23,17 +23,17 @@ export class Navigation extends Component {
                 <Link to="/migrations">Migrations</Link>
               </li> */}
               <li>
-                <Link to="/reports" className="hide-on-med-and-down">Reports</Link>
+                <Link to="/reports">Reports</Link>
               </li>
               <li>
-                <Link to="/historical-migrations" className="hide-on-med-and-down">Historical Migrations</Link>
+                <Link to="/historical-migrations">Historical Migrations</Link>
               </li>
               <li className="orange accent-4 active">
                 <Link to="/book">Book</Link>
               </li>
             </ul>
             {/* Inline UUID search bar is here */}
-            <ul className="right hide-on-med-and-down">
+            <ul className="right ">
               <InLineSearch />
             </ul>
           </div>

src/components/root/Pages/Historical.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
 import { callAPI } from "../../actions/API";
-import CompTable from "../common/Tables/CompTable";
+import HistoricalSingle from "../common/Tables/HistoricalSingle";
 import Error from "../../actions/Error";
 
 // Parent page for the /historical-migrations page,
@@ -14,13 +14,14 @@ class Historical extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      sidemigs: [],
       error: false,
     };
   }
 
   renderItems() {
-    if (!this.state.error) {
+    if (!this.props.error) {
-      return <CompTable data={callAPI('/all/')} />;
+      return <HistoricalSingle data={this.state.sidemigs} />;
     } else {
       console.log("error");
       return <Error />;

src/components/root/Pages/Upcoming.js

@@ -1,7 +1,5 @@
 import React, { Component } from "react";
-import CompTable from "../common/Tables/CompTable";
+import UpcomingSingle from "../common/Tables/UpcomingSingle";
-import { callAPI } from "../../actions/API"
-import Error from "../../actions/Error";
 
 // Upcoming parent page,
 // Most of the good stuff is happening in UpcomingSingle, which does the
@@ -10,22 +8,6 @@ import Error from "../../actions/Error";
 // instead of duplicating it.
 
 class Upcoming extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: false,
-    };
-  }
-
-  renderItems() {
-    if (!this.state.error) {
-      return <CompTable data={callAPI('/pending/')} />;
-    } else {
-      console.log("error");
-      return <Error />;
-    }
-  }
-
   render() {
     return (
       <div className="row">
@@ -35,7 +17,9 @@ class Upcoming extends Component {
         </div>
         <div className="divider"></div>
         <div className="section">
-          <div className="col s12">{this.renderItems()}</div>
+          <div className="col s12">
+            <UpcomingSingle />
+          </div>
         </div>
         <div className="divider"></div>
       </div>

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { callAPI } from "../../../actions/API";
 import BootstrapTable from "react-bootstrap-table-next";
 import paginationFactory from "react-bootstrap-table2-paginator";
 import * as ReactBootstrap from "react-bootstrap";
@@ -11,7 +12,7 @@ import ToolkitProvider, {
 // Main table for the Historical migrations tab,
 // receives all API information and displays as a table with a searchbox
 
-const CompTable = (props) => {
+const HistoricalSingle = () => {
   const [list, setList] = useState([]);
   const [loading, setLoading] = useState(false);
   const [ticURl, setURL] = useState(null)
@@ -41,9 +42,15 @@ const CompTable = (props) => {
 
   const getListData = async () => {
     try {
-      const data = await props.data;
+      const data = await callAPI.get("/all/");
+      console.log(data);
       setList(data.data);
       setLoading(true);
+      // Determine brand and set URL based on brand
+      console.log(data.data.brand)
+      if (data.data.brand === "VentraIP" ) {
+        console.log("memes")
+      }
     } catch (e) {
       console.log(e);
     }
@@ -89,10 +96,7 @@ const CompTable = (props) => {
       formatter: (cell, row) => (
         <a
           href={
-            row.brand === "VentraIP" ? "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id 
+            row.brand === "VentraIP" ? "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id : null
-            : row.brand === "Zuver" ? "https://helpdesk.zuver.net.au/profiles/ticket/" + row.ticket_id 
-            : row.brand === "Synergy" ? "https://helpdesk.synergywholesale.com/profiles/ticket/" + row.ticket_id 
-            : null
           }
           target="_blank"
         >
@@ -165,4 +169,4 @@ const CompTable = (props) => {
   );
 };
 
-export default CompTable;
+export default HistoricalSingle;

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

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from "react";
+import { callAPI } from "../../../actions/API";
+import BootstrapTable from "react-bootstrap-table-next";
+import paginationFactory from "react-bootstrap-table2-paginator";
+import * as ReactBootstrap from "react-bootstrap";
+import filterFactory from "react-bootstrap-table2-filter";
+import ToolkitProvider, {
+  Search,
+  CSVExport,
+} from "react-bootstrap-table2-toolkit";
+
+// Directly linked to the parent page "Upcoming"
+// this element creates the table
+// Each domain links to a uuid, which then links to the page Migrations/uuid
+
+const UpcomingSingle = () => {
+  const [list, setList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const { SearchBar } = Search;
+  const { ExportCSVButton } = CSVExport;
+  const sizePerPageRenderer = ({
+    options,
+    currSizePerPage,
+    onSizePerPageChange,
+  }) => (
+    <div className="btn-group" role="group">
+      {options.map((option) => {
+        const isSelect = currSizePerPage === `${option.page}`;
+        return (
+          <button
+            key={option.text}
+            type="button"
+            onClick={() => onSizePerPageChange(option.page)}
+            className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
+          >
+            {option.text}
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  const getListData = async () => {
+    try {
+      const data = await callAPI.get("/pending/");
+      console.log(data);
+      setList(data.data);
+      setLoading(true);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const options = {
+    paginationSize: 4,
+    pageStartIndex: 0,
+    // alwaysShowAllBtns: true, // Always show next and previous button
+    // withFirstAndLast: false, // Hide the going to First and Last page button
+    // hideSizePerPage: true, // Hide the sizePerPage dropdown always
+    // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
+    firstPageText: "First",
+    prePageText: "Back",
+    nextPageText: "Next",
+    lastPageText: "Last",
+    nextPageTitle: "First page",
+    prePageTitle: "Pre page",
+    firstPageTitle: "Next page",
+    lastPageTitle: "Last page",
+    showTotal: true,
+    disablePageTitle: true,
+    sizePerPageList: [
+      {
+        text: "50",
+        value: 50,
+      },
+      {
+        text: "100",
+        value: 100,
+      },
+    ],
+    sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
+  };
+  const columns = [
+    { dataField: "id", text: "ID", hidden: true },
+    { dataField: "brand", text: "Brand", sort: true },
+    { dataField: "migration_status", text: "Status", sort: true },
+    {
+      dataField: "ticket_id",
+      text: "TicketID",
+      sort: true,
+      formatter: (cell, row) => (
+        <a
+          href={
+            "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id
+          }
+        >
+          {" "}
+          {cell}{" "}
+        </a>
+      ),
+    },
+    { dataField: "booked_date", text: "Booked Date", sort: true },
+    { dataField: "booked_time", text: "Booked Time", sort: true },
+    { dataField: "agent_booked", text: "Agent initials", sort: true },
+    {
+      dataField: "domain",
+      text: "Domain",
+      sort: true,
+      formatter: (cell, row) => <a href={"migrations/" + row.id}> {cell} </a>,
+    },
+    { dataField: "additional_domains", text: "Additional Domains", sort: true },
+    { dataField: "username", text: "Username", sort: true },
+    { dataField: "migration_type", text: "Type", sort: true },
+    { dataField: "original_server", text: "Original Server", sort: true },
+    { dataField: "new_server", text: "New Server", sort: true },
+    { dataField: "migration_status", text: "Status", sort: true },
+    { dataField: "term_date", text: "Termination Date", sort: true },
+    { dataField: "notes", text: "Notes", sort: true },
+    { dataField: "submit_time", text: "Submit Time", sort: true },
+    {
+      dataField: "report",
+      text: "Show Detailed Report",
+      formatter: (cell, row) => <a href={cell + row.id}> {cell} </a>,
+    },
+  ];
+  useEffect(() => {
+    getListData();
+  }, []);
+
+  return (
+    <div className="UpcomingSingle">
+      {loading ? (
+        <ToolkitProvider
+          keyField="name"
+          data={list}
+          columns={columns}
+          search
+          exportCSV
+        >
+          {(props) => (
+            <div>
+              <div className="serSec">
+                <h3 className="hdrOne"></h3>
+                <SearchBar {...props.searchProps} />
+              </div>
+
+              <div className="table-responsive">
+                <BootstrapTable
+                  {...props.baseProps}
+                  filter={filterFactory()}
+                  pagination={paginationFactory(options)}
+                  striped
+                  hover
+                  condensed
+                />
+              </div>
+              <ExportCSVButton {...props.csvProps}>
+                Export CSV!!
+              </ExportCSVButton>
+            </div>
+          )}
+        </ToolkitProvider>
+      ) : (
+        <ReactBootstrap.Spinner animation="border" />
+      )}
+    </div>
+  );
+};
+
+export default UpcomingSingle;