From e33c5013ec830fc3515e79e9b17e7f30aa3d8bb5 Mon Sep 17 00:00:00 2001
From: Mark Reynolds <mreynolds@redhat.com>
Date: Jun 08 2018 16:24:14 +0000
Subject: Cockpit UI Fixes


This patch addresses these tickets:

    https://pagure.io/389-ds-base/issue/49741
      - Fixed repl agreement edit form

    https://pagure.io/389-ds-base/issue/49740
      - Set color-blind friendly colors.  Also used Thumbs up/down
        icons for repl state

    https://pagure.io/389-ds-base/issue/49703
      - Set default values in create instance form (also checks if
        default ports are available

Reviewed by: vashirov(Thanks!)

---

diff --git a/src/cockpit/389-console/css/ds.css b/src/cockpit/389-console/css/ds.css
index 8b6db11..918513e 100644
--- a/src/cockpit/389-console/css/ds.css
+++ b/src/cockpit/389-console/css/ds.css
@@ -75,15 +75,15 @@
 
 .ds-repl-state-good {
   margin: auto;
-  width: 70px;
+  width: 30px;
   height: 30px;
-  border-radius: 7px;
+  border-radius: 50%;
   font-size: 12px;
   font-weight: bold;
   color: white;
   line-height: 1;
   text-align: center;
-  background-color: green;
+  background-color: #4dac26;
   border-color: black;
   padding-top: 8px; 
   align-content: center !important;
@@ -92,15 +92,15 @@
 
 .ds-repl-state-bad {
   margin: auto;
-  width: 70px;
+  width: 30px;
   height: 30px;
-  border-radius: 7px;
+  border-radius: 50%;
   font-size: 12px;
   font-weight: bold;
   color: white;
   line-height: 1;
   text-align: center;
-  background-color:  #f11710 ;
+  background-color:  #d01c8b;
   border-color: black;
   padding-top: 8px; 
   align-content: center !important;
@@ -121,18 +121,9 @@
   margin-bottom: 15px;
 }
 
-.ds-repl-agmt-good {
-  background-color: lightgreen !important;
-  color: black;
-}
-
-.ds-repl-agmt-warning {
-  background-color: yellow !important;
-  color: black;
-}
-.ds-repl-agmt-bad {
-  background-color: lightsalmon !important;
-  color: black;
+.ds-repl-lag-bad {
+  font-weight: bold;
+  color: #7b3294;
 }
 
 .ds-button-border {
diff --git a/src/cockpit/389-console/index.html b/src/cockpit/389-console/index.html
index 236ccb8..85a327b 100644
--- a/src/cockpit/389-console/index.html
+++ b/src/cockpit/389-console/index.html
@@ -285,15 +285,15 @@
             <div class="ds-inline">
               <div>
                 <label for="create-inst-serverid" class="ds-config-label" title="The instance name, this is what gets appended to \"slapi-\"">
-                  Instance Name</label><input class="ds-input" type="text" id="create-inst-serverid" placeholder="Your_Instance" required />
+                  Instance Name</label><input class="ds-input" type="text" id="create-inst-serverid" placeholder="Your_Instance_Name" required />
               </div>
               <div>
                 <label for="create-inst-port" class="ds-config-label" title="The server port number">
-                  Port</label><input class="ds-input" type="text" placeholder="389" id="create-inst-port" required />
+                  Port</label><input class="ds-input" type="text" value="389" id="create-inst-port" required />
               </div>
               <div>
                 <label for="create-inst-secureport" class="ds-config-label" title="The secure port number for TLS connections">
-                  Secure Port</label><input class="ds-input" type="text" placeholder="636" id="create-inst-secureport" required />
+                  Secure Port</label><input class="ds-input" type="text" value="636" id="create-inst-secureport" required />
               </div>
               <div>
                 <label for="create-inst-user" class="ds-config-label" title="Server user that the server runs as">
@@ -305,7 +305,7 @@
               </div>
               <div>
                 <label for="create-inst-rootdn" class="ds-config-label" title="The DN for the unrestricted  user">
-                  Directory Manager DN</label><input class="ds-input" placeholder="cn=Directory Manager" type="text" id="create-inst-rootdn" required />
+                  Directory Manager DN</label><input class="ds-input" value="cn=Directory Manager" type="text" id="create-inst-rootdn" required />
               </div>
               <div>
                 <label for="rootdn-pw" class="ds-config-label" title="Directory Manager password.">Directory Manager Password</label><input
@@ -317,7 +317,7 @@
               </div>
               <div>
                 <p></p>
-                <input type="checkbox" class="ds-config-checkbox" id="create-inst-tls" checked><label
+                <input type="checkbox" class="ds-config-checkbox" id="create-inst-tls"><label
                   for="create-inst-tls" class="ds-label" title="Create a self-signed certificate database">Create Self Signed Certificate DB</label>
               </div>
               <div id="create-inst-spinner" class="ds-center" hidden>
diff --git a/src/cockpit/389-console/js/ds.js b/src/cockpit/389-console/js/ds.js
index a00dcbd..58bcbd2 100644
--- a/src/cockpit/389-console/js/ds.js
+++ b/src/cockpit/389-console/js/ds.js
@@ -25,6 +25,7 @@ function tableize (val) {
   return val;
 }
 
+// Example
 function search_dse(){
   document.getElementById('results').innerHTML = "Searching root dse...";
   var cmd = ['/usr/bin/ldapsearch','-Y', 'EXTERNAL' , '-H',
@@ -35,6 +36,27 @@ function search_dse(){
   );
 }
 
+/*
+ * Set the ports numbers on the instance creation form.  If the default ports
+ * are taken just unset the values.
+ */
+function set_ports() {
+  var cmd = ['ss', '-ntpl'];
+  cockpit.spawn(cmd, { superuser: true, "err": "message"}).done(function(data) {
+    var lines = data.split('\n');
+    $("#create-inst-port").val("389");
+    $("#create-inst-secureport").val("636");
+    for (var i = 0; i < lines.length; i++){
+      if (lines[i].indexOf("LISTEN") != -1 && lines[i].indexOf(":389 ") != -1) {
+        $("#create-inst-port").val("");
+      }
+      if (lines[i].indexOf("LISTEN") != -1 && lines[i].indexOf(":636 ") != -1) {
+        $("#create-inst-secureport").val("");
+      }
+    }
+  });
+}
+
 // POC - REMOVE!!!!!
 function test_json_and_dsconf () {
     var cmd = ['/home/mareynol/source/ds389/389-ds-base/src/lib389/cli/dsconf',
diff --git a/src/cockpit/389-console/js/monitor.js b/src/cockpit/389-console/js/monitor.js
index ed9d26f..055bdec 100644
--- a/src/cockpit/389-console/js/monitor.js
+++ b/src/cockpit/389-console/js/monitor.js
@@ -305,7 +305,7 @@ $(document).ready( function() {
       "lengthMenu": [ 10, 25, 50, 100],
       "language": {
         "emptyTable": "No Replication Agreements",
-        "search": "Search Agreements"
+        "search": "Search"
       }
     });
 
@@ -316,7 +316,7 @@ $(document).ready( function() {
       "lengthMenu": [ 10, 25, 50, 100],
       "language": {
         "emptyTable": "No Winsync Agreements",
-        "search": "Search Agreements"
+        "search": "Search"
       }
     });
 
@@ -390,7 +390,6 @@ $(document).ready( function() {
       // clear_agmt_form();
 
       $("#repl-winsync-agmt-header").html("<b>Winsync Agreement Details:</b>&nbsp;&nbsp; " + agmt_name + " " + agmt_status);
-      console.log("MARK we are here");
       // TODO  - get agreement details and populate form
       $("#monitor-winsync-agmt-form").css('display', 'block');
     });
diff --git a/src/cockpit/389-console/js/replication.js b/src/cockpit/389-console/js/replication.js
index 6853b32..74233d2 100644
--- a/src/cockpit/389-console/js/replication.js
+++ b/src/cockpit/389-console/js/replication.js
@@ -11,12 +11,12 @@ var agmt_action_html =
       '<span class="caret"></span>' +
     '</button>' +
     '<ul class="dropdown-menu ds-agmt-dropdown" role="menu">' +
-      '<li role=""><a role="menuitem" tabindex="0" class="repl-agmt-btn agmt-edit-btn" href="#">View/Edit Agreement</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="1" class="repl-agmt-btn" href="#">Initialize Consumer (online)</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="-1" class="repl-agmt-btn" href="#">Initialize Consumer (ldif)</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="-1" class="repl-agmt-btn" href="#">Send Updates Now</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="-1" class="repl-agmt-btn" href="#">Enable/Disable Agreement</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="-1" class="repl-agmt-btn agmt-del-btn" href="#">Delete Agreement</a></li>' +
+      '<li role=""><a class="repl-agmt-btn agmt-edit-btn" href="#">View/Edit Agreement</a></li>' +
+      '<li role=""><a class="repl-agmt-btn" href="#">Initialize Consumer (online)</a></li>' +
+      '<li role=""><a class="repl-agmt-btn" href="#">Initialize Consumer (ldif)</a></li>' +
+      '<li role=""><a class="repl-agmt-btn" href="#">Send Updates Now</a></li>' +
+      '<li role=""><a class="repl-agmt-btn" href="#">Enable/Disable Agreement</a></li>' +
+      '<li role=""><a class="repl-agmt-btn agmt-del-btn" href="#">Delete Agreement</a></li>' +
     '</ul>' +
   '</div>';
 
@@ -27,10 +27,10 @@ var winsync_agmt_action_html =
       '<span class="caret"></span>' +
     '</button>' +
     '<ul class="dropdown-menu ds-agmt-dropdown" role="menu" aria-labelledby="dropdownMenu2">' +
-      '<li role=""><a role="menuitem" tabindex="0" class="repl-agmt-btn agmt-edit-btn" href="#">View/Edit Agreement</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="1" class="repl-agmt-btn" href="#">Send/Receives Updates Now</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="-1" class="repl-agmt-btn" href="#">Full Re-synchronization</a></li>' +
-      '<li role=""><a role="menuitem" tabindex="-1" class="repl-agmt-btn agmt-del-btn" href="#">Delete Agreement</a></li>' +
+      '<li role=""><a class="repl-agmt-btn winsync-agmt-edit-btn" href="#">View/Edit Agreement</a></li>' +
+      '<li role=""><a class="repl-agmt-btn" href="#">Send/Receives Updates Now</a></li>' +
+      '<li role=""><a class="repl-agmt-btn" href="#">Full Re-synchronization</a></li>' +
+      '<li role=""><a class="repl-agmt-btn winsync-agmt-del-btn" href="#">Delete Agreement</a></li>' +
     '</ul>' +
   '</div>';
 
@@ -397,17 +397,33 @@ $(document).ready( function() {
       e.preventDefault();
       clear_agmt_wizard();
 
-      // Update HTML table
       var data = repl_agmt_table.row( $(this).parents('tr') ).data();
       var edit_agmt_name = data[0];
 
-      // TODO Get agreement from DS
+      // TODO Get agreement from DS and populate form
 
       // Set agreement form values
       $("#agmt-wizard-title").html("<b>Edit Replication Agreement</b>");
 
       // Open form
-      $("#agmt-form").css('display', 'block');
+      $("#agmt-form").modal('toggle');
+    });
+
+    // Edit Winsync Agreement
+    $(document).on('click', '.winsync-agmt-edit-btn', function(e) {
+      e.preventDefault();
+      clear_winsync_agmt_wizard();
+
+      var data = repl_winsync_agmt_table.row( $(this).parents('tr') ).data();
+      var edit_agmt_name = data[0];
+
+      // TODO Get agreement from DS and populate form
+
+      // Set agreement form values
+      $("#winsync-label").html("<b>Edit Winsync Agreement</b>");
+
+      // Open form
+      $("#winsync-agmt-form").modal('toggle');
     });
 
     // Handle disabling/enabling of agmt schedule panel
diff --git a/src/cockpit/389-console/js/servers.js b/src/cockpit/389-console/js/servers.js
index 6e4d790..ea2a443 100644
--- a/src/cockpit/389-console/js/servers.js
+++ b/src/cockpit/389-console/js/servers.js
@@ -147,14 +147,14 @@ function clear_inst_input() {
 function clear_inst_form() {
   $(".ds-modal-error").hide();
   $("#create-inst-serverid").val("");
-  $("#create-inst-port").val("");
-  $("#create-inst-secureport").val("");
-  $("#create-inst-rootdn").val("");
+  $("#create-inst-port").val("389");
+  $("#create-inst-secureport").val("636");
+  $("#create-inst-rootdn").val("cn=Directory Manager");
   $("#create-inst-user").val("dirsrv");
   $("#create-inst-group").val("dirsrv");
   $("#rootdn-pw").val("");
   $("#rootdn-pw-confirm").val("");
-  $("#create-inst-tls").prop('checked', true);
+  $("#create-inst-tls").prop('checked', false);
   clear_inst_input();
 }
 
@@ -756,6 +756,7 @@ $(document).ready( function() {
     // Create instance form
     $("#create-server-btn").on("click", function() {;
       clear_inst_form();
+      set_ports();
     });
     $("#no-inst-create-btn").on("click", function () {
       clear_inst_form();
diff --git a/src/cockpit/389-console/monitor.html b/src/cockpit/389-console/monitor.html
index 0be0929..94249e4 100644
--- a/src/cockpit/389-console/monitor.html
+++ b/src/cockpit/389-console/monitor.html
@@ -626,18 +626,18 @@
 
 
   <div id="monitor-repl-page" class="all-pages" hidden>
-    <h3>Replication Monitoring</h3>
-    <hr class="ds-hr">
-    <input type="checkbox" class="ds-config-checkbox" id="skipped-disabled" checked><label
-      for="skipped-disabled" class="ds-label" title="Do not list replication agreements that are disabled"> Ignore Disabled Replication Agreements</label>
+    <h3>Replication Monitoring for <select class="btn btn-default dropdown ds-select" id="monitor-repl-backend-list">
+      <option>dc=example,dc=com</option></select></h3>
+    <hr>
+    <h4>Replication Agreements</h4>
     <table id="monitor-repl-table" class="display ds-table" cellspacing="0" width="100%">
       <thead>
         <tr class="ds-table-header">
           <th>Agreement</th>
           <th>Replica</th>
-          <th>Suffix</th>
-          <th>Replication State</th>
+          <th>Enabled</th>
           <th>Replication Lag</th>
+          <th>Replication State</th>
           <th></th>
         </tr>
       </thead>
@@ -645,41 +645,40 @@
         <tr>
           <td>me2localhost</td>
           <td>localhost.localdomain:5555</td>
-          <td>dc=example,dc=com</td>
-          <td><div class="ds-repl-state-good">Good</div></td>
-          <td class="ds-repl-agmt-good">00:00:00</td>
+          <td>Yes</td>
+          <td>00:00:00</td>
+          <td data-sort="good"><div class="ds-repl-state-good"><span class="glyphicon glyphicon-thumbs-up"></span></div></td>
           <td><button class="btn btn-default ds-agmt-dropdown-button repl-detail-btn" data-toggle="modal" data-target="#monitor-agmt-form" type="button">View Details</button></td>
         </tr>
         <tr>
           <td>me2beaker</td>
           <td>lab1.localdomain.com:389</td>
-          <td>o=ipaca</td>
-          <td><div class="ds-repl-state-good">Good</div></td>
-          <td class="ds-repl-agmt-good">00:00:02</td>
+          <td>Yes</td>
+          <td >00:00:02</td>
+          <td data-sort="good"><div class="ds-repl-state-good"><span class="glyphicon glyphicon-thumbs-up"></span></div></td>
           <td><button class="btn btn-default ds-agmt-dropdown-button repl-detail-btn" data-toggle="modal" data-target="#monitor-agmt-form" type="button">View Details</button></td>
         </tr>
         <tr>
           <td>me2fedora</td>
           <td>lab45.localdomain.com:389</td>
-          <td>o=ipaca</td>
-          <td><div class="ds-repl-state-good">Good</div></td>
-          <td class="ds-repl-agmt-warning">00:09:02</td>
+          <td>Yes</td>
+          <td>00:09:02</td>
+          <td data-sort="good"><div class="ds-repl-state-good"><span class="glyphicon glyphicon-thumbs-up"></span></div></td>
           <td><button class="btn btn-default ds-agmt-dropdown-button repl-detail-btn" data-toggle="modal" data-target="#monitor-agmt-form" type="button">View Details</button></td>
         </tr>
         <tr>
           <td>me2beaker</td>
           <td>lab11.localdomain.com:389</td>
-          <td>o=ipaca</td>
-          <td><div class="ds-repl-state-bad">Bad</div></td>
-          <td class="ds-repl-agmt-bad">00:45:02</td>
+          <td>Yes</td>
+          <td class="ds-repl-lag-bad">00:45:02</td>
+          <td data-sort="bad"><div class="ds-repl-state-bad"><span class="glyphicon glyphicon-thumbs-down"></span></div></td>
           <td><button class="btn btn-default ds-agmt-dropdown-button repl-detail-btn" data-toggle="modal" data-target="#monitor-agmt-form" type="button">View Details</button></td>
         </tr>
       </tbody>
     </table>
     <p></p>
-
-    <h3>Windows Synchronization</h3>
-    <hr class="ds-hr">
+    <hr>
+    <h4>Windows Synchronization Agreements</h4>
     <table id="monitor-winsync-table" class="display ds-table" cellspacing="0" width="100%">
     <thead>
         <tr class="ds-table-header">
@@ -697,7 +696,7 @@
           <td>localhost.domain.com:389</td>
           <td>cn=users,dc=example,dc=com</td>
           <td>ou=people,dc=example,dc=com</td>
-          <td><div class="ds-repl-state-good">Good</div></td>
+          <td data-sort="good"><div class="ds-repl-state-good"><span class="glyphicon glyphicon-thumbs-up"></span></div></td>
           <td><button class="btn btn-default ds-agmt-dropdown-button repl-winsync-detail-btn" data-toggle="modal" 
             data-target="#monitor-winsync-agmt-form" type="button">View Details</button></td>
         </tr>

