Archived
general changes and developing
submit migration form upcoming migration table and formatting
This commit is contained in:
pepper committed
1 parent
fa4ac953ce
commit
9a6524d7f9
12 files changed
+609
-302
No files matched your search
@@ -0,0 +1,170 @@
|
||||
import React, { Component } from "react";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
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";
|
||||
|
||||
export const CPanelBooking = () => {
|
||||
const initialValues = {
|
||||
submit_time: moment().format("YYYY-MM-DD"),
|
||||
};
|
||||
|
||||
const onSubmit = async (values, { setSubmitting }) => {
|
||||
console.log(values);
|
||||
callAPI
|
||||
.post("/")
|
||||
.then(function (response) {
|
||||
console.log(JSON.stringify(response.values));
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
setSubmitting(false);
|
||||
};
|
||||
return (
|
||||
<Formik initialValues={initialValues} onSubmit={onSubmit}>
|
||||
<Form>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDate">Date</Label>
|
||||
<Input
|
||||
type="date"
|
||||
name="booked_date"
|
||||
id="exampleDate"
|
||||
placeholder="date placeholder"
|
||||
mindate={Date()}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedTime">Timeslot</Label>
|
||||
<Input type="select" name="booked_time" id="bookedTime">
|
||||
<option>00:00-09:00</option>
|
||||
<option>09:00-12:00</option>
|
||||
<option>12:00-18:00</option>
|
||||
<option>18:00-00:00</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDomain">Domain</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="domain"
|
||||
id="bookedDomain"
|
||||
placeholder="example.com.au"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedUsername">cPanel username</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="username"
|
||||
id="bookedUsername"
|
||||
placeholder="example"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedSource">Original server</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="original_server"
|
||||
id="bookedSource"
|
||||
placeholder="1.2.3.4"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDestination">New server</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="new_server"
|
||||
id="bookedDestination"
|
||||
placeholder="1.2.3.4"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedBrand">Brand</Label>
|
||||
<Input type="select" name="brand" id="bookedBrand">
|
||||
<option>VentraIP</option>
|
||||
<option>Zuver</option>
|
||||
<option>Synergy</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedTicket">Ticket ID</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="ticket_id"
|
||||
id="bookedTicket"
|
||||
placeholder="VIP-A1234567"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedType">Migration type</Label>
|
||||
<Input type="select" name="migration_type" id="bookedType">
|
||||
<option>cPanel</option>
|
||||
<option>Plesk</option>
|
||||
<option>Other</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedAgent">Agent Initials</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="agent_booked"
|
||||
id="bookedAgent"
|
||||
placeholder="SZ"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<FormGroup>
|
||||
<Label for="bookedAdditionalDomains">Addon Domains</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="additional_domains"
|
||||
id="bookedAdditionalDomains"
|
||||
placeholder="example.com.au,example.net.au"
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<Label for="bookedTermDate">
|
||||
Estimated termination date (internal migrations only)
|
||||
</Label>
|
||||
<Input type="date" name="term_date" id="bookedTermDate" />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="bookedNotes">Notes</Label>
|
||||
<Input type="textarea" name="notes" id="notes" />
|
||||
</FormGroup>
|
||||
<Submit withSpinner>Save</Submit>
|
||||
</Container>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,39 @@
|
||||
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 (
|
||||
<DatePicker
|
||||
id="example-datepicker"
|
||||
value={this.state.value}
|
||||
onChange={(v, f) => this.handleChange(v, f)}
|
||||
minDate={Date()}
|
||||
width="100%"
|
||||
size="lg"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default DateTimePicker;
|
||||
@@ -0,0 +1,11 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
export default class EmailBooking extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Email Migration</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,158 +1,66 @@
|
||||
import React, { Component } from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Container,
|
||||
Col,
|
||||
Form,
|
||||
FormGroup,
|
||||
Label,
|
||||
Input,
|
||||
FormText,
|
||||
Button,
|
||||
TabContent,
|
||||
TabPane,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Row,
|
||||
Col,
|
||||
} from "reactstrap";
|
||||
import PropTypes from "prop-types";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import classnames from "classnames";
|
||||
|
||||
import { CPanelBooking } from "./CPanelBooking";
|
||||
import EmailBooking from "./EmailBooking";
|
||||
|
||||
const FormPage = (props) => {
|
||||
const [activeTab, setActiveTab] = useState("1");
|
||||
|
||||
const toggle = (tab) => {
|
||||
if (activeTab !== tab) setActiveTab(tab);
|
||||
};
|
||||
|
||||
const FormPage = () => {
|
||||
return (
|
||||
<Form>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDate">Date</Label>
|
||||
<Input type="date" name="date" id="bookedDate" />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedTime">Timeslot</Label>
|
||||
<Input type="select" name="select" id="bookedTime">
|
||||
<option>00:00-09:00</option>
|
||||
<option>09:00-12:00</option>
|
||||
<option>12:00-18:00</option>
|
||||
<option>18:00-00:00</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDomain">Domain</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="text"
|
||||
id="bookedDomain"
|
||||
placeholder="example.com.au"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedUsername">cPanel username</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="text"
|
||||
id="bookedUsername"
|
||||
placeholder="example"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedSource">Original server</Label>
|
||||
<Input
|
||||
type="number"
|
||||
name="number"
|
||||
id="bookedSource"
|
||||
placeholder="1.2.3.4"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDestination">New server</Label>
|
||||
<Input
|
||||
type="number"
|
||||
name="number"
|
||||
id="bookedDestination"
|
||||
placeholder="1.2.3.4"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedBrand">Brand</Label>
|
||||
<Input type="select" name="select" id="bookedBrand">
|
||||
<option>VentraIP</option>
|
||||
<option>Zuver</option>
|
||||
<option>Synergy</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedTicket">Ticket ID</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="text"
|
||||
id="bookedTicket"
|
||||
placeholder="VIP-A1234567"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedType">Migration type</Label>
|
||||
<Input type="select" name="select" id="bookedType">
|
||||
<option>cPanel</option>
|
||||
<option>Plesk</option>
|
||||
<option>Other</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedAgent">Agent Initials</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="text"
|
||||
id="bookedAgent"
|
||||
placeholder="SZ"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<FormGroup>
|
||||
<Label for="bookedAdditionalDomains">Addon Domains</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="text"
|
||||
id="bookedAdditionalDomains"
|
||||
placeholder="example.com.au,example.net.au"
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<Label for="bookedTermDate">
|
||||
Estimated termination date (internal migrations only)
|
||||
</Label>
|
||||
<Input type="date" name="date" id="bookedTermDate" />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="bookedNotes">Notes</Label>
|
||||
<Input type="textarea" name="text" id="notes" />
|
||||
</FormGroup>
|
||||
<Button>Submit</Button>
|
||||
</Container>
|
||||
</Form>
|
||||
<div>
|
||||
<Nav tabs>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={classnames({ active: activeTab === "1" })}
|
||||
onClick={() => {
|
||||
toggle("1");
|
||||
}}
|
||||
>
|
||||
Web hosting Migration
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={classnames({ active: activeTab === "2" })}
|
||||
onClick={() => {
|
||||
toggle("2");
|
||||
}}
|
||||
>
|
||||
Email Migration
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
<TabContent activeTab={activeTab}>
|
||||
<TabPane tabId="1">
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<CPanelBooking />
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tabId="2">
|
||||
<Row>
|
||||
<Col sm="6">
|
||||
<EmailBooking />
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default FormPage;
|
||||
|
||||
{
|
||||
/* <Button>Submit</Button> */
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function SubmitMigration() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
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) => <a href={cell}> {cell} </a>,
|
||||
};
|
||||
console.log(data.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
data={data}
|
||||
height="100%"
|
||||
striped
|
||||
hover
|
||||
condensed
|
||||
pagination
|
||||
version="4"
|
||||
options={options}
|
||||
>
|
||||
<TableHeaderColumn
|
||||
isKey
|
||||
dataField="submit_time"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Submit time
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="domain"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Domain
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="booked_time"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Booked time
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="original_server"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Original server
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="new_server"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
New server
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="username"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Username
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="brand"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Brand
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="ticket_id"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Ticket ID
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="migration_status"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Status
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="agent_booked"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Agent
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="additional_domains"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Additional Domains
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="migration_type"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Migration type
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="term_date"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
est. Terminaton Date
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="migration_cmd"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Migration CMD
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="notes">Notes</TableHeaderColumn>
|
||||
</BootstrapTable>
|
||||
</div>
|
||||
);
|
||||
//
|
||||
};
|
||||
{
|
||||
}
|
||||
@@ -1,131 +1,145 @@
|
||||
import React from "react";
|
||||
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
|
||||
import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
|
||||
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";
|
||||
|
||||
export const UpcomingSingle = ({ data }) => {
|
||||
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("/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,
|
||||
},
|
||||
{
|
||||
text: "200",
|
||||
value: 200,
|
||||
},
|
||||
{
|
||||
text: "All",
|
||||
value: data.length,
|
||||
},
|
||||
],
|
||||
sizePerPage: 20,
|
||||
// pageStartIndex: 0,
|
||||
// prePage: "Prev",
|
||||
// nextPage: "Next",
|
||||
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 },
|
||||
{ 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) => <a href={cell + row.id}> {cell} </a>,
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
getListData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
data={data}
|
||||
height="100%"
|
||||
striped
|
||||
hover
|
||||
condensed
|
||||
pagination
|
||||
version="4"
|
||||
options={options}
|
||||
>
|
||||
<TableHeaderColumn
|
||||
isKey
|
||||
dataField="submit_time"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
<div className="UpcomingSingle">
|
||||
{loading ? (
|
||||
<ToolkitProvider
|
||||
keyField="name"
|
||||
data={list}
|
||||
columns={columns}
|
||||
search
|
||||
exportCSV
|
||||
>
|
||||
Submit time
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="domain"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Domain
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="booked_time"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Booked time
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="original_server"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Original server
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="new_server"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
New server
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="username"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Username
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="notes">Notes</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="brand"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Brand
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="ticket_id"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Ticket ID
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="migration_status"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Status
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="agent_booked"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Agent
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="additional_domains"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Additional Domains
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="migration_type"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Migration type
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="term_date"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
est. Terminaton Date
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn
|
||||
dataField="migration_cmd"
|
||||
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
|
||||
>
|
||||
Migration CMD
|
||||
</TableHeaderColumn>
|
||||
</BootstrapTable>
|
||||
{(props) => (
|
||||
<div>
|
||||
<div className="serSec">
|
||||
<h3 className="hdrOne"></h3>
|
||||
<SearchBar {...props.searchProps} />
|
||||
</div>
|
||||
|
||||
<div class="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;
|
||||
@@ -1,8 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { callAPI } from "../../actions/API";
|
||||
import { UpcomingSingle } from "./Migrations/UpcomingSingle";
|
||||
import Error from "../../actions/Error";
|
||||
import UpcomingSingle from "./Migrations/UpcomingSingle";
|
||||
|
||||
class Upcoming extends Component {
|
||||
constructor(props) {
|
||||
@@ -12,30 +10,6 @@ class Upcoming extends Component {
|
||||
e: false,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
callAPI
|
||||
.get("all/")
|
||||
.then((request) => {
|
||||
this.setState({
|
||||
sidemigs: request.data,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
this.setState({
|
||||
error: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
renderItems() {
|
||||
if (!this.state.e) {
|
||||
return this.state.sidemigs.map((data) => (
|
||||
<UpcomingSingle key={data.id} data={this.state.sidemigs} />
|
||||
));
|
||||
} else {
|
||||
return <Error />;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
Reference in new issue
Block a user