Performed changes on document layout, and added /book
This commit is contained in:
parent
e0f81e3c3c
commit
f232dd62a8
1876
package-lock.json
generated
1876
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -3,21 +3,41 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@date-io/date-fns": "^2.10.6",
|
||||
"@material-ui/pickers": "^3.2.10",
|
||||
"@testing-library/jest-dom": "^5.11.5",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"axios": "^0.21.0",
|
||||
"axios-react": "^2.0.2",
|
||||
"bootstrap": "^4.5.3",
|
||||
"cldr-data": "^36.0.0",
|
||||
"globalize": "^1.6.0",
|
||||
"iana-tz-data": "^2019.1.0",
|
||||
"mdbreact": "^4.27.0",
|
||||
"react": "^17.0.1",
|
||||
"react-bootstrap": "^1.4.0",
|
||||
"react-bootstrap-form": "^0.1.4-beta6",
|
||||
"react-bootstrap-table": "^4.3.1",
|
||||
"react-bootstrap-table-next": "^4.0.3",
|
||||
"react-bootstrap-table2-paginator": "^2.1.2",
|
||||
"react-bootstrap-table2-toolkit": "^2.1.3",
|
||||
"react-data-grid": "^7.0.0-canary.28",
|
||||
"react-datetime-picker": "^3.0.4",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-gauge-chart": "^0.2.5",
|
||||
"react-json-to-table": "^0.1.7",
|
||||
"react-lazy-load": "^3.1.13",
|
||||
"react-redux": "^7.2.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.0",
|
||||
"react-table": "^7.6.1",
|
||||
"react-widgets": "^4.6.1",
|
||||
"react-widgets-globalize": "^5.0.23",
|
||||
"reactstrap": "^8.7.1",
|
||||
"reactstrap-date-picker": "0.0.11",
|
||||
"redux": "^4.0.5",
|
||||
"styled-components": "^5.2.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"></link>
|
||||
|
||||
<title>React App</title>
|
||||
</head>
|
||||
@ -21,6 +22,7 @@
|
||||
<div id="root"></div>
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
|
||||
|
||||
// Routes
|
||||
import Upcoming from './root/Upcoming';
|
||||
import Reports from './root/Reports';
|
||||
import Historical from './root/Historical';
|
||||
|
||||
import Upcoming from "./root/Pages/Upcoming";
|
||||
import Reports from "./root/Pages/Reports";
|
||||
import Historical from "./root/Pages/Historical";
|
||||
import Book from "./root/Pages/Book";
|
||||
// Components
|
||||
import Home from './root/Home'
|
||||
import Navigation from './root/Navigation';
|
||||
import Home from "./root/Home";
|
||||
import Navigation from "./root/Navigation";
|
||||
|
||||
class App extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Router>
|
||||
@ -20,12 +18,11 @@ class App extends Component {
|
||||
<Navigation />
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route exact path="/book" component={Book} />
|
||||
<Route exact path="/upcoming-migrations" component={Upcoming} />
|
||||
<Route exact path="/reports" component={Reports} />
|
||||
<Route exact path="/historical-migrations" component={Historical} />
|
||||
</Switch>
|
||||
|
||||
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import axios from "axios";
|
||||
import ReactTable from "react-table";
|
||||
|
||||
import { callAPI } from "../../services/API";
|
||||
import SingleSide from "./SingleSide";
|
||||
import Error from "../actions/Error";
|
||||
//import Table from "./Table";
|
||||
|
||||
class SideMigrations extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sidemigs: [],
|
||||
e: false,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
callAPI
|
||||
.get()
|
||||
.then((request) => {
|
||||
this.setState({
|
||||
sidemigs: request.data,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({
|
||||
error: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
Header: "Domain",
|
||||
accessor: "domain",
|
||||
},
|
||||
{
|
||||
Header: "Booked Time",
|
||||
accessor: "booked_time",
|
||||
},
|
||||
{
|
||||
Header: "Status",
|
||||
accessor: "migration_status",
|
||||
},
|
||||
];
|
||||
return <ReactTable data={this.state.sidemigs} columns={columns} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default SideMigrations;
|
||||
@ -1,21 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const SingleSide = ({ item }) => (
|
||||
<div>
|
||||
<div className="divider"></div>
|
||||
<a href={item.url} target="_blank" rel="noreferrer">
|
||||
<div className="section">
|
||||
<table className="centered striped">
|
||||
<tbody>
|
||||
<td>#</td>
|
||||
<td>{item.domain}</td>
|
||||
<td>{item.booked_time}</td>
|
||||
<td>{item.migration_status}</td>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default SingleSide;
|
||||
@ -2,6 +2,4 @@ import axios from 'axios'
|
||||
|
||||
export const callAPI = axios.create({
|
||||
baseURL: 'https://devapi.benjamyn.love/migrations/'
|
||||
})
|
||||
|
||||
export default callAPI
|
||||
})
|
||||
@ -1,12 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
|
||||
export default class Dashboard extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { getMigrations } from "../actions/requests";
|
||||
import { callAPI } from "../../services/API";
|
||||
import Migrations from "../Migrations/Migrations";
|
||||
import { callAPI } from "../actions/API";
|
||||
import Migrations from "./Pages/Migrations";
|
||||
import Error from "../actions/Error";
|
||||
import SideMigrations from "../Migrations/SideMigrations";
|
||||
import SideMigrations from "./Pages/Migrations/SideMigrations";
|
||||
|
||||
export class Home extends Component {
|
||||
constructor(props) {
|
||||
@ -31,15 +30,33 @@ export class Home extends Component {
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col s8">
|
||||
<Migrations migs={this.state.migs} />
|
||||
</div>
|
||||
<div className="col s4">
|
||||
<h3>
|
||||
Side Migrations goes here
|
||||
<SideMigrations migs={this.state.migs} />
|
||||
</h3>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="divider"></div>
|
||||
|
||||
<div className="section">
|
||||
<div className="col s6">
|
||||
<Migrations migs={this.state.migs} />
|
||||
</div>
|
||||
<div className="col s6">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="divider"></div>
|
||||
<div className="section">
|
||||
<div className="col s12">
|
||||
<SideMigrations />
|
||||
</div>
|
||||
</div>
|
||||
<div className="divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,23 +1,36 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { Component } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export class Navigation extends Component {
|
||||
render() {
|
||||
return (
|
||||
<nav>
|
||||
<div className="navbar-fixed">
|
||||
<div className="nav-wrapper">
|
||||
<ul className="left hide-on-med-and-down">
|
||||
<li><Link className="active" to="/">Dashboard</Link></li>
|
||||
<li><Link to="/upcoming-migrations">Upcoming Migrations</Link></li>
|
||||
<li><Link to="/reports">Reports</Link></li>
|
||||
<li><Link to="/historical-migrations">Historical Migrations</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<nav>
|
||||
<div className="navbar-fixed">
|
||||
<div className="nav-wrapper">
|
||||
<ul className="left hide-on-med-and-down">
|
||||
<li>
|
||||
<Link className="active" to="/">
|
||||
Dashboard
|
||||
</Link>
|
||||
</li>
|
||||
<li class="active">
|
||||
<Link to="/book">Book</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/upcoming-migrations">Upcoming Migrations</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/reports">Reports</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/historical-migrations">Historical Migrations</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Navigation
|
||||
export default Navigation;
|
||||
|
||||
13
src/components/root/Pages/Book.js
Normal file
13
src/components/root/Pages/Book.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import FormPage from "./Forms/FormPage";
|
||||
|
||||
export default class Book extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<FormPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
158
src/components/root/Pages/Forms/FormPage.js
Normal file
158
src/components/root/Pages/Forms/FormPage.js
Normal file
@ -0,0 +1,158 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Container,
|
||||
Col,
|
||||
Form,
|
||||
FormGroup,
|
||||
Label,
|
||||
Input,
|
||||
FormText,
|
||||
Button,
|
||||
Row,
|
||||
} from "reactstrap";
|
||||
import PropTypes from "prop-types";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
export default FormPage;
|
||||
|
||||
{
|
||||
/* <Button>Submit</Button> */
|
||||
}
|
||||
@ -1,9 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
import MigrationSingle from "./MigrationSingle";
|
||||
import { getMigrations } from "../actions/requests";
|
||||
import Error from "../actions/Error";
|
||||
import MigrationSingle from "./Migrations/MigrationSingle";
|
||||
import Error from "../../actions/Error";
|
||||
|
||||
class Migrations extends Component {
|
||||
// constructor(props) {
|
||||
@ -66,23 +64,23 @@ class Migrations extends Component {
|
||||
<div className="col s6 m4">
|
||||
<div className="card blue-grey darken-1">
|
||||
<div className="card-content white-text">
|
||||
<span className="card-title">Booked Migrations</span>
|
||||
<span className="card-title"></span>
|
||||
{this.bookedMig()}
|
||||
</div>
|
||||
<div className="card-action">
|
||||
<a href="/upcoming-migrations">View all...</a>
|
||||
<a href="/upcoming-migrations">Booked Migrations</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s6 m4">
|
||||
<div className="card blue-grey darken-1">
|
||||
<div className="card-content white-text">
|
||||
<span className="card-title">Waiting Termination</span>
|
||||
<span className="card-title"></span>
|
||||
<p></p>
|
||||
{this.waitingMig()}
|
||||
</div>
|
||||
<div className="card-action">
|
||||
<a href="/upcoming-migrations">View all...</a>
|
||||
<a href="/upcoming-migrations">Waiting Termination</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,11 +88,11 @@ class Migrations extends Component {
|
||||
<div className="col s6 m4">
|
||||
<div className="card blue-grey darken-1">
|
||||
<div className="card-content white-text">
|
||||
<span className="card-title">Completed</span>
|
||||
<span className="card-title"></span>
|
||||
{this.completedMig()}
|
||||
</div>
|
||||
<div className="card-action">
|
||||
<a href="/historical-migrations">View all...</a>
|
||||
<a href="/historical-migrations">Completed</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
48
src/components/root/Pages/Migrations/SideMigrations.js
Normal file
48
src/components/root/Pages/Migrations/SideMigrations.js
Normal file
@ -0,0 +1,48 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { callAPI } from "../../../actions/API";
|
||||
import { SingleSide } from "./SingleSide";
|
||||
import Error from "../../../actions/Error";
|
||||
|
||||
class SideMigrations extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sidemigs: [],
|
||||
e: false,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
callAPI
|
||||
.get("booked/")
|
||||
.then((request) => {
|
||||
this.setState({
|
||||
sidemigs: request.data,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
this.setState({
|
||||
error: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
renderItems() {
|
||||
if (!this.state.e) {
|
||||
return this.state.sidemigs.map((data) => (
|
||||
<SingleSide key={data.id} data={data} />
|
||||
));
|
||||
} else {
|
||||
return <Error />;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <SingleSide data={this.state.sidemigs} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default SideMigrations;
|
||||
|
||||
//return <div className="row">{this.renderItems()}</div>;
|
||||
//
|
||||
24
src/components/root/Pages/Migrations/SingleSide.js
Normal file
24
src/components/root/Pages/Migrations/SingleSide.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
|
||||
import "../../../../react-bootstrap-table.css";
|
||||
|
||||
export const SingleSide = ({ data }) => {
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable data={data} height="100%" striped hover condensed>
|
||||
<TableHeaderColumn isKey dataField="domain" width="45%">
|
||||
Domain
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="booked_time" width="35%">
|
||||
Booked Time
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="migration_status" width="20%">
|
||||
Status
|
||||
</TableHeaderColumn>
|
||||
</BootstrapTable>
|
||||
</div>
|
||||
);
|
||||
//
|
||||
};
|
||||
{
|
||||
}
|
||||
89
src/components/root/Pages/Migrations/UpcomingSingle.js
Normal file
89
src/components/root/Pages/Migrations/UpcomingSingle.js
Normal file
@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
|
||||
import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
|
||||
|
||||
export const UpcomingSingle = ({ data }) => {
|
||||
return (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
data={data}
|
||||
height="100%"
|
||||
striped
|
||||
hover
|
||||
condensed
|
||||
pagination
|
||||
version="4"
|
||||
>
|
||||
<TableHeaderColumn isKey dataField="submit_time" width="45%">
|
||||
Submit time
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="domain" width="35%">
|
||||
Domain
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="booked_time" width="20%">
|
||||
Booked time
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="original_server" width="20%">
|
||||
Original server
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="new_server" width="20%">
|
||||
New server
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="username" width="20%">
|
||||
Username
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="notes" width="35%">
|
||||
Notes
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="brand" width="20%">
|
||||
Brand
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="ticket_id" width="20%">
|
||||
Ticket ID
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="migration_status" width="20%">
|
||||
Status
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="agent_booked" width="20%">
|
||||
Agent
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="additional_domains" width="35%">
|
||||
Additional Domains
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="migration_type" width="20%">
|
||||
Migration type
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="term_date" width="20%">
|
||||
est. Terminaton Date
|
||||
</TableHeaderColumn>
|
||||
<TableHeaderColumn dataField="migration_cmd" width="20%">
|
||||
Migration CMD
|
||||
</TableHeaderColumn>
|
||||
</BootstrapTable>
|
||||
</div>
|
||||
);
|
||||
//
|
||||
};
|
||||
{
|
||||
}
|
||||
|
||||
{
|
||||
/* <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> */
|
||||
}
|
||||
62
src/components/root/Pages/Upcoming.js
Normal file
62
src/components/root/Pages/Upcoming.js
Normal file
@ -0,0 +1,62 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { callAPI } from "../../actions/API";
|
||||
import { UpcomingSingle } from "./Migrations/UpcomingSingle";
|
||||
import Error from "../../actions/Error";
|
||||
|
||||
class Upcoming extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sidemigs: [],
|
||||
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 (
|
||||
<div className="row">
|
||||
<div className="divider"></div>
|
||||
<div className="section">
|
||||
<div className="col s12"></div>
|
||||
</div>
|
||||
<div className="divider"></div>
|
||||
<div className="section">
|
||||
<div className="col s12">
|
||||
<UpcomingSingle data={this.state.sidemigs} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="divider"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Upcoming;
|
||||
{
|
||||
/* <UpcomingSingle data={this.state.sidemigs} /> */
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const Upcoming = () => {
|
||||
return (
|
||||
<h1>Upcoming</h1>
|
||||
);
|
||||
}
|
||||
|
||||
export default Upcoming;
|
||||
12
src/index.js
12
src/index.js
@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './components/App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./index.css";
|
||||
import App from "./components/App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
342
src/react-bootstrap-table.css
Normal file
342
src/react-bootstrap-table.css
Normal file
@ -0,0 +1,342 @@
|
||||
/*editor error animate*/
|
||||
/*@import "~toastr/build/toastr.min.css";*/
|
||||
|
||||
.react-bs-table-container .react-bs-table-search-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.react-bs-table-bordered {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.react-bs-table table {
|
||||
margin-bottom: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.react-bs-table table td,
|
||||
.react-bs-table table th {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.react-bs-table-pagination {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.react-bs-table-tool-bar {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.react-bs-container-header,
|
||||
.react-bs-container-footer {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.react-bs-container-body {
|
||||
/*height: 154px;*/
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.react-bootstrap-table-page-btns-ul {
|
||||
float: right;
|
||||
/* override the margin-top defined in .pagination class in bootstrap. */
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.react-bs-table .table-bordered {
|
||||
border: 0;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.react-bs-table .table-bordered > thead > tr > th,
|
||||
.react-bs-table .table-bordered > thead > tr > td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.react-bs-table .table-bordered > tbody > tr > td {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.react-bs-table .table-bordered > tbody > tr > td.default-focus-cell {
|
||||
outline: 3px solid cornflowerblue !important;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.react-bs-table .table-bordered > tfoot > tr > th,
|
||||
.react-bs-table .table-bordered > tfoot > tr > td {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.react-bs-table .table-bordered > tfoot > tr > th,
|
||||
.react-bs-table .table-bordered > tfoot > tr > td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
/*Esquerda*/
|
||||
.react-bs-table .table-bordered > thead > tr > th:first-child,
|
||||
.react-bs-table .table-bordered > tbody > tr > th:first-child,
|
||||
.react-bs-table .table-bordered > tfoot > tr > th:first-child,
|
||||
.react-bs-table .table-bordered > thead > tr > td:first-child,
|
||||
.react-bs-table .table-bordered > tbody > tr > td:first-child,
|
||||
.react-bs-table .table-bordered > tfoot > tr > td:first-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
/*Direita*/
|
||||
.react-bs-table .table-bordered > thead > tr > th:last-child,
|
||||
.react-bs-table .table-bordered > tbody > tr > th:last-child,
|
||||
.react-bs-table .table-bordered > tfoot > tr > th:last-child,
|
||||
.react-bs-table .table-bordered > thead > tr > td:last-child,
|
||||
.react-bs-table .table-bordered > tbody > tr > td:last-child,
|
||||
.react-bs-table .table-bordered > tfoot > tr > td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
/*Topo*/
|
||||
.react-bs-table .table-bordered > thead > tr:first-child > th,
|
||||
.react-bs-table .table-bordered > thead > tr:first-child > td {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
/*Baixo*/
|
||||
.react-bs-table .table-bordered > tfoot > tr:last-child > th,
|
||||
.react-bs-table .table-bordered > tfoot > tr:last-child > td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th,
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .filter,
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .filter {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter option[value=''],
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter.placeholder-selected,
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .filter::-webkit-input-placeholder,
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
|
||||
color: lightgrey;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter option[value=''],
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter.placeholder-selected,
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .filter::-webkit-input-placeholder,
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
|
||||
color: lightgrey;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']),
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']) {
|
||||
color: initial;
|
||||
font-style: initial;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter,
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter,
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input,
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-input {
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
width: calc(100% - 67px - 5px);
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-input,
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter-input {
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
width: calc(100% - 67px - 5px);
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator,
|
||||
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-comparator {
|
||||
width: 67px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-comparator,
|
||||
.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter-comparator {
|
||||
width: 67px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.react-bs-table .react-bs-container-header .sort-column {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*inline editor default style*/
|
||||
.react-bs-container .form-control.editor{
|
||||
/*width:100%;
|
||||
top:0;
|
||||
left:0;*/
|
||||
/*height: 100%;
|
||||
position: absolute;*/
|
||||
}
|
||||
|
||||
.react-bs-container .textarea-save-btn{
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
top: -21px;
|
||||
}
|
||||
|
||||
.react-bs-table-no-data {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.ReactModal__Overlay {
|
||||
-webkit-perspective: 600;
|
||||
perspective: 600;
|
||||
opacity: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--after-open {
|
||||
opacity: 1;
|
||||
transition: opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.ReactModal__Content {
|
||||
-webkit-transform: scale(0.5) rotateX(-30deg);
|
||||
transform: scale(0.5) rotateX(-30deg);
|
||||
}
|
||||
|
||||
.ReactModal__Content--after-open {
|
||||
-webkit-transform: scale(1) rotateX(0deg);
|
||||
transform: scale(1) rotateX(0deg);
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--before-close {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ReactModal__Content--before-close {
|
||||
-webkit-transform: scale(0.5) rotateX(30deg);
|
||||
transform: scale(0.5) rotateX(30deg);
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
|
||||
.ReactModal__Content.modal-dialog {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/*error tip style*/
|
||||
.animated {
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.bounceIn,
|
||||
.animated.bounceOut{
|
||||
animation-duration: .75s;
|
||||
}
|
||||
|
||||
.animated.shake{
|
||||
animation-duration: .3s;
|
||||
}
|
||||
|
||||
td.react-bs-table-expand-cell {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th.react-bs-table-expand-cell > div {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@keyframes shake {
|
||||
from, to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%, 50%, 90% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
30%, 70%{
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation-name: shake;
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
from, 20%, 40%, 60%, 80%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(.9, .9, .9);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale3d(.97, .97, .97);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceIn {
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
|
||||
@keyframes bounceOut {
|
||||
20% {
|
||||
transform: scale3d(.9, .9, .9);
|
||||
}
|
||||
|
||||
50%, 55% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceOut {
|
||||
animation-name: bounceOut;
|
||||
}
|
||||
Reference in New Issue
Block a user