Merge pull request #102 from houssemba/master

Add Docker top feature
2015-04-02 09:40:01 -05:00 · 2015-04-02 09:40:01 -05:00 · 964eac6d53
parent d6c524f960 ede37e2e79
commit 964eac6d53
8 changed files with 307 additions and 182 deletions
--- a/app/app.js
+++ b/app/app.js
@ -1,12 +1,34 @@
-angular.module('dockerui', ['dockerui.templates', 'ngRoute', 'dockerui.services', 'dockerui.filters', 'masthead', 'footer', 'dashboard', 'container', 'containers', 'images', 'image', 'startContainer', 'sidebar', 'info', 'builder', 'containerLogs'])
+angular.module('dockerui', ['dockerui.templates', 'ngRoute', 'dockerui.services', 'dockerui.filters', 'masthead', 'footer', 'dashboard', 'container', 'containers', 'images', 'image', 'startContainer', 'sidebar', 'info', 'builder', 'containerLogs', 'containerTop'])
    .config(['$routeProvider', function ($routeProvider) {
        'use strict';
-        $routeProvider.when('/', {templateUrl: 'app/components/dashboard/dashboard.html', controller: 'DashboardController'});
-        $routeProvider.when('/containers/', {templateUrl: 'app/components/containers/containers.html', controller: 'ContainersController'});
-        $routeProvider.when('/containers/:id/', {templateUrl: 'app/components/container/container.html', controller: 'ContainerController'});
-        $routeProvider.when('/containers/:id/logs/', {templateUrl: 'app/components/containerLogs/containerlogs.html', controller: 'ContainerLogsController'});
-        $routeProvider.when('/images/', {templateUrl: 'app/components/images/images.html', controller: 'ImagesController'});
-        $routeProvider.when('/images/:id*/', {templateUrl: 'app/components/image/image.html', controller: 'ImageController'});
+        $routeProvider.when('/', {
+            templateUrl: 'app/components/dashboard/dashboard.html',
+            controller: 'DashboardController'
+        });
+        $routeProvider.when('/containers/', {
+            templateUrl: 'app/components/containers/containers.html',
+            controller: 'ContainersController'
+        });
+        $routeProvider.when('/containers/:id/', {
+            templateUrl: 'app/components/container/container.html',
+            controller: 'ContainerController'
+        });
+        $routeProvider.when('/containers/:id/logs/', {
+            templateUrl: 'app/components/containerLogs/containerlogs.html',
+            controller: 'ContainerLogsController'
+        });
+        $routeProvider.when('/containers/:id/top', {
+            templateUrl: 'app/components/containerTop/containerTop.html',
+            controller: 'ContainerTopController'
+        });
+        $routeProvider.when('/images/', {
+            templateUrl: 'app/components/images/images.html',
+            controller: 'ImagesController'
+        });
+        $routeProvider.when('/images/:id*/', {
+            templateUrl: 'app/components/image/image.html',
+            controller: 'ImageController'
+        });
        $routeProvider.when('/info', {templateUrl: 'app/components/info/info.html', controller: 'InfoController'});
        $routeProvider.otherwise({redirectTo: '/'});
    }])
--- a/app/components/container/container.html
+++ b/app/components/container/container.html
@ -3,7 +3,8 @@
    <div ng-if="!container.edit">
        <h4>Container: {{ container.Name }}
            <button class="btn btn-primary"
-                    ng-click="container.edit = true;">Rename</button>
+                    ng-click="container.edit = true;">Rename
+            </button>
        </h4>
    </div>
    <div ng-if="container.edit">
@ -11,7 +12,8 @@
            Container:
            <input type="text" ng-model="container.newContainerName">
            <button class="btn btn-success"
-                    ng-click="renameContainer()">Edit</button>
+                    ng-click="renameContainer()">Edit
+            </button>
            <button class="btn btn-danger"
                    ng-click="container.edit = false;">&times;</button>
        </h4>
@ -20,19 +22,24 @@
    <div class="btn-group detail">
        <button class="btn btn-success"
                ng-click="start()"
-            ng-show="!container.State.Running">Start</button>
+                ng-show="!container.State.Running">Start
+        </button>
        <button class="btn btn-warning"
                ng-click="stop()"
-            ng-show="container.State.Running && !container.State.Paused">Stop</button>
+                ng-show="container.State.Running && !container.State.Paused">Stop
+        </button>
        <button class="btn btn-danger"
                ng-click="kill()"
-            ng-show="container.State.Running && !container.State.Paused">Kill</button>
+                ng-show="container.State.Running && !container.State.Paused">Kill
+        </button>
        <button class="btn btn-info"
                ng-click="pause()"
-            ng-show="container.State.Running && !container.State.Paused">Pause</button>
+                ng-show="container.State.Running && !container.State.Paused">Pause
+        </button>
        <button class="btn btn-success"
                ng-click="unpause()"
-            ng-show="container.State.Running && container.State.Paused">Unpause</button>
+                ng-show="container.State.Running && container.State.Paused">Unpause
+        </button>
    </div>

    <table class="table table-striped">
@ -118,6 +125,10 @@
            <td>Logs:</td>
            <td><a href="#/containers/{{ container.Id }}/logs">stdout/stderr</a></td>
        </tr>
