Move deploy status and title into the log viewer title bar. (#1277)

* Move deploy status and title into the log viewer title bar. Make the log viewer slightly smaller. * Rename title attribute to avoid hover over text
cloudfoundry · Sep 22, 2017 · 397c7be · 397c7be
1 parent fb563b1
commit 397c7be
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 10 deletions.
diff --git a/...sh/frontend/src/view/deploy-app-workflow/deploy-step-deploying/deploy-step-deploying.html b/...sh/frontend/src/view/deploy-app-workflow/deploy-step-deploying/deploy-step-deploying.html
@@ -1,10 +1,7 @@
-<div class="deploy-app-log-status">
-  <span ng-if="step.data.deployStatus === step.data.deployState.PUSHING" translate>deploy-app-dialog.step-deploying.title-deploying</span>
-  <span ng-if="step.data.deployStatus === step.data.deployState.DEPLOYED" translate>deploy-app-dialog.step-deploying.title-deploy-success</span>
-  <span ng-if="step.data.deployStatus === step.data.deployState.FAILED" translate>{{ step.data.deployFailure }}</span>
-  <bounce-spinner ng-if="step.data.deployStatus === step.data.deployState.PUSHING" classes="bounce-spinner-sm"></bounce-spinner>
-</div>
-<cf-log-viewer ng-if="!step.data.uploadingFiles" web-socket="step.data.webSocket" filter="step.data.logFilter" disable-status="true"></cf-log-viewer>
+<cf-log-viewer ng-if="!step.data.uploadingFiles" web-socket="step.data.webSocket"
+  filter="step.data.logFilter" disable-status="true"
+  log-title="step.data.getState().title" status="step.data.getState().status">
+</cf-log-viewer>
 <div ng-if="step.data.uploadingFiles" class="deploy-app-file-upload-status">
   <div class="deploy-app-file-upload-title" translate>deploy-app-dialog.step-deploying.uploading</div>
     <percent-gauge class="deploy-app-file-progress" title="{{step.data.uploadingFiles.fileName}}"

diff --git a/...sh/frontend/src/view/deploy-app-workflow/deploy-step-deploying/deploy-step-deploying.scss b/...sh/frontend/src/view/deploy-app-workflow/deploy-step-deploying/deploy-step-deploying.scss
@@ -19,6 +19,10 @@ $deploy-status-bounce-spacer: 6px;
     .panel-heading.action-header {
       background-color: $console-primary-bg;
     }
+
+    .log-viewer {
+      height: $deploy-app-step-height;
+    }
   }
 
   .deploy-app-file-upload-status {

diff --git a/...ntend/src/view/deploy-app-workflow/deploy-step-deploying/deploy-step-deploying.service.js b/...ntend/src/view/deploy-app-workflow/deploy-step-deploying/deploy-step-deploying.service.js
@@ -63,10 +63,36 @@
       getStep: function (session) {
         var data = {
           deployState: deployState,
-          logFilter: logFilter
+          logFilter: logFilter,
+          getState: getState
         };
         var wizardData = session.wizard;
 
+        function getState() {
+          switch (data.deployStatus) {
+            case data.deployState.PUSHING:
+              return {
+                title: 'deploy-app-dialog.step-deploying.title-deploying',
+                status: 2
+              };
+            case data.deployState.DEPLOYED:
+              return {
+                title: 'deploy-app-dialog.step-deploying.title-deploy-success',
+                status: 1
+              };
+            case data.deployState.FAILED:
+              return {
+                title: data.deployFailure,
+                status: 3
+              };
+            default:
+              return {
+                title: 'deploy-app-dialog.step-deploying.title-deploying',
+                status: 2
+              };
+          }
+        }
+
         var step = {
           title: 'deploy-app-dialog.step-deploying.title',
           templateUrl: 'plugins/cf-app-push/view/deploy-app-workflow/deploy-step-deploying/deploy-step-deploying.html',

diff --git a/...-foundry/frontend/src/view/applications/application/log-stream/cf-log-viewer.directive.js b/...-foundry/frontend/src/view/applications/application/log-stream/cf-log-viewer.directive.js
@@ -14,7 +14,9 @@
         webSocket: '=?',
         filter: '=?',
         disableStatus: '=?',
-        fitHeight: '=?'
+        fitHeight: '=?',
+        logTitle: '=?',
+        status: '=?'
       },
       controller: CfLogViewerController,
       controllerAs: 'cfLogViewer',

diff --git a/...ts/cloud-foundry/frontend/src/view/applications/application/log-stream/cf-log-viewer.html b/...ts/cloud-foundry/frontend/src/view/applications/application/log-stream/cf-log-viewer.html
@@ -1,12 +1,19 @@
 <div class="panel panel-default summary log-viewer-panel">
   <div class="panel-heading action-header">
-    <span class="log-stream-title" translate>app.app-info.app-tabs.log-stream.title</span>
+    <span ng-if="!cfLogViewer.logTitle" class="log-stream-title" translate>app.app-info.app-tabs.log-stream.title</span>
+    <span ng-if="cfLogViewer.logTitle" class="log-stream-title" translate>{{ cfLogViewer.logTitle }}</span>
     <span ng-if="cfLogViewer.streamingStatus !== 2 && !cfLogViewer.disableStatus" class="app-log-stream-indicator material-icons"
     ng-class="{
                 'log-stream-ok text-primary': cfLogViewer.streamingStatus === 1,
                 'log-stream-error text-danger': cfLogViewer.streamingStatus === 3
               }"></span>
     <bounce-spinner classes="bounce-spinner-sm" ng-if="cfLogViewer.streamingStatus === 2 && !cfLogViewer.disableStatus"></bounce-spinner>
+    <span ng-if="cfLogViewer.disableStatus && (cfLogViewer.status === 1 || cfLogViewer.status === 3)" class="app-log-stream-indicator material-icons"
+    ng-class="{
+                'log-stream-ok text-primary': cfLogViewer.status === 1,
+                'log-stream-error text-danger': cfLogViewer.status === 3
+              }"></span>
+    <bounce-spinner classes="bounce-spinner-sm" ng-if="cfLogViewer.status === 2 && cfLogViewer.disableStatus"></bounce-spinner>
     <!--// After the user has scrolled up we disable auto-scroll-->
     <!--// They can re-enable auto-scroll either by:-->
     <!--// - manually scrolling to the bottom-->