The_Bois/MigratorProject-frontend
Archived
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

pls work && cleaned up shop

Browse Source 
Added reports, API calls on UUIDs
and started beginnings of UUID generating URLs
This commit is contained in:
pepper 2020-11-26 22:23:25 -05:00
parent f108148e5a
commit 8382419e5f
14 changed files with 338 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -2010,6 +2010,17 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz",
"integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==" "integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ=="
}, },
"@reach/router": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
"integrity": "sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==",
"requires": {
"create-react-context": "0.3.0",
"invariant": "^2.2.3",
"prop-types": "^15.6.1",
"react-lifecycles-compat": "^3.0.4"
}
},
"@restart/context": { "@restart/context": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",

1
package.json
View File

@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"@date-io/date-fns": "^2.10.6", "@date-io/date-fns": "^2.10.6",
"@material-ui/pickers": "^3.2.10", "@material-ui/pickers": "^3.2.10",
"@reach/router": "^1.3.4",
"@testing-library/jest-dom": "^5.11.5", "@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",

2
public/index.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" <link rel="icon"
href="https://ventraip.com.au/wp-content/themes/ventraip-template/module/frontend/assets/favicon.ico" /> href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14/svgs/solid/book.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" /> <meta name="description" content="Web site created using create-react-app" />

2
src/components/App.js
View File

@ -6,6 +6,7 @@ import Upcoming from "./root/Pages/Upcoming";
import Reports from "./root/Pages/Reports"; import Reports from "./root/Pages/Reports";
import Historical from "./root/Pages/Historical"; import Historical from "./root/Pages/Historical";
import Book from "./root/Pages/Book"; import Book from "./root/Pages/Book";
import IDSingle from "./root/Pages/IDSingle";
// Components // Components
import Home from "./root/Home"; import Home from "./root/Home";
import Navigation from "./root/Navigation"; import Navigation from "./root/Navigation";
@ -22,6 +23,7 @@ class App extends Component {
<Route exact path="/upcoming-migrations" component={Upcoming} /> <Route exact path="/upcoming-migrations" component={Upcoming} />
<Route exact path="/reports" component={Reports} /> <Route exact path="/reports" component={Reports} />
<Route exact path="/historical-migrations" component={Historical} /> <Route exact path="/historical-migrations" component={Historical} />
<Route exact path="/reports/:migrationId" component={IDSingle} />
</Switch> </Switch>
</div> </div>
</Router> </Router>

4
src/components/root/Home.js
View File

@ -9,7 +9,6 @@ export class Home extends Component {
super(props); super(props);
this.state = { this.state = {
migs: [], migs: [],
error: false,
}; };
} }
@ -27,6 +26,7 @@ export class Home extends Component {
}); });
}); });
} }
render() { render() {
return ( return (
<div className="container"> <div className="container">
@ -51,7 +51,7 @@ export class Home extends Component {
<div className="divider"></div> <div className="divider"></div>
<div className="section"> <div className="section">
<div className="col s12"> <div className="col s12">
<SideMigrations migs={this.state.migs} /> <SideMigrations />
</div> </div>
</div> </div>
<div className="divider"></div> <div className="divider"></div>

6
src/components/root/Navigation.js
View File

@ -13,9 +13,6 @@ export class Navigation extends Component {
Dashboard Dashboard
</Link> </Link>
</li> </li>
<li>
<Link to="/book">Book</Link>
</li>
<li> <li>
<Link to="/upcoming-migrations">Upcoming Migrations</Link> <Link to="/upcoming-migrations">Upcoming Migrations</Link>
</li> </li>
@ -25,6 +22,9 @@ export class Navigation extends Component {
<li> <li>
<Link to="/historical-migrations">Historical Migrations</Link> <Link to="/historical-migrations">Historical Migrations</Link>
</li> </li>
<li className="orange accent-4 active">
<Link to="/book">Book</Link>
</li>
</ul> </ul>
</div> </div>
</div> </div>

3
src/components/root/Pages/AllReports/GetSingleMigration.js
View File

@ -4,7 +4,6 @@ import { Col, FormGroup, Row, Container, Label } from "reactstrap";
import { Formik, Form } from "formik"; import { Formik, Form } from "formik";
import { Input, Submit } from "formstrap"; import { Input, Submit } from "formstrap";
import { callAPI } from "../../../actions/API"; import { callAPI } from "../../../actions/API";
import ShowMigrations from "./ShowMigrations";
const initialValues = { const initialValues = {
submit_time: moment().format("YYYY-MM-DD"), submit_time: moment().format("YYYY-MM-DD"),
@ -55,7 +54,7 @@ export default class GetSingleMigration extends Component {
</Container> </Container>
</Form> </Form>
</Formik> </Formik>
<ShowMigrations /> {/* <ShowMigrations /> */}
</div> </div>
); );
} }

32
src/components/root/Pages/AllReports/IdSearchForm.js Normal file
View File

@ -0,0 +1,32 @@
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 (
<Formik initialValues={initialValues} onSubmit={api}>
<Container>
<Form>
<Row>
<Col>
<FormGroup>
<Label for="migrationId"></Label>
<Input
type="text"
name="migrationId"
id="migrationId"
placeholder="uuid"
/>
</FormGroup>
<Submit withSpinner>Submit</Submit>
</Col>
</Row>
</Form>
</Container>
</Formik>
);
}

6
src/components/root/Pages/Forms/CPanelBooking.js
View File

@ -11,8 +11,7 @@ export const CPanelBooking = () => {
submit_time: moment().format("YYYY-MM-DD"), submit_time: moment().format("YYYY-MM-DD"),
}; };
const onSubmit = async (values, { setSubmitting }) => { const onSubmit = async (values, { setSubmitting, resetForm }) => {
console.log(values);
callAPI callAPI
.post("/", values) .post("/", values)
.then(function (response) { .then(function (response) {
@ -23,6 +22,7 @@ export const CPanelBooking = () => {
console.log(error); console.log(error);
}); });
setSubmitting(false); setSubmitting(false);
resetForm({ values: "" });
}; };
return ( return (
<Formik initialValues={initialValues} onSubmit={onSubmit}> <Formik initialValues={initialValues} onSubmit={onSubmit}>
@ -168,7 +168,7 @@ export const CPanelBooking = () => {
<Label for="bookedNotes">Notes</Label> <Label for="bookedNotes">Notes</Label>
<Input type="textarea" name="notes" id="notes" /> <Input type="textarea" name="notes" id="notes" />
</FormGroup> </FormGroup>
<Submit withSpinner>Save</Submit> <Submit withSpinner>Submit</Submit>
</Container> </Container>
</Form> </Form>
</Formik> </Formik>

29
src/components/root/Pages/IDSingle.js Normal file
View File

@ -0,0 +1,29 @@
import React, { Component } from "react";
import ReportSingleMigration from "./Migrations/ReportSingleMigration";
import { callAPI } from "../../actions/API";
export default class Reports extends Component {
render() {
const migrationId = ({ migrationId }) => {
console.log(migrationId.migrationId);
callAPI
.get(`/${migrationId.migrationId}/`)
.then((response) =>
this.setState({
redirect: true,
migs: response.data,
})
)
.catch(function (error) {
console.log(error);
});
};
return (
<div>
<ReportSingleMigration key={migrationId.id} item={migrationId} />
</div>
);
}
}

13
src/components/root/Pages/Migrations.js
View File

@ -1,19 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import MigrationSingle from "./Migrations/MigrationSingle";
import Error from "../../actions/Error";
class Migrations extends Component { class Migrations extends Component {
renderItems() {
if (!this.props.error) {
return this.props.migs.map((item) => (
<MigrationSingle key={item.id} item={item} />
));
} else {
return <Error />;
}
}
bookedMig() { bookedMig() {
return this.props.migs.filter( return this.props.migs.filter(
(booked) => booked.migration_status === "Booked" (booked) => booked.migration_status === "Booked"

198
src/components/root/Pages/Migrations/ReportSingleMigration.js Normal file
View File

@ -0,0 +1,198 @@
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Col, FormGroup, Row, Container, Label } from "reactstrap";
import { Formik, Form } from "formik";
import { Input, Submit } from "formstrap";
import { callAPI } from "../../../actions/API";
const ReportSingleMigration = ({ item }) => {
const initialValues = {
submit_time: item.submit_time,
domain: item.domain,
booked_date: item.booked_date,
booked_time: item.booked_time,
username: item.username,
original_server: item.original_server,
new_server: item.new_server,
brand: item.brand,
ticket_id: item.ticket_id,
migration_type: item.migration_type,
agent_booked: item.agent_booked,
additional_domains: item.additional_domains,
term_date: item.term_date,
notes: item.notes,
};
const onSubmit = async (values, { setSubmitting }) => {
callAPI
.put(`/${item.id}/`, values)
.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={item.booked_date}>Date</Label>
<Input
type="date"
name="booked_date"
id="booked_date"
placeholder="date placeholder"
mindate={Date()}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="bookedTime">Timeslot</Label>
<Input type="select" name="booked_time" id="bookedTime">
<option>Select</option>
<option>00:00-03:00</option>
<option>03:00-06:00</option>
<option>06:00-09:00</option>
<option>08: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>Select</option>
<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>Select</option>
<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"
placeholder="optional"
/>
</FormGroup>
<FormGroup>
<Label for="bookedNotes">Notes</Label>
<Input
type="textarea"
name="notes"
id="notes"
placeholder="optional"
/>
</FormGroup>
<Submit withSpinner>Update</Submit>
</Container>
</Form>
</Formik>
);
};
export default ReportSingleMigration;

27
src/components/root/Pages/Migrations/SideMigrations.js
View File

@ -1,22 +1,29 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { SingleSide } from "./SingleSide"; import { SingleSide } from "./SingleSide";
import { callAPI } from "../../../actions/API";
class SideMigrations extends Component { export default class SideMigrations extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
migs: [], migs: [],
e: false,
}; };
} }
componentDidMount() {
callAPI
.get("/pending/")
.then((request) => {
this.setState({
migs: request.data,
});
})
.catch((error) => {
this.setState({
error: true,
});
});
}
render() { render() {
return <SingleSide key={this.state.migs.domain} data={this.state.migs} />; return <SingleSide key={this.state.migs.id} data={this.state.migs} />;
} }
} }
export default SideMigrations;
//return
//

42
src/components/root/Pages/Reports.js
View File

@ -1,9 +1,41 @@
import React from "react"; import React, { Component } from "react";
import GetSingleMigration from "./AllReports/GetSingleMigration"; import IdSearchForm from "./AllReports/IdSearchForm";
import ReportSingleMigration from "./Migrations/ReportSingleMigration";
import { callAPI } from "../../actions/API";
const Reports = () => { export default class Reports extends Component {
return <GetSingleMigration />; constructor(props) {
super(props);
this.state = {
migs: [],
redirect: false,
}; };
}
export default Reports; render() {
const onSubmit = async (migrationId, { setSubmitting }) => {
callAPI
.get(`/${migrationId.migrationId}/`)
.then((response) =>
this.setState({
redirect: true,
migs: response.data,
})
)
.catch(function (error) {
console.log(error);
});
setSubmitting(false);
};
return (
<div>
<IdSearchForm api={onSubmit} />
<ReportSingleMigration
key={this.state.migs.id}
item={this.state.migs}
/>
</div>
);
}
}