From 1da16c0692511464a9f3bbf9d0ece35ed291b7b6 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <maciaszczykm@icloud.com>
Date: Thu, 5 Sep 2019 13:45:09 +0200
Subject: [PATCH] Display last values next to sparklines (#4260)

* Display last values next to sparklines

* Update styling
---
 .../components/resourcelist/pod/component.ts  |  1 -
 .../components/sparkline/cpu/component.ts     |  1 -
 .../components/sparkline/cpu/style.scss       | 22 -------------------
 .../components/sparkline/cpu/template.html    |  4 +++-
 .../components/sparkline/memory/component.ts  |  1 -
 .../components/sparkline/memory/style.scss    | 22 -------------------
 .../components/sparkline/memory/template.html |  4 +++-
 src/app/frontend/index.scss                   | 16 ++++++++++++++
 8 files changed, 22 insertions(+), 49 deletions(-)
 delete mode 100644 src/app/frontend/common/components/sparkline/cpu/style.scss
 delete mode 100644 src/app/frontend/common/components/sparkline/memory/style.scss

diff --git a/src/app/frontend/common/components/resourcelist/pod/component.ts b/src/app/frontend/common/components/resourcelist/pod/component.ts
index ec78fcb5f..07ef3accd 100644
--- a/src/app/frontend/common/components/resourcelist/pod/component.ts
+++ b/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';
diff --git a/src/app/frontend/common/components/sparkline/cpu/component.ts b/src/app/frontend/common/components/sparkline/cpu/component.ts
index dbb80d643..2dc3b8fb8 100644
--- a/src/app/frontend/common/components/sparkline/cpu/component.ts
+++ b/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 {
diff --git a/src/app/frontend/common/components/sparkline/cpu/style.scss b/src/app/frontend/common/components/sparkline/cpu/style.scss
deleted file mode 100644
index b38c5dd67..000000000
--- a/src/app/frontend/common/components/sparkline/cpu/style.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// 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;
-}
-
diff --git a/src/app/frontend/common/components/sparkline/cpu/template.html b/src/app/frontend/common/components/sparkline/cpu/template.html
index 2a957a99b..085d165cc 100644
--- a/src/app/frontend/common/components/sparkline/cpu/template.html
+++ b/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>
diff --git a/src/app/frontend/common/components/sparkline/memory/component.ts b/src/app/frontend/common/components/sparkline/memory/component.ts
index 252e001f8..cfcf89a88 100644
--- a/src/app/frontend/common/components/sparkline/memory/component.ts
+++ b/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 {
diff --git a/src/app/frontend/common/components/sparkline/memory/style.scss b/src/app/frontend/common/components/sparkline/memory/style.scss
deleted file mode 100644
index b38c5dd67..000000000
--- a/src/app/frontend/common/components/sparkline/memory/style.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// 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;
-}
-
diff --git a/src/app/frontend/common/components/sparkline/memory/template.html b/src/app/frontend/common/components/sparkline/memory/template.html
index f80c06988..f2f2ef3c9 100644
--- a/src/app/frontend/common/components/sparkline/memory/template.html
+++ b/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>
diff --git a/src/app/frontend/index.scss b/src/app/frontend/index.scss
index ac1e33443..fa5dd05c4 100644
--- a/src/app/frontend/index.scss
+++ b/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;
-- 
GitLab