Display last values next to sparklines (#4260)

* Display last values next to sparklines

* Update styling

src/app/frontend/common/components/resourcelist/pod/component.ts

@@ -16,7 +16,6 @@ import {HttpParams} from '@angular/common/http';
 import {Component, ComponentFactoryResolver, Input, OnDestroy} from '@angular/core';
 import {Event, Pod, PodList} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
-import {takeUntil} from 'rxjs/operators';
 
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NotificationsService} from '../../../services/global/notifications';

src/app/frontend/common/components/sparkline/cpu/component.ts

@@ -19,7 +19,6 @@ import {Sparkline} from '../sparkline';
 @Component({
   selector: 'kd-cpu-sparkline',
   templateUrl: './template.html',
-  styleUrls: ['style.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CpuSparklineComponent extends Sparkline implements OnInit {

src/app/frontend/common/components/sparkline/cpu/style.scss

-// Copyright 2017 The Kubernetes Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-@import '../../../../variables';
-
-.kd-sparkline {
-  height: 4 * $baseline-grid;
-  vertical-align: -$baseline-grid / 2; // 20% below baseline, to flow with text
-  width: 15 * $baseline-grid;
-}
-

src/app/frontend/common/components/sparkline/cpu/template.html

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div [matTooltip]="'Latest value: ' + (lastValue | kdCores)">
+<div fxLayout="row"
+     fxLayoutAlign="center center">
   <svg viewBox="0,0 1,1"
        preserveAspectRatio="none"
        class="kd-sparkline kd-bg-background kd-border"
@@ -32,4 +33,5 @@ limitations under the License.
     <svg:polygon fill="url(#cpugradient)"
                  [attr.points]="getPolygonPoints()" />
   </svg>
+  <div class="kd-sparkline-value kd-muted-light">{{lastValue | kdCores}}</div>
 </div>

src/app/frontend/common/components/sparkline/memory/component.ts

@@ -19,7 +19,6 @@ import {Sparkline} from '../sparkline';
 @Component({
   selector: 'kd-memory-sparkline',
   templateUrl: './template.html',
-  styleUrls: ['style.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MemorySparklineComponent extends Sparkline implements OnInit {

src/app/frontend/common/components/sparkline/memory/style.scss

-// Copyright 2017 The Kubernetes Authors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-@import '../../../../variables';
-
-.kd-sparkline {
-  height: 4 * $baseline-grid;
-  vertical-align: -$baseline-grid / 2; // 20% below baseline, to flow with text
-  width: 15 * $baseline-grid;
-}
-

src/app/frontend/common/components/sparkline/memory/template.html

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div [matTooltip]="'Latest value: ' + (lastValue | kdMemory)">
+<div fxLayout="row"
+     fxLayoutAlign="center center">
   <svg viewBox="0,0 1,1"
        preserveAspectRatio="none"
        class="kd-sparkline kd-bg-background kd-border"
@@ -32,4 +33,5 @@ limitations under the License.
     <svg:polygon fill="url(#memgradient)"
                  [attr.points]="getPolygonPoints()" />
   </svg>
+  <div class="kd-sparkline-value kd-muted-light">{{lastValue | kdMemory}}</div>
 </div>

src/app/frontend/index.scss

@@ -313,6 +313,22 @@ router-outlet::after {
   border-bottom: 0 !important;
 }
 
+.kd-sparkline {
+  height: 4 * $baseline-grid;
+  vertical-align: -$baseline-grid / 2; // 20% below baseline, to flow with text
+  width: 15 * $baseline-grid;
+}
+
+.kd-sparkline-value {
+  font-weight: $bold-font-weight;
+  position: absolute;
+}
+
+.mat-column-cpu,
+.mat-column-mem {
+  min-width: 15 * $baseline-grid;
+}
+
 // This is a workaround to remove whitespace from code block element.
 .kd-no-whitespace {
   font-size: 0;