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

Compare commits

base: The_Bois:96605a692382008e01a75a8c1adeb676c3a36d56
Branches Tags
The_Bois:master
..
compare: The_Bois:5cc1830e2b446094eefd21759cd94b4a103f7c4a
Branches Tags
The_Bois:master

8 Commits
96605a6923 ... 5cc1830e2b

Author SHA1 Message Date
pepper
5cc1830e2b Removed duplicate date field 2021-01-14 00:11:35 -05:00
pepper
964e863089 Added link handling 2021-01-14 00:10:31 -05:00
pepper
58eade2464 Added state and status to form 2021-01-14 00:10:18 -05:00
pepper
64f0eaa05a Removed something @cam 2021-01-14 00:10:01 -05:00
pepper
a44dd8df10 Added state to booking page for msgbox 2021-01-14 00:09:40 -05:00
pepper
eb82d0873b Added base messagebox 2021-01-14 00:09:21 -05:00
pepper
d3fd463a15 Added main.css and white-link class 2021-01-14 00:08:59 -05:00
pepper
454d40a96b Added docs link 2021-01-14 00:08:39 -05:00
9 changed files with 101 additions and 51 deletions
Show Stats Expand all files Collapse all files

1
README.md
View File

@ -25,3 +25,4 @@ npm run build
The development server will start on `http://localhost:3000` The development server will start on `http://localhost:3000`
Get css docs here https://materializecss.com/

1
public/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="main.css">
<link rel="icon" <link rel="icon"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14/svgs/solid/book.svg" /> 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" />

16
public/main.css Normal file
View File

@ -0,0 +1,16 @@
a.white-link:link {
color: azure;
font-size: large;
}
a.white-link:hover {
color: azure;
font-size: large;
}
a.white-link:visited {
color: azure;
font-size: large;
}
a.white-link:active {
color: azure;
font-size: large;
}

20
src/components/actions/Msgbox.js Normal file
View File

@ -0,0 +1,20 @@
import React from "react";
// // Generic Msgbox
function Msgbox(props) {
return <div>
<div className="card-panel grey darken-1">
<div className="card-content white-link">
<center>
<span className="card-title">
{ props.error ? <span> { "Unable to update: " + props.error } </span> : null }
{ props.msg ? <span className="white-text">{ "Updated migration details for: " + props.msg }</span> : null }
{ props.linkid ? <a href={ "https://devui.benjamyn.love/migrations/" + props.linkid } className="white-link">{"https://devui.benjamyn.love/migrations/" + props.linkid }</a> : null }
</span>
</center>
</div>
</div>
</div>;
}
export default Msgbox;

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

