Task Log (web UI) improvements

Instead of using the `full task log' link to toggle task log visibility,
it gets hidden and we have a new, in-task close button ("X") instead.

Inside the task log, redacted credentials are blurred white.
The `Show Credentials' button is gone, and instead technicians can
hover over redacted credentials to view them.

ci/release_notes.md

@@ -0,0 +1,7 @@
+# Improvements
+
+* Credentials in task log output are now displayed as a blurred white block,
+  revealed on hover to those with sufficiently high rights.
+
+* The task log is now closed by clicking the [X] button in the log pane
+  instead of clicking the 'full task log' link again.

web2/htdocs/index.html

@@ -1630,10 +1630,8 @@ <h2>Timeline</h2>
         also display a big RESTORE button in the task output.
       ]]
 <pre class="task-[[= _.task.status ]][[ if (_.task.ok) { ]] override[[ } ]]"><code><div>
+<button class="close" rel="close">X</button>
 <button class="annotate" rel="annotate:[[= _.task.uuid ]]">Annotate</button>[[ if (_.restorable) { ]]<button class="restore" rel="restore:[[= _.task.uuid ]]">Restore</button>[[ } ]]
-[[ if (($global.auth.is.system.engineer)
-                || ($global.auth.is.tenant[$global.auth.tenant.uuid].engineer)) { ]]<button class="unredact">Show Credentials</button> [[ } ]]
-
 <form class="annotate">
 <input type="hidden" name="uuid" value="[[= _.task.uuid ]]" />
 [[ if (_.task.status == "failed") { ]]

web2/htdocs/shield.css

@@ -1359,6 +1359,7 @@ pre code button {
 }
 pre code button.restore:hover { background-color: #8CC63F; }
 pre code button.annotate:hover { background-color: purple; }
+pre code button.close:hover { background-color: red; }
 
 pre code div {
   white-space: normal;
@@ -2152,7 +2153,13 @@ form.scheduling .subform {
 }
 
 redacted {
-  background-color: black;
-  color: black;
-  filter: blur(6px);
+  background-color: transparent;
+  color: inherit;
+  filter: blur(10px);
+	font-weight: 900;
+}
+
+redacted:hover {
+	filter: none;
+	font-weight: inherit
 }

web2/htdocs/shield.js

@@ -3605,18 +3605,13 @@ $(function () {
   });
   /* }}} */
 
-  /* global: show a task in the next row down {{{ */
+  /* global: show a task log in the next row down {{{ */
   $(document.body).on('click', 'a[href^="task:"]', function (event) {
     event.preventDefault();
     var uuid  = $(event.target).closest('a[href^="task:"]').attr('href').replace(/^task:/, '');
     var $ev   = $(event.target).closest('.event');
     var $task = $ev.find('.task');
 
-    if ($task.is(':visible')) {
-      $task.hide();
-      return;
-    }
-
     $task = $task.show()
                 .html(template('loading'));
 
@@ -3629,10 +3624,17 @@ $(function () {
           task: data,
           restorable: data.type == "backup" && data.archive_uuid != "" && data.status == "done",
         }));
+        $(event.target).closest('li').hide();
       }
     });
   });
   /* }}} */
+  /* global: close the expanded log, in a task log {{{ */
+  $(document.body).on('click', '.task button[rel="close"]', function (event) {
+    $ev = $(event.target).closest('.event');
+    $ev.find('li.expand').show();
+    $ev.find('.task').hide();
+  });
   /* global: show an annotation form, in a task log {{{ */
   $(document.body).on('click', '.task button[rel^="annotate:"]', function (event) {
     $(event.target).closest('.task').find('form.annotate').toggle();
@@ -3731,21 +3733,4 @@ $(function () {
     });
   });
 
-  /* global: handle "restore:archive-uuid" buttons {{{ */
-  $(document.body).on('click', '.task .unredact', function (event) {
-    $(event.target).addClass('redact').removeClass('unredact')
-    $(event.target).text("Hide Credentials")
-    $(event.target).closest('.task').find( "redacted" ).css({'background-color': 'unset',
-      'color': 'unset',
-      'filter': 'unset'})
-  });
-
-  $(document.body).on('click', '.task .redact', function (event) {
-    $(event.target).addClass('unredact').removeClass('redact')
-    $(event.target).text("Show Credentials")
-    $(event.target).closest('.task').find( "redacted" ).css({'background-color': 'black',
-      'color': 'black',
-      'filter': 'blur(6px)'})
-  });
-  /* }}} */
 });

web2/src/js/shield.js

@@ -2289,18 +2289,13 @@ $(function () {
   });
   /* }}} */
 
-  /* global: show a task in the next row down {{{ */
+  /* global: show a task log in the next row down {{{ */
   $(document.body).on('click', 'a[href^="task:"]', function (event) {
     event.preventDefault();
     var uuid  = $(event.target).closest('a[href^="task:"]').attr('href').replace(/^task:/, '');
     var $ev   = $(event.target).closest('.event');
     var $task = $ev.find('.task');
 
-    if ($task.is(':visible')) {
-      $task.hide();
-      return;
-    }
-
     $task = $task.show()
                 .html(template('loading'));
 
@@ -2313,10 +2308,17 @@ $(function () {
           task: data,
           restorable: data.type == "backup" && data.archive_uuid != "" && data.status == "done",
         }));
+        $(event.target).closest('li').hide();
       }
     });
   });
   /* }}} */
+  /* global: close the expanded log, in a task log {{{ */
+  $(document.body).on('click', '.task button[rel="close"]', function (event) {
+    $ev = $(event.target).closest('.event');
+    $ev.find('li.expand').show();
+    $ev.find('.task').hide();
+  });
   /* global: show an annotation form, in a task log {{{ */
   $(document.body).on('click', '.task button[rel^="annotate:"]', function (event) {
     $(event.target).closest('.task').find('form.annotate').toggle();
@@ -2415,21 +2417,4 @@ $(function () {
     });
   });
 
-  /* global: handle "restore:archive-uuid" buttons {{{ */
-  $(document.body).on('click', '.task .unredact', function (event) {
-    $(event.target).addClass('redact').removeClass('unredact')
-    $(event.target).text("Hide Credentials")
-    $(event.target).closest('.task').find( "redacted" ).css({'background-color': 'unset',
-      'color': 'unset',
-      'filter': 'unset'})
-  });
-
-  $(document.body).on('click', '.task .redact', function (event) {
-    $(event.target).addClass('unredact').removeClass('redact')
-    $(event.target).text("Show Credentials")
-    $(event.target).closest('.task').find( "redacted" ).css({'background-color': 'black',
-      'color': 'black',
-      'filter': 'blur(6px)'})
-  });
-  /* }}} */
 });