Merge pull request #149 from l0ll098/master

Several improvements to the dashboard layout
dapr · Aug 14, 2021 · 9917bb6 · 9917bb6
2 parents e70e9dc + 5d2f608
commit 9917bb6
Show file tree

Hide file tree

Showing 23 changed files with 311 additions and 186 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+# Auto generated after a successful npm install
+web/src/environments/version.ts
+
 release/
 node_modules/
 web/npm-debug.log

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -16,7 +16,8 @@
     "start:electron": "tsc main.ts && ng build && electron .",
     "pack": "electron-builder --dir",
     "dist": "electron-builder",
-    "electron-postinstall": "electron-builder install-app-deps && ngcc"
+    "electron-postinstall": "electron-builder install-app-deps && ngcc",
+    "postinstall": "node scripts/version.js"
   },
   "dependencies": {
     "@angular/animations": "~9.1.11",
@@ -52,6 +53,7 @@
     "codelyzer": "^5.1.2",
     "electron": "^9.3.1",
     "electron-builder": "^22.7.0",
+    "git-describe": "^4.0.4",
     "husky": "^4.2.5",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",

diff --git a/web/scripts/version.js b/web/scripts/version.js
@@ -0,0 +1,21 @@
+const { gitDescribeSync } = require('git-describe');
+const { version } = require('../package.json');
+const { resolve, relative } = require('path');
+const { writeFileSync } = require('fs-extra');
+
+const gitInfo = gitDescribeSync({
+    dirtyMark: false,
+    dirtySemver: false
+});
+
+gitInfo.version = version;
+
+const file = resolve(__dirname, '..', 'src', 'environments', 'version.ts');
+writeFileSync(file,
+    `// IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
+/* tslint:disable */
+export const VERSION = ${JSON.stringify(gitInfo, null, 4)};
+/* tslint:enable */
+`, { encoding: 'utf-8' });
+
+console.log(`Wrote version info ${gitInfo.raw} to ${relative(resolve(__dirname, '..'), file)}`);
diff --git a/web/src/app/pages/configuration/configuration-detail/configuration-detail.component.html b/web/src/app/pages/configuration/configuration-detail/configuration-detail.component.html
@@ -69,8 +69,8 @@ <h2 class="page-header-left" *ngIf="loadedConfiguration">Configuration: {{ confi
     </mat-card>
   </mat-tab>
   <mat-tab label="Configuration" *ngIf="loadedConfiguration">
-    <mat-card class="card-large mat-elevation-z8">
-      <pre style="font-family: Consolas, 'Courier New', monospace;"><code ngCodeColorize="yaml">{{ configurationManifest }}</code></pre>
+    <mat-card class="card-large mat-elevation-z8" [ngStyle]="{ 'background-color': isDarkTheme() ? '#1e1e1e' : '' }">
+      <app-editor [(model)]="configurationManifest"></app-editor>
     </mat-card>
   </mat-tab>
 </mat-tab-group>
diff --git a/web/src/app/pages/configuration/configuration-detail/configuration-detail.component.ts b/web/src/app/pages/configuration/configuration-detail/configuration-detail.component.ts
@@ -4,7 +4,7 @@ import { ConfigurationsService } from 'src/app/configurations/configurations.ser
 import { ActivatedRoute } from '@angular/router';
 import * as yaml from 'js-yaml';
 import { ThemeService } from 'src/app/theme/theme.service';
-import { YamlViewerOptions, Instance } from 'src/app/types/types';
+import { Instance } from 'src/app/types/types';
 import { GlobalsService } from 'src/app/globals/globals.service';
 
 @Component({
@@ -17,7 +17,6 @@ export class ConfigurationDetailComponent implements OnInit {
   private name: string;
   public configuration: any;
   public configurationManifest: string;
-  public options: YamlViewerOptions;
   public loadedConfiguration: boolean;
   public loadedApps: boolean;
   public configurationApps: Instance[];
@@ -35,23 +34,10 @@ export class ConfigurationDetailComponent implements OnInit {
     this.checkPlatform();
     this.getConfiguration(this.name);
     this.getConfigurationApps(this.name);
-    this.options = {
-      folding: true,
-      minimap: { enabled: true },
-      readOnly: false,
-      language: 'yaml',
-      theme: this.themeService.getTheme().includes('dark') ? 'vs-dark' : 'vs',
-    };
-    this.themeService.themeChanged.subscribe((newTheme: string) => {
-      this.options = {
-        ...this.options,
-        theme: newTheme.includes('dark') ? 'vs-dark' : 'vs',
-      };
-    });
   }
 
   checkPlatform(): void {
-    this.globals.getPlatform().subscribe(platform => { this.platform = platform; } );
+    this.globals.getPlatform().subscribe(platform => { this.platform = platform; });
   }
 
   getConfiguration(name: string): void {
@@ -68,4 +54,8 @@ export class ConfigurationDetailComponent implements OnInit {
       this.loadedApps = true;
     });
   }
+
+  isDarkTheme(): boolean {
+    return this.themeService.isDarkTheme();
+  }
 }
diff --git a/web/src/app/pages/configuration/configuration-detail/configuration-detail.module.ts b/web/src/app/pages/configuration/configuration-detail/configuration-detail.module.ts
@@ -2,21 +2,21 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigurationDetailComponent } from './configuration-detail.component';
-import { MonacoEditorModule } from 'ng-monaco-editor';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { MatListModule } from '@angular/material/list';
 import { RouterModule } from '@angular/router';
+import { SharedModule } from '../../../shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    MonacoEditorModule,
     FormsModule,
     MatTabsModule,
     MatCardModule,
     MatListModule,
     RouterModule,
+    SharedModule
   ],
   declarations: [ConfigurationDetailComponent]
 })