@ -22,7 +22,7 @@ export class Home extends Component {
componentDidMount() { componentDidMount() {
callAPI callAPI
.get('/') .get("/")
.then((request) => { .then((request) => {
this.setState({ this.setState({
migs: request.data, migs: request.data,
@ -37,26 +37,24 @@ export class Home extends Component {
render() { render() {
return ( return (
<div className="container"> <div className="row">
<div className="row"> <div className="divider"></div>
<div className="divider"></div>
<div className="section"> <div className="section">
<div className="col s7"> <div className="col s7">
<Cards migs={this.state.migs} /> <Cards migs={this.state.migs} />
</div>
<div className="col s5">
<p>Migrations tracker</p>
{/* <Cards migs={this.state.migs} /> */}
</div>
<div className="divider"></div>
<div className="section">
<div className="col s12">
<SideMigrations />
</div>
</div>
<div className="divider"></div>
</div> </div>
<div className="col s5">
<p>Migrations tracker</p>
{/* <Cards migs={this.state.migs} /> */}
</div>
<div className="divider"></div>
<div className="section">
<div className="col s12">
<SideMigrations />
</div>
</div>
<div className="divider"></div>
</div> </div>
</div> </div>
); );

15
src/components/root/Pages/Historical.js
View File

@ -18,20 +18,7 @@ class Historical extends Component {
error: false, error: false,
}; };
} }
componentDidMount() {
callAPI
.get("/all")
.then((request) => {
this.setState({
migs: request.data,
});
})
.catch((error) => {
this.setState({
error: true,
});
});
}
renderItems() { renderItems() {
if (!this.props.error) { if (!this.props.error) {
return <HistoricalSingle data={this.state.sidemigs} />; return <HistoricalSingle data={this.state.sidemigs} />;

12
src/components/root/common/Forms/CPanelBooking.js
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import moment from "moment"; import moment from "moment";
import { Col, FormGroup, Row, Container, Label } from "reactstrap"; import { Col, FormGroup, Row, Container, Label } from "reactstrap";
@ -6,6 +6,7 @@ import { Formik, Form, Field } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
import { Input, Submit } from "formstrap"; import { Input, Submit } from "formstrap";
import { callAPI } from "../../../actions/API"; import { callAPI } from "../../../actions/API";
import Msgbox from "../../../actions/Msgbox";
// import FormikFieldDateTimePicker from "./FormikFieldDateTimePicker"; // import FormikFieldDateTimePicker from "./FormikFieldDateTimePicker";
// Main form and POST Request to add migrations // Main form and POST Request to add migrations
@ -23,6 +24,8 @@ const timezoneList = {
}; };
const timezone = timezoneList.melbourne; const timezone = timezoneList.melbourne;
const InputValidation = Yup.object().shape({ const InputValidation = Yup.object().shape({
domain: Yup.string() domain: Yup.string()
.matches( .matches(
@ -46,6 +49,9 @@ const InputValidation = Yup.object().shape({
}); });
export const CPanelBooking = () => { export const CPanelBooking = () => {
const [respID, setRespID] = useState(0)
const [error, setError] = useState(0)
const initialValues = { const initialValues = {
submit_time: moment().format("YYYY-MM-DD"), submit_time: moment().format("YYYY-MM-DD"),
dateTime: "2019-03-11T12:00:00.000Z", dateTime: "2019-03-11T12:00:00.000Z",
@ -57,9 +63,11 @@ export const CPanelBooking = () => {
.then(function (response) { .then(function (response) {
console.log(response.data.id); console.log(response.data.id);
// add function here // add function here
setRespID(response.data.id)
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
setError(error)
}); });
setSubmitting(false); setSubmitting(false);
resetForm({ values: "" }); resetForm({ values: "" });
@ -227,6 +235,8 @@ export const CPanelBooking = () => {
</FormGroup> </FormGroup>
<Submit withSpinner>Submit</Submit> <Submit withSpinner>Submit</Submit>
</Container> </Container>
{ respID ? <Msgbox linkid={respID}></Msgbox> : null }
{ error ? <Msgbox error={error}></Msgbox> : null }
</Form> </Form>
)} )}
</Formik> </Formik>

30
src/components/root/common/Forms/ReportSingleMigration.js
View File

@ -1,15 +1,20 @@
import React from "react"; import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import { Col, FormGroup, Row, Container, Label } from "reactstrap"; 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 Msgbox from "../../../actions/Msgbox";
// Main form element for the UUID linking Migrations page, // Main form element for the UUID linking Migrations page,
// Contians the PUT request to modify data from the API // Contians the PUT request to modify data from the API
const ReportSingleMigration = ({ item }) => { const ReportSingleMigration = ({ item }) => {
const [respID, setRespID] = useState(0);
const [error, setError] = useState(0);
const initialValues = { const initialValues = {
migration_status: item.migration_status,
submit_time: item.submit_time, submit_time: item.submit_time,
domain: item.domain, domain: item.domain,
booked_date: item.booked_date, booked_date: item.booked_date,
@ -31,9 +36,11 @@ const ReportSingleMigration = ({ item }) => {
.put(`/${item.id}/`, values) .put(`/${item.id}/`, values)
.then(function (response) { .then(function (response) {
console.log(JSON.stringify(response.values)); console.log(JSON.stringify(response.values));
setRespID(response.data.ticket_id);
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
setError(error);
}); });
setSubmitting(false); setSubmitting(false);
}; };
@ -44,16 +51,21 @@ const ReportSingleMigration = ({ item }) => {
<Row> <Row>
<Col> <Col>
<FormGroup> <FormGroup>
<Label for={item.booked_date}>Date</Label> <Label for={item.migration_status}>Status</Label>
<Input <Input
type="date" type="select"
name="booked_date" name="migration_status"
id="booked_date" id="migration_status"
placeholder="date placeholder" >
mindate={Date()} <option>Status</option>
/> <option>Booked</option>
<option>Waiting Termination</option>
<option>Complete</option>
<option>Cancelled</option>
</Input>
</FormGroup> </FormGroup>
</Col> </Col>
<Col> <Col>
<FormGroup> <FormGroup>
<Label for="bookedTime">Timeslot</Label> <Label for="bookedTime">Timeslot</Label>
@ -205,6 +217,8 @@ const ReportSingleMigration = ({ item }) => {
</FormGroup> </FormGroup>
<Submit withSpinner>Update</Submit> <Submit withSpinner>Update</Submit>
</Container> </Container>
{respID ? <Msgbox msg={respID}></Msgbox> : null}
{error ? <Msgbox error={error}></Msgbox> : null}
</Form> </Form>
</Formik> </Formik>
); );

21
src/components/root/common/Tables/HistoricalSingle.js
View File

@ -15,6 +15,7 @@ import ToolkitProvider, {
const HistoricalSingle = () => { const HistoricalSingle = () => {
const [list, setList] = useState([]); const [list, setList] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [ticURl, setURL] = useState(null)
const { SearchBar } = Search; const { SearchBar } = Search;
const { ExportCSVButton } = CSVExport; const { ExportCSVButton } = CSVExport;
const sizePerPageRenderer = ({ const sizePerPageRenderer = ({
@ -45,6 +46,11 @@ const HistoricalSingle = () => {
console.log(data); console.log(data);
setList(data.data); setList(data.data);
setLoading(true); setLoading(true);
// Determine brand and set URL based on brand
console.log(data.data.brand)
if (data.data.brand === "VentraIP" ) {
console.log("memes")
}
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
@ -78,6 +84,7 @@ const HistoricalSingle = () => {
], ],
sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
}; };
const columns = [ const columns = [
{ dataField: "id", text: "ID", hidden: true }, { dataField: "id", text: "ID", hidden: true },
{ dataField: "brand", text: "Brand", sort: true }, { dataField: "brand", text: "Brand", sort: true },
@ -89,8 +96,9 @@ const HistoricalSingle = () => {
formatter: (cell, row) => ( formatter: (cell, row) => (
<a <a
href={ href={
"https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id row.brand === "VentraIP" ? "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id : null
} }
target="_blank"
> >
{" "} {" "}
{cell}{" "} {cell}{" "}
@ -98,7 +106,7 @@ const HistoricalSingle = () => {
), ),
}, },
{ dataField: "booked_date", text: "Booked Date", sort: true }, { dataField: "booked_date", text: "Booked Date", sort: true },
{ dataField: "booked_time", text: "Booked Time", sort: true }, // { dataField: "booked_time", text: "Booked Time", sort: true },
{ dataField: "agent_booked", text: "Agent initials", sort: true }, { dataField: "agent_booked", text: "Agent initials", sort: true },
{ {
dataField: "domain", dataField: "domain",
@ -112,14 +120,9 @@ const HistoricalSingle = () => {
{ dataField: "original_server", text: "Original Server", sort: true }, { dataField: "original_server", text: "Original Server", sort: true },
{ dataField: "new_server", text: "New Server", sort: true }, { dataField: "new_server", text: "New Server", sort: true },
{ dataField: "migration_status", text: "Status", sort: true }, { dataField: "migration_status", text: "Status", sort: true },
{ dataField: "term_date", text: "Termination Date", sort: true }, // { dataField: "term_date", text: "Termination Date", sort: true },
{ dataField: "notes", text: "Notes", sort: true }, { dataField: "notes", text: "Notes", sort: true },
{ dataField: "submit_time", text: "Submit Time", sort: true }, // { dataField: "submit_time", text: "Submit Time", sort: true },
{
dataField: "report",
text: "Show Detailed Report",
formatter: (cell, row) => <a href={cell + row.id}> {cell} </a>,
},
]; ];
useEffect(() => { useEffect(() => {