firmware: second pass for #304; UX tweaks mostly

src/opnsense/mvc/app/controllers/OPNsense/Core/Api/FirmwareController.php

@@ -56,7 +56,7 @@ class FirmwareController extends ApiControllerBase
                 $response["status_msg"] = "Repository Problem";
             } elseif (array_key_exists("updates", $response) && $response['updates'] == 0) {
                 $response["status"] = "none";
-                $response["status_msg"] = "no updates found";
+                $response["status_msg"] = "No updates found";
             } elseif (array_key_exists(0, $response["upgrade_packages"]) &&
                 $response["upgrade_packages"][0]["name"] == "pkg") {
                 $response["status"] = "ok";

src/opnsense/mvc/app/views/OPNsense/Core/firmware.volt

@@ -36,25 +36,16 @@ POSSIBILITY OF SUCH DAMAGE.
         $('#updatelist').empty();
         $('#maintabs li:eq(1) a').tab('show');
         $("#checkupdate_progress").addClass("fa fa-spinner fa-pulse");
-        $('#updatebox').attr('class', 'alert alert-info');
         $('#updatestatus').html("{{ lang._('Updating.... (may take up to 30 seconds)') }}");
 
         // request status
         ajaxGet('/api/core/firmware/status',{},function(data,status){
-            // update UI
-            if (data['status'] == 'unknown') {
-                $('#updatebox').attr('class', 'alert alert-warning');
-            } else if (data['status'] == 'error') {
-                $('#updatebox').attr('class', 'alert alert-danger');
-            } else if (data['status'] == 'none' || data['status'] == 'ok') {
-                $('#updatesbox').attr('class', 'alert alert-info');
-            }
             status_msg = data['status_msg'];
             if (data['upgrade_needs_reboot'] == "1") {
                 status_msg = status_msg + " This update requires a reboot.";
             }
-            $('#updatestatus').html(status_msg);
             $("#checkupdate_progress").removeClass("fa fa-spinner fa-pulse");
+            $('#updatestatus').html(status_msg);
 
             if (data['status'] == "ok") {
                 $.upgrade_action = data['status_upgrade_action'];
@@ -95,11 +86,10 @@ POSSIBILITY OF SUCH DAMAGE.
      */
     function upgrade(){
         $('#maintabs li:eq(2) a').tab('show');
-        $('#updatestatus').html("{{ lang._('Starting Upgrade.. Please do not leave this page while upgrade is in progress.') }}");
+        $('#updatestatus').html("{{ lang._('Running upgrade. Please do not leave this page while upgrade is in progress.') }}");
         $("#upgrade_progress").addClass("fa fa-spinner fa-pulse");
 
         ajaxCall('/api/core/firmware/upgrade',{upgrade:$.upgrade_action},function() {
-            $("#upgrade_progress").removeClass("fa fa-spinner fa-pulse");
             $('#updatelist').empty();
             setTimeout(trackStatus, 500);
         });
@@ -156,7 +146,9 @@ POSSIBILITY OF SUCH DAMAGE.
                 $('#update_status').scrollTop($('#update_status')[0].scrollHeight);
             }
             if (data['status'] == 'done') {
+                $("#upgrade_progress").removeClass("fa fa-spinner fa-pulse");
                 $('#updatestatus').html("{{ lang._('Upgrade done!') }}");
+                $("#upgrade").attr("style","display:none");
                 packagesInfo();
             } else if (data['status'] == 'reboot') {
                 // reboot required, tell the user to wait until this is finished and redirect after 5 minutes
@@ -212,10 +204,10 @@ POSSIBILITY OF SUCH DAMAGE.
 
 <div class="container-fluid">
     <div class="row">
-        <div class="alert alert-info" role="alert" style="min-height: 65px;" id="updatebox">
-            <button class='btn btn-primary pull-right' id="upgrade" style="display:none"><i id="upgrade_progress" class=""></i> {{ lang._('Upgrade now') }} </button>
-            <button class='btn btn-default pull-right' id="checkupdate"><i id="checkupdate_progress" class=""></i> {{ lang._('Fetch updates')}}</button>
-            <strong><div style="margin-top: 8px;" id="updatestatus">{{ lang._('Click to check for updates')}}</div></strong>
+        <div class="alert alert-info" role="alert" style="min-height: 65px;">
+            <button class='btn btn-primary pull-right' id="upgrade" style="display:none"><i id="upgrade_progress" class=""></i> {{ lang._('Upgrade now') }}</button>
+            <button class='btn btn-default pull-right' id="checkupdate" style="margin-right: 8px;"><i id="checkupdate_progress" class=""></i> {{ lang._('Fetch updates')}}</button>
+            <div style="margin-top: 8px;" id="updatestatus">{{ lang._('Click to check for updates')}}</div>
         </div>
     </div>
     <div class="row">
@@ -235,7 +227,7 @@ POSSIBILITY OF SUCH DAMAGE.
                     </table>
                 </div>
                 <div id="progress" class="tab-pane fade in">
-                    <textarea name="output" id="update_status" class="form-control" rows="10" wrap="hard" readonly style="max-width:100%; font-family: monospace;"></textarea>
+                    <textarea name="output" id="update_status" class="form-control" rows="20" wrap="hard" readonly style="max-width:100%; font-family: monospace;"></textarea>
                 </div>
             </div>
         </div>