+
diff --git a/src/components/root/Pages/Historical.js b/src/components/root/Pages/Historical.js
index 4b7e01d..ce01576 100644
--- a/src/components/root/Pages/Historical.js
+++ b/src/components/root/Pages/Historical.js
@@ -1,9 +1,55 @@
-import React from 'react'
+import React, { Component } from "react";
-const Historical = () => {
+import { callAPI } from "../../actions/API";
+import HistoricalSingle from "./Migrations/HistoricalSingle";
+import Error from "../../actions/Error";
+
+class Historical extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ sidemigs: [],
+ error: false,
+ };
+ }
+ componentDidMount() {
+ callAPI
+ .get("/all")
+ .then((request) => {
+ this.setState({
+ migs: request.data,
+ });
+ })
+ .catch((error) => {
+ this.setState({
+ error: true,
+ });
+ });
+ }
+ renderItems() {
+ if (!this.props.error) {
+ return ;
+ } else {
+ console.log("error");
+ return ;
+ }
+ }
+
+ render() {
return (
- Historical
+
);
+ }
}
export default Historical;
diff --git a/src/components/root/Pages/Migrations/HistoricalSingle.js b/src/components/root/Pages/Migrations/HistoricalSingle.js
new file mode 100644
index 0000000..b462313
--- /dev/null
+++ b/src/components/root/Pages/Migrations/HistoricalSingle.js
@@ -0,0 +1,151 @@
+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 HistoricalSingle = () => {
+ 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 callAPI.get("/all/");
+ 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!!
+
+
+ ) : (
+
+ )}
+
{this.renderItems()}
;
+//return
//
diff --git a/src/components/root/Pages/Migrations/UpcomingSingle copy.old b/src/components/root/Pages/Migrations/UpcomingSingle copy.old
deleted file mode 100644
index 1f81bf9..0000000
--- a/src/components/root/Pages/Migrations/UpcomingSingle copy.old
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from "react";
-import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
-import { Link } from "react-router-dom";
-
-import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"; // I love this
-
-export const UpcomingSingle = ({ data }) => {
- const options = {
- sizePerPageList: [
- {
- text: "100",
- value: 100,
- },
- {
- text: "200",
- value: 200,
- },
- {
- text: "All",
- value: data.length,
- },
- ],
- sizePerPage: 30,
- // pageStartIndex: 0,
- // prePage: "Prev",
- // nextPage: "Next",
- formatter: (cell, row) => {cell} ,
- };
- console.log(data.id);
-
- return (
-
-
-
- Submit time
-
-
- Domain
-
-
- Booked time
-
-
- Original server
-
-
- New server
-
-
- Username
-
-
- Brand
-
-
- Ticket ID
-
-
- Status
-
-
- Agent
-
-
- Additional Domains
-
-
- Migration type
-
-
- est. Terminaton Date
-
-
- Migration CMD
-
- Notes
-
-
+
@@ -21,7 +13,7 @@ class Upcoming extends Component {
@@ -31,6 +23,3 @@ class Upcoming extends Component {
}
export default Upcoming;
-{
- /* */
-}