#456 Add details page for scr components.

hawtio · Aug 26, 2013 · 098fb3e · 098fb3e
1 parent 899dcea
commit 098fb3e
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 12 deletions.
diff --git a/hawtio-web/src/main/webapp/app/karaf/html/scr-component-details.html b/hawtio-web/src/main/webapp/app/karaf/html/scr-component-details.html
@@ -0,0 +1,100 @@
+<div>
+    <table class="overviewSection">
+        <tr ng-hide="hasFabric">
+            <td></td>
+            <td class="less-big">
+                <div class="btn-group">
+                    <button ng-disabled="selectedComponents.length == 0" class="btn" ng-click="activate()"><i
+                            class="icon-play-circle"></i> Activate
+                    </button>
+                    <button ng-disabled="selectedComponents.length == 0" class="btn" ng-click="deactivate()"><i
+                            class="icon-off"></i> Deactivate
+                    </button>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="pull-right"><strong>Id:</strong></td>
+            <td class="less-big">{{row.Id}}
+            </td>
+        </tr>
+        <tr>
+            <td class="pull-right"><strong>Name:</strong></td>
+            <td class="less-big">{{row.Name}}
+            </td>
+        </tr>
+        <tr>
+            <td class="pull-right"><strong>State:</strong></td>
+            <td class="less-big">{{row.State}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+            </td>
+            <td>
+                <div class="accordion" id="accordionProperties">
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionProperties"
+                               href="#collapseProperties">
+                                Properties
+                            </a>
+                        </div>
+                        <div id="collapseProperties" class="accordion-body collapse in">
+                            <table class="accordion-inner">
+                                <tr ng-repeat="(key, value) in row.Properties">
+                                    <td valign="top">{{key}}</td>
+                                    <td>{{value.Value}}</td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td>
+            </td>
+            <td>
+                <div class="accordion" id="accordionReferences">
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionReferences"
+                               href="#collapseReferences">
+                                References
+                            </a>
+                        </div>
+                        <div id="collapseReferences" class="accordion-body collapse in">
+                            <table class="accordion-inner">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Availability</th>
+                                    <th>Cardinality</th>
+                                    <th>Policy</th>
+                                    <th>Bound Services</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                    <tr ng-repeat="(key, value) in row.References">
+                                        <td valign="left" class="less-big">{{value.Name}}</td>
+                                        <td valign="left" class="less-big">{{value.Availability}}</td>
+                                        <td valign="left" class="less-big">{{value.Cardinality}}</td>
+                                        <td valign="left" class="less-big">{{value.Policy}}</td>
+                                        <td>
+                                            <ul>
+                                                <li ng-repeat="id in value['Bound Services']">
+                                                    <i class="icon-cog less-big text-info" id="bound.service.{{id}}">{{id}}</i>
+                                                </li>
+                                            </ul>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/karaf/html/scr-component.html b/hawtio-web/src/main/webapp/app/karaf/html/scr-component.html
@@ -0,0 +1,10 @@
+<div ng-controller="Karaf.ScrComponentController">
+    <div class="row-fluid">
+        <div class="span4">
+            <h1>{{row.id}}</h1>
+        </div>
+    </div>
+
+    <div ng-include src="'app/karaf/html/scr-component-details.html'"></div>
+
+</div>
diff --git a/...b/src/main/webapp/app/karaf/html/scr.html → ...webapp/app/karaf/html/scr-components.html b/...b/src/main/webapp/app/karaf/html/scr.html → ...webapp/app/karaf/html/scr-components.html
@@ -1,4 +1,4 @@
-<div ng-controller="Karaf.ScrController">
+<div ng-controller="Karaf.ScrComponentsController">
   <div class="row-fluid">
     <div class="pull-left">
       <form class="form-inline no-bottom-margin">

diff --git a/hawtio-web/src/main/webapp/app/karaf/js/helpers.ts b/hawtio-web/src/main/webapp/app/karaf/js/helpers.ts
@@ -138,6 +138,33 @@ module Karaf {
         return "Unknown";
     };
 
+    export function getAllComponents(workspace, jolokia) {
+        var scrMBean = getSelectionScrMBean(workspace)
+        var response = jolokia.request(
+            {
+                type: 'read', mbean: scrMBean,
+                arguments: []
+            });
+
+        //Check if the MBean provides the Components attribute.
+        if (!('Components' in response.value)) {
+            response = jolokia.request(
+                {
+                    type: 'exec', mbean: scrMBean, operation: 'listComponents()'
+                });
+            return createScrComponentsView(workspace, jolokia, response.value);
+        }
+        return response.value['Components'].values;
+    }
+
+    export function getComponentByName(workspace, jolokia, componentName) {
+        var components = getAllComponents(workspace, jolokia)
+        return components.find((c) => {
+            return c.Name == componentName;
+        });
+
+    }
+
     export function isComponentActive(workspace, jolokia, component) {
         var response =  jolokia.request(
             {

diff --git a/hawtio-web/src/main/webapp/app/karaf/js/karafPlugin.ts b/hawtio-web/src/main/webapp/app/karaf/js/karafPlugin.ts
@@ -4,7 +4,8 @@ module Karaf {
     $routeProvider.
             when('/osgi/server', {templateUrl: 'app/karaf/html/server.html'}).
             when('/osgi/features', {templateUrl: 'app/karaf/html/features.html'}).
-            when('/osgi/scr', {templateUrl: 'app/karaf/html/scr.html'}).
+            when('/osgi/scr-components', {templateUrl: 'app/karaf/html/scr-components.html'}).
+            when('/osgi/scr-component/:name', {templateUrl: 'app/karaf/html/scr-component.html'}).
             when('/osgi/feature/:name/:version', {templateUrl: 'app/karaf/html/feature.html'})
   }).
       run((workspace:Workspace, viewRegistry) => {

diff --git a/hawtio-web/src/main/webapp/app/karaf/js/scr-component.ts b/hawtio-web/src/main/webapp/app/karaf/js/scr-component.ts
@@ -0,0 +1,31 @@
+module Karaf {
+
+    export function ScrComponentController($scope, $location, workspace, jolokia, $routeParams) {
+
+        $scope.name = $routeParams.name;
+        populateTable();
+
+
+
+        function populateTable() {
+            $scope.row = getComponentByName(workspace, jolokia, $scope.name);
+            Core.$apply($scope);
+        }
+
+        $scope.activate = () => {
+            activateComponent(workspace, jolokia, $scope.row['Name'], function () {
+                console.log("Activated!")
+            }, function () {
+                console.log("Failed to activate!")
+            });
+        };
+
+        $scope.deactivate = () => {
+            deactivateComponent(workspace, jolokia, $scope.row['Name'], function () {
+                console.log("Deactivated!")
+            }, function () {
+                console.log("Failed to deactivate!")
+            });
+        };
+    }
+}
diff --git a/...o-web/src/main/webapp/app/karaf/js/scr.ts → ...ain/webapp/app/karaf/js/scr-components.ts b/...o-web/src/main/webapp/app/karaf/js/scr.ts → ...ain/webapp/app/karaf/js/scr-components.ts
@@ -1,6 +1,6 @@
 module Karaf {
 
-    export function ScrController($scope, $location, workspace, jolokia) {
+    export function ScrComponentsController($scope, $location, workspace, jolokia) {
 
         $scope.component = empty();
 
@@ -29,7 +29,7 @@ module Karaf {
                 {
                     field: 'Name',
                     displayName: 'Name',
-                    cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field)}}</div>',
+                    cellTemplate: '<div class="ngCellText"><a href="#/osgi/scr-component/{{row.entity.Name}}">{{row.getProperty(col.field)}}</a></div>',
                     width: 400
                 },
                 {
@@ -43,9 +43,7 @@ module Karaf {
 
         var scrMBean = Karaf.getSelectionScrMBean(workspace);
         if (scrMBean) {
-            Core.register(jolokia, $scope, {
-                type: 'exec', mbean: scrMBean, operation: 'listComponents()'
-            }, onSuccess(render));
+            render(getAllComponents(workspace, jolokia))
         }
 
         $scope.activate = () => {
@@ -76,9 +74,9 @@ module Karaf {
             ];
         }
 
-        function render(response) {
-            if (!Object.equal($scope.result, response.value)) {
-                $scope.components = Karaf.createScrComponentsView(workspace, jolokia, response.value);
+        function render(components) {
+            if (!Object.equal($scope.result, components)) {
+                $scope.components = components
                 $scope.result = $scope.components;
                 Core.$apply($scope);
             }

diff --git a/hawtio-web/src/main/webapp/app/osgi/html/layoutOsgi.html b/hawtio-web/src/main/webapp/app/osgi/html/layoutOsgi.html
@@ -17,8 +17,8 @@
     <li ng-class='{active : isActive("#/osgi/configuration")}'>
         <a ng-href="#/osgi/configurations{{hash}}">Configuration</a>
     </li>
-    <li ng-class='{active : isActive("#/osgi/scr")}' ng-show="isScrEnabled">
-      <a ng-href="#/osgi/scr{{hash}}">Declarative Services</a>
+    <li ng-class='{active : isActive("#/osgi/scr-components")}' ng-show="isScrEnabled">
+      <a ng-href="#/osgi/scr-components{{hash}}">Declarative Services</a>
     </li>
     <li ng-class='{active : isActive("#/osgi/fwk")}'>
         <a ng-href="#/osgi/fwk{{hash}}">Framework</a>