From 74339bf89dbb4520b85344764548f810aeb16866 Mon Sep 17 00:00:00 2001
From: Yaxue Guo <yaxue.guo23@gmail.com>
Date: Fri, 5 May 2023 17:02:33 -0400
Subject: [PATCH] #179: added delete verification modal

---
 src/components/Experiment/Slices.jsx | 37 +++++++++++------
 src/components/common/Calendar.jsx   | 14 ++-----
 src/pages/SliceViewer.jsx            | 62 +++++++++++++++-------------
 src/utils/utcToLocalTimeParser.js    |  3 --
 4 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx
index 3f027e54..3e95099e 100644
--- a/src/components/Experiment/Slices.jsx
+++ b/src/components/Experiment/Slices.jsx
@@ -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";
@@ -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: "" });
           });
         }
       }
@@ -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) {
@@ -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 (
@@ -159,7 +168,7 @@ class Slices extends React.Component {
            </div>
         }
         {
-          showSpinner && <SpinnerWithText text={"Loading slices..."} />
+          showSpinner && <SpinnerWithText text={spinnerText} />
         }
         {
           !showSpinner && !hasProject &&
@@ -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}
diff --git a/src/components/common/Calendar.jsx b/src/components/common/Calendar.jsx
index 657a2f08..d3d335ab 100644
--- a/src/components/common/Calendar.jsx
+++ b/src/components/common/Calendar.jsx
@@ -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>
diff --git a/src/pages/SliceViewer.jsx b/src/pages/SliceViewer.jsx
index 3d4484da..1ba998cb 100644
--- a/src/pages/SliceViewer.jsx
+++ b/src/pages/SliceViewer.jsx
@@ -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 () => {
@@ -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) {
@@ -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);
@@ -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 = {
@@ -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>
         }
         {
@@ -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">
diff --git a/src/utils/utcToLocalTimeParser.js b/src/utils/utcToLocalTimeParser.js
index bd9e143a..be578e6b 100644
--- a/src/utils/utcToLocalTimeParser.js
+++ b/src/utils/utcToLocalTimeParser.js
@@ -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;
 }