diff --git a/web/src/app/pages/dapr-components/dapr-component-detail/dapr-component-detail.component.html b/web/src/app/pages/dapr-components/dapr-component-detail/dapr-component-detail.component.html
@@ -38,8 +38,8 @@ <h2 class="page-header-left" *ngIf="loadedComponent">Component: {{ component.nam
     </mat-card>
   </mat-tab>
   <mat-tab label="Configuration" *ngIf="loadedComponent">
-    <mat-card class="card-large mat-elevation-z8">
-      <pre style="font-family: Consolas, 'Courier New', monospace;"><code ngCodeColorize="yaml">{{ componentManifest }}</code></pre>
+    <mat-card class="card-large mat-elevation-z8" [ngStyle]="{ 'background-color': isDarkTheme() ? '#1e1e1e' : '' }">
+      <app-editor [(model)]="componentManifest"></app-editor>
     </mat-card>
   </mat-tab>
 </mat-tab-group>
diff --git a/web/src/app/pages/dapr-components/dapr-component-detail/dapr-component-detail.component.ts b/web/src/app/pages/dapr-components/dapr-component-detail/dapr-component-detail.component.ts
@@ -4,7 +4,6 @@ import { ComponentsService } from 'src/app/components/components.service';
 import { ActivatedRoute } from '@angular/router';
 import * as yaml from 'js-yaml';
 import { ThemeService } from 'src/app/theme/theme.service';
-import { YamlViewerOptions } from 'src/app/types/types';
 
 @Component({
   selector: 'app-dapr-component-detail',
@@ -16,7 +15,6 @@ export class DaprComponentDetailComponent implements OnInit {
   private name: string;
   public component: any;
   public componentManifest: string;
-  public options: YamlViewerOptions;
   public loadedComponent: boolean;
 
   constructor(
@@ -28,19 +26,6 @@ export class DaprComponentDetailComponent implements OnInit {
   ngOnInit(): void {
     this.name = this.route.snapshot.params.name;
     this.getComponent(this.name);
-    this.options = {
-      folding: true,
-      minimap: { enabled: true },
-      readOnly: false,
-      language: 'yaml',
-      theme: this.themeService.getTheme().includes('dark') ? 'vs-dark' : 'vs',
-    };
-    this.themeService.themeChanged.subscribe((newTheme: string) => {
-      this.options = {
-        ...this.options,
-        theme: newTheme.includes('dark') ? 'vs-dark' : 'vs',
-      };
-    });
   }
 
   getComponent(name: string): void {
@@ -50,4 +35,8 @@ export class DaprComponentDetailComponent implements OnInit {
       this.loadedComponent = true;
     });
   }
+
+  isDarkTheme(){
+    return this.themeService.isDarkTheme();
+  }
 }
diff --git a/web/src/app/pages/dapr-components/dapr-component-detail/dapr-component-detail.module.ts b/web/src/app/pages/dapr-components/dapr-component-detail/dapr-component-detail.module.ts
@@ -1,20 +1,20 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { DaprComponentDetailComponent } from './dapr-component-detail.component';
-import { MonacoEditorModule } from 'ng-monaco-editor';
-import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { SharedModule } from '../../../shared/shared.module';
+import { DaprComponentDetailComponent } from './dapr-component-detail.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    MonacoEditorModule,
     FormsModule,
     MatTabsModule,
     MatCardModule,
     MatTableModule,
+    SharedModule
   ],
   declarations: [
     DaprComponentDetailComponent

diff --git a/web/src/app/pages/dashboard/detail/detail.component.html b/web/src/app/pages/dashboard/detail/detail.component.html
@@ -94,8 +94,8 @@ <h2 class="page-header-left" *ngIf="loadedInstance">Application: {{ instance.app
     </mat-card>
   </mat-tab>
   <mat-tab *ngIf="platform === 'kubernetes'" label="Configuration">
-    <mat-card class="card-large mat-elevation-z8">
-      <pre style="font-family: Consolas, 'Courier New', monospace;"><code ngCodeColorize="yaml">{{ model }}</code></pre>
+    <mat-card class="card-large mat-elevation-z8" [ngStyle]="{ 'background-color': isDarkTheme() ? '#1e1e1e' : '' }">
+      <app-editor [(model)]="model"></app-editor>
     </mat-card>
   </mat-tab>
   <mat-tab label="Actors">

diff --git a/web/src/app/pages/dashboard/detail/detail.component.ts b/web/src/app/pages/dashboard/detail/detail.component.ts
@@ -5,7 +5,6 @@ import * as yaml from 'js-yaml';
 import { GlobalsService } from 'src/app/globals/globals.service';
 import { Metadata, Instance } from 'src/app/types/types';
 import { ThemeService } from 'src/app/theme/theme.service';
-import { YamlViewerOptions } from 'src/app/types/types';
 
 @Component({
   selector: 'app-detail',
@@ -23,7 +22,6 @@ export class DetailComponent implements OnInit, OnDestroy {
   public loadedInstance: boolean;
   public loadedMetadata: boolean;
   public metadata: Metadata;
-  public options: YamlViewerOptions;
   public platform: string;
   private intervalHandler;
 
@@ -38,19 +36,6 @@ export class DetailComponent implements OnInit, OnDestroy {
     this.id = this.route.snapshot.params.id;
     this.checkPlatform();
     this.loadData();
-    this.options = {
-      folding: true,
-      minimap: { enabled: true },
-      readOnly: false,
-      language: 'yaml',
-      theme: this.themeService.getTheme().includes('dark') ? 'vs-dark' : 'vs',
-    };
-    this.themeService.themeChanged.subscribe((newTheme: string) => {
-      this.options = {
-        ...this.options,
-        theme: newTheme.includes('dark') ? 'vs-dark' : 'vs',
-      };
-    });
 
     this.intervalHandler = setInterval(() => {
       this.getMetadata(this.id);
@@ -97,4 +82,8 @@ export class DetailComponent implements OnInit, OnDestroy {
     this.getInstance(this.id);
     this.getMetadata(this.id);
   }
+
+  isDarkTheme() {
+    return this.themeService.isDarkTheme();
+  }
 }
diff --git a/web/src/app/pages/dashboard/detail/detail.module.ts b/web/src/app/pages/dashboard/detail/detail.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { DetailComponent } from '../detail/detail.component';
-import { MonacoEditorModule } from 'ng-monaco-editor';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
@@ -21,11 +20,11 @@ import { TimeSincePipe } from './logs/pipes/timeSince.pipe';
 import { MatNativeDateModule } from '@angular/material/core';
 import { TimePipe } from './logs/pipes/time.pipe';
 import { ISODatePipe } from './logs/pipes/isoDate.pipe';
+import { SharedModule } from '../../../shared/shared.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    MonacoEditorModule,
     FormsModule,
     MatTabsModule,
     MatCardModule,
@@ -37,6 +36,7 @@ import { ISODatePipe } from './logs/pipes/isoDate.pipe';
     MatSelectModule,
     MatDatepickerModule,
     MatNativeDateModule,
+    SharedModule
   ],
   declarations: [
     DetailComponent,

diff --git a/web/src/app/pages/dialog-template.html b/web/src/app/pages/dialog-template.html
@@ -1,4 +1,35 @@
 <h1 mat-dialog-title>About</h1>
-<div mat-dialog-content>
-  Version: <strong>{{ data.version }}</strong>
-</div>
+<mat-dialog-content #info>
+
+  <table>
+    <tr>
+      <td>
+        Dapr version
+      </td>
+      <td>
+        : <strong>{{ data.version }}</strong>
+        <button mat-icon-button aria-label="Copy" (click)="copyInfo(data.version)">
+          <mat-icon>content_copy</mat-icon>
+        </button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        Dapr Dashboard
+      </td>
+      <td>
+        : <strong>{{ version.version }}</strong> (<i>{{ version.hash }}</i>)
+        <button mat-icon-button aria-label="Copy" (click)="copyInfo(version.version + ' (' + version.hash + ')')">
+          <mat-icon>content_copy</mat-icon>
+        </button>
+      </td>
+    </tr>
+  </table>
+
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Close</button>
+  <button mat-button mat-dialog-close cdkFocusInitial (click)="copyInfo()">Copy all</button>
+</mat-dialog-actions>