More work on the UI

Added Network page boiler plate (though very incomplete)
Moved attributes to be loaded (and reloaded) on modal show event
Changed tables to be condensed
Added more validation on network create/update form

nsot/static/css/nsot.css

@@ -13,6 +13,10 @@ body {
     margin-bottom: 20px;
 }
 
+.form-group {
+    margin-bottom: 10px;
+}
+
 .form-subheading {
     position:relative;
     overflow:hidden;

nsot/static/js/controllers.js

@@ -143,10 +143,11 @@
         $scope.error = null;
         $scope.admin = false;
         var siteId = $scope.siteId = $routeParams.siteId;
+
         $scope.pager = null;
         $scope.limier = null;
-        $scope.form_url = "/static/templates/includes/networks-form.html";
 
+        $scope.form_url = "/static/templates/includes/networks-form.html";
         $scope.form_attrs = [];
 
         var params = {limit: 10, include_ips: true};
@@ -156,14 +157,12 @@
 
         $q.all([
             $http.get("/api/users/0"),
-            $http.get("/api/sites/" + siteId + "/network_attributes"),
             $http.get("/api/sites/" + siteId + "/networks", {
                 params: params
             })
         ]).then(function(results){
             $scope.user = results[0].data.data.user;
-            $scope.attributes = results[1].data.data.network_attributes;
-            var data = results[2].data.data;
+            var data = results[1].data.data;
             $scope.networks = data.networks;
 
             var permissions = $scope.user.permissions[siteId] || {};
@@ -185,8 +184,22 @@
             }
         });
 
-        $scope.addAttr = function(idx) {
-            $scope.form_attrs.splice(idx + 1, 0, {});
+        $("body").on("show.bs.modal", "#createNetworkModal", function(e){
+            $http.get("/api/sites/" + siteId + "/network_attributes")
+                .success(function(data){
+
+                $scope.attributes = data.data.network_attributes;
+
+            });
+        });
+
+        $scope.$on('$destroy', function() {
+            $("body").off("show.bs.modal", "#createNetworkModal");
+        });
+
+
+        $scope.addAttr = function() {
+            $scope.form_attrs.push({});
         }
 
         $scope.removeAttr = function(idx) {
@@ -219,6 +232,74 @@
             function($scope, $http, $route, $location, $q, $routeParams) {
 
         $scope.loading = true;
+        $scope.user = {};
+        $scope.network = {};
+        $scope.attributes = {};
+        $scope.admin = false;
+        $scope.updateError = null;
+        $scope.deleteError = null;
+        var siteId = $scope.siteId = $routeParams.siteId;
+        var networkId = $scope.networkId = $routeParams.networkId;
+        $scope.form_url = "/static/templates/includes/networks-form.html";
+        $scope.form_attrs = [];
+
+
+        $q.all([
+            $http.get("/api/users/0"),
+            $http.get("/api/sites/" + siteId + "/networks/" + networkId)
+        ]).then(function(results){
+            $scope.user = results[0].data.data.user;
+            $scope.network = results[1].data.data.network;
+            var permissions = $scope.user.permissions[$routeParams.siteId] || {};
+            permissions = permissions.permissions || [];
+            $scope.admin = _.any(permissions, function(value){
+                return _.contains(["admin", "networks"], value);
+            });
+
+            $scope.loading = false;
+        }, function(data){
+            if (data.status === 404) {
+                $location.path("/");
+                $location.replace();
+            }
+        });
+
+        $("body").on("show.bs.modal", "#updateNetworkModal", function(e){
+            $http.get("/api/sites/" + siteId + "/network_attributes")
+                .success(function(data){
+
+                $scope.attributes = data.data.network_attributes;
+
+            });
+        });
+
+        $scope.$on('$destroy', function() {
+            $("body").off("show.bs.modal", "#updateNetworkModal");
+        });
+
+        $scope.updateNetwork = function(){
+            var network = $scope.network;
+            var optional_attrs = _.reduce($scope.form_attrs, function(acc, value, key){
+                acc[value.name] = value.value;
+                return acc;
+            }, {});
+            $http.put("/api/sites/" + siteId +
+                      "/networks/" + networkId, network).success(function(data){
+                $route.reload();
+            }).error(function(data){
+                $scope.updateError = data.error;
+            });
+        };
+
+        $scope.deleteNetwork = function(){
+            $http.delete("/api/sites/" + siteId +
+                      "/networks/" + networkId).success(function(data){
+                $location.path("/sites/" + siteId + "/networks");
+            }).error(function(data){
+                $scope.deleteError = data.error;
+            });
+        };
+
 
     }]);
 

