clone and delete, switch exp overview tab

src/components/experiment-list/experiment-list-element.js

@@ -10,6 +10,8 @@ import ExperimentExecutionService from '../../services/experiments/execution/exp
 import SimulationDetails from './simulation-details';
 
 import './experiment-list-element.css';
+import PublicExperimentsService from '../../services/experiments/files/public-experiments-service.js';
+import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js';
 
 const CLUSTER_THRESHOLDS = {
   UNAVAILABLE: 2,
@@ -182,7 +184,10 @@ export default class ExperimentListElement extends React.Component {
 
                 {/* isPrivateExperiment */}
                 {exp.rights.delete ?
-                  <button className='btn btn-default'>
+                  <button className='btn btn-default' onClick={async () => {
+                    await ExperimentStorageService.instance.deleteExperiment(exp.id);
+                    ExperimentStorageService.instance.getExperiments(true);
+                  }}>
                     <FaTrash className='icon' />Delete
                   </button>
                   : null}
@@ -219,7 +224,10 @@ export default class ExperimentListElement extends React.Component {
 
                 {/* Clone button */}
                 {exp.rights.clone ?
-                  <button className='btn btn-default'>
+                  <button className='btn btn-default' onClick={() => {
+                    PublicExperimentsService.instance.cloneExperiment(exp);
+                    this.props.selectExperimentOverviewTab(0);
+                  }}>
                     <FaClone className='icon' />Clone
                   </button>
                   : null}

src/components/experiment-list/experiment-list.js

@@ -17,7 +17,8 @@ export default class ExperimentList extends React.Component {
                   <li key={experiment.id || experiment.configuration.id} className='nostyle'>
                     <ExperimentListElement experiment={experiment}
                       availableServers={this.props.availableServers}
-                      startingExperiment={this.props.startingExperiment} />
+                      startingExperiment={this.props.startingExperiment}
+                      selectExperimentOverviewTab={this.props.selectExperimentOverviewTab} />
                   </li>
                 );
               })}

src/components/experiment-list/simulation-details.js

