Improve network settings config

on-prem · Dec 17, 2017 · 07f5e7d · 07f5e7d
1 parent fbaf889
commit 07f5e7d
Show file tree

Hide file tree

Showing 14 changed files with 166 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,20 @@
 # Changelog
 
-## 1.19.1 (2017-12-17)
+## 1.20.0 (2017-12-17)
+
+  ### New features
+
+  * [dashboard] Redesign network settings to select dhcp/static
+  * [dashboard] Display network 'Mode' in dashboard
 
   ### Minor fixes
 
   * [html] Add 'Content-Security-Policy' HTTPS security header
+  * [html] Remove 'waiting for...' empty messages
+
+  ### Bug fixes
+
+  * [html] NTP server disappears when switching from STATIC to DHCP
 
 ## 1.19.0 (2017-11-27)
 

diff --git a/api/v1/admin/settings/index.l b/api/v1/admin/settings/index.l
@@ -10,7 +10,11 @@
 
     (list (append '("network") Network) (append '("app") App)) ]
 
-(de settings-static (Interface Ip_address Netmask Gateway Dns1 Dns2 Hostname Ntpserver)
+(de settings-static (Network App Interface Ip_address Netmask Gateway Dns1 Dns2 Hostname Ntpserver)
+  # output JSON files if validation success
+  (out (pack *Upload_path "app.json") (prinl (encode App)))
+  (out (pack *Upload_path "network.json") (prinl (encode (insert 1 Network '("mode" . "static")))))
+
   (out (pack *Upload_path "network.conf")
     (prinl "mode=static")
     (if Interface
@@ -24,7 +28,11 @@
     (prin "ntpserver=\"") (when Ntpserver (prin @)) (prinl "\"") )
   (response-async "settings" "static") )
 
-(de settings-dhcp (Interface Hostname)
+(de settings-dhcp (Network App Interface Hostname)
+  # output JSON files if validation success
+  (out (pack *Upload_path "app.json") (prinl (encode App)))
+  (out (pack *Upload_path "network.json") (prinl (encode (insert 1 Network '("mode" . "dhcp")))))
+
   (out (pack *Upload_path "network.conf")
     (prinl "mode=dhcp")
     (if Interface
@@ -61,14 +69,10 @@
           (when Ntpserver   (validate-string-range Ntpserver  'ntpserver (pack *Ascii_codes_fqdn ":") *Range_fqdn))
 
           (prog
-            # output JSON files if validation success
-            (out (pack *Upload_path "app.json") (prinl (encode App)))
-            (out (pack *Upload_path "network.json") (prinl (encode Network)))
-
             # output CONF files if validation success
             (if (and Ip_address Netmask Gateway)
-                (settings-static Interface Ip_address Netmask Gateway Dns1 Dns2 Hostname Ntpserver)
-                (settings-dhcp Interface Hostname Ntpserver) ]
+                (settings-static Network App Interface Ip_address Netmask Gateway Dns1 Dns2 Hostname Ntpserver)
+                (settings-dhcp Network App Interface Hostname Ntpserver) ]
 
 [de api-request-file (File)
   (if (decode File T)

diff --git a/docs/API.md b/docs/API.md
@@ -1652,4 +1652,4 @@ Content-Type: application/json
 
 ----
 
-Powered by Jidoteki.com - v1.19.1 - [Copyright notices](/docs/NOTICE.TXT)
+Powered by Jidoteki.com - v1.20.0 - [Copyright notices](/docs/NOTICE.TXT)
diff --git a/docs/ui.js b/docs/ui.js
@@ -8,7 +8,7 @@
 
 (function() {
   'use strict';
-  var apiEndpoints, apiServer, apiType, authenticate, backupButtonListener, capitalize, certsButtonListener, clearToken, debugButtonListener, drawGraphs, failedUpload, fetchData, fetchFile, getHmac, getSha256, getStatus, getToken, loadBackup, loadHome, loadLogin, loadMonitor, loadNetwork, loadSetup, loadStorage, loadSupport, loadToken, loadUpdateCerts, loginButtonListener, logoutButtonListener, logsButtonListener, monitorButtonListener, monitorClick, navbarListener, networkButtonListener, newTokenButtonListener, pollStatus, putFile, putToken, redirectUrl, reloadEndpoints, reloadHealth, restartButtonListener, runningUpload, storageButtonListener, storageSelectListener, successUpload, tokenButtonListener, updateButtonListener, updateCertsButtonListener,
+  var apiEndpoints, apiServer, apiType, authenticate, backupButtonListener, capitalize, certsButtonListener, clearToken, debugButtonListener, dhcpStaticListener, drawGraphs, failedUpload, fetchData, fetchFile, getHmac, getSha256, getStatus, getToken, loadBackup, loadHome, loadLogin, loadMonitor, loadNetwork, loadSetup, loadStorage, loadSupport, loadToken, loadUpdateCerts, loginButtonListener, logoutButtonListener, logsButtonListener, monitorButtonListener, monitorClick, navbarListener, networkButtonListener, newTokenButtonListener, pollStatus, putFile, putToken, redirectUrl, reloadEndpoints, reloadHealth, restartButtonListener, runningUpload, storageButtonListener, storageSelectListener, successUpload, tokenButtonListener, updateButtonListener, updateCertsButtonListener,
     indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
   apiServer = window.location.origin != null ? window.location.origin : window.location.protocol + "//" + window.location.hostname + (window.location.port != null ? ':' + window.location.port : '');
@@ -382,6 +382,7 @@
       formData.append('newtoken', pass1);
       if (formData) {
         return putFile('token', '/api/v1/admin/setup', formData, function(err, result) {
+          $('.jido-page-content-token .jido-panel').show();
           if (err) {
             $('.jido-data-token-status').html('failed');
             $('.jido-data-token-status').removeClass('label-danger');
@@ -535,6 +536,19 @@
         if (result.network["interface"] == null) {
           $('#interface-input').val('eth0');
         }
+        if (result.network.mode === 'dhcp') {
+          $('#network-type-dhcp').prop('checked', true);
+          $('#network-type-static').prop('checked', false);
+          $('#ip_address-input').prop('disabled', true);
+          $('#netmask-input').prop('disabled', true);
+          $('#gateway-input').prop('disabled', true);
+        } else {
+          $('#network-type-dhcp').prop('checked', false);
+          $('#network-type-static').prop('checked', true);
+          $('#ip_address-input').prop('disabled', false);
+          $('#netmask-input').prop('disabled', false);
+          $('#gateway-input').prop('disabled', false);
+        }
         networkSettings = (function() {
           var ref, results;
           ref = result.network;
@@ -731,6 +745,7 @@
       formData.append('update', $('#update-input[type=file]')[0].files[0]);
       if (formData) {
         return putFile('update', "/api/v1/admin/update", formData, function(err, result) {
+          $('.jido-page-content-update .jido-panel').show();
           if (!err) {
             return pollStatus('update');
           }
@@ -741,7 +756,7 @@
 
   networkButtonListener = function() {
     return $('#jido-button-network-upload').click(function() {
-      var blob, encoded, formData, json;
+      var blob, encoded, formData, json, network_mode;
       json = new Object();
       json.app = {};
       json.network = {};
@@ -757,6 +772,7 @@
       if ($('#dns2-input').val()) {
         json.network.dns2 = $('#dns2-input').val();
       }
+      network_mode = $('#network-type-dhcp').is(':checked') ? 'dhcp' : 'static';
       if (!(json.network.hostname && validator.isFQDN(json.network.hostname, {
         require_tld: false
       }))) {
@@ -782,7 +798,7 @@
       $('.jido-data-network-status').removeClass('label-danger');
       $('.jido-data-network-status').removeClass('label-success');
       $('.jido-data-network-status').removeClass('label-default');
-      if (json.network.ip_address && json.network.netmask && json.network.gateway) {
+      if (network_mode === 'static') {
         if (!validator.isIP(json.network.ip_address)) {
           $('.network-form .network-ip_address-label').parent().addClass('has-error');
           $('.network-form .network-ip_address-label').focus();
@@ -825,7 +841,6 @@
         delete json.network.ip_address;
         delete json.network.netmask;
         delete json.network.gateway;
-        delete json.network.ntpserver;
         delete json.network.dns1;
         delete json.network.dns2;
       }
@@ -839,6 +854,7 @@
       if (formData) {
         return putFile('network', '/api/v1/admin/settings', formData, function(err, result) {
           var newIP, newUrl;
+          $('.jido-page-content-network .jido-panel').show();
           if (!err) {
             successUpload('network');
             if (json.network.ip_address) {
@@ -867,6 +883,7 @@
       }
       if (formData) {
         return putFile('certs', "/api/v1/admin/certs", formData, function(err, result) {
+          $('.jido-page-content-certs .jido-panel').show();
           if (!err) {
             return pollStatus('certs');
           }
@@ -1129,6 +1146,19 @@
     });
   };
 
+  dhcpStaticListener = function() {
+    $('#network-type-dhcp').change(function() {
+      $('#ip_address-input').prop('disabled', true);
+      $('#netmask-input').prop('disabled', true);
+      return $('#gateway-input').prop('disabled', true);
+    });
+    return $('#network-type-static').change(function() {
+      $('#ip_address-input').prop('disabled', false);
+      $('#netmask-input').prop('disabled', false);
+      return $('#gateway-input').prop('disabled', false);
+    });
+  };
+
   navbarListener = function() {
     return $('#jido-page-navbar .navbar-nav li a').click(function() {
       var clicked;
@@ -1193,6 +1223,8 @@
 
   backupButtonListener();
 
+  dhcpStaticListener();
+
   navbarListener();
 
   authenticate(function(err) {

diff --git a/docs/ui.min.js b/docs/ui.min.js
diff --git a/index.html b/index.html
@@ -8,11 +8,11 @@
     <meta name="author" content="">
     <title>Admin Dashboard</title>
     <!-- Bootstrap Core CSS-->
-    <link href="/docs/themes/bootstrap.min.css?v=1.19.1" rel="stylesheet">
+    <link href="/docs/themes/bootstrap.min.css?v=1.20.0" rel="stylesheet">
     <!-- Fontello / Font Awesome CSS-->
-    <link href="/docs/font-awesome/css/fontello.min.css?v=1.19.1" rel="stylesheet" type="text/css">
+    <link href="/docs/font-awesome/css/fontello.min.css?v=1.20.0" rel="stylesheet" type="text/css">
     <!-- UI CSS-->
-    <link href="/docs/ui.css?v=1.19.1" rel="stylesheet">
+    <link href="/docs/ui.css?v=1.20.0" rel="stylesheet">
   </head>
   <body>
     <div id="jido-page-navbar" style="display:none">
@@ -138,7 +138,7 @@ <h1 class="page-header">Update</h1>
       </div>
       <div class="row">
         <div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-1 col-md-offset-1">
-          <div class="panel panel-default jido-panel">
+          <div style="display:none;" class="panel panel-default jido-panel">
             <div class="panel-heading">
               <h4>Status: <span class="label label-default jido-data-update-status">...fetching</span><span style="display:none;" class="pull-right jido-data-update-status-error">
                   <div class="jido-data-update-status-error-message text-danger"></div></span></h4>
@@ -202,7 +202,7 @@ <h1 class="page-header">Network</h1>
       </div>
       <div class="row">
         <div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-1 col-md-offset-1">
-          <div class="panel panel-default jido-panel">
+          <div style="display:none;" class="panel panel-default jido-panel">
             <div class="panel-heading">
               <h4>Status: <span class="label label-default jido-data-network-status">...waiting for network settings</span></h4>
               <div style="display:none; margin-top: 20px" class="progress">
@@ -220,44 +220,53 @@ <h4>Status: <span class="label label-default jido-data-network-status">...waitin
               <h3 class="panel-title"><i class="fa icon-sitemap"></i> Network settings</h3>
             </div>
             <div class="panel-body">
-              <h4>Update Network settings, or switch between STATIC to DHCP modes.</h4><br>
-              <div class="alert alert-info">For DHCP mode, remove the IP address, Netmask or Gateway.</div>
+              <h4>Update Network settings, or switch between STATIC to DHCP modes.</h4>
               <div class="row">
                 <form role="form" class="network-form">
                   <fieldset>
+                    <div class="col-lg-12 col-md-12 col-sm-12">
+                      <div class="form-group">
+                        <label style="margin-right: 1.2em;" class="radio-inline control-label">
+                          <input id="network-type-dhcp" name="network-type" value="dhcp" type="radio"><strong>DHCP</strong>
+                        </label>
+                        <label style="margin-right: 1.2em;" class="radio-inline control-label">
+                          <input id="network-type-static" name="network-type" value="static" type="radio"><strong>STATIC</strong>
+                        </label>
+                      </div>
+                    </div><br>
                     <div class="col-lg-6 col-md-6 col-sm-6">
-                      <div class="form-group has-success">
+                      <div class="form-group">
                         <label for="hostname-input" class="control-label network-hostname-label">Hostname</label>
                         <input id="hostname-input" placeholder="Hostname" name="hostname" type="text" class="form-control">
                       </div>
-                      <div class="form-group has-success">
+                      <div class="form-group">
                         <label for="interface-input" class="control-label network-interface-label">Interface</label>
                         <input id="interface-input" placeholder="Interface" name="interface" type="text" class="form-control">
                       </div>
-                      <div class="form-group has-success">
+                      <div class="form-group">
                         <label for="ntpserver-input" class="control-label network-ntpserver-label">NTP Server</label>
                         <input id="ntpserver-input" placeholder="pool.ntp.org" name="ntpserver" type="text" class="form-control">
                       </div>
                       <div class="form-group">
-                        <label for="dns1-input" class="control-label network-dns1-label text-info"><em>DNS 1 (optional for STATIC)</em></label>
+                        <label for="dns1-input" class="control-label network-dns1-label"><em>DNS 1 (optional)</em></label>
                         <input id="dns1-input" placeholder="DNS 1" name="dns-1" type="text" class="form-control">
                       </div>
                       <div class="form-group">
-                        <label for="dns2-input" class="control-label network-dns2-label text-info"><em>DNS 2 (optional for STATIC)</em></label>
+                        <label for="dns2-input" class="control-label network-dns2-label"><em>DNS 2 (optional)</em></label>
                         <input id="dns2-input" placeholder="DNS 2" name="dns-2" type="text" class="form-control">
                       </div>
                     </div>
                     <div class="col-lg-6 col-md-6 col-sm-6">
                       <div class="form-group">
-                        <label for="ip_address-input" class="control-label network-ip_address-label text-info"><em>IP address (required for STATIC)</em></label>
+                        <label for="ip_address-input" class="control-label network-ip_address-label">IP address<em> (required for STATIC)</em></label>
                         <input id="ip_address-input" placeholder="IP address" name="ip-address" type="text" class="form-control">
                       </div>
                       <div class="form-group">
-                        <label for="netmask-input" class="control-label network-netmask-label text-info"><em>Netmask / Prefix (ex: /64) (required for STATIC)</em></label>
+                        <label for="netmask-input" class="control-label network-netmask-label">Netmask / Prefix (ex: /64)<em> (required for STATIC)</em></label>
                         <input id="netmask-input" placeholder="Netmask / Prefix (ex: /64)" name="netmask" type="text" class="form-control">
                       </div>
                       <div class="form-group">
-                        <label for="gateway-input" class="control-label network-gateway-label text-info"><em>Gateway (required for STATIC)</em></label>
+                        <label for="gateway-input" class="control-label network-gateway-label">Gateway<em> (required for STATIC)</em></label>
                         <input id="gateway-input" placeholder="Gateway" name="gateway" type="text" class="form-control">
                       </div>
                       <div class="form-group"><br>
@@ -282,7 +291,7 @@ <h1 class="page-header">TLS Certificates</h1>
       </div>
       <div class="row">
         <div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-1 col-md-offset-1">
-          <div class="panel panel-default jido-panel">
+          <div style="display:none;" class="panel panel-default jido-panel">
             <div class="panel-heading">
               <h4>Status: <span class="label label-default jido-data-certs-status">...fetching</span></h4>
               <div style="display:none; margin-top: 20px" class="progress">
@@ -482,7 +491,7 @@ <h1 class="page-header">API Token</h1>
       </div>
       <div class="row">
         <div class="col-lg-6 col-md-6 col-sm-12 col-lg-offset-3 col-md-offset-3">
-          <div class="panel panel-default jido-panel">
+          <div style="display:none;" class="panel panel-default jido-panel">
             <div class="panel-heading">
               <h4>Status: <span class="label label-default jido-data-token-status">...waiting for token</span></h4>
               <div style="display:none; margin-top: 20px" class="progress">
@@ -749,23 +758,23 @@ <h1><i style="font-size:2em;" class="fa icon-attention text-warning"></i>
         </div>
       </div>
     </div>
-    <script src="/docs/jquery/jquery.min.js?v=1.19.1"></script>
-    <script src="/docs/forge/forge.min.js?v=1.19.1"></script>
-    <script src="/docs/validator/validator.min.js?v=1.19.1"></script>
-    <script src="/docs/themes/bootstrap.min.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/binaryxhr.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/rrdcmdline.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/rrddatafile.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/rrdfile.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/rrdgfxcanvas.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/rrdgraph.min.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/rrdrpn.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/rrdtime.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/sprintf.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/strftime.js?v=1.19.1"></script>
-    <script src="/docs/jsrrdgraph/draw.js?v=1.19.1"></script>
-    <script src="/docs/ui.min.js?v=1.19.1"></script>
-    <div style="margin-bottom:0;margin-top:3em;position:relative;bottom:0px;width:100%;" class="well text-right text-muted jido-smalltext">Powered by Jidoteki.com - v1.19.1 - <a href="/docs/NOTICE.TXT">Copyright notices</a></div>
+    <script src="/docs/jquery/jquery.min.js?v=1.20.0"></script>
+    <script src="/docs/forge/forge.min.js?v=1.20.0"></script>
+    <script src="/docs/validator/validator.min.js?v=1.20.0"></script>
+    <script src="/docs/themes/bootstrap.min.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/binaryxhr.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/rrdcmdline.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/rrddatafile.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/rrdfile.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/rrdgfxcanvas.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/rrdgraph.min.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/rrdrpn.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/rrdtime.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/sprintf.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/strftime.js?v=1.20.0"></script>
+    <script src="/docs/jsrrdgraph/draw.js?v=1.20.0"></script>
+    <script src="/docs/ui.min.js?v=1.20.0"></script>
+    <div style="margin-bottom:0;margin-top:3em;position:relative;bottom:0px;width:100%;" class="well text-right text-muted jido-smalltext">Powered by Jidoteki.com - v1.20.0 - <a href="/docs/NOTICE.TXT">Copyright notices</a></div>
     <!-- This Source Code Form is subject to the terms of the Mozilla Public-->
     <!-- License, v. 2.0. If a copy of the MPL was not distributed with this-->
     <!-- file, You can obtain one at http://mozilla.org/MPL/2.0/.-->