+        <tr>
+            <td>Top:</td>
+            <td><a href="#/containers/{{ container.Id }}/top">Top</a></td>
+        </tr>
        </tbody>
    </table>

--- a/app/components/containerTop/containerTop.html
+++ b/app/components/containerTop/containerTop.html
@ -0,0 +1,19 @@
+<div class="containerTop">
+    <div class="form-group col-xs-2">
+        <input type="text" class="form-control" placeholder="[options] (aux)" ng-model="ps_args">
+    </div>
+    <button type="button" class="btn btn-default" ng-click="getTop()">Submit</button>
+
+    <table class="table table-striped">
+        <thead>
+        <tr>
+            <th ng-repeat="title in containerTop.Titles">{{title}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="processInfos in containerTop.Processes">
+            <td ng-repeat="processInfo in processInfos track by $index">{{processInfo}}</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
--- a/app/components/containerTop/containerTopController.js
+++ b/app/components/containerTop/containerTopController.js
@ -0,0 +1,19 @@
+angular.module('containerTop', [])
+    .controller('ContainerTopController', ['$scope', '$routeParams', 'ContainerTop', 'ViewSpinner', function ($scope, $routeParams, ContainerTop, ViewSpinner) {
+        $scope.ps_args = '';
+
+        /**
+         * Get container processes
+         */
+        $scope.getTop = function () {
+            ViewSpinner.spin();
+            ContainerTop.get($routeParams.id, {
+                ps_args: $scope.ps_args
+            }, function (data) {
+                $scope.containerTop = data;
+                ViewSpinner.stop();
+            });
+        };
+
+        $scope.getTop();
+    }]);
--- a/app/shared/services.js
+++ b/app/shared/services.js
@ -27,13 +27,32 @@ angular.module('dockerui.services', ['ngResource'])
                $http({
                    method: 'GET',
                    url: Settings.url + '/containers/' + id + '/logs',
-                    params: {'stdout': params.stdout || 0, 'stderr': params.stderr || 0, 'timestamps': params.timestamps || 0, 'tail': params.tail || 'all'}
+                    params: {
+                        'stdout': params.stdout || 0,
+                        'stderr': params.stderr || 0,
+                        'timestamps': params.timestamps || 0,
+                        'tail': params.tail || 'all'
+                    }
                }).success(callback).error(function (data, status, headers, config) {
                    console.log(error, data);
                });
            }
        };
    })
+    .factory('ContainerTop', function ($http, Settings) {
+        'use strict';
+        return {
+            get: function (id, params, callback, errorCallback) {
+                $http({
+                    method: 'GET',
+                    url: Settings.url + '/containers/' + id + '/top',
+                    params: {
+                        ps_args: params.ps_args
+                    }
+                }).success(callback);
+            }
+        };
+    })
    .factory('Image', function ($resource, Settings) {
        'use strict';
        // Resource for docker images
@ -97,8 +116,12 @@ angular.module('dockerui.services', ['ngResource'])
        var target = document.getElementById('view');

        return {
-            spin: function() { spinner.spin(target); },
-            stop: function() { spinner.stop(); }
+            spin: function () {
+                spinner.spin(target);
+            },
+            stop: function () {
+                spinner.stop();
+            }
        };
    })
    .factory('Messages', function ($rootScope) {
--- a/test/unit/app/components/containerController.spec.js
+++ b/test/unit/app/components/containerController.spec.js
@ -27,7 +27,7 @@ describe('ContainerController', function() {
        });
    }

-    it("a correct create request to the Docker remote API", function () {
+    it("a correct rename request to the Docker remote API", function () {

        $routeParams.id = 'b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f';
        $scope.container = {
--- a/test/unit/app/components/containerTopController.spec.js
+++ b/test/unit/app/components/containerTopController.spec.js
@ -0,0 +1,31 @@
+describe("ContainerTopController", function () {
+    var $scope, $httpBackend, $routeParams;
+
+    beforeEach(angular.mock.module('dockerui'));
+
+    beforeEach(inject(function (_$rootScope_, _$httpBackend_, $controller, _$routeParams_) {
+        $scope = _$rootScope_.$new();
+        $httpBackend = _$httpBackend_;
+        $routeParams = _$routeParams_;
+        $routeParams.id = 'b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f';
+        $controller('ContainerTopController', {
+            '$scope': $scope,
+            '$routeParams': $routeParams
+        });
+    }));
+
+    it("should test controller initialize", function () {
+        $httpBackend.expectGET('dockerapi/containers/b17882378cee8ec0136f482681b764cca430befd52a9bfd1bde031f49b8bba9f/top?ps_args=').respond(200);
+        expect($scope.ps_args).toBeDefined();
+        $httpBackend.flush();
+    });
+
+    it("a correct top request to the Docker remote API", function () {
+        $httpBackend.expectGET('dockerapi/containers/' + $routeParams.id + '/top?ps_args=').respond(200);
+        $routeParams.id = '123456789123456789123456789';
+        $scope.ps_args = 'aux';
+        $httpBackend.expectGET('dockerapi/containers/' + $routeParams.id + '/top?ps_args=' + $scope.ps_args).respond(200);
+        $scope.getTop();
+        $httpBackend.flush();
+    });
+});