Add editable property fields to container detail page, also add provi…

…sion list with filter
hawtio · Jun 19, 2013 · 2906ef8 · 2906ef8
1 parent 635130f
commit 2906ef8
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 8 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
@@ -87,37 +87,37 @@ <h1>{{row.id}}</h1>
       <dl class="dl-horizontal">
         <dt>Location:</dt>
         <dd>
-          {{row.location}}
+          <editable-property ng-model="row" property="location" on-save="updateContainerProperty('location', row)"></editable-property>
         </dd>
       </dl>
       <dl class="dl-horizontal">
         <dt>Local IP:</dt>
         <dd>
-          {{row.localIp}}
+          <editable-property ng-model="row" property="localIp" on-save="updateContainerProperty('localIp', row)"></editable-property>
         </dd>
       </dl>
       <dl class="dl-horizontal">
         <dt>Local Hostname:</dt>
         <dd>
-          {{row.localHostName}}
+          <editable-property ng-model="row" property="localHostname" on-save="updateContainerProperty('localHostname', row)"></editable-property>
         </dd>
       </dl>
       <dl class="dl-horizontal">
         <dt>Public IP:</dt>
         <dd>
-          {{row.publicIp}}
+          <editable-property ng-model="row" property="publicIp" on-save="updateContainerProperty('publicIp', row)"></editable-property>
         </dd>
       </dl>
       <dl class="dl-horizontal">
         <dt>Public Hostname:</dt>
         <dd>
-          {{row.publicHostname}}
+          <editable-property ng-model="row" property="publicHostname" on-save="updateContainerProperty('publicHostname', row)"></editable-property>
         </dd>
       </dl>
       <dl class="dl-horizontal">
         <dt>Manual IP:</dt>
         <dd>
-          {{row.manualIp}}
+          <editable-property ng-model="row" property="manualIp" on-save="updateContainerProperty('manualIp', row)"></editable-property>
         </dd>
       </dl>
       <dl class="dl-horizontal">
@@ -126,6 +126,19 @@ <h1>{{row.id}}</h1>
           {{row.resolver}}
         </dd>
       </dl>
+      <dl class="dl-horizontal">
+        <dt>Minimum Port:</dt>
+        <dd>
+          <editable-property ng-model="row" property="minimumPort" on-save="updateContainerProperty('minimumPort', row)"></editable-property>
+        </dd>
+      </dl>
+      <dl class="dl-horizontal">
+        <dt>Maximum Port:</dt>
+        <dd>
+          <editable-property ng-model="row" property="maximumPort" on-save="updateContainerProperty('maximumPort', row)"></editable-property>
+
+        </dd>
+      </dl>
     </div>
 
     <div class="span4">
@@ -137,7 +150,7 @@ <h1>{{row.id}}</h1>
         </div>
       </dl>
       <dl class="dl-horizontal">
-        <div class="gridStyle" ng-grid="profilesGridOptions"></div>
+        <div style="min-height: 300px;" ng-grid="profilesGridOptions"></div>
       </dl>
     </div>
   </div>
@@ -150,6 +163,22 @@ <h1>{{row.id}}</h1>
           <ul>
             <li ng-show="row.sshUrl"><strong>SSH: </strong>{{row.sshUrl}}</li>
             <li ng-show="row.jmxUrl"><strong>JMX: </strong>{{row.jmxUrl}}</li>
+            <li ng-show="row.jolokiaUrl"><strong>Jolokia: </strong>{{row.jolokiaUrl}}</li>
+          </ul>
+        </dd>
+      </dl>
+    </div>
+  </div>
+
+  <div class="row-fluid">
+    <div class="span8">
+      <dl>
+        <dt>Provision List: 
+          <input type="text" class="search-query" placeholder="Filter..." ng-model="provisionListFilter">
+        </dt>
+        <dd>
+          <ul ng-repeat="item in row.provisionList">
+            <li ng-class="getClass(item)">{{item}}</li>
           </ul>
         </dd>
       </dl>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/container.ts b/hawtio-web/src/main/webapp/app/fabric/js/container.ts
@@ -90,6 +90,27 @@ module Fabric {
       ]
     };
 
+
+    $scope.updateContainerProperty = (propertyName, row) => {
+      setContainerProperty(jolokia, row.id, propertyName, row[propertyName], () => { $
+        $scope.$apply(); 
+      }, (response) => {
+        notification('error', 'Failed to set container property due to : ' + response.error);
+        $scope.$apply(); 
+      });
+    }
+
+
+    $scope.getClass = (item) => {
+      if (!$scope.provisionListFilter) {
+        return 'no-filter';
+      } else if (item.has($scope.provisionListFilter)) {
+        return 'match-filter';
+      } else {
+        return 'no-match-filter';
+      }
+    }
+
     $scope.addProfiles = () => {
       console.log("Adding profiles: " + $scope.addProfileGridOptions.selectedItems);
 

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/helpers.ts b/hawtio-web/src/main/webapp/app/fabric/js/helpers.ts
@@ -20,6 +20,10 @@ module Fabric {
     }
   }
 
+  export function setContainerProperty(jolokia, containerId, property, value, success, error) {
+    doAction('setContainerProperty(java.lang.String, java.lang.String, java.lang.Object)', jolokia, [containerId, property, value], success, error);
+  }
+
   export function deleteConfigFile(jolokia, version, profile, pid, success, error) {
     doAction('deleteConfigurationFile(java.lang.String, java.lang.String, java.lang.String)', jolokia, [version, profile, pid], success, error);
   }

diff --git a/hawtio-web/src/main/webapp/css/site-base.less b/hawtio-web/src/main/webapp/css/site-base.less
@@ -1558,4 +1558,10 @@ td.deleting {
 
 td.adding {
   background-color: Aquamarine !important;
-}
+}
+
+.no-match-filter {
+  display: none;
+}
+
+