From 0d66465ff838b007c7580dcbe1547a50e5fab602 Mon Sep 17 00:00:00 2001 From: Yaxue Guo Date: Wed, 25 May 2022 12:28:15 -0400 Subject: [PATCH] #175: updated delete slice details --- src/components/Experiment/Slices.jsx | 6 +- src/components/Header.jsx | 5 +- src/components/SliceViewer/Graph.jsx | 6 +- src/pages/NewSliceForm.jsx | 380 ++++++++++++++------------- src/pages/SliceViewer.jsx | 5 +- src/utils/sliceEditor.js | 2 +- 6 files changed, 213 insertions(+), 191 deletions(-) diff --git a/src/components/Experiment/Slices.jsx b/src/components/Experiment/Slices.jsx index cdde44e9..c3f5c0f3 100644 --- a/src/components/Experiment/Slices.jsx +++ b/src/components/Experiment/Slices.jsx @@ -119,7 +119,7 @@ class Slices extends React.Component { if (!includeDeadSlices) { filtered = filtered.filter((s) => - s.slice_state !== "Dead" + s.slice_state !== "Dead" && s.slice_state !== "Closing" ) } @@ -163,7 +163,7 @@ class Slices extends React.Component {

We couldn't find your slice. Please create slices from  - Portal or  + Portal or   Showing {totalCount} slices. { + this.cy.on('add', 'node',() => { + refreshLayout(); + }); + + this.cy.on('remove', 'node', () => { refreshLayout(); }); diff --git a/src/pages/NewSliceForm.jsx b/src/pages/NewSliceForm.jsx index 0c403f37..e3d7654e 100644 --- a/src/pages/NewSliceForm.jsx +++ b/src/pages/NewSliceForm.jsx @@ -22,6 +22,7 @@ import validator from "../utils/sliceValidator.js"; import { sitesNameMapping } from "../data/sites"; import sitesParser from "../services/parser/sitesParser"; import { getResources } from "../services/resourcesService.js"; +// import { getResources } from "../services/fakeResources.js"; import { createSlice } from "../services/orchestratorService.js"; import { autoCreateTokens } from "../utils/manageTokens"; import { getActiveKeys } from "../services/sshKeyService"; @@ -34,6 +35,7 @@ class NewSliceForm extends React.Component { ancronymToName: sitesNameMapping.ancronymToName, showResourceSpinner: false, showKeySpinner: false, + showSliceSpinner: false, sliverKeys: [], projectIdToGenerateToken: "", graphID: "", @@ -44,6 +46,15 @@ class NewSliceForm extends React.Component { selectedCPs: [], } + // componentDidMount() { + // const resources = getResources(); + // const parsedObj = sitesParser(resources, this.state.ancronymToName); + // this.setState({ parsedResources: parsedObj }); + + // // generate a graph uuid for the new slice + // this.setState({ graphID: uuidv4() }); + // } + async componentDidMount() { // Show spinner in SideNodes when loading resources this.setState({ showResourceSpinner: true, showKeySpinner: true }); @@ -258,6 +269,10 @@ class NewSliceForm extends React.Component { this.handleSaveDraft("noMessage"); const { sliceName, sshKey, leaseEndTime } = this.state; + const that = this; + + that.setState({ showSliceSpinner: true }); + let requestData = {}; if (leaseEndTime !== "") { requestData = { @@ -273,7 +288,7 @@ class NewSliceForm extends React.Component { json: this.generateSliceJSON() } } - + try { // re-create token using user's choice of project autoCreateTokens(this.state.projectIdToGenerateToken).then(async () => { @@ -287,6 +302,7 @@ class NewSliceForm extends React.Component { } catch (ex) { console.log("failed to create slice: " + ex.response.data); toast.error("Failed to create slice."); + that.setState({ showSliceSpinner: false }); } }) } catch (ex) { @@ -297,7 +313,8 @@ class NewSliceForm extends React.Component { render() { const { sliceName, projectIdToGenerateToken, sshKey, sliverKeys, selectedData, - showKeySpinner, showResourceSpinner, parsedResources, sliceNodes, sliceLinks, selectedCPs } + showKeySpinner, showResourceSpinner, showSliceSpinner, parsedResources, + sliceNodes, sliceLinks, selectedCPs } = this.state; const validationResult = validator.validateSlice(sliceName, sshKey, projectIdToGenerateToken, sliceNodes); @@ -309,206 +326,207 @@ class NewSliceForm extends React.Component { ); return ( -

-
-

New Slice

- - - -
-
-
-
-
-
- -
-
-
- +
+ {`showSliceSpinner: ${showSliceSpinner}`} +
+

New Slice

+ + + +
+
+
+
+
+
+ +
+
+
+ +
-
-
-
-
- -
-
-
-
-
-
- - -
-
- - { - showKeySpinner && - } - { - sliverKeys.length > 0 && !showKeySpinner && - - } - { - sliverKeys.length === 0 && !showKeySpinner && -
- - Please generate or upload sliver key from - +
+
+ +
+
+
+
+ +
+ + +
+
+ + { + showKeySpinner && + } + { + sliverKeys.length > 0 && !showKeySpinner && + + } + { + sliverKeys.length === 0 && !showKeySpinner && +
+ + Please generate or upload sliver key from + + Manage SSH Keys + first. Then click the refresh button. + + +
+ } +
+
+ + +
+
+ -
- } -
-
- - -
-
- - - -
- + +
+ +
-
-
-
-
-
- -
-
-
- { - showResourceSpinner && - } - { - !showResourceSpinner && - - } +
+
+
+
+ +
+
+
+ { + showResourceSpinner && + } + { + !showResourceSpinner && + + } +
-
-
-
- -
-
-
- +
+
+ +
+
+
+ +
-
-
- - this.handleSaveDraft("withMessage")} - onUseDraft={this.handleUseDraft} - onClearGraph={this.handleClearGraph} - /> +
+ + this.handleSaveDraft("withMessage")} + onUseDraft={this.handleUseDraft} + onClearGraph={this.handleClearGraph} + /> +
-
) } } diff --git a/src/pages/SliceViewer.jsx b/src/pages/SliceViewer.jsx index 1f7627d0..5fed15a5 100644 --- a/src/pages/SliceViewer.jsx +++ b/src/pages/SliceViewer.jsx @@ -72,6 +72,7 @@ export default class SliceViewer extends Component { await deleteSlice(id); // toast message to users when the api call is successfully done. toast.success("Slice deleted successfully."); + this.props.history.push(`/experiments#slices`); } catch(ex) { console.log("failed to delete the slice: " + ex.response.data); toast.error("Failed to delete the slice."); @@ -111,7 +112,7 @@ export default class SliceViewer extends Component {
{ - slice.slice_state !== "Dead" && + slice.slice_state.includes("Stable") && Slices page.'} @@ -136,7 +137,7 @@ export default class SliceViewer extends Component { isNewSlice={false} elements={elements} sliceName={slice.slice_name} - defaultSize={{"width": 0.65, "height": 0.75, "zoom": 1}} + defaultSize={{"width": 0.75, "height": 0.75, "zoom": 1}} onNodeSelect={this.handleNodeSelect} /> } diff --git a/src/utils/sliceEditor.js b/src/utils/sliceEditor.js index b457f862..45d4d62f 100644 --- a/src/utils/sliceEditor.js +++ b/src/utils/sliceEditor.js @@ -148,7 +148,7 @@ const removeNode = (el, nodes, links) => { return { newSliceNodes: updated_nodes, newSliceLinks: updated_links } } } - + // remove the parent VM. to_remove_node_ids.push(parentID); }