Finish up and fix #521

hawtio · Sep 19, 2013 · b28d1e4 · b28d1e4
1 parent 650e433
commit b28d1e4
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 6 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -390,6 +390,13 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
             );
           };
         }]).
+        directive('noClick', () => {
+          return function($scope, $element, $attrs) {
+            $element.click((event) => {
+              event.preventDefault();
+            });
+          }
+        }).
         directive('gridStyle', function($window) {
           return new Core.GridStyle($window);
         });

diff --git a/hawtio-web/src/main/webapp/app/dashboard/html/editDashboards.html b/hawtio-web/src/main/webapp/app/dashboard/html/editDashboards.html
@@ -10,6 +10,9 @@
                 title="Create a copy of the selected dashboard(s)" data-placement="bottom">
           <i class="icon-copy"></i> Duplicate
         </button>
+        <button class="btn" ng-show="usingFabric()" ng-disabled="hasSelection()" ng-click="duplicateToProfiles()" title="Copy selected dashboards to another profile">
+          <i class="icon-copy"></i> Duplicate to profiles
+        </button>
         <button class="btn" ng-disabled="hasSelection()" ng-click="delete()"><i
                 class="icon-remove"></i> Delete
         </button>
@@ -41,4 +44,26 @@
       <div class="gridStyle" ng-grid="gridOptions"></div>
     </div>
   </div>
+
+
+  <div modal="duplicateDashboards.show">
+    <form name="addProfile" class="form-horizontal no-bottom-margin" ng-submit="doDuplicateToProfiles()">
+      <div class="modal-header"><h4>Copy dashboards</h4></div>
+      <div id="dialog-body" class="modal-body">
+        <label>Select one or more profiles to copy the dashboards to: </label>
+
+        <div fabric-profile-selector="selectedProfilesDialog" version-id="container.versionId"></div>
+
+      </div>
+      <div class="modal-footer">
+        <input class="btn btn-success" ng-disabled="selectedProfilesDialog.length == 0" type="submit"
+               value="Copy">
+        <input class="btn btn-primary" ng-click="duplicateDashboards.close()" value="Cancel">
+      </div>
+    </form>
+  </div>
+
+
+
+
 </div>
