New certificate and Kerberos key status behavior.

The status panel for certificates and Kerberos keys has been
modified to display only the current status with the relevant buttons.
New icons have been added to replace the red/yellow/green bullets.

1 files changed, 40 insertions, 42 deletions

diff --git a/install/static/host.js b/install/static/host.js
index 76c5943c..9751abbe 100644
--- a/install/static/host.js
+++ b/install/static/host.js
@@ -221,76 +221,78 @@ function host_provisioning_status_widget(spec) {
 
         that.widget_create(container);
 
-        var table = $('<table/>', {
-            'class': 'kerberos-key-status'
+        var dd = $('<dd/>', {
+            'class': 'first'
         }).appendTo(container);
 
-        var tr = $('<tr/>').appendTo(table);
+        var div = $('<div/>', {
+            name: 'kerberos-key-valid'
+        }).appendTo(dd);
 
-        var td = $('<td/>').appendTo(tr);
-        $('<div/>', {
-            'class': 'status-icon status-valid'
-        }).appendTo(td);
+        $('<img/>', {
+            src: 'check.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Kerberos Key Present, Host Provisioned:');
+        var content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append('<b>Kerberos Key Present, Host Provisioned:</b>');
+
+        content_div.append(' ');
 
         $('<input/>', {
             'type': 'button',
             'name': 'unprovision',
             'value': 'Delete Key, Unprovision'
-        }).appendTo(td);
-
-        tr = $('<tr/>').appendTo(table);
-
-        td = $('<td/>').appendTo(tr);
-        $('<div/>', {
-            'class': 'status-icon status-missing'
-        }).appendTo(td);
+        }).appendTo(content_div);
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Kerberos Key Not Present');
+        div = $('<div/>', {
+            name: 'kerberos-key-missing'
+        }).appendTo(dd);
 
-        td = $('<td/>').appendTo(tr);
+        $('<img/>', {
+            src: 'caution.png',
+            style: 'float: left;',
+            'class': 'status-icon'
+        }).appendTo(div);
 
-        tr = $('<tr/>').appendTo(table);
+        content_div = $('<div/>', {
+            style: 'float: left;'
+        }).appendTo(div);
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append('<b>Kerberos Key Not Present</b>');
 
-        td = $('<td/>').appendTo(tr);
-        td.append('Enroll via One-Time-Password:');
+        content_div.append('<br/>');
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append('Enroll via One-Time-Password:');
 
-        tr = $('<tr/>').appendTo(table);
-
-        td = $('<td/>').appendTo(tr);
-
-        td = $('<td/>').appendTo(tr);
+        content_div.append('<br/>');
+        content_div.append('<br/>');
 
         $('<input/>', {
             'type': 'text',
             'name': 'otp',
             'class': 'otp'
-        }).appendTo(td);
+        }).appendTo(content_div);
 
-        td = $('<td/>').appendTo(tr);
+        content_div.append(' ');
 
         $('<input/>', {
             'type': 'button',
             'name': 'enroll',
             'value': 'Set OTP'
-        }).appendTo(td);
+        }).appendTo(content_div);
     };
 
     that.setup = function(container) {
 
         that.widget_setup(container);
 
-        that.valid = $('.status-valid', that.container);
-        that.missing = $('.status-missing', that.container);
+        that.valid = $('div[name=kerberos-key-valid]', that.container);
+        that.missing = $('div[name=kerberos-key-missing]', that.container);
 
         var button = $('input[name=unprovision]', that.container);
         that.unprovision_button = IPA.button({
@@ -392,12 +394,8 @@ function host_provisioning_status_widget(spec) {
     };
 
     function set_status(status) {
-        that.valid.toggleClass('status-valid-active', status == 'valid');
-        that.missing.toggleClass('status-missing-active', status == 'missing');
-
-        that.unprovision_button.css('visibility', status == 'valid' ? 'visible' : 'hidden');
-        that.otp_input.css('visibility', status == 'missing' ? 'visible' : 'hidden');
-        that.enroll_button.css('visibility', status == 'missing' ? 'visible' : 'hidden');
+        that.valid.css('display', status == 'valid' ? 'inline' : 'none');
+        that.missing.css('display', status == 'missing' ? 'inline' : 'none');
     }
 
     return that;