Some style tweaks and add fancy switches to profile detail directive …

…kinda like the old FMC
hawtio · Oct 11, 2013 · a1ee23b · a1ee23b
1 parent 8b29466
commit a1ee23b
Show file tree

Hide file tree

Showing 8 changed files with 371 additions and 12 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/container.html b/hawtio-web/src/main/webapp/app/fabric/html/container.html
@@ -65,7 +65,7 @@ <h2 style="display: inline-block; margin: 0"><i ng-class="statusIcon()"></i> Con
 
       <div class="row-fluid">
 
-        <div class="span5 container-profile-settings">
+        <div class="span4 offset1 container-profile-settings">
           <dl class="dl-horizontal container-detail-profiles">
             <div class="btn-group pull-right container-detail-profile-buttons">
               <button class="btn" ng-click="addProfileDialog.open()" title="Add new profiles to this container"><i class="icon-plus"></i> Add</button>
@@ -78,7 +78,7 @@ <h2 style="display: inline-block; margin: 0"><i ng-class="statusIcon()"></i> Con
           </dl>
         </div>
 
-        <div class="span6 container-settings">
+        <div class="span5 offset1 container-settings">
           <div class="tabbable hawtio-form-tabs">
 
             <div class="tab-pane" title="Status">

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/editFeatures.html b/hawtio-web/src/main/webapp/app/fabric/html/editFeatures.html
@@ -1,6 +1,6 @@
 <div class="controller-section" ng-controller="Fabric.FeatureEditController">
 
-  <div class="fabric-page-header row-fluid">
+  <div class="features fabric-page-header row-fluid">
       <div class="pull-left">
         <h2 class="inline">Profile: {{profileId}} : Features</h2>
       </div>

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/profileDetailsDirective.html b/hawtio-web/src/main/webapp/app/fabric/html/profileDetailsDirective.html
@@ -23,15 +23,36 @@ <h2 class="inline">Profile: {{row.id}}</h2>
 
     <div class="row-fluid profile-details">
 
-      <div class="span2">
+      <div class="span3">
+
         <ul class="unstyled">
-          <li ng-show="row.abstractProfile">
-            <strong>Abstract:</strong> {{row.abstractProfile}}
+          <li>
+            <p></p>
+            <label class="switch-light switch-ios" ng-click="changeAttribute('abstract', !row.abstract)">
+              <input type="checkbox" ng-checked="row.abstract">
+              <span>Abstract
+                <span>No</span>
+                <span>Yes</span>
+              </span>
+              <a></a>
+            </label>
+
           </li>
-          <li ng-show="row.locked">
-            <strong>Locked:</strong> {{row.locked}}
+          <li>
+            <p></p>
+            <label class="switch-light switch-ios" ng-click="changeAttribute('locked', !row.locked)">
+              <input type="checkbox" ng-checked="row.locked">
+              <span>Locked
+                <span>No</span>
+                <span>Yes</span>
+              </span>
+              <a></a>
+            </label>
+
           </li>
         </ul>
+
+
         <dl ng-show="row.parentIds.length > 0">
           <dt>Parents:</dt>
           <dd>
@@ -41,7 +62,7 @@ <h2 class="inline">Profile: {{row.id}}</h2>
                 <a href="#/wiki/branch/{{versionId}}/view/fabric/profiles/{{profilePath(profile)}}{{hash}}">{{profile}}</a>
               </li>
               <li>
-                <i class="clickable icon-edit" ng-click="showChangeParentsDialog()" title="Change parent profiles"></i>
+                <i class="clickable icon-edit green" ng-click="showChangeParentsDialog()" title="Change parent profiles"></i>
             </ul>
           </dd>
         </dl>
@@ -58,7 +79,7 @@ <h2 class="inline">Profile: {{row.id}}</h2>
       </div>
 
 
-      <div class="span8">
+      <div class="span9">
 
         <div class="tabbable hawtio-form-tabs" ng-model="activeTab">
 

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/profileSelector.html b/hawtio-web/src/main/webapp/app/fabric/html/profileSelector.html
@@ -29,7 +29,7 @@
 
                   <div class="inline-block profile-selector-name" ng-class="getSelectedClass(profile)">
                     <a href="" ng-click="goto(profile)" title="Details for {{profile.id}}"><i class="icon-book green"></i> {{profile.name}}</a>
-                    <a href="" class="profile-info" ng-show="showLinks" ng-click="goto(profile)"><i class="icon-question-sign clickable blue" title="Details for {{profile.id}}"></i></a>
+                    <a href="" class="profile-info" ng-show="showLinks" ng-click="goto(profile)"><i class="icon-info-sign clickable blue" title="Details for {{profile.id}}"></i></a>
                   </div>
                 </div>
               </li>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/profile.ts b/hawtio-web/src/main/webapp/app/fabric/js/profile.ts
@@ -132,7 +132,29 @@ module Fabric {
         notification('error', 'Failed to change parent profiles of ' + $scope.profileId + ' due to ' + response.error);
         Core.$apply($scope);
       });
-    }
+    };
+
+
+    $scope.changeAttribute = (attribute, value) => {
+      jolokia.request({
+        type: 'exec',
+        method: 'post',
+        mbean: Fabric.managerMBean,
+        operation: 'setProfileAttribute',
+        arguments: [$scope.versionId, $scope.profileId, attribute, value]
+      }, {
+        success: () => {
+          // TODO - we're secretly hiding that the ng-click event is firing twice...
+          // notification('success', "Set attribute " + attribute + " to " + value);
+          Core.$apply($scope);
+        },
+        error: (response) => {
+          console.log("Failed to set attribute " + attribute + " to " + value + " due to " + response.error);
+          // notification('error', "Failed to set attribute " + attribute + " to " + value + " due to " + response.error);
+          Core.$apply($scope);
+        }
+      });
+    };
 
 
     $scope.doChangeParents = () => {

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2490,3 +2490,8 @@ a.dashboard-link:hover {
   text-decoration: none;
 
 }
+
+.fabric-page-header.features {
+  margin-top: 10px;
+}
+