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>

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 2bb80eee64ef4ba92328618b2879c1e6f5e1f0c3..0ea1f4397cd4fd14076bb913e25c5f2b5edd7695 100644 (file)
--- 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 (file)
index 0000000..eb30c00
--- /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 (file)
index 0000000..e69de29

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 (file)
index 0000000..da68def
--- /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 (file)
index 0000000..63bc979
--- /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 2a6a863ffd325031b78c261dbc6feffd73a49ab7..09aa9e7223220aeff216265a354a59340beb7c16 100644 (file)
--- 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