change display and filtering options on /upcoming

This commit is contained in:
pepper 2020-11-13 08:34:48 +11:00
parent f232dd62a8
commit fa4ac953ce
4 changed files with 96 additions and 73 deletions

View File

@ -5,7 +5,7 @@ export class Navigation extends Component {
render() {
return (
<nav>
<div className="navbar-fixed">
<div className="navbar-fixed cyan darken-4">
<div className="nav-wrapper">
<ul className="left hide-on-med-and-down">
<li>
@ -13,7 +13,7 @@ export class Navigation extends Component {
Dashboard
</Link>
</li>
<li class="active">
<li>
<Link to="/book">Book</Link>
</li>
<li>

View File

@ -5,9 +5,18 @@ import FormPage from "./Forms/FormPage";
export default class Book extends Component {
render() {
return (
<div>
<div className="container-fluid">
<div className="section">
<h3>Book your migrations here</h3>
</div>
<div className="divider"></div>
<div className="section">
<div className="col s12">
<FormPage />
</div>
</div>
</div>
);
}
}

View File

@ -4,34 +4,6 @@ import MigrationSingle from "./Migrations/MigrationSingle";
import Error from "../../actions/Error";
class Migrations extends Component {
// constructor(props) {
// super(props);
// this.state = {
// migs: [],
// migs1: [],
// error: false,
// };
// }
//
// componentDidMount() {
// const url = `https://devapi.benjamyn.love/migrations/`;
//
// axios
// .get(url)
// .then((response) => {
// this.setState({
// migs: response.data,
// migs1: response.data.migration_status,
// });
// })
//
// .catch((error) => {
// this.setState({
// error: true,
// });
// });
// }
renderItems() {
if (!this.props.error) {
return this.props.migs.map((item) => (
@ -68,7 +40,7 @@ class Migrations extends Component {
{this.bookedMig()}
</div>
<div className="card-action">
<a href="/upcoming-migrations">Booked Migrations</a>
<a href="/upcoming-migrations">booked</a>
</div>
</div>
</div>
@ -80,7 +52,7 @@ class Migrations extends Component {
{this.waitingMig()}
</div>
<div className="card-action">
<a href="/upcoming-migrations">Waiting Termination</a>
<a href="/upcoming-migrations">waiting</a>
</div>
</div>
</div>
@ -92,7 +64,7 @@ class Migrations extends Component {
{this.completedMig()}
</div>
<div className="card-action">
<a href="/historical-migrations">Completed</a>
<a href="/historical-migrations">complete</a>
</div>
</div>
</div>

View File

@ -3,6 +3,27 @@ import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
export const UpcomingSingle = ({ data }) => {
const options = {
sizePerPageList: [
{
text: "100",
value: 100,
},
{
text: "200",
value: 200,
},
{
text: "All",
value: data.length,
},
],
sizePerPage: 20,
// pageStartIndex: 0,
// prePage: "Prev",
// nextPage: "Next",
};
return (
<div>
<BootstrapTable
@ -13,50 +34,92 @@ export const UpcomingSingle = ({ data }) => {
condensed
pagination
version="4"
options={options}
>
<TableHeaderColumn
isKey
dataField="submit_time"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
<TableHeaderColumn isKey dataField="submit_time" width="45%">
Submit time
</TableHeaderColumn>
<TableHeaderColumn dataField="domain" width="35%">
<TableHeaderColumn
dataField="domain"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Domain
</TableHeaderColumn>
<TableHeaderColumn dataField="booked_time" width="20%">
<TableHeaderColumn
dataField="booked_time"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Booked time
</TableHeaderColumn>
<TableHeaderColumn dataField="original_server" width="20%">
<TableHeaderColumn
dataField="original_server"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Original server
</TableHeaderColumn>
<TableHeaderColumn dataField="new_server" width="20%">
<TableHeaderColumn
dataField="new_server"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
New server
</TableHeaderColumn>
<TableHeaderColumn dataField="username" width="20%">
<TableHeaderColumn
dataField="username"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Username
</TableHeaderColumn>
<TableHeaderColumn dataField="notes" width="35%">
Notes
</TableHeaderColumn>
<TableHeaderColumn dataField="brand" width="20%">
<TableHeaderColumn dataField="notes">Notes</TableHeaderColumn>
<TableHeaderColumn
dataField="brand"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Brand
</TableHeaderColumn>
<TableHeaderColumn dataField="ticket_id" width="20%">
<TableHeaderColumn
dataField="ticket_id"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Ticket ID
</TableHeaderColumn>
<TableHeaderColumn dataField="migration_status" width="20%">
<TableHeaderColumn
dataField="migration_status"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Status
</TableHeaderColumn>
<TableHeaderColumn dataField="agent_booked" width="20%">
<TableHeaderColumn
dataField="agent_booked"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Agent
</TableHeaderColumn>
<TableHeaderColumn dataField="additional_domains" width="35%">
<TableHeaderColumn
dataField="additional_domains"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Additional Domains
</TableHeaderColumn>
<TableHeaderColumn dataField="migration_type" width="20%">
<TableHeaderColumn
dataField="migration_type"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Migration type
</TableHeaderColumn>
<TableHeaderColumn dataField="term_date" width="20%">
<TableHeaderColumn
dataField="term_date"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
est. Terminaton Date
</TableHeaderColumn>
<TableHeaderColumn dataField="migration_cmd" width="20%">
<TableHeaderColumn
dataField="migration_cmd"
filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
>
Migration CMD
</TableHeaderColumn>
</BootstrapTable>
@ -66,24 +129,3 @@ export const UpcomingSingle = ({ data }) => {
};
{
}
{
/* <BootstrapTable data={data} pagination striped hover condensed>
<TableHeaderColumn isKey dataField="domain">
Domain
</TableHeaderColumn>
<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
<TableHeaderColumn dataField="booked_time">
Booked Time
</TableHeaderColumn>
<TableHeaderColumn
dataField="migration_status"
filter={{ type: "TextFilter", delay: 1000 }}
>
Status
</TableHeaderColumn>
</BootstrapTable> */
}