Add service list icons to give a hint as to wtf is running in a conta…

…iner
hawtio · Sep 18, 2013 · 5905699 · 5905699
1 parent 2b97b22
commit 5905699
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 4 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
@@ -212,6 +212,15 @@ <h2><i ng-class="statusIcon()"></i>Container: {{row.id}}</h2>
           <button class="btn" ng-hide="row.alive" ng-click="start()" title="Start"><i class="icon-play-circle"></i></button>
         </div>
       </div>
+      <div class="row-fluid dashboard-service-list">
+        <ul class="inline">
+          <li ng-repeat="service in services" ng-switch="service.type">
+            <i ng-switch-when="icon" class="{{service.src}}" title="{{service.title}}"></i>
+            <img ng-switch-when="img" ng-src="{{service.src}}" title="{{service.title}}">
+          </li>
+          <li ng-show="row.ensembleServer"><i class="icon-cloud" title="Fabric Ensemble Server"></i></li>
+        </ul>
+      </div>
       <div class="row-fluid container-status-dashboard" ng-click="gotoDetails()">
         <a class="status-icon" ng-href="#/fabric/container/{{containerId}}">
           <i ng-class="statusIcon()"></i>

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/containerList.html b/hawtio-web/src/main/webapp/app/fabric/html/containerList.html
@@ -17,6 +17,15 @@
         <i class="icon-cloud clickable" title="Ensemble member" ng-click="showContainer(container)" ng-show="isEnsembleContainer(container.id)"></i>
       </div>
 
+      <div class="box-middle">
+        <ul class="inline">
+          <li ng-repeat="service in container.services" ng-switch="service.type">
+            <i ng-switch-when="icon" class="{{service.src}}" title="{{service.title}}"></i>
+            <img ng-switch-when="img" ng-src="{{service.src}}" title="{{service.title}}">
+          </li>
+        </ul>
+      </div>
+
       <div class="box-right">
 
         <i class="icon-plus clickable" ng-show="container.root && container.alive" title="Create a new child container" ng-click="createChildContainer(container)"></i>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/container.ts b/hawtio-web/src/main/webapp/app/fabric/js/container.ts
@@ -141,7 +141,7 @@ module Fabric {
 
     $scope.getArguments = () => {
       if ($scope.inDashboard) {
-        return [$scope.containerId, ['id', 'versionId', 'profileIds', 'provisionResult', 'jolokiaUrl', 'alive']];
+        return [$scope.containerId, ['id', 'versionId', 'profileIds', 'provisionResult', 'jolokiaUrl', 'alive', 'jmxDomains', 'ensembleServer']];
       }
       return [$scope.containerId];
     };
@@ -207,7 +207,7 @@ module Fabric {
         $scope.responseJson = responseJson;
         $scope.row = response.value;
         if ($scope.row) {
-          if ($scope.row.provisionException !== null) {
+          if (angular.isDefined($scope.row.provisionException) && angular.isString($scope.row.provisionException)) {
             $scope.row.provisionExceptionArray = $scope.row.provisionException.lines();
           }
           $scope.services = getServiceList($scope.row);

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/containerDirective.ts b/hawtio-web/src/main/webapp/app/fabric/js/containerDirective.ts
@@ -10,7 +10,7 @@ module Fabric {
 
     public controller = ($scope, $element, $attrs, jolokia, $location, $templateCache) => {
 
-      $scope.containerArgs = ["id", "alive", "parentId", "profileIds", "versionId", "provisionResult", "jolokiaUrl", "root"];
+      $scope.containerArgs = ["id", "alive", "parentId", "profileIds", "versionId", "provisionResult", "jolokiaUrl", "root", 'jmxDomains'];
       $scope.containersOp = 'containers(java.util.List)';
       $scope.ensembleContainerIdListOp = 'EnsembleContainers';
 
@@ -45,6 +45,7 @@ module Fabric {
           }
 
           newContainers.each((container) => {
+            container.services = getServiceList(container);
             var c = $scope.containers.find((c) => { return c.id === container.id; });
             if (c) {
               container['selected'] = c.selected;

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/helpers.ts b/hawtio-web/src/main/webapp/app/fabric/js/helpers.ts
@@ -220,6 +220,13 @@ module Fabric {
     if (angular.isDefined(container) && angular.isDefined(container.jmxDomains) && angular.isArray(container.jmxDomains)) {
 
       container.jmxDomains.forEach((domain) => {
+        if (domain === "org.fusesource.insight") {
+          answer.push({
+            title: "Fuse Insight",
+            type: "icon",
+            src: "icon-eye-open"
+          })
+        }
         if (domain === "org.apache.activemq") {
           answer.push({
             title: "Apache ActiveMQ",

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -1231,14 +1231,30 @@ li.stacktrace {
   position: absolute;
   left: 11px;
   bottom: 14%;
-  right: 0px;
 }
 .box .box-right {
   display: inline-block;
   position: absolute;
   right: 11px;
   bottom: 14%;
 }
+.box .box-middle {
+  display: inline-block;
+  position: absolute;
+  right: 60px;
+  bottom: 14%;
+}
+
+.box-middle ul.inline li {
+  opacity: 0.5;
+  transition: opacity 0.5s;
+}
+
+.box-middle ul.inline li:hover{
+  opacity: 1;
+}
+
+
 .section-header {
   background-color: #FAFAFA;
   background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
@@ -1668,3 +1684,23 @@ dd.file-list {
 .status-icon:hover {
   text-decoration: none;
 }
+
+.dashboard-service-list {
+  position: relative;
+}
+
+.dashboard-service-list ul.inline {
+  position: absolute;
+  top: 25px;
+  z-index: 10;
+}
+
+.dashboard-service-list ul.inline li {
+  opacity: 0.5;
+  transition: opacity 1s;
+}
+
+.dashboard-service-list ul.inline li:hover {
+  opacity: 1.0;
+}
+