From ba0e1052f30b49db9e5149f3b00729e83f458408 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Fri, 9 Feb 2018 19:10:50 +0000
Subject: [PATCH] mgr/dashboard_v2: add view cache component

This component should be used in components that access endpoints
that implement ViewCache.
It will inform the user if the data is stale or if there were some
problems fetching it.

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../shared/components/components.module.ts    | 15 +++++++---
 .../view-cache/view-cache.component.html      | 14 ++++++++++
 .../view-cache/view-cache.component.scss      |  0
 .../view-cache/view-cache.component.spec.ts   | 28 +++++++++++++++++++
 .../view-cache/view-cache.component.ts        | 17 +++++++++++
 .../frontend/src/app/shared/shared.module.ts  |  3 +-
 6 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.html
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.scss
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.ts

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
index 2bb80eee64e..0ea1f4397cd 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/components.module.ts
@@ -1,15 +1,22 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { AlertModule } from 'ngx-bootstrap';
 import { DataTableModule } from './datatable/datatable.module';
 
+import { ViewCacheComponent } from './view-cache/view-cache.component';
+
 @NgModule({
   imports: [
-    DataTableModule
+    CommonModule,
+    DataTableModule,
+    AlertModule.forRoot()
   ],
-  declarations: [],
+  declarations: [ViewCacheComponent],
   providers: [],
   exports: [
-    DataTableModule
+    DataTableModule,
+    ViewCacheComponent
   ]
 })
-export class ComponentsModule {}
+export class ComponentsModule { }
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.html
new file mode 100644
index 00000000000..eb30c0099f8
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.html
@@ -0,0 +1,14 @@
+<alert type="info"
+       *ngIf="status === vcs.ValueNone">
+  Retrieving data, please wait.
+</alert>
+
+<alert type="warning"
+       *ngIf="status === vcs.ValueStale">
+  Displaying previously cached data.
+</alert>
+
+<alert type="danger"
+       *ngIf="status === vcs.ValueException">
+  Could not load data. Please check the cluster health.
+</alert>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
new file mode 100644
index 00000000000..da68def0b62
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertModule } from 'ngx-bootstrap';
+
+import { ViewCacheComponent } from './view-cache.component';
+
+describe('ViewCacheComponent', () => {
+  let component: ViewCacheComponent;
+  let fixture: ComponentFixture<ViewCacheComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewCacheComponent ],
+      imports: [AlertModule.forRoot()]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewCacheComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.ts
new file mode 100644
index 00000000000..63bc97947c2
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/view-cache/view-cache.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
+
+@Component({
+  selector: 'cd-view-cache',
+  templateUrl: './view-cache.component.html',
+  styleUrls: ['./view-cache.component.scss']
+})
+export class ViewCacheComponent implements OnInit {
+  @Input() status: ViewCacheStatus;
+  vcs = ViewCacheStatus;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
index 2a6a863ffd3..09aa9e72232 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
@@ -23,7 +23,8 @@ import { ServicesModule } from './services/services.module';
     PipesModule,
     ComponentsModule,
     ServicesModule,
-    PasswordButtonDirective
+    PasswordButtonDirective,
+    ComponentsModule
   ],
   declarations: [
     PasswordButtonDirective
-- 
2.39.5