nsot/static/templates/changes.html

@@ -9,7 +9,7 @@
         <panel>
             <panel-heading>Changes</panel-heading>
             <panel-body>
-                <table class="table table-hover">
+                <table class="table table-condensed table-hover">
                     <thead>
                         <tr>
                             <th class="col-sm-1">ID</th>

nsot/static/templates/includes/networks-form.html

@@ -1,73 +1,83 @@
-<form novalidate name="networkForm" class="nsot-form">
-    <div class="form-group" ng-class="{
-        'has-error' : networkForm.name.$invalid,
-        'has-success' : networkForm.name.$valid,
-    }">
-        <input type="text"
-               class="form-control"
-               name="cidr"
-               placeholder="Network (required)"
-               ng-model="network.cidr"
-               ng-minlength="1"
-               required
-        >
+<div class="form-group" ng-class="{
+    'has-error' : networkForm.cidr.$invalid,
+    'has-success' : networkForm.cidr.$valid,
+}">
+    <input type="text"
+           class="form-control"
+           name="cidr"
+           placeholder="Network (required)"
+           ng-model="network.cidr"
+           ng-minlength="1"
+           required
+    >
+</div>
+<h4 class="form-subheading">Attributes</h4>
+
+<div class="row" ng-repeat="(idx, attr) in attributes
+                            |filter:{required:true}">
+    <div class="col-sm-5">
+        <select name="attribute" class="form-control" disabled>
+            <option>[[attr.name]]</option>
+        </select>
     </div>
-    <h4 class="form-subheading">Attributes</h4>
-    <div class="form-group" ng-repeat="(idx, attr) in attributes
-                                       |filter:{required:true}">
-        <div class="row">
-            <div class="col-sm-5 text-right">
-                <h4>[[attr.name]]</h4>
-            </div>
-            <div class="col-sm-6" style="padding-left: 0px;">
-                <input type="text"
-                       class="form-control"
-                       name="value"
-                       placeholder="Value (required)"
-                       ng-model="network.attributes[attr.name]"
-                       required
-                >
-            </div>
+    <div class="col-sm-6" style="padding-left: 0px;">
+        <div class="form-group"
+             ng-class="{
+                'has-error' : networkForm['value_' + $index].$invalid,
+                'has-success' : networkForm['value_' + $index].$valid,
+             }">
+            <input type="text"
+                   class="form-control"
+                   name="value_[[$index]]"
+                   placeholder="Value (required)"
+                   ng-model="network.attributes[attr.name]"
+                   required
+            >
         </div>
     </div>
-    <div class="form-group" ng-repeat="form_attr in form_attrs">
-        <div class="row">
-            <div class="col-sm-5">
-                <select
-                    name="attribute"
-                    class="form-control"
-                    ng-model="form_attr.name">
-                    <option value="" disabled selected></option>
-                    <option value="[[attr.name]]"
-                            ng-repeat="(idx, attr) in attributes
-                                       |filter:{required:false}">
-                        [[attr.name]]
-                    </option>
-                </select>
-            </div>
-            <div class="col-sm-6" style="padding-left: 0px;">
-                <input type="text"
-                       class="form-control"
-                       name="value"
-                       placeholder="Value"
-                       ng-model="form_attr.value"
-                >
-            </div>
-            <div class="col-sm-1">
-                <span class="attr-buttons">
-                    <span class="fa fa-lg fa-minus-circle rm-attr-btn"
-                          ng-click="removeAttr($index);"
-                    ></span>
-                </span>
-            </div>
-        </div>
+</div>
+
+<div class="row" ng-repeat="form_attr in form_attrs">
+    <div class="col-sm-5">
+        <select
+            name="attribute"
+            class="form-control"
+            required
+            ng-model="form_attr.name">
+            <option value="" disabled selected></option>
+            <option value="[[attr.name]]"
+                    ng-repeat="(idx, attr) in attributes
+                               |filter:{required:false}">
+                [[attr.name]]
+            </option>
+        </select>
     </div>
