Skip to content

Commit

Permalink
#179: added delete verification modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@yaxue1123
yaxue1123 committed May 5, 2023
1 parent 9369ba0 commit 74339bf
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 55 deletions.
37 changes: 24 additions & 13 deletions src/components/Experiment/Slices.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import Pagination from "../common/Pagination";
import SearchBoxWithDropdown from "../../components/common/SearchBoxWithDropdown";
import SlicesTable from "../Slice/SlicesTable";
import SpinnerWithText from "../../components/common/SpinnerWithText";
import DeleteModal from "../../components/common/DeleteModal";
import { getProjects } from "../../services/projectService.js";
import { autoCreateTokens } from "../../utils/manageTokens";
import { getSlices, deleteSlice } from "../../services/sliceService.js";
import { toast } from "react-toastify";
import paginate from "../../utils/paginate";
import sleep from "../../utils/sleep";
import checkPortalType from "../../utils/checkPortalType";
import { default as portalData } from "../../services/portalData.json";
import _ from "lodash";
Expand All @@ -31,29 +33,30 @@ class Slices extends React.Component {
searchQuery: "",
sortColumn: { path: "name", order: "asc" },
showSpinner: false,
spinnerText: ""
};

async componentDidMount() {
// Show loading spinner and when waiting API response
this.setState({ showSpinner: true });
this.setState({ showSpinner: true, spinnerText: "Loading slices..." });
try {
if (window.location.href.includes("/projects")) {
// call credential manager to generate tokens
autoCreateTokens("all").then(async () => {
const { data: res } = await getSlices();
const slices = res.data.filter(s => s.project_id === this.props.projectId);
this.setState({ slices, showSpinner: false });
this.setState({ slices, showSpinner: false, spinnerText: "" });
});
} else {
// call PR first to check if the user has project.
const { data: res } = await getProjects("myProjects", 0, 200);
if (res.results.length === 0) {
this.setState({ hasProject: false, showSpinner: false });
this.setState({ hasProject: false, showSpinner: false, spinnerText: "" });
} else {
// call credential manager to generate tokens
autoCreateTokens("all").then(async () => {
const { data: res } = await getSlices();
this.setState({ slices: res.data, showSpinner: false });
this.setState({ slices: res.data, showSpinner: false, spinnerText: "" });
});
}
}
Expand Down Expand Up @@ -85,7 +88,12 @@ class Slices extends React.Component {

handleDeleteAllSlices = async () => {
try {
this.setState({
showSpinner: true,
spinnerText: "Deleting all active slices..."
})
await deleteSlice();
await sleep(5000);
window.location.reload();
}
catch (err) {
Expand Down Expand Up @@ -131,7 +139,8 @@ class Slices extends React.Component {
};

render() {
const { hasProject, slices, pageSize, currentPage, sortColumn, searchQuery, filterQuery, showSpinner } = this.state;
const { hasProject, slices, pageSize, currentPage, sortColumn, searchQuery,
filterQuery, showSpinner, spinnerText, includeDeadSlices } = this.state;
const { totalCount, data } = this.getPageData();

return (
Expand Down Expand Up @@ -159,7 +168,7 @@ class Slices extends React.Component {
</div>
}
{
showSpinner && <SpinnerWithText text={"Loading slices..."} />
showSpinner && <SpinnerWithText text={spinnerText} />
}
{
!showSpinner && !hasProject &&
Expand Down Expand Up @@ -261,18 +270,20 @@ class Slices extends React.Component {
</div>
<div className="my-2 d-flex flex-row justify-content-between">
<span>Showing {totalCount} slices.</span>
<button
className="btn btn-sm btn-outline-danger"
onClick={this.handleDeleteAllSlices}
>
Delete All
</button>
<Checkbox
label={"Include Dead/ Closing Slices"}
id={"checkbox-include-dead-slices"}
isChecked={this.state.includeDeadSlices}
isChecked={includeDeadSlices}
onCheck={this.handleIncludeDeadSlices}
/>
{
this.props.parent === "Projects" && totalCount > 0 && !includeDeadSlices &&
<DeleteModal
name={"Delete All"}
text={"Are you sure you want to delete all the active slices? This process cannot be undone."}
onDelete={() => this.handleDeleteAllSlices}
/>
}
</div>
<SlicesTable
slices={data}
Expand Down
14 changes: 3 additions & 11 deletions src/components/common/Calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,12 @@ import React, { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

function Calendar({ onTimeChange, currentTime }) {
// if no time param passed in, set the default time as 24 hours later.
const today = new Date();
const time = new Date(today);
time.setDate(time.getDate() + 1);

if (!currentTime) {
// Set default time to be 24 hours later.
time.setDate(time.getDate() + 1);
} else {
time.setDate(currentTime);
}

console.log("show time format for Calendar component:");
console.log(time);

const [value, onChange] = useState(time);
const [value, onChange] = useState(currentTime? currentTime : time);

return (
<div>
Expand Down
62 changes: 34 additions & 28 deletions src/pages/SliceViewer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,12 @@ class SliceViewer extends Component {
positionAddNode: { x: 100, y: 600 },
leaseEndTime: "",
hasProject: true,
showSliceSpinner: false,
showSpinner: false,
spinnerText: ""
}

async componentDidMount() {
this.setState({ showSliceSpinner: true });
this.setState({ showSpinner: true, spinnerText: "Loading slice..." });
try {
// call credential manager to generate tokens
autoCreateTokens(this.props.match.params.project_id).then(async () => {
Expand All @@ -48,7 +49,8 @@ class SliceViewer extends Component {
slice: res.data[0],
leaseEndTime: res.data[0].lease_end_time,
errors: sliceErrorParser(res.data[0]["model"]),
showSliceSpinner: false
showSpinner: false,
spinnerText: ""
});
});
} catch (err) {
Expand Down Expand Up @@ -95,7 +97,11 @@ class SliceViewer extends Component {
this.setState({ leaseEndTime: outputTime });
}

handlExtendSlice = async () => {
handleSliceExtend = async () => {
this.setState({
showSpinner: true,
spinnerText: "Extending slice..."
})
try {
const { slice, leaseEndTime } = this.state;
await extendSlice(slice.slice_id, leaseEndTime);
Expand All @@ -109,14 +115,6 @@ class SliceViewer extends Component {
});
}
}

calendarTimeParser = (apiTime) => {
console.log("---API time----");
console.log(apiTime);
console.log("---parsed calendar time----");
console.log(utcToLocalTimeParser(apiTime));
return utcToLocalTimeParser(apiTime);
}

render() {
const stateColors = {
Expand All @@ -132,16 +130,16 @@ class SliceViewer extends Component {
}

const { slice, elements, selectedData, hasProject,
showSliceSpinner, errors, leaseEndTime } = this.state;
showSpinner, spinnerText, errors, leaseEndTime } = this.state;

let showSlice = !showSliceSpinner && hasProject;
let showSlice = !showSpinner && hasProject;

return(
<div>
{
showSliceSpinner &&
showSpinner &&
<div className="container d-flex align-items-center justify-content-center">
<SpinnerWithText text={"Loading Slice..."} />
<SpinnerWithText text={spinnerText} />
</div>
}
{
Expand All @@ -163,24 +161,32 @@ class SliceViewer extends Component {
<i className="fa fa-question-circle mx-2" />
</a>
</h2>
<h4>
<span className="badge badge-light font-weight-normal p-2 mt-1 mr-3">Lease End:
</span>
<div className="d-flex flex-row align-items-center">
<h4>
<span className="badge badge-light font-weight-normal p-2 mt-1 mr-2">Lease End:
{
slice.state !=="StableOK" && utcToLocalTimeParser(leaseEndTime)
}
</span>
</h4>
{
leaseEndTime !== "" && <Calendar
leaseEndTime !== "" && slice.state ==="StableOK" && <Calendar
id="sliceViewerCalendar"
name="sliceViewerCalendar"
currentTime={this.calendarTimeParser(leaseEndTime)}
currentTime={utcToLocalTimeParser(leaseEndTime)}
onTimeChange={this.handleTimeChange}
/>
}
<button
className="btn btn-sm btn-outline-primary m1-3 mr-3"
onClick={this.handleExtendSlice}
>
Extend
</button>
</h4>
{
slice.state ==="StableOK" &&
<button
className="btn btn-sm btn-outline-primary m1-3 mr-3"
onClick={this.handleSliceExtend}
>
Extend
</button>
}
</div>
{
slice.project_name && <h4>
<span className="badge badge-light font-weight-normal p-2 mt-1">
Expand Down
3 changes: 0 additions & 3 deletions src/utils/utcToLocalTimeParser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,5 @@ export default function utcToLocalTimeParser(UTCtime) {
const stillUtc = moment.utc(utcDateTime).toDate();
const localTime = moment(stillUtc).local().format('YYYY-MM-DD HH:mm:ss');

console.log("utc to local time: ----")
console.log(localTime)

return localTime;
}

0 comments on commit 74339bf

Please sign in to comment.