diff --git a/src/components/App.js b/src/components/App.js index 4ab896a..43f5f54 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -3,14 +3,18 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; // Routes import Upcoming from "./root/Pages/Upcoming"; -import Reports from "./root/Pages/Reports"; +import Migrations from "./root/Pages/Migrations"; import Historical from "./root/Pages/Historical"; +import Reports from "./root/Pages/Reports"; import Book from "./root/Pages/Book"; import IDSingle from "./root/Pages/IDSingle"; // Components import Home from "./root/Home"; import Navigation from "./root/Navigation"; +// Main app component, react-router comes from here, +// and links to all of the sub pages + class App extends Component { render() { return ( @@ -21,9 +25,10 @@ class App extends Component { + - + diff --git a/src/components/actions/API.js b/src/components/actions/API.js index 46238b8..8cb7a21 100644 --- a/src/components/actions/API.js +++ b/src/components/actions/API.js @@ -1,5 +1,7 @@ import axios from "axios"; +// Axios create, exporting callAPI + export const callAPI = axios.create({ baseURL: "https://devapi.benjamyn.love/migrations/", }); diff --git a/src/components/actions/Error.js b/src/components/actions/Error.js index 86f6f33..4ac6ae9 100644 --- a/src/components/actions/Error.js +++ b/src/components/actions/Error.js @@ -1,20 +1,19 @@ -import React from 'react' +import React from "react"; + +// Generic error const Error = () => ( -
- - -
-
-
- do_not_disturb -
-
-
+
+
+
+
+ + do_not_disturb + +
+
-) +
+); export default Error; - - - diff --git a/src/components/actions/requests.js b/src/components/actions/requests.js deleted file mode 100644 index a58fa6e..0000000 --- a/src/components/actions/requests.js +++ /dev/null @@ -1,18 +0,0 @@ -import axios from "axios"; - -const url = `https://devapi.benjamyn.love/migrations/`; - -export const getMigrations = () => (dispatch) => { - axios - .get(url) - .then((response) => { - dispatch({ - migs: response.data, - }); - }) - .catch((error) => { - this.setState({ - error: true, - }); - }); -}; diff --git a/src/components/root/Home.js b/src/components/root/Home.js index b5ca84f..0d53399 100644 --- a/src/components/root/Home.js +++ b/src/components/root/Home.js @@ -1,9 +1,17 @@ import React, { Component } from "react"; import { callAPI } from "../actions/API"; -import Migrations from "./Pages/Migrations"; +import Cards from "./Pages/Cards"; import SideMigrations from "./Pages/Migrations/SideMigrations"; +// Homepage/Cards, first API call here to pass down to cards +// and the pending migration list, if there's no data, nothing will show +// This would benefit from an error/notification if there is no data +// +// Two main components linked here are the Dashboard, and the SideMigrations comp, +// SideMigrations calls the pending migration list, with its own API call +// Dashboard performs the rendering of the cards and the numbers from each migration status. + export class Home extends Component { constructor(props) { super(props); @@ -34,19 +42,11 @@ export class Home extends Component {
-
- +
+
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam - quis est vitae sapien venenatis viverra. Suspendisse bibendum - tristique est, et gravida neque porta ut. Pellentesque egestas - vehicula nulla eu aliquet. Morbi id lacus eget lorem aliquam - ornare. Vivamus pulvinar ligula sapien, ut pulvinar eros - sollicitudin sodales. Donec sed ipsum sit amet mauris posuere - maximus. Aenean finibus turpis eu urna suscipit venenatis. -

+
+

Migrations tracker

