UX Changes and Styling of replica set detail page

Author: Sebastian Florek

src/app/frontend/_variables.scss

@@ -20,6 +20,7 @@
 }
 
 $display-4-font-size-base: rem(11.2) !default;
+$display-1-font-size-base: rem(3.4) !default;
 $headline-font-size-base:  rem(2.4) !default;
 $subhead-font-size-base:   rem(1.6) !default;
 $body-font-size-base:      rem(1.4) !default;

src/app/frontend/chrome/chrome.scss

@@ -81,3 +81,8 @@ a {
     }
   }
 }
+
+// Disables animation on md-tab switch. Avoids some flickering and is simpler.
+[role='tabpanel'] {
+  transition: none;
+}

src/app/frontend/index_config.js

@@ -19,11 +19,15 @@
 export default function config($mdThemingProvider) {
   // Create a color palette that uses Kubernetes colors.
   let kubernetesColorPaletteName = 'kubernetesColorPalette';
+  let kubernetesAccentPaletteName = 'kubernetesAccentPallete';
   let kubernetesColorPalette = $mdThemingProvider.extendPalette('blue', {
     '500': '326de6',
   });
 
   // Use the palette as default one.
   $mdThemingProvider.definePalette(kubernetesColorPaletteName, kubernetesColorPalette);
-  $mdThemingProvider.theme('default').primaryPalette(kubernetesColorPaletteName);
+  $mdThemingProvider.definePalette(kubernetesAccentPaletteName, kubernetesColorPalette);
+  $mdThemingProvider.theme('default')
+      .primaryPalette(kubernetesColorPaletteName)
+      .accentPalette(kubernetesAccentPaletteName);
 }

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -34,9 +34,12 @@ <h1 flex class="md-title kd-replicasetdetail-app-name">
       <div layout="row" flex="nogrow">
         <md-button class="md-primary" ng-click="ctrl.handleDeleteReplicaSetDialog()">
           <md-icon class="material-icons">delete</md-icon>
-          DELETE
+          DELETE REPLICA SET
         </md-button>
       </div>
+      <span class="kd-replicasetdetail-sidebar-title kd-replicasetdetail-sidebar-info">
+        Replica set
+      </span>
       <div flex layout="column" class="kd-replicasetdetail-sidebar-info">
         <span class="kd-replicasetdetail-sidebar-line">Name</span>
         <span class="kd-replicasetdetail-sidebar-subline">
@@ -251,7 +254,7 @@ <h1 flex class="md-title kd-replicasetdetail-app-name">
       </md-content>
     </md-tab>
     <md-tab label="Events">
-      <md-content flex>
+      <md-content flex ng-if="ctrl.hasEvents()">
         <div class="kd-replicasetdetail-options" layout="row">
           <md-input-container class="kd-replicasetdetail-option-picker">
             <label>Type</label>
@@ -270,7 +273,7 @@ <h1 flex class="md-title kd-replicasetdetail-app-name">
             <th class="kd-replicasetdetail-table-header">
               <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                 currently-selected-order="ctrl.eventsOrder"
-                                column-name="message" tooltip="Event message">
+                                column-name="message">
                 Message
               </kd-sorted-header>
             </th>
@@ -285,7 +288,7 @@ <h1 flex class="md-title kd-replicasetdetail-app-name">
             <th class="kd-replicasetdetail-table-header">
               <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                 currently-selected-order="ctrl.eventsOrder"
-                                column-name="object" tooltip="Sub-object of the event">
+                                column-name="object">
                 Sub-object
               </kd-sorted-header>
             </th>
@@ -336,6 +339,15 @@ <h1 flex class="md-title kd-replicasetdetail-app-name">
           </tr>
           </tbody>
         </table>
+      </md-content>
+      <md-content class="kd-replicasetdetail-no-events" ng-if="!ctrl.hasEvents()">
+        <md-icon class="material-icons kd-replicasetdetail-no-events-icon">info_outline</md-icon>
+        <div class="kd-replicasetdetail-no-events-text">No events were found</div>
+        <span class="kd-replicasetdetail-no-events-info">
+          There are no events to display. It's possible that all of them have expired.
+          <a href="">Learn more</a>
+        </span>
+      </md-content>
     </md-tab>
   </md-tabs>
 </md-content>

src/app/frontend/replicasetdetail/replicasetdetail.scss

@@ -53,18 +53,13 @@ $table-cell-height-half: $table-cell-height / 2;
   font-weight: $bold-font-weight;
   padding-bottom: $baseline-grid;
   padding-top: $baseline-grid;
-
-  &.kd-replicasetdetail-sidebar-info {
-    padding-bottom: 0;
-    padding-top: 2 * $baseline-grid;
-  }
 }
 
 .kd-replicasetdetail-sidebar-line {
   color: $foreground-2;
   display: block;
   font-size: $body-font-size-base;
-  padding-bottom: $baseline-grid;
+  padding-bottom: 0;
 }
 
 .kd-replicasetdetail-sidebar-subline {
@@ -134,3 +129,27 @@ $table-cell-height-half: $table-cell-height / 2;
   color: $foreground-2;
   cursor: default;
 }
+
+.kd-replicasetdetail-no-events {
+  margin-top: 4 * $baseline-grid;
+  text-align: center;
+}
+
+md-icon {
+  &.kd-replicasetdetail-no-events-icon {
+    color: $muted;
+    font-size: $display-1-font-size-base;
+    margin: 0 (2 * $baseline-grid) (2 * $baseline-grid) 0;
+  }
+}
+
+.kd-replicasetdetail-no-events-text {
+  color: $muted;
+  font-size: $headline-font-size-base;
+  margin-bottom: $baseline-grid;
+}
+
+.kd-replicasetdetail-no-events-info {
+  color: $delicate;
+  font-size: $subhead-font-size-base;
+}

src/app/frontend/replicasetdetail/replicasetdetail_controller.js

@@ -115,6 +115,14 @@ export default class ReplicaSetDetailController {
    */
   isEventWarning(event) { return event.type === EVENT_TYPE_WARNING; }
 
+  /**
+   * Returns true if there are events to display.
+   *
+   * @returns {boolean}
+   * @export
+   */
+  hasEvents() { return this.events !== undefined && this.events.length > 0; }
+
   /**
    * Handles event filtering by type and source.
    * @export

src/test/frontend/replicasetdetail/replicasetdetail_controller_test.js

@@ -124,4 +124,23 @@ describe('Replica Set Detail controller', () => {
     // then
     expect(kdReplicaSetService.showDeleteDialog).toHaveBeenCalled();
   });
+
+  it('should return true when there are events to display', () => {
+    // given
+    ctrl.events = ["Some event"];
+
+    // when
+    let result = ctrl.hasEvents();
+
+    // then
+    expect(result).toBeTruthy();
+  });
+
+  it('should return false if there are no events to display', () => {
+    // when
+    let result = ctrl.hasEvents();
+
+    // then
+    expect(result).toBeFalsy();
+  });
 });