@@ -55,7 +55,6 @@ export default class SimulationDetails extends React.Component {
   }
 
   render() {
-    //console.info(this.props.simulations);
     return (
       <div className='simulations-details-wrapper'>
         <div className='table-row table-header'>

src/components/experiment-overview/experiment-overview.js

 import React from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+//import Tabs from 'react-bootstrap/Tabs';
+//import Tab from 'react-bootstrap/Tab';
 import 'react-tabs/style/react-tabs.css';
 
 import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js';
@@ -20,7 +22,8 @@ export default class ExperimentOverview extends React.Component {
       publicExperiments: [],
       joinableExperiments: [],
       availableServers: [],
-      startingExperiment: undefined
+      startingExperiment: undefined,
+      selectedTabIndex: 0
     };
   }
 
@@ -81,7 +84,6 @@ export default class ExperimentOverview extends React.Component {
   };
 
   onUpdateStorageExperiments(storageExperiments) {
-    //console.info(storageExperiments);
     let joinableExperiments = storageExperiments.filter(
       experiment => experiment.joinableServers && experiment.joinableServers.length > 0);
     this.setState({
@@ -91,12 +93,15 @@ export default class ExperimentOverview extends React.Component {
   }
 
   onUpdatePublicExperiments(publicExperiments) {
-    //console.info(publicExperiments);
     this.setState({
       publicExperiments: publicExperiments.filter(exp => exp.configuration.maturity === 'production')
     });
   }
 
+  selectTab(index) {
+    this.setState({ selectedTabIndex: index });
+  }
+
   render() {
     return (
       <div className='experiment-overview-wrapper'>
@@ -104,7 +109,11 @@ export default class ExperimentOverview extends React.Component {
           <NrpHeader title1='EXPERIMENT' title2='OVERVIEW' />
         </div>
 
-        <Tabs className="tabs-view">
+        <Tabs className="tabs-view" id="tabs-experiment-lists"
+          selectedIndex={this.state.selectedTabIndex}
+          onSelect={(index) => this.setState({ selectedTabIndex: index })}
+          /*activeKey={this.state.selectedTabKey}
+          onSelect={(key) => this.setState({ selectedTabKey: key })}*/>
           <TabList>
             <Tab>My Experiments</Tab>
             <Tab>New Experiment</Tab>
@@ -114,26 +123,33 @@ export default class ExperimentOverview extends React.Component {
             <Tab>Running Simulations</Tab>
           </TabList>
 
-          <TabPanel>
+          {/* My Experiments */}
+          <TabPanel /*Tab title='My Experiments' eventKey='my-experiments'*/>
             <ExperimentList experiments={this.state.storageExperiments}
               availableServers={this.state.availableServers}
               startingExperiment={this.state.startingExperiment} />
           </TabPanel>
-          <TabPanel>
+          {/* New Experiment */}
+          <TabPanel /*Tab title='New Experiment' eventKey='new-experiment'*/>
             <h2>"New Experiment" tab coming soon ...</h2>
           </TabPanel>
-          <TabPanel>
+          {/* Model Libraries */}
+          <TabPanel /*Tab title='Model Libraries' eventKey='model-libraries'*/>
             <h2>"Model Libraries" tab coming soon ...</h2>
           </TabPanel>
-          <TabPanel>
+          {/* Experiment Files */}
+          <TabPanel /*Tab title='Experiment Files' eventKey='experiment-files'*/>
             <h2>"Experiment Files" tab coming soon ...</h2>
           </TabPanel>
-          <TabPanel>
+          {/* Templates */}
+          <TabPanel /*Tab title='Template Experiments' eventKey='template-experiments'*/>
             <ExperimentList experiments={this.state.publicExperiments}
               availableServers={this.state.availableServers}
-              startingExperiment={this.state.startingExperiment} />
+              startingExperiment={this.state.startingExperiment}
+              selectExperimentOverviewTab={(index) => this.setState({ selectedTabIndex: index })} />
           </TabPanel>
-          <TabPanel>
+          {/* Running Simulations */}
+          <TabPanel /*Tab title='Running Experiments' eventKey='running-experiments'*/>
             <ExperimentList
               experiments={this.state.joinableExperiments}
               availableServers={this.state.availableServers}

src/services/experiments/files/experiment-storage-service.js

@@ -3,6 +3,8 @@ import { EXPERIMENT_RIGHTS } from '../experiment-constants';
 
 import endpoints from '../../proxy/data/endpoints.json';
 import config from '../../../config.json';
+
+const storageURL = `${config.api.proxy.url}${endpoints.proxy.storage.url}`;
 const storageExperimentsURL = `${config.api.proxy.url}${endpoints.proxy.storage.experiments.url}`;
 
 let _instance = null;
@@ -216,6 +218,15 @@ class ExperimentStorageService extends HttpService {
     return this.deleteEntity(experimentName, folderName, byname, 'folder');
   }
 
+  /**
+   * Deletes an experiment from storage.
+   * @param {string} experimentID The experiment's ID
+   */
+  async deleteExperiment(experimentID) {
+    let url = storageURL + '/' + experimentID;
+    return this.httpRequestDELETE(url);
+  }
+
   /**
    * Creates a file in an experiment folder from the storage.
    * @param {string} experimentName - name of the experiment

src/services/experiments/files/public-experiments-service.js

@@ -144,8 +144,7 @@ class PublicExperimentsService extends HttpService {
    */
   async cloneExperiment(experiment) {
     let experimentConfigFilepath = experiment.configuration.experimentConfiguration;
-    let response = await this.httpRequestPOST(cloneURL, { expPath: experimentConfigFilepath });
-    console.info(response);
+    this.httpRequestPOST(cloneURL, JSON.stringify({ expPath: experimentConfigFilepath }));
   }
 }