diff --git a/src/components/root/Navigation.js b/src/components/root/Navigation.js index 305c549..7f19395 100644 --- a/src/components/root/Navigation.js +++ b/src/components/root/Navigation.js @@ -1,5 +1,8 @@ import React, { Component } from "react"; import { Link } from "react-router-dom"; +import InLineSearch from "./Pages/Functionality/InlineSearchBar"; + +// Navbar class component, Just simple href's to retain styling export class Navigation extends Component { render() { @@ -16,6 +19,9 @@ export class Navigation extends Component {
  • Upcoming Migrations
    • +
  • + Migrations +
  • Reports
    • @@ -26,6 +32,18 @@ export class Navigation extends Component { Book + {/* Inline UUID search bar is here */} +
      +
    • UUID:
      • +
    • + +
      • + {/*
    • + + + +
      • */} +
    diff --git a/src/components/root/Pages/AllReports/GetSingleMigration.js b/src/components/root/Pages/AllReports/GetSingleMigration.js deleted file mode 100644 index 168072b..0000000 --- a/src/components/root/Pages/AllReports/GetSingleMigration.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { Component, useEffect, useState } from "react"; -import moment from "moment"; -import { Col, FormGroup, Row, Container, Label } from "reactstrap"; -import { Formik, Form } from "formik"; -import { Input, Submit } from "formstrap"; -import { callAPI } from "../../../actions/API"; - -const initialValues = { - submit_time: moment().format("YYYY-MM-DD"), -}; -const onSubmit = async (values, { setSubmitting }) => { - callAPI - .get("/", values) - .then((response) => { - console.log(response.data); - this.setState({ - singlemigs: response.data, - }); - }) - .catch((error) => { - console.log(error); - }); - setSubmitting(false); -}; - -export default class GetSingleMigration extends Component { - constructor(props) { - super(props); - this.state = { - singlemigs: [], - e: false, - }; - } - render() { - return ( -
    - -
    - - - - - - - - - - Submit - -
    -     - {/* */} -
    - ); - } -} diff --git a/src/components/root/Pages/AllReports/IdSearchForm.js b/src/components/root/Pages/AllReports/IdSearchForm.js deleted file mode 100644 index e341303..0000000 --- a/src/components/root/Pages/AllReports/IdSearchForm.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; - -import { Col, FormGroup, Row, Container, Label } from "reactstrap"; -import { Formik, Form } from "formik"; -import { Input, Submit } from "formstrap"; - -export default function IdSearchForm({ api }) { - const initialValues = {}; - - return ( - - -
    - - - - - - - Submit - - -
    -     -     - ); -} diff --git a/src/components/root/Pages/AllReports/ShowMigrations.js b/src/components/root/Pages/AllReports/ShowMigrations.js deleted file mode 100644 index acbdd50..0000000 --- a/src/components/root/Pages/AllReports/ShowMigrations.js +++ /dev/null @@ -1,150 +0,0 @@ -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"; - -const ShowMigrations = () => { - const [list, setList] = useState([]); - const [loading, setLoading] = useState(false); - const { SearchBar } = Search; - const { ExportCSVButton } = CSVExport; - const sizePerPageRenderer = ({ - options, - currSizePerPage, - onSizePerPageChange, - }) => ( -
    - {options.map((option) => { - const isSelect = currSizePerPage === `${option.page}`; - return ( - - ); - })} -
    - ); - - const getListData = async () => { - try { - const data = await 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: "submit_time", text: "Submit Time", sort: true }, - { - dataField: "domain", - text: "Domain", - sort: true, - formatter: (cell, row) => {cell} , - }, - { dataField: "booked_date", text: "Booked Date", sort: true }, - { dataField: "booked_time", text: "Booked Time", sort: true }, - { dataField: "original_server", text: "Original Server", sort: true }, - { dataField: "new_server", text: "New Server", sort: true }, - { dataField: "username", text: "Username", sort: true }, - { dataField: "brand", text: "Brand", sort: true }, - { dataField: "ticket_id", text: "TicketID", sort: true }, - { dataField: "migration_status", text: "Status", sort: true }, - { dataField: "agent_booked", text: "Agent initials", sort: true }, - { dataField: "additional_domains", text: "Additional Domains", sort: true }, - { dataField: "migration_type", text: "Type", sort: true }, - { dataField: "term_date", text: "Termination Date", sort: true }, - { dataField: "notes", text: "Notes", sort: true }, - { - dataField: "report", - text: "Show Detailed Report", - formatter: (cell, row) => {cell} , - }, - ]; - - useEffect(() => { - getListData(); - }, []); - - return ( -
    - {loading ? ( - - {(props) => ( -
    -
    -

    - -
    - -
    - -
    - - Export CSV!! - -
    - )} -     - ) : ( - - )} -
    - ); -}; - -export default ShowMigrations; diff --git a/src/components/root/Pages/Book.js b/src/components/root/Pages/Book.js index 6ceaa15..eab4f4b 100644 --- a/src/components/root/Pages/Book.js +++ b/src/components/root/Pages/Book.js @@ -2,6 +2,9 @@ import React, { Component } from "react"; import FormPage from "./Forms/FormPage"; +// Parent page for the Book component, +// links directly to FormPage which contains the POST request + export default class Book extends Component { render() { return ( diff --git a/src/components/root/Pages/Cards.js b/src/components/root/Pages/Cards.js new file mode 100644 index 0000000..a6998ad --- /dev/null +++ b/src/components/root/Pages/Cards.js @@ -0,0 +1,79 @@ +import React, { Component } from "react"; + +// styles and collects each endpoint +// booked, awaitterm, complete and missed +// is referenced on Home + +class Cards extends Component { + bookedMig() { + return this.props.migs[0]["booked_count"]; + } + waitingMig() { + return this.props.migs[0]["awaitterm_count"]; + } + completedMig() { + return this.props.migs[0]["complete_count"]; + } + missedMig() { + return this.props.migs[0]["missed_count"]; + } + + render() { + if (!this.props.migs[0]) { + return
    ; + } + + return ( +
    +
    +
    +
    + + {this.bookedMig()} +
    +
    + booked +
    +
    +
    +
    +
    +
    + +

    + {this.waitingMig()} +
    +
    + waiting +
    +
    +
    + +
    +
    +
    + + {this.completedMig()} +
    +
    + complete +
    +
    +
    +
    +
    +
    + + {this.missedMig()} +
    +
    + missed +
    +
    +
    +
    + ); + } +} + +export default Cards; diff --git a/src/components/root/Pages/Forms/CPanelBooking.js b/src/components/root/Pages/Forms/CPanelBooking.js index efbacf3..594e9af 100644 --- a/src/components/root/Pages/Forms/CPanelBooking.js +++ b/src/components/root/Pages/Forms/CPanelBooking.js @@ -6,6 +6,11 @@ import { Formik, Form } from "formik"; import { Input, Submit } from "formstrap"; import { callAPI } from "../../../actions/API"; +// Main form and POST Request to add migrations +// found at /book under the web hosting migration tab +// Things to add: +// better date time picking. + export const CPanelBooking = () => { const initialValues = { submit_time: moment().format("YYYY-MM-DD"), @@ -15,7 +20,7 @@ export const CPanelBooking = () => { callAPI .post("/", values) .then(function (response) { - console.log(JSON.stringify(response.values)); + console.log(response.data.id); // add function here }) .catch(function (error) { diff --git a/src/components/root/Pages/Forms/DateTimePicker.js b/src/components/root/Pages/Forms/DateTimePicker.js deleted file mode 100644 index 092d162..0000000 --- a/src/components/root/Pages/Forms/DateTimePicker.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -var DatePicker = require("reactstrap-date-picker"); - -class DateTimePicker extends React.Component { - constructor(props) { - super(props); - this.state = { - value: new Date().toISOString(), - }; - } - - handleChange(value, formattedValue) { - this.setState({ - value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z" - formattedValue: formattedValue, // Formatted String, ex: "11/19/2016" - }); - } - - componentDidUpdate() { - // Access ISO String and formatted values from the DOM. - var hiddenInputElement = document.getElementById("example-datepicker"); - console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z" - console.log(hiddenInputElement.getAttribute("data-formattedvalue")); // Formatted String, ex: "11/19/2016" - } - - render() { - return ( - this.handleChange(v, f)} - minDate={Date()} - width="100%" - size="lg" - /> - ); - } -} -export default DateTimePicker; diff --git a/src/components/root/Pages/Forms/EmailBooking.js b/src/components/root/Pages/Forms/EmailBooking.js index 643b5b1..5415113 100644 --- a/src/components/root/Pages/Forms/EmailBooking.js +++ b/src/components/root/Pages/Forms/EmailBooking.js @@ -1,5 +1,8 @@ import React, { Component } from "react"; +// Needs to be populated with email specific migration +// information + export default class EmailBooking extends Component { render() { return ( diff --git a/src/components/root/Pages/Forms/FormPage.js b/src/components/root/Pages/Forms/FormPage.js index 6193080..24b2d20 100644 --- a/src/components/root/Pages/Forms/FormPage.js +++ b/src/components/root/Pages/Forms/FormPage.js @@ -20,6 +20,10 @@ const FormPage = (props) => { if (activeTab !== tab) setActiveTab(tab); }; + // Parent page from the Book section, + // Can be expanded to offer email migration bookings, + // elements below do the POST requests. + return (