diff --git a/hawtio-web/src/main/webapp/app/dashboard/js/editDashboards.ts b/hawtio-web/src/main/webapp/app/dashboard/js/editDashboards.ts
@@ -1,8 +1,10 @@
 module Dashboard {
 
-  export function EditDashboardsController($scope, $routeParams, $route, $location, workspace:Workspace, dashboardRepository:DefaultDashboardRepository) {
+  export function EditDashboardsController($scope, $routeParams, $route, $location, workspace:Workspace, dashboardRepository:DefaultDashboardRepository, jolokia) {
     $scope.selectedItems = [];
     $scope.repository = dashboardRepository;
+    $scope.duplicateDashboards = new Core.Dialog();
+    $scope.selectedProfilesDialog = [];
 
     // TODO for case where we navigate to the add view
     // for some reason the route update event isn't enough...
@@ -32,7 +34,7 @@ module Dashboard {
         {
           field: 'title',
           displayName: 'Dashboard',
-          cellTemplate: '<div class="ngCellText"><a ng-href="#/dashboard/id/{{row.getProperty(' + "'id'" + ')}}{{hash}}">{{row.getProperty(col.field)}}</a></div>'
+          cellTemplate: '<div class="ngCellText"><a ng-href="#/dashboard/id/{{row.getProperty(' + "'id'" + ')}}{{hash}}"><editable-property class="inline-block" on-save="onDashRenamed(row.entity)" property="title" ng-model="row.entity"></editable-property></a></div>'
         },
         {
           field: 'group',
@@ -41,6 +43,18 @@ module Dashboard {
       ]
     };
 
+    $scope.onDashRenamed = (dash) => {
+      dashboardRepository.putDashboards([dash], "Renamed dashboard", Dashboard.onOperationComplete);
+      var d = $scope.dashboards.find((d) => {
+        return d.id === dash.id;
+      });
+      if (d) {
+        d.title = dash.title;
+      }
+      setTimeout(updateData, 50);
+    };
+
+
     // helpers so we can enable/disable parts of the UI depending on how
     // dashboard data is stored
     $scope.usingGit = () => {
@@ -56,6 +70,9 @@ module Dashboard {
     };
 
     if ($scope.usingFabric()) {
+
+      $scope.container = Fabric.getCurrentContainer(jolokia, ['versionId', 'profileIds']);
+
       $scope.gridOptions.columnDefs.add([{
         field: 'versionId',
         displayName: 'Version'
@@ -75,13 +92,49 @@ module Dashboard {
       setTimeout(updateData, 50);
     });
 
+
     $scope.goBack = () => {
       var href = Core.trimLeading($scope.url, "#");
       if (href) {
         $location.url(href);
       }
     };
 
+
+    $scope.duplicateToProfiles = () => {
+      $scope.duplicateDashboards.open();
+    };
+
+
+    $scope.doDuplicateToProfiles = () => {
+      $scope.duplicateDashboards.close();
+
+      var newDashboards = [];
+
+      $scope.selectedItems.forEach((dashboard) => {
+        $scope.selectedProfilesDialog.forEach((profile) => {
+          var newDash = dashboardRepository.cloneDashboard(dashboard);
+          newDash['profileId'] = profile.id;
+          newDash['title'] = dashboard.title;
+          newDashboards.push(newDash);
+        });
+      });
+
+      var commitMessage = "Duplicating " + $scope.selectedItems.length + " dashboards to " + $scope.selectedProfilesDialog.length + " profiles";
+
+      dashboardRepository.putDashboards(newDashboards, commitMessage, Dashboard.onOperationComplete);
+
+      newDashboards.forEach((newDash) => {
+        console.log("Checking: ", newDash.profileId);
+        console.log("Dash: ", newDash);
+        if ($scope.container.profileIds.any(newDash.profileId)) {
+          dashboards().push(newDash);
+          //$scope.selectedItems.push(newDash);
+        }
+      });
+
+    };
+
     $scope.addViewToDashboard = () => {
       var nextHref = null;
       angular.forEach($scope.selectedItems, (selectedItem) => {
@@ -226,6 +279,8 @@ module Dashboard {
       }
       // TODO can we avoid reloading these on startup from the navbar.ts as well?
       dashboardRepository.getDashboards(dashboardLoaded);
+
+      Core.$apply($scope);
     }
 
     function dashboardLoaded(dashboards) {

diff --git a/hawtio-web/src/main/webapp/app/ui/html/editableProperty.html b/hawtio-web/src/main/webapp/app/ui/html/editableProperty.html
@@ -1,7 +1,7 @@
 <div ng-mouseenter="showEdit()" ng-mouseleave="hideEdit()" class="ep" ng-hide="editing">
-  {{text}}&nbsp;<i class="ep-edit icon-pencil" title="Edit this item" ng-click="doEdit()"></i>
+  {{text}}&nbsp;<i class="ep-edit icon-pencil" title="Edit this item" ng-click="doEdit()" no-click></i>
 </div>
-<div class="ep" ng-show="editing">
+<div class="ep" ng-show="editing" no-click>
   <form class="form-inline no-bottom-margin" ng-submit="saveEdit()">
     <fieldset>
       <input type="text" value="{{text}}">

diff --git a/hawtio-web/src/main/webapp/app/ui/js/editablePropertyDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/editablePropertyDirective.ts
@@ -39,6 +39,14 @@ module UI {
           $(element.find(".icon-pencil")[0]).hide();
         };
 
+        scope.$watch('editing', (newValue, oldValue) => {
+          if (newValue !== oldValue) {
+            if (newValue) {
+              $(element.find('input[type=text]')).focus();
+            }
+          }
+        });
+
         scope.doEdit = function () {
           scope.editing = true;
         };

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -355,23 +355,51 @@ li.attr-column {
   left: 41%;
   bottom: 5px;
 }
+
+editable-property {
+  position: relative;
+}
+
+.ep[ng-show=editing] {
+  position: absolute;
+  top: -20px;
+  padding: 0;
+  background: white;
+  border-bottom: 1px solid #d4d4d4;
+  z-index: 10000;
+  width: 278px;
+  border: 1px solid #cecdcd;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+}
+
+.ep[ng-show=editing] form fieldset i {
+  position: relative;
+  top: 2px;
+}
+
 .ep > i {
   cursor: pointer;
   opacity: .25;
   transition: opacity 0.25s ease-in-out;
   -moz-transition: opacity 0.25s ease-in-out;
   -webkit-transition: opacity 0.25s ease-in-out;
 }
+
+.ep form fieldset input {
+  border: 0;
+}
+
 .ep > i:hover {
   opacity: 1;
 }
+
 .ep form fieldset i {
   cursor: pointer;
   padding-left: 5px;
 }
+
 .ep form.no-bottom-margin {
-  margin-top: 4px;
-  margin-bottom: 4px;
+  margin: 0;
 }
 .ngFooterPanel {
   background: inherit;