diff --git a/src/app/frontend/_variables.scss b/src/app/frontend/_variables.scss index bcad0179a177..978cd5457662 100644 --- a/src/app/frontend/_variables.scss +++ b/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; diff --git a/src/app/frontend/chrome/chrome.scss b/src/app/frontend/chrome/chrome.scss index 2285b9ce4280..60e18c4dcff4 100644 --- a/src/app/frontend/chrome/chrome.scss +++ b/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; +} diff --git a/src/app/frontend/index_config.js b/src/app/frontend/index_config.js index c202886db7e0..be2080247c05 100644 --- a/src/app/frontend/index_config.js +++ b/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); } diff --git a/src/app/frontend/replicasetdetail/replicasetdetail.html b/src/app/frontend/replicasetdetail/replicasetdetail.html index 908448fb2760..247aac85b79e 100644 --- a/src/app/frontend/replicasetdetail/replicasetdetail.html +++ b/src/app/frontend/replicasetdetail/replicasetdetail.html @@ -34,9 +34,12 @@

delete - DELETE + DELETE REPLICA SET
+ + Replica set +
Name @@ -251,7 +254,7 @@

- +
@@ -270,7 +273,7 @@

+ column-name="message"> Message @@ -285,7 +288,7 @@

+ column-name="object"> Sub-object @@ -336,6 +339,15 @@

+ + + info_outline +
No events were found
+ + There are no events to display. It's possible that all of them have expired. + Learn more + + diff --git a/src/app/frontend/replicasetdetail/replicasetdetail.scss b/src/app/frontend/replicasetdetail/replicasetdetail.scss index 3adab8f2e5d5..e3b516ce1e9d 100644 --- a/src/app/frontend/replicasetdetail/replicasetdetail.scss +++ b/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; +} diff --git a/src/app/frontend/replicasetdetail/replicasetdetail_controller.js b/src/app/frontend/replicasetdetail/replicasetdetail_controller.js index 828934d6880f..b23e36bbb29f 100644 --- a/src/app/frontend/replicasetdetail/replicasetdetail_controller.js +++ b/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 diff --git a/src/test/frontend/replicasetdetail/replicasetdetail_controller_test.js b/src/test/frontend/replicasetdetail/replicasetdetail_controller_test.js index 8a51ba04e976..e7388e6e558a 100644 --- a/src/test/frontend/replicasetdetail/replicasetdetail_controller_test.js +++ b/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(); + }); });