backuprestore image part baseurl added 75/4175/3
authorSrinivasan <srinivasan.s.n@huawei.com>
Fri, 12 Feb 2021 15:51:33 +0000 (21:21 +0530)
committerSrinivasan <srinivasan.s.n@huawei.com>
Fri, 12 Feb 2021 16:17:48 +0000 (21:47 +0530)
Signed-off-by: Srinivasan <srinivasan.s.n@huawei.com>
Change-Id: I60cc613f0bd5897171144bbff44c55d48ac749c7

18 files changed:
example-apps/ROBO/RoboUI/package.json
example-apps/ROBO/RoboUI/src/app/app-routing.module.ts
example-apps/ROBO/RoboUI/src/app/app.component.html
example-apps/ROBO/RoboUI/src/app/app.module.ts
example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.html [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.scss [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.spec.ts [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.ts [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/data-fetch/data-fetch.component.ts
example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.scss [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.spec.ts [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.ts [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/app/datainterface.ts
example-apps/ROBO/RoboUI/src/app/robo.service.ts
example-apps/ROBO/RoboUI/src/assets/data/appspvc.json [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/assets/data/backuprestore.json [new file with mode: 0644]
example-apps/ROBO/RoboUI/src/proxy.conf.json [new file with mode: 0644]

index 76e7792..393dd73 100644 (file)
@@ -23,6 +23,7 @@
     "@angular/router": "~11.0.5",
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "bootstrap": "^4.5.3",
+    "image-to-base64": "^2.1.1",
     "ngx-toastr": "^13.2.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.0",
index 10c02b8..67db521 100644 (file)
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { DataFetchComponent } from './data-fetch/data-fetch.component';
 import { DataMonitorComponent } from './data-monitor/data-monitor.component';
+import { BackuprestoreComponent } from './backuprestore/backuprestore.component';
 
 const routes: Routes = [
   {
@@ -12,6 +13,11 @@ const routes: Routes = [
     path: 'datamonitor',
     component: DataMonitorComponent
   },
+
+  {
+    path: 'backuprestore',
+    component: BackuprestoreComponent
+  }
   // {
   //   path: '**',
   //   redirectTo: ''
index 3a30c9f..cb728e6 100644 (file)
@@ -8,27 +8,20 @@
       <div>
         <a mat-button [routerLink]="'/dataupload'"> Data Upload </a>
         <a mat-button [routerLink]="'/datamonitor'"> Data Monitor </a>
-  
+        <a mat-button [routerLink]="'/backuprestore'"> Backup and Restore</a>
       </div>
     </mat-toolbar-row>
-  
-    <!-- <mat-toolbar-row>
-      <span style="font-size: 12px;">SimpleCRM helps you easily manage your contacts</span>
-    </mat-toolbar-row> -->
   </mat-toolbar>
-
   <mat-sidenav-container>
     <mat-sidenav #sidenav>
       <mat-nav-list>
-  
         <a mat-list-item [routerLink]="'/dataupload'"> Data Upload </a>
         <a mat-list-item [routerLink]="'/datamonitor'"> Data Monitor </a>
-  
+        <a mat-list-item [routerLink]="'/backuprestore'"> Backup and Restore </a>
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>
       <div style="height: 88vh;">
-  
         <router-outlet></router-outlet>
       </div>
     </mat-sidenav-content>
index b6e1531..d7c1bfd 100644 (file)
@@ -45,12 +45,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { ToastrModule } from 'ngx-toastr';
 import { DataMonitorComponent } from './data-monitor/data-monitor.component';
+import { BackuprestoreComponent } from './backuprestore/backuprestore.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     DataFetchComponent,
-    DataMonitorComponent
+    DataMonitorComponent,
+    BackuprestoreComponent
   ],
   imports: [
     BrowserModule,
diff --git a/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.html b/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.html
new file mode 100644 (file)
index 0000000..09b62c3
--- /dev/null
@@ -0,0 +1,252 @@
+<div class="main">
+    <div class="center">
+        <button style="margin-right: 05px;" (click)="refreshPage()" mat-raised-button color="primary">Refresh</button>
+    </div>
+    <div class="tabs">
+
+        <mat-tab-group>
+            <mat-tab label="Apps">
+                Apps
+                <div class="appstable">
+
+                    <table mat-table [dataSource]="appsDataSource">
+
+                        <ng-container matColumnDef="namespace">
+                            <th mat-header-cell *matHeaderCellDef> NAMESPACE </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.namespace}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="name">
+                            <th mat-header-cell *matHeaderCellDef> NAME </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.name}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="ready">
+                            <th mat-header-cell *matHeaderCellDef> READY </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.ready}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="status">
+                            <th mat-header-cell *matHeaderCellDef> STATUS </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.status}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="restarts">
+                            <th mat-header-cell *matHeaderCellDef> RESTARTS </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.restarts}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="age">
+                            <th mat-header-cell *matHeaderCellDef> AGE </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.age}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="ip">
+                            <th mat-header-cell *matHeaderCellDef> IP </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.ip}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="node">
+                            <th mat-header-cell *matHeaderCellDef> NODE </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.node}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="nominatednode">
+                            <th mat-header-cell *matHeaderCellDef> NOMINATED NODE </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.nominatednode}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="readinessgates">
+                            <th mat-header-cell *matHeaderCellDef> READINESS GATES </th>
+                            <td mat-cell *matCellDef="let apps"> {{apps.readinessgates}} </td>
+                        </ng-container>
+
+                        <tr mat-header-row *matHeaderRowDef="appsColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: appsColumns;"></tr>
+                    </table>
+
+                    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+
+                </div>
+            </mat-tab>
+            <mat-tab label="PVs and PVCs">
+                PVs and PVCs
+                <div class="pvstable">
+
+                    <table mat-table [dataSource]="pvsDataSource">
+
+                        <ng-container matColumnDef="namespace">
+                            <th mat-header-cell *matHeaderCellDef> NAMESPACE </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.namespace}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="name">
+                            <th mat-header-cell *matHeaderCellDef> NAME </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.name}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="status">
+                            <th mat-header-cell *matHeaderCellDef> STATUS </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.status}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="volume">
+                            <th mat-header-cell *matHeaderCellDef> VOLUME </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.volume}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="capacity">
+                            <th mat-header-cell *matHeaderCellDef> CAPACITY </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.capacity}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="accessmodes">
+                            <th mat-header-cell *matHeaderCellDef> ACCESS MODES </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.accessmodes}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="storageclass">
+                            <th mat-header-cell *matHeaderCellDef> STORAGE CLASS </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.storageclass}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="age">
+                            <th mat-header-cell *matHeaderCellDef> AGE </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.age}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="volumemode">
+                            <th mat-header-cell *matHeaderCellDef> VOLUME NODE </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.volumemode}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="readinessgates">
+                            <th mat-header-cell *matHeaderCellDef> READINESS GATES </th>
+                            <td mat-cell *matCellDef="let pvs"> {{pvs.readinessgates}} </td>
+                        </ng-container>
+
+                        <tr mat-header-row *matHeaderRowDef="pvsColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: pvsColumns;"></tr>
+                    </table>
+
+                    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+
+                </div>
+                <div class="center">
+                    <button style="margin-right: 05px;" (click)="simulateDisaster()" mat-raised-button color="primary">Disaster</button>
+                </div>
+            </mat-tab>
+            <mat-tab label="Backups">
+                Backups
+                <div class="backupstable">
+
+                    <table mat-table [dataSource]="backupsDataSource">
+
+                        <ng-container matColumnDef="name">
+                            <th mat-header-cell *matHeaderCellDef> NAME </th>
+                            <td mat-cell *matCellDef="let backups"> {{backups.name}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="status">
+                            <th mat-header-cell *matHeaderCellDef> STATUS </th>
+                            <td mat-cell *matCellDef="let backups"> {{backups.status}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="errors">
+                            <th mat-header-cell *matHeaderCellDef> ERRORS </th>
+                            <td mat-cell *matCellDef="let backups"> {{backups.errors}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="warnings">
+                            <th mat-header-cell *matHeaderCellDef> WARNINGS </th>
+                            <td mat-cell *matCellDef="let backups"> {{backups.warnings}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="created">
+                            <th mat-header-cell *matHeaderCellDef> CREATED </th>
+                            <td mat-cell *matCellDef="let backups"> {{backups.created}} </td>
+                        </ng-container>
+
+                        <tr mat-header-row *matHeaderRowDef="backupsColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: backupsColumns;"></tr>
+                    </table>
+
+                    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+
+                </div>
+                <div class="backup-det">
+
+                    <div style="padding-top:10px; padding-left: 20px">
+                        <mat-label>Backup Name</mat-label>
+                        <mat-form-field appearance="fill">
+                            <mat-label>Backup Name</mat-label>
+                            <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedBackupName">
+                        </mat-form-field>
+                    </div>
+                    <div style="padding-left: 20px">
+                        <mat-label >Namespace.. </mat-label>
+                        <mat-form-field appearance="fill">
+                            <mat-label>Namespace</mat-label>
+                
+                            <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedNamespace">
+                           
+                        </mat-form-field>
+                    </div>
+                    <div class="center">
+                        <button style="margin-right: 05px;" (click)="postBackup()" mat-raised-button color="primary">Backup</button>
+                    </div>
+                </div>
+
+            </mat-tab>
+            <mat-tab label="Restores">
+                Restores 
+                <div class="restorestable">
+
+                    <table mat-table [dataSource]="restoresDataSource">
+
+                        <ng-container matColumnDef="name">
+                            <th mat-header-cell *matHeaderCellDef> NAME </th>
+                            <td mat-cell *matCellDef="let restores"> {{restores.name}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="backup">
+                            <th mat-header-cell *matHeaderCellDef> BACKUP </th>
+                            <td mat-cell *matCellDef="let restores"> {{restores.backup}} </td>
+                        </ng-container>
+
+                        <ng-container matColumnDef="status">
+                            <th mat-header-cell *matHeaderCellDef> STATUS </th>
+                            <td mat-cell *matCellDef="let restores"> {{restores.status}} </td>
+                        </ng-container>
+
+                        <tr mat-header-row *matHeaderRowDef="restoresColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: restoresColumns;"></tr>
+                    </table>
+
+                    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+
+                    <div class="restore-det">
+                        <div style="padding-left: 20px;">
+                            <mat-label>Restore Name</mat-label>
+                            <mat-form-field appearance="fill">
+                                <mat-label>Restore Name</mat-label>
+                                <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedRestoreName">
+                            </mat-form-field>
+                        </div>
+                        <div style="padding-left: 20px;">
+                            <mat-label>Backup Name</mat-label>
+                            <mat-form-field appearance="fill">
+                                <mat-label>Backup Name</mat-label>
+                                <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedBackupname">
+                            </mat-form-field>
+                        </div>
+                        <div class="center">
+                            <button style="margin-right: 05px;" (click)="restore()" mat-raised-button color="primary">Restore</button>
+                        </div>
+                    </div>
+                </div>
+            </mat-tab>
+        </mat-tab-group>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.scss b/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.scss
new file mode 100644 (file)
index 0000000..b4e714f
--- /dev/null
@@ -0,0 +1,43 @@
+.main {
+    .center{
+        padding-top: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .tabs{
+        padding-top: 10px;
+        .appstable {
+
+        }
+        .pvstable {
+
+        }
+        .center{
+            padding-top: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .backup-det {
+            .center{
+                padding-top: 20px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        .restore-det {
+            .center{
+                padding-top: 20px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+}
+
+table{
+    width: 100%;
+}
\ No newline at end of file
diff --git a/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.spec.ts b/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.spec.ts
new file mode 100644 (file)
index 0000000..0164415
--- /dev/null
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackuprestoreComponent } from './backuprestore.component';
+
+describe('BackuprestoreComponent', () => {
+  let component: BackuprestoreComponent;
+  let fixture: ComponentFixture<BackuprestoreComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BackuprestoreComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BackuprestoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.ts b/example-apps/ROBO/RoboUI/src/app/backuprestore/backuprestore.component.ts
new file mode 100644 (file)
index 0000000..b5631f3
--- /dev/null
@@ -0,0 +1,180 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import {MatTableDataSource} from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { RoboService } from './../../app/robo.service';
+
+import { appsinfo,pvpvsinfo,backupsinfo,restoresinfo,backupData,restoreData } from './../../app/datainterface'
+
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-backuprestore',
+  templateUrl: './backuprestore.component.html',
+  styleUrls: ['./backuprestore.component.scss']
+})
+export class BackuprestoreComponent implements OnInit {
+
+  appsColumns: string [] = ['namespace','name','ready','status','restarts','age','ip','node','nominatednode','readinessgates']
+  appsDataSource = new MatTableDataSource<appsinfo>(APPS_INFO_LIST);
+
+  appsArrayList = [];
+
+  pvsColumns: string [] = ['namespace','name','status','volume','capacity','accessmodes','storageclass','age','volumemode']
+  pvsDataSource = new MatTableDataSource<pvpvsinfo>(PVS_INFO_LIST);
+
+  pvsArrayList = [];
+
+  backupsColumns: string [] = ['name','status','errors','warnings','created']
+  backupsDataSource = new MatTableDataSource<backupsinfo>(BACKUPS_INFO_LIST);
+
+  backupsArrayList = [];
+
+  restoresColumns: string [] = ['name','backup','status']
+  restoresDataSource = new MatTableDataSource<restoresinfo>(RESTORES_INFO_LIST);
+
+  restoresArrayList = [];
+
+  selectedNamespace : string
+  selectedBackupName : string
+
+  selectedRestoreName: string
+  selectedBackupname : string
+
+  appsinfo = {}
+
+  backupData = {} as backupData
+
+  restoreData = {} as restoreData
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+  constructor(
+    private roboService: RoboService,
+    private toastService: ToastrService
+    ) {}
+
+  ngOnInit(): void {
+    this.selectedBackupName = "backup01"
+    this.selectedRestoreName = "restore01"
+    this.selectedNamespace = "default"
+    this.selectedBackupname = "backup01"
+
+    this.getAppsPvcs();
+
+    this.getBackupsRestores();
+  }
+
+  getAppsPvcs() {
+    this.roboService.getAppsPvcsInfo()
+      .subscribe(data => {
+      debugger;
+      console.log(data);
+      this.appsinfo = data;
+      this.appsArrayList = data.appsData;
+      this.appsDataSource = new MatTableDataSource(this.appsArrayList);
+      this.appsDataSource.paginator = this.paginator;
+
+      this.pvsArrayList = data.pvcData;
+      this.pvsDataSource = new MatTableDataSource(this.pvsArrayList);
+      this.pvsDataSource.paginator = this.paginator;
+     },
+     error => console.log(error)); 
+  }
+
+  getBackupsRestores() {
+    this.roboService.getBackupRestoreInfo()
+      .subscribe(data => {
+      debugger;
+      console.log(data);
+      this.appsinfo = data;
+      this.backupsArrayList = data.backupsData;
+      this.backupsDataSource = new MatTableDataSource(this.backupsArrayList);
+      this.backupsDataSource.paginator = this.paginator;
+
+      this.restoresArrayList = data.restoresData;
+      this.restoresDataSource = new MatTableDataSource(this.restoresArrayList);
+      this.restoresDataSource.paginator = this.paginator;
+     },
+     error => console.log(error));
+  }
+
+  refreshPage() {
+    debugger;
+    this.getBackupsRestores();
+    this.getAppsPvcs();
+  }
+
+  postBackup() {
+    console.log("Inside postBackup.....")
+    this.backupData.backupName = this.selectedBackupName;
+    this.backupData.namespace = this.selectedNamespace;
+    this.showBackupSuccess()
+    this.roboService.postBackup(this.backupData)
+    .subscribe(data => {
+      debugger;
+      if(data.responce == "success"){
+        this.showBackupSuccess();
+      }
+      console.log(data);
+    }
+  ,error => console.log(error)
+  );
+  }
+
+  restore() {
+    console.log("Inside postBackup.....")
+
+    this.restoreData.restoreName = this.selectedRestoreName;
+    this.restoreData.backupName = this.selectedBackupname;
+    this.showRestoreSuccess()
+    this.roboService.postRestore(this.restoreData)
+    .subscribe(data => {
+      debugger;
+      if(data.responce == "success"){
+        this.showRestoreSuccess();
+      }
+      console.log(data);
+    }
+  ,error => console.log(error)
+  );
+  }
+
+  showBackupSuccess() {
+    this.toastService.success('Backup Successful..','Backup Data');
+  }
+
+  showRestoreSuccess() {
+    this.toastService.success('Restore Successful..','Restore Data');
+  }
+
+  simulateDisaster() {
+    console.log("Inside simulateDisaster....")
+    this.roboService.disturbCluster()
+      .subscribe(data => {
+      debugger;
+      console.log(data);
+     },
+     error => console.log(error));
+  }
+
+}
+
+const APPS_INFO_LIST: appsinfo[] = [
+  { namespace: '',name: '', ready: '', status: '', restarts: '', age: '', ip: '', node: '', nominatednode: '', readinessgates: '' }
+];
+
+const PVS_INFO_LIST: pvpvsinfo[] = [
+  { namespace: '',name: '', status: '', volume: '', capacity: '', accessmodes: '', storageclass: '', age: '', volumemode: '' }
+];
+
+const BACKUPS_INFO_LIST: backupsinfo[] = [
+  { name: '', status: '', errors: '', warnings: '', created: ''}
+];
+
+const RESTORES_INFO_LIST: restoresinfo[] = [
+  { name: '', backup: '', status: ''}
+];
+
+
+// "zone.js": "~0.10.2"
\ No newline at end of file
index a4cb262..205dbb7 100644 (file)
@@ -25,8 +25,8 @@ export class DataFetchComponent implements OnInit {
   cameraColumns: string [] = ['cameraID','cameraLocation','cameraNumber','rtspUrl'];
   cameraDataSource = new MatTableDataSource<camerainfo>(CAMERA_INFO_LIST);
 
-  SERVER_URL = "http://localhost:9996/v1/monitor/video";
-  videoUploadForm: FormGroup;  
+  SERVER_URL = "http://localhost:30092/v1/monitor/video";
+  videoUploadForm: FormGroup;
   cameraDetailsForm: FormGroup;
 
   cameraData = {} as cameraData;
diff --git a/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html b/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.html
new file mode 100644 (file)
index 0000000..9ac8d51
--- /dev/null
@@ -0,0 +1,47 @@
+<div class="maindiv">
+    <div class="tablepage">
+        <div class="monitortable">
+
+            <table mat-table [dataSource]="monitorDataSource">
+
+                <ng-container matColumnDef="shelfName">
+                    <th mat-header-cell *matHeaderCellDef> Shelf Name </th>
+                    <td mat-cell *matCellDef="let monitor"> {{monitor.shelfName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="objType">
+                    <th mat-header-cell *matHeaderCellDef> Object Type </th>
+                    <td mat-cell *matCellDef="let monitor"> {{monitor.ObjType}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="currentCount">
+                    <th mat-header-cell *matHeaderCellDef> Current Count </th>
+                    <td mat-cell *matCellDef="let monitor"> {{monitor.currentCount}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="totalCount">
+                    <th mat-header-cell *matHeaderCellDef> Total Count </th>
+                    <td mat-cell *matCellDef="let monitor"> {{monitor.totalCount}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="time">
+                    <th mat-header-cell *matHeaderCellDef> Time </th>
+                    <td mat-cell *matCellDef="let monitor"> {{monitor.time}} </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="monitorColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: monitorColumns;"></tr>
+            </table>
+
+            <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+
+        </div>
+    </div>
+    <div class="image-card">
+        <mat-card>
+            <img id="myimage" [src]='thumbnail' />
+            <!-- <p>Backend image</p> -->
+        </mat-card>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.scss b/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.scss
new file mode 100644 (file)
index 0000000..cf16078
--- /dev/null
@@ -0,0 +1,26 @@
+
+.maindiv{
+
+    position: center;
+    position: relative;
+    padding-top: 20px;
+
+    .tablepage {
+
+    position: relative;
+    .filter {
+        width: 70%;
+        padding-left: 20px;
+    }
+    .monitortable {
+        table {
+            width: 100%;
+        }
+    }
+
+  }
+
+  .image-card {
+      padding: 20px;
+  }
+}
\ No newline at end of file
diff --git a/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.spec.ts b/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.spec.ts
new file mode 100644 (file)
index 0000000..71389ff
--- /dev/null
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataMonitorComponent } from './data-monitor.component';
+
+describe('DataMonitorComponent', () => {
+  let component: DataMonitorComponent;
+  let fixture: ComponentFixture<DataMonitorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataMonitorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataMonitorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.ts b/example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.ts
new file mode 100644 (file)
index 0000000..5c503b5
--- /dev/null
@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import {MatTableDataSource} from '@angular/material/table';
+
+import { MatPaginator } from '@angular/material/paginator';
+
+import { cameraData,monitorinfo, monitorDetails } from './../datainterface'
+import { RoboService } from './../../app/robo.service';
+
+import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
+
+
+@Component({
+  selector: 'app-data-monitor',
+  templateUrl: './data-monitor.component.html',
+  styleUrls: ['./data-monitor.component.scss']
+})
+export class DataMonitorComponent implements OnInit {
+
+  monitorColumns: string [] = ['shelfName','objType','currentCount','totalCount','time'];
+  monitorDataSource = new MatTableDataSource<monitorinfo>(MONITOR_INFO_LIST);
+
+  monitorArrayList = [];
+
+  imageBlobUrl : any;
+  image: any;
+  thumbnail: any;
+
+  monitorInfo = {} as monitorDetails;
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+  constructor(
+    private roboService: RoboService,
+    private sanitizer: DomSanitizer
+    ) { }
+
+  ngOnInit(): void {
+    this.monitorDetails();
+    this.inventoryDetails();
+  }
+
+  monitorDetails() {
+    debugger;
+    this.roboService.getMonitorImage()
+        .subscribe( (data:any) => {
+      debugger;
+      console.log(data);
+      
+      let objectURL = 'data:image/jpeg;base64,' + data.image;
+      this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
+
+     },
+     error => console.log(error));
+  }
+
+  inventoryDetails() {
+    this.roboService.getMonitorInfo()
+      .subscribe(data => {
+      console.log(data);
+      this.monitorInfo = data;
+      this.monitorArrayList = data.InventryData;
+      this.monitorDataSource = new MatTableDataSource(this.monitorArrayList);
+      this.monitorDataSource.paginator = this.paginator;
+     },
+     error => console.log(error));
+   }
+
+}
+
+const MONITOR_INFO_LIST: monitorinfo[] = [
+  { shelfName: '', ObjType: '', currentCount: '', totalCount: '', time: '' }
+];
index f5d79b6..0688130 100644 (file)
@@ -20,6 +20,10 @@ export interface monitorDetails {
   InventryData: monitorinfo[];
 }
 
+export interface monitorImage {
+  image: Blob;
+}
+
 
 export interface monitorinfo {
   shelfName: string;
@@ -32,4 +36,72 @@ export interface monitorinfo {
 
 export interface cameraID {
   cameraID: string;
-}
\ No newline at end of file
+}
+
+
+export interface appsinfo {
+  namespace: string;
+  name: string;
+  ready: string;
+  status: string;
+  restarts: string;
+  age: string;
+  ip: string;
+  node: string;
+  nominatednode: string;
+  readinessgates: string;
+}
+
+export interface appsPvcs {
+  appsData: appsinfo[];
+  pvcData: pvpvsinfo[];
+}
+
+export interface pvpvsinfo {
+  namespace: string;
+  name: string;
+  status: string;
+  volume: string;
+  capacity: string;
+  accessmodes: string;
+  storageclass: string;
+  age: string;
+  volumemode: string;
+}
+
+export interface backupRestore {
+  backupsData: backupsinfo[];
+  restoresData: restoresinfo[];
+}
+
+export interface backupsinfo {
+  name: string;
+  status: string;
+  errors: string;
+  warnings: string;
+  created: string;
+}
+
+// export interface backups {
+//   backupsData: backupsinfo[];
+// }
+
+export interface restoresinfo {
+  name: string;
+  backup: string;
+  status: string;
+}
+
+export interface backupData {
+  backupName: string;
+  namespace: string;
+}
+
+export interface restoreData {
+  restoreName: string;
+  backupName: string;
+}
+
+// export interface restores {
+//   restoresData: restoresinfo[];
+// }
\ No newline at end of file
index 6e7d713..53aaeb6 100644 (file)
@@ -4,7 +4,7 @@ import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/comm
 import { Observable,throwError } from 'rxjs'
 import { timer, Subscription, pipe } from 'rxjs';
 
-import { cameraData, camerainfo, cameraDetails, monitorDetails, monitorinfo, cameraID } from './datainterface'
+import { cameraData, camerainfo, cameraDetails, monitorDetails, monitorinfo, cameraID, appsPvcs, backupRestore, monitorImage } from './datainterface'
 
 
 @Injectable({
@@ -12,18 +12,25 @@ import { cameraData, camerainfo, cameraDetails, monitorDetails, monitorinfo, cam
 })
 export class RoboService {
 
-  private baseUrl = 'http://localhost:9996';
+  private baseUrl = 'http://localhost:30091';
+  private inventoryBaseUrl = 'http://localhost:30092';
 
-  private postCameraDetailsUrl = this.baseUrl + '/v1/monitor/cameras'
-  private cameraDetailsUrl = this.baseUrl + '/v1/monitor/cameras'
-  private cameraDetails_url = './../assets/data/camera.json'
+  private postCameraDetailsUrl = this.inventoryBaseUrl + '/v1/monitor/cameras'
+  private cameraDetailsUrl = this.inventoryBaseUrl + '/v1/monitor/cameras'
+  private monitorDetailsUrl = this.inventoryBaseUrl + '/v1/inventry/table'
+  private monitorImageUrl = this.inventoryBaseUrl + '/v1/inventry/image'
+  private triggerObjUrl = this.inventoryBaseUrl + '/v1/monitor/cameras/'
+  private appsPvcsDetailsUrl = this.baseUrl + '/v1/robo/apps-pvcs'
+  private backupRestoreDetailsUrl = this.baseUrl + '/v1/robo/backup-restore'
+  private postBackupDetailsUrl = this.baseUrl + '/v1/robo/backup'
+  private postRestoreDetailsUrl = this.baseUrl + '/v1/robo/restore'
+  private disasterUrl = this.baseUrl + '/v1/robo/disaster'
 
+  private cameraDetails_url = './../assets/data/camera.json'
+  private backupRestoreDetails_url = './../assets/data/backuprestore.json'
+  private appsPvcsDetails_url = './../assets/data/appspvc.json'
   private monitorDetails_url = './../assets/data/inventory.json'
-  private monitorDetailsUrl = this.baseUrl + '/v1/inventry/table'
-
-  private monitorImageUrl = this.baseUrl + '/v1/monitor/image'
 
-  private triggerObjUrl = this.baseUrl + '/v1/monitor/cameras/'
 
   constructor(private http:HttpClient) { }
   
@@ -55,9 +62,9 @@ export class RoboService {
     return this.http.get<monitorDetails>(this.monitorDetailsUrl);
   }
 
-  getMonitorImage(): Observable<Blob> {
+  getMonitorImage(): Observable<any> {
     debugger;
-    return this.http.get<Blob>(this.monitorImageUrl);
+    return this.http.get<any>(this.monitorImageUrl);
   }
 
 
@@ -67,4 +74,28 @@ export class RoboService {
     this.triggerObjUrl = this.triggerObjUrl + data;
     return this.http.get<any>(this.triggerObjUrl)
   }
-}
+
+  getAppsPvcsInfo(): Observable<appsPvcs> {
+    return this.http.get<appsPvcs>(this.appsPvcsDetailsUrl);
+  }
+
+  getBackupRestoreInfo(): Observable<any> {
+    return this.http.get<any>(this.backupRestoreDetailsUrl);
+  }
+
+  disturbCluster(): Observable<any> {
+    return this.http.get<any>(this.disasterUrl);
+  }
+
+  postBackup(data): Observable<any> {
+    console.log(data);
+    debugger;
+    return this.http.post<any>(this.postBackupDetailsUrl, data)
+  }
+
+  postRestore(data): Observable<any> {
+    console.log(data);
+    debugger;
+    return this.http.post<any>(this.postRestoreDetailsUrl, data)
+  }
+}
\ No newline at end of file
diff --git a/example-apps/ROBO/RoboUI/src/assets/data/appspvc.json b/example-apps/ROBO/RoboUI/src/assets/data/appspvc.json
new file mode 100644 (file)
index 0000000..ea58c93
--- /dev/null
@@ -0,0 +1,53 @@
+{
+    "appsData": [
+        {
+            "namespace": "default01",
+            "name": "appname",
+            "ready": "ready",
+            "status": "running",
+            "restarts": "3 times",
+            "age": "3d",
+            "ip": "10.10.0.1",
+            "node": "ealtcenter",
+            "nominatednode": "ealtcenter",
+            "readinessgates": "passed"
+        },
+        {
+            "namespace": "default02",
+            "name": "appname",
+            "ready": "ready",
+            "status": "running",
+            "restarts": "3 times",
+            "age": "3d",
+            "ip": "10.10.0.1",
+            "node": "ealtcenter",
+            "nominatednode": "ealtcenter",
+            "readinessgates": "passed"
+        }
+    ],
+
+    "pvcData": [
+        {
+            "namespace": "default",
+            "name": "pvcname01",
+            "status": "ready",
+            "volume": "samplevolume",
+            "capacity": "samplecapacity",
+            "accessmodes" : "sampleaccessmodes",
+            "storageclass" : "samplestorage",
+            "age" : "5d",
+            "volumemode" : "samplevolumemode"
+        },
+        {
+            "namespace": "default",
+            "name": "pvcname02",
+            "status": "ready",
+            "volume": "samplevolume",
+            "capacity": "samplecapacity",
+            "accessmodes" : "sampleaccessmodes",
+            "storageclass" : "samplestorage",
+            "age" : "5d",
+            "volumemode" : "samplevolumemode"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/example-apps/ROBO/RoboUI/src/assets/data/backuprestore.json b/example-apps/ROBO/RoboUI/src/assets/data/backuprestore.json
new file mode 100644 (file)
index 0000000..f68d9c7
--- /dev/null
@@ -0,0 +1,50 @@
+{
+    "backupsData": [
+        {
+            "name": "backupname01",
+            "status": "ready",
+            "errors": "sampleerrors",
+            "warnings": "warning",
+            "created": "created",
+            "expires": "expires",
+            "storage": "storage",
+            "location": "samplelocation",
+            "selector": "selector"
+        },
+        {
+            "name": "backupname02",
+            "status": "ready",
+            "errors": "sampleerrors",
+            "warnings": "warning",
+            "created": "created",
+            "expires": "expires",
+            "storage": "storage",
+            "location": "samplelocation",
+            "selector": "selector"
+        }
+    ],
+    "restoresData": [
+        {
+            "name": "backupname01",
+            "backup": "nback03",
+            "status": "ready",
+            "started": "starts",
+            "completed": "completed",
+            "errors": "err",
+            "warnings": "warn02",
+            "created": "createdsample",
+            "selector": "selector"
+        },
+        {
+            "name": "backupname01",
+            "backup": "nback03",
+            "status": "ready",
+            "started": "starts",
+            "completed": "completed",
+            "errors": "err",
+            "warnings": "warn02",
+            "created": "createdsample",
+            "selector": "selector"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/example-apps/ROBO/RoboUI/src/proxy.conf.json b/example-apps/ROBO/RoboUI/src/proxy.conf.json
new file mode 100644 (file)
index 0000000..386d42c
--- /dev/null
@@ -0,0 +1,7 @@
+{
+    "/v1/*": {
+        "target": "http://192.168.29.203:3000",
+        "secure": false,
+        "logLevel": "debug"
+    }
+}
\ No newline at end of file