changeset 141:78532770ce37

Multicharts can be renamed Reviewed-by: almac Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-July/024206.html
author Andrew Azores <aazores@redhat.com>
date Thu, 20 Jul 2017 11:53:35 -0400
parents 70dadb296f6b
children d78f6d641b7b
files src/app/components/multichart/chart.controller.js src/app/components/multichart/chart.controller.spec.js src/app/components/multichart/multichart.html src/app/shared/services/multichart.service.js src/app/shared/services/multichart.service.spec.js
diffstat 5 files changed, 106 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/src/app/components/multichart/chart.controller.js	Wed Jul 26 09:41:58 2017 -0400
+++ b/src/app/components/multichart/chart.controller.js	Thu Jul 20 11:53:35 2017 -0400
@@ -146,6 +146,21 @@
       this.refresh = this.interval(() => this.update(), val);
     }
   }
+
+  rename (to) {
+    if (!to) {
+      return;
+    }
+    to = to.trim();
+    if (!this.isValid(to)) {
+      return;
+    }
+    this.svc.rename(this.chart, to);
+  }
+
+  isValid (chartName) {
+    return chartName.search(/^[\w-]+$/) > -1;
+  }
 }
 
 export default angular
--- a/src/app/components/multichart/chart.controller.spec.js	Wed Jul 26 09:41:58 2017 -0400
+++ b/src/app/components/multichart/chart.controller.spec.js	Thu Jul 20 11:53:35 2017 -0400
@@ -44,7 +44,8 @@
         getDataPromise: getDataPromise,
         getAxesForChart: sinon.stub().returns(['y']),
         countServicesForChart: sinon.stub().returns(2),
-        removeChart: sinon.spy()
+        removeChart: sinon.spy(),
+        rename: sinon.spy()
       };
       scope = {
         $parent: {
@@ -335,4 +336,25 @@
     });
   });
 
+  describe('rename', () => {
+    it('should delegate to service', () => {
+      svc.rename.should.not.be.called();
+      ctrl.rename('newname');
+      svc.rename.should.be.calledOnce();
+      svc.rename.should.be.calledWith('foo-chart', 'newname');
+    });
+
+    it('should do nothing if chart name is empty', () => {
+      svc.rename.should.not.be.called();
+      ctrl.rename('');
+      svc.rename.should.not.be.called();
+    });
+
+    it('should do nothing if chart name is invalid', () => {
+      svc.rename.should.not.be.called();
+      ctrl.rename('with space');
+      svc.rename.should.not.be.called();
+    });
+  });
+
 });
--- a/src/app/components/multichart/multichart.html	Wed Jul 26 09:41:58 2017 -0400
+++ b/src/app/components/multichart/multichart.html	Thu Jul 20 11:53:35 2017 -0400
@@ -25,11 +25,11 @@
           <div ng-controller="MultiChartChartController as chartCtrl" class="card-pf card-pf-view">
             <div class="card-pf-heading">
               <label class="card-pf-title">{{chart}}</label>
-              <button class="btn btn-default pull-right" ng-click="chartCtrl.removeChart(chart)"><span class="pficon pficon-close"></span></button>
             </div>
 
-            <!-- Metric Controls: Refresh Rate -->
             <div class="row" style="margin-top:2vh">
+
+              <!-- Metric Controls: Refresh Rate -->
               <div class="col-xs-12 col-md-3">
                 <label for="refreshCombo" class="label label-info">Refresh Rate</label>
                 <select name="refreshCombo" class="combobox form-control" ng-model="refreshRate">
@@ -44,6 +44,7 @@
                   <option value="600000">10 Minutes</option>
                 </select>
               </div>
+
               <!-- Metric Controls: Max Data Age -->
               <div class="col-xs-12 col-md-3">
                 <label for="dataAgeCombo" class="label label-info">Max Data Age</label>
@@ -58,6 +59,25 @@
                   <option value="3600000">1 Hour</option>
                 </select>
               </div>
+
+              <div class="dropdown dropdown-kebab-pf pull-right" style="margin-right:2vw">
+                <button class="btn btn-link dropdown-toggle" type="button" id="{{chart}}-kebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                  <span class="fa fa-ellipsis-v"></span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="{{chart}}-kebab">
+                  <li>
+                    <form name="renameForm" class="input-group" ng-submit="chartCtrl.rename(chartRename)">
+                      <input type="text" class="form-control" placeholder="Enter new chart name" ng-model="chartRename"/>
+                      <input type="submit" value="Rename chart"/>
+                    </form>
+                  </li>
+                  <li role="separator" class="divider"></li>
+                  <li>
+                    <a ng-click="chartCtrl.removeChart(chart)">Delete</a>
+                  </li>
+                </ul>
+              </div>
+
             </div>
 
             <div class="card-pf-body">
--- a/src/app/shared/services/multichart.service.js	Wed Jul 26 09:41:58 2017 -0400
+++ b/src/app/shared/services/multichart.service.js	Thu Jul 20 11:53:35 2017 -0400
@@ -121,7 +121,7 @@
   }
 
   getData (chartName) {
-    if (!this.charts.has(chartName)) {
+    if (!this.hasChart(chartName)) {
       return new Promise((resolve, reject) => reject(new Error('No such multichart ' + chartName)));
     }
 
@@ -148,6 +148,14 @@
       Promise.all(promises).then(() => resolve(res));
     });
   }
+
+  rename (from, to) {
+    if (!this.hasChart(from) || this.hasChart(to)) {
+      return;
+    }
+    this.charts.set(to, this.charts.get(from));
+    this.charts.delete(from);
+  }
 }
 
 angular
--- a/src/app/shared/services/multichart.service.spec.js	Wed Jul 26 09:41:58 2017 -0400
+++ b/src/app/shared/services/multichart.service.spec.js	Thu Jul 20 11:53:35 2017 -0400
@@ -295,4 +295,41 @@
     });
   });
 
+  describe('rename', () => {
+    it('should rename existing charts', () => {
+      svc.addChart('foo');
+      svc.addService('foo', 'foo-svc-A', () => new Promise(resolve => resolve(100)));
+
+      svc.rename('foo', 'bar');
+
+      svc.hasChart('foo').should.be.false();
+      svc.hasChart('bar').should.be.true();
+
+      svc.hasServiceForChart('bar', 'foo-svc-A').should.be.true();
+      return svc.getData('bar').should.be.fulfilledWith({
+        yData: [ 'foo-svc-A', 100 ]
+      });
+    });
+
+    it('should do nothing if chart does not already exist', () => {
+      svc.rename('foo', 'bar');
+      svc.hasChart('foo').should.be.false();
+      svc.hasChart('bar').should.be.false();
+    });
+
+    it('should do nothing if rename would overwrite', () => {
+      svc.addChart('foo');
+      svc.addService('foo', 'foo-svc', angular.noop);
+
+      svc.addChart('bar');
+      svc.addService('bar', 'bar-svc', angular.noop);
+
+      svc.rename('foo', 'bar');
+      svc.hasChart('foo').should.be.true();
+      svc.hasChart('bar').should.be.true();
+      svc.countServicesForChart('foo').should.equal(1);
+      svc.countServicesForChart('bar').should.equal(1);
+    });
+  });
+
 });