Merge pull request #2209 from rhamilto/results-styling

Improving display of results status messages and removing orphaned ta…
openshift · Oct 3, 2017 · 19ffee3 · 19ffee3
2 parents 32e45b8 + 25df20a
commit 19ffee3
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 239 deletions.
diff --git a/app/scripts/directives/create/nextSteps.js b/app/scripts/directives/create/nextSteps.js
@@ -15,8 +15,7 @@
       createdBuildConfig: '<',
       onContinue: '<',
       showProjectName: '<',
-      name: '<',
-      isDialog: '<'
+      name: '<'
     },
     templateUrl: 'views/directives/next-steps.html'
   });

diff --git a/app/scripts/directives/tasks.js b/app/scripts/directives/tasks.js
diff --git a/app/styles/_core.less b/app/styles/_core.less
@@ -705,6 +705,7 @@ label.checkbox {
 .template-message {
   background-color: transparent;
   border: 1px solid @color-pf-black-300;
+  margin-top: 21px !important;
   .resource-description {
     font-family: @font-family-monospace;
     // Consistent font-size with the CLI examples in code blocks below the template message.

diff --git a/app/views/_tasks.html b/app/views/_tasks.html
diff --git a/app/views/directives/deploy-image-dialog.html b/app/views/directives/deploy-image-dialog.html
@@ -43,8 +43,7 @@
                       login-base-url="$ctrl.loginBaseUrl"
                       on-continue="$ctrl.close"
                       show-project-name="$ctrl.showProjectName"
-                      name="$ctrl.appName"
-                      is-dialog="true">
+                      name="$ctrl.appName">
           </next-steps>
         </div>
       </div>

diff --git a/app/views/directives/from-file-dialog.html b/app/views/directives/from-file-dialog.html
@@ -86,8 +86,7 @@
                       login-base-url="$ctrl.loginBaseUrl"
                       on-continue="$ctrl.close"
                       show-project-name="$ctrl.showProjectName"
-                      name="$ctrl.name"
-                      is-dialog="true">
+                      name="$ctrl.name">
           </next-steps>
         </div>
       </div>

diff --git a/app/views/directives/next-steps.html b/app/views/directives/next-steps.html
@@ -1,85 +1,60 @@
 <div ng-controller="TasksController">
   <div ng-if="$ctrl.pendingTasks(tasks()).length">
     <div class="results-status">
-      <span class="spinner spinner-sm" aria-hidden="true"></span>
+      <span class="fa fa-clock-o text-muted" aria-hidden="true"></span>
       <span class="sr-only">Pending</span>
-      <h1 class="results-message h3">
-        <strong>{{$ctrl.name}}</strong> is being created<span ng-if="$ctrl.showProjectName && $ctrl.projectName"> in <strong>{{$ctrl.projectName}}</strong></span>.
-      </h1>
+      <div class="results-message">
+        <h1 class="h3">
+          <strong>{{$ctrl.name}}</strong> is being created<span ng-if="$ctrl.showProjectName && $ctrl.projectName"> in <strong>{{$ctrl.projectName}}</strong></span>.
+        </h1>
+      </div>
     </div>
   </div>
   <div class="results-failure" ng-if="!$ctrl.pendingTasks(tasks()).length && $ctrl.erroredTasks(tasks()).length">
     <div class="results-status">
       <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>
       <span class="sr-only">Error</span>
-      <h1 class="results-message h3">
-        <strong>{{$ctrl.name}}</strong> failed to be created<span ng-if="$ctrl.showProjectName && $ctrl.projectName"> in <strong>{{$ctrl.projectName}}</strong></span>.
-      </h1>
+      <div class="results-message">
+        <h1 class="h3">
+          <strong>{{$ctrl.name}}</strong> failed to be created<span ng-if="$ctrl.showProjectName && $ctrl.projectName"> in <strong>{{$ctrl.projectName}}</strong></span>.
+        </h1>
+      </div>
     </div>
   </div>
   <!-- if the user refreshes the next steps page -->
   <div ng-if="!tasks().length">
-    <div class="results-status">
-      <span class="pficon pficon-ok" aria-hidden="true"></span>
-      <span class="sr-only">Success</span>
-      <h1 class="results-message h3">
-        <strong>{{$ctrl.name}}</strong> has been created<span ng-if="$ctrl.showProjectName && $ctrl.projectName"> in <strong>{{$ctrl.projectName}}</strong> successfully</span>.
-      </h1>
+    <div class="results-status results-status-unknown">
+      <div class="results-message">
+        <h1 class="h3">
+          <strong>{{$ctrl.name}}</strong> completed.
+        </h1>
+      </div>
     </div>
   </div>
   <div ng-if="tasks().length && $ctrl.allTasksSuccessful(tasks())">
     <div class="results-status">
       <span class="pficon pficon-ok" aria-hidden="true"></span>
       <span class="sr-only">Success</span>
-      <h1 class="results-message h3">
-        <strong>{{$ctrl.name}}</strong> has been created<span ng-if="$ctrl.showProjectName && $ctrl.projectName"> in <strong>{{$ctrl.projectName}}</strong> successfully</span>.
-      </h1>
+      <div class="results-message">
+        <h1 class="h3">
+          <strong>{{$ctrl.name}}</strong> has been created<span ng-if="$ctrl.showProjectName && $ctrl.projectName"> in <strong>{{$ctrl.projectName}}</strong> successfully</span>.
+        </h1>
+      </div>
     </div>
   </div>
 
   <p ng-if="!$ctrl.pendingTasks(tasks()).length && !$ctrl.erroredTasks(tasks()).length">
     <a href="" ng-click="$ctrl.goToOverview()">Continue to the project overview</a>.
   </p>
 
-  <!-- Show a simple bulleted list of errors if the tasks list is displayed in a dialog. -->
-  <div ng-if="$ctrl.isDialog && hasTaskWithError()">
+  <div ng-if="hasTaskWithError()">
     <ul ng-repeat="task in tasks()">
       <li ng-repeat="alert in task.alerts" ng-if="alert.type === 'error' || alert.type === 'warning'">
         {{alert.message}}
         {{alert.details}}
       </li>
     </ul>
   </div>
-
-  <!-- Show a larger message if full page. -->
-  <div ng-repeat="task in tasks()" ng-if="!$ctrl.isDialog && tasks().length && !$ctrl.allTasksSuccessful(tasks())">
-    <div class="tasks" ng-class="hasTaskWithError() ? 'failure' : 'success'">
-      <div class="task-content">
-        <i class="pficon task-icon" ng-class="task.hasErrors ? 'pficon-error-circle-o' : 'pficon-ok'"></i>
-        <div class="task-info">
-          {{ task | taskTitle }}.
-        </div>
-      </div>
-      <div class="alerts task-expanded-details">
-        <div ng-repeat="alert in task.alerts">
-          <div ng-switch="alert.type">
-            <div ng-switch-when="error" class="alert alert-danger">
-              <span class="pficon pficon-error-circle-o"></span>
-              <span ng-if="alert.message">{{alert.message}}</span><span ng-if="alert.details">{{alert.details}}.</span>
-            </div>
-            <div ng-switch-when="warning" class="alert alert-warning">
-              <span class="pficon pficon-warning-triangle-o"></span>
-              <span ng-if="alert.message">{{alert.message}}</span><span ng-if="alert.details">{{alert.details}}.</span>
-            </div>
-            <div ng-switch-when="success" class="alert alert-success">
-              <span class="pficon pficon-ok"></span>
-              <span ng-if="alert.message">{{alert.message}}</span><span ng-if="alert.details">{{alert.details}}.</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
 
 <div class="alert alert-info template-message" ng-if="$ctrl.templateMessage.length">

diff --git a/app/views/directives/process-template-dialog/process-template-results.html b/app/views/directives/process-template-dialog/process-template-results.html
@@ -5,7 +5,6 @@
     login-base-url="$ctrl.loginBaseUrl"
     on-continue="$ctrl.close"
     show-project-name="$ctrl.showProjectName"
-    name="$ctrl.template | displayName"
-    is-dialog="true">
+    name="$ctrl.template | displayName">
   </next-steps>
 </div>
diff --git a/app/views/overview.html b/app/views/overview.html
@@ -101,7 +101,6 @@ <h2>Welcome to project {{projectName}}.</h2>
       </div>
       <div class="middle-content">
         <div class="container-fluid">
-          <tasks></tasks>
           <alerts alerts="overview.state.alerts"></alerts>
           <div ng-if="overview.everythingFiltered && overview.viewBy !== 'pipeline'">
             <div class="empty-state-message text-center h2">

diff --git a/bower.json b/bower.json
@@ -46,8 +46,8 @@
     "angular-moment": "1.0.0",
     "angular-utf8-base64": "0.0.5",
     "file-saver": "1.3.3",
-    "origin-web-common": "0.0.62",
-    "origin-web-catalog": "0.0.51"
+    "origin-web-common": "0.0.63",
+    "origin-web-catalog": "0.0.52"
   },
   "devDependencies": {
     "angular-mocks": "1.5.11",

diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
@@ -11070,11 +11070,6 @@ angular.element("#" + e).focus();
 };
 }
 };
-}), angular.module("openshiftConsole").directive("tasks", function() {
-return {
-restrict: "E",
-templateUrl: "views/_tasks.html"
-};
 }), angular.module("openshiftConsole").directive("catalog", [ "CatalogService", "Constants", "KeywordService", "Logger", function(e, t, n, a) {
 return {
 restrict: "E",
@@ -13257,8 +13252,7 @@ fromSampleRepo: "<",
 createdBuildConfig: "<",
 onContinue: "<",
 showProjectName: "<",
-name: "<",
-isDialog: "<"
+name: "<"
 },
 templateUrl: "views/directives/next-steps.html"
 });