-    <div class="row">
-        <div class="col-sm-12 text-right">
-            <a ng-click="addAttr($index)" class="add-attr-btn">
-                Add an attribute
-                <i class="fa fa-lg fa-plus-circle add-attr-btn"></i>
-            </a>
+    <div class="col-sm-6" style="padding-left: 0px;">
+
+        <div class="form-group">
+            <input type="text"
+                   class="form-control"
+                   name="value"
+                   placeholder="Value"
+                   ng-model="form_attr.value"
+                   required
+            >
         </div>
     </div>
-</form>
+    <div class="col-sm-1">
+        <span class="attr-buttons">
+            <span class="fa fa-lg fa-minus-circle rm-attr-btn"
+                  ng-click="removeAttr($index);"
+            ></span>
+        </span>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-sm-12 text-right">
+        <a ng-click="addAttr()" class="add-attr-btn">
+            Add an attribute
+            <i class="fa fa-lg fa-plus-circle add-attr-btn"></i>
+        </a>
+    </div>
+</div>

nsot/static/templates/network-attributes.html

@@ -64,7 +64,7 @@
                 No Network Attributes
             </panel-body>
             <panel-body ng-if="attributes.length">
-                <table class="table table-hover">
+                <table class="table table-condensed table-hover">
                     <thead>
                         <tr>
                             <th class="col-sm-2">Name</th>

nsot/static/templates/network.html

@@ -1,3 +1,61 @@
 <loading-panel ng-if="loading"></loading-panel>
 <div ng-if="!loading">
+    <heading-bar heading="Network"
+        subheading="[[network.network_address]]/[[network.prefix_length]]">
+        <button ng-if="admin"
+            class="btn btn-info"
+            data-toggle="modal"
+            data-target="#updateNetworkModal"
+        >Update Network</button>
+        <button ng-if="admin"
+            class="btn btn-danger"
+            data-toggle="modal"
+            data-target="#deleteNetworkModal"
+        >Delete Network</button>
+    </heading-bar>
+
+    <nsot-modal title="Update Network" modal-id="updateNetworkModal">
+        <div class="modal-body">
+            <div ng-if="updateError" class="alert alert-danger">
+                [[updateError.code]] - [[updateError.message]]
+            </div>
+            <form novalidate name="networkForm" class="nsot-form">
+                <div ng-include="form_url"></div>
+            </form>
+
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">
+                Close
+            </button>
+            <button type="submit" ng-click="updateNetwork()"
+                    class="btn btn-primary" ng-disabled="networkForm.$invalid"
+            >
+                Update
+            </button>
+        </div>
+    </nsot-modal>
+
+    <nsot-modal title="Delete Network" modal-id="deleteNetworkModal">
+        <div class="modal-body">
+            <div ng-if="deleteError" class="alert alert-danger">
+                [[deleteError.code]] - [[deleteError.message]]
+            </div>
+            Are you sure you want to delete this network?
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">
+                Close
+            </button>
+            <button type="submit"
+                    ng-click="deleteNetwork()"
+                    class="btn btn-primary"
+            >
+                Delete
+            </button>
+        </div>
+    </nsot-modal>
+
+
+
 </div>

nsot/static/templates/networks.html

@@ -17,13 +17,15 @@
             <div ng-if="error" class="alert alert-danger">
                 [[error.code]] - [[error.message]]
             </div>
-            <div ng-include="form_url"></div>
+            <form novalidate name="networkForm" class="nsot-form">
+                <div ng-include="form_url"></div>
+            </form>
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">
                 Close
             </button>
-            <button type="submit" ng-click="createNetwork(network)"
+            <button type="submit" ng-click="createNetwork()"
                     class="btn btn-primary" ng-disabled="networkForm.$invalid"
             >
                 Create
@@ -38,7 +40,7 @@
                 No Networks
             </panel-body>
             <panel-body ng-if="networks.length">
-                <table class="table table-hover">
+                <table class="table table-condensed table-hover">
                     <thead>
                         <tr>
                             <th class="col-sm-3">Network Address</th>