Progress on Networks.

app/app.js

@@ -1,4 +1,26 @@
-angular.module('dockerui', ['dockerui.templates', 'ngRoute', 'dockerui.services', 'dockerui.filters', 'masthead', 'footer', 'dashboard', 'container', 'containers', 'containersNetwork', 'images', 'image', 'pullImage', 'startContainer', 'sidebar', 'info', 'builder', 'containerLogs', 'containerTop', 'events', 'stats'])
+angular.module('dockerui', [
+    'dockerui.templates',
+    'ngRoute',
+    'dockerui.services',
+    'dockerui.filters',
+    'masthead',
+    'footer',
+    'dashboard',
+    'container',
+    'containers',
+    'containersNetwork',
+    'images',
+    'image',
+    'pullImage',
+    'startContainer',
+    'sidebar',
+    'info',
+    'builder',
+    'containerLogs',
+    'containerTop',
+    'events',
+    'stats',
+    'networks'])
     .config(['$routeProvider', function ($routeProvider) {
         'use strict';
         $routeProvider.when('/', {

app/components/masthead/masthead.html

@@ -5,6 +5,7 @@
         <li><a href="#/containers/">Containers</a></li>
         <li><a href="#/containers_network/">Containers Network</a></li>
         <li><a href="#/images/">Images</a></li>
+        <li><a href="#/networks/">Networks</a></li>
         <li><a href="#/info/">Info</a></li>
     </ul>
 </div>

app/components/networks/networks.html

@@ -0,0 +1,80 @@
+<h2>Networks:</h2>
+
+<div>
+    <ul class="nav nav-pills pull-left">
+        <li class="dropdown">
+            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b
+                    class="caret"></b></a>
+            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
+                <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
+            </ul>
+        </li>
+        <!--<li><a data-toggle="modal" data-target="#pull-modal" href="">Pull</a></li>-->
+    </ul>
+
+    <div class="pull-right form-inline">
+        <input type="text" class="form-control" id="filter" placeholder="Filter" ng-model="filter"/> <label
+            class="sr-only" for="filter">Filter</label>
+    </div>
+</div>
+<table class="table table-striped">
+    <thead>
+    <tr>
+        <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()"/> Select</th>
+        <th>Name</th>
+        <th>Id</th>
+        <th>Scope</th>
+        <th>Driver</th>
+        <th>IPAM Driver</th>
+        <th>IPAM Subnet</th>
+        <th>IPAM Gateway</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="network in networks | filter:filter | orderBy:predicate">
+        <td><input type="checkbox" ng-model="image.Checked"/></td>
+        <td><a href="#/networks/{{ network.Id }}/">{{ network.Name|truncate:20}}</a></td>
+        <td>{{ network.Id }}</td>
+        <td>{{ network.Scope }}</td>
+        <td>{{ network.Driver }}</td>
+        <td>{{ network.IPAM.Driver }}</td>
+        <td>{{ network.IPAM.Config[0].Subnet }}</td>
+        <td>{{ network.IPAM.Config[0].Gateway }}</td>
+    </tr>
+    </tbody>
+</table>
+<div class="row">
+    <div class="col-xs-offset-3 col-xs-6">
+        <form role="form" class="">
+            <div class="form-group">
+                <label>Name:</label>
+                <input type="text" placeholder='isolated_nw'
+                       ng-model="createNetworkConfig.Name" class="form-control"/>
+            </div>
+            <div class="form-group">
+                <label>Driver:</label>
+                <input type="text" placeholder='bridge'
+                       ng-model="createNetworkConfig.Driver" class="form-control"/>
+            </div>
+            <div class="form-group">
+                <label>Subnet:</label>
+                <input type="text" placeholder='172.20.0.0/16'
+                       ng-model="createNetworkConfig.Subnet" class="form-control"/>
+            </div>
+            <div class="form-group">
+                <label>IPRange:</label>
+                <input type="text" placeholder='172.20.10.0/24'
+                       ng-model="createNetworkConfig.IPRange" class="form-control"/>
+            </div>
+            <div class="form-group">
+                <label>Gateway:</label>
+                <input type="text" placeholder='172.20.10.11'
+                       ng-model="createNetworkConfig.Gateway" class="form-control"/>
+            </div>
+            <button type="button" class="btn btn-success btn-sm"
+                    ng-click="addNetwork(createNetworkConfig)">
+                Create Network
+            </button>
+        </form>
+    </div>
+</div>

app/components/networks/networksController.js

@@ -0,0 +1,50 @@
+angular.module('networks', []).config(['$routeProvider', function ($routeProvider) {
+    $routeProvider.when('/networks', {
+        templateUrl: 'app/components/networks/networks.html',
+        controller: 'NetworksController'
+    });
+}]).controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages',
+    function ($scope, Network, ViewSpinner, Messages) {
+        $scope.toggle = false;
+        //$scope.predicate = '-Created';
+
+        $scope.removeAction = function () {
+            ViewSpinner.spin();
+            var counter = 0;
+            var complete = function () {
+                counter = counter - 1;
+                if (counter === 0) {
+                    ViewSpinner.stop();
+                }
+            };
+            angular.forEach($scope.networks, function (network) {
+                if (network.Checked) {
+                    counter = counter + 1;
+                    Network.remove({id: network.Id}, function (d) {
+                        Messages.send("Network deleted", resource.Deleted);
+                        var index = $scope.networks.indexOf(network);
+                        $scope.networks.splice(index, 1);
+                        complete();
+                    }, function (e) {
+                        Messages.error("Failure", e.data);
+                        complete();
+                    });
+                }
+            });
+        };
+
+        $scope.toggleSelectAll = function () {
+            angular.forEach($scope.images, function (i) {
+                i.Checked = $scope.toggle;
+            });
+        };
+
+        ViewSpinner.spin();
+        Network.query({}, function (d) {
+            $scope.networks = d;
+            ViewSpinner.stop();
+        }, function (e) {
+            Messages.error("Failure", e.data);
+            ViewSpinner.stop();
+        });
+    }]);

app/components/stats/statsController.js

@@ -1,21 +1,7 @@
 angular.module('stats', [])
     .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', '$routeParams', 'humansizeFilter', '$sce', function (Settings, $scope, Messages, $timeout, Container, $routeParams, humansizeFilter, $sce) {
-        // TODO: Implement memory chart, force scale to 0-100 for cpu, 0 to limit for memory, fix charts on dashboard,
+        // TODO: Force scale to 0-100 for cpu, fix charts on dashboard,
         // TODO: Force memory scale to 0 - max memory
-        //var initialStats = {}; // Used to set scale of memory graph.
-        //
-        //Container.stats({id: $routeParams.id}, function (d) {
-        //    var arr = Object.keys(d).map(function (key) {
-        //        return d[key];
-        //    });
-        //    if (arr.join('').indexOf('no such id') !== -1) {
-        //        Messages.error('Unable to retrieve stats', 'Is this container running?');
-        //        return;
-        //    }
-        //    initialStats = d;
-        //}, function () {
-        //    Messages.error('Unable to retrieve stats', 'Is this container running?');
-        //});
 
         var cpuLabels = [];
         var cpuData = [];

app/shared/services.js

@@ -117,6 +117,16 @@ angular.module('dockerui.services', ['ngResource'])
             get: {method: 'GET'}
         });
     }])
+    .factory('Network', ['$resource', 'Settings', function NetworksFactory($resource, Settings) {
+        'use strict';
+        // http://docs.docker.com/reference/api/docker_remote_api_<%= remoteApiVersion %>/#2-5-networks
+        return $resource(Settings.url + '/networks/:id/:action', {}, {
+            query: {method: 'GET', isArray: true},
+            get: {method: 'GET'},
+            create: {method: 'POST', params: {action: 'create'}},
+            remove: {method: 'DELETE', params: {id: '@id'}}
+        });
+    }])
     .factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'DOCKER_API_VERSION', 'UI_VERSION', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, DOCKER_API_VERSION, UI_VERSION) {
         'use strict';
         var url = DOCKER_ENDPOINT;