Added some details about dashboard in "info" popup

.gitignore

@@ -1,3 +1,6 @@
+# Auto generated after a successful npm install
+web/src/environments/version.ts
+
 release/
 node_modules/
 web/npm-debug.log

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",

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)}`);

web/src/app/pages/dialog-template.html

@@ -1,4 +1,16 @@
 <h1 mat-dialog-title>About</h1>
-<div mat-dialog-content>
-  Version: <strong>{{ data.version }}</strong>
-</div>
+<mat-dialog-content #info>
+  <p>
+    Dapr version: <strong>{{ data.version }}</strong>
+  </p>
+
+  <p>
+    Dapr Dashboard: <strong>{{ version.version }}</strong> (<i>{{ version.hash }}</i>)
+  </p>
+
+</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 info</button>
+</mat-dialog-actions>

web/src/app/pages/pages.component.ts

@@ -1,13 +1,14 @@
-import { Component, ViewChild, OnInit, HostBinding, OnDestroy, Inject } from '@angular/core';
-import { MenuItem, MENU_ITEMS, COMPONENTS_MENU_ITEM, CONFIGURATIONS_MENU_ITEM, CONTROLPLANE_MENU_ITEM } from './pages-menu';
-import { FeaturesService } from 'src/app/features/features.service';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { Component, ElementRef, HostBinding, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSidenav } from '@angular/material/sidenav';
+import { Router } from '@angular/router';
+import { FeaturesService } from 'src/app/features/features.service';
 import { GlobalsService } from 'src/app/globals/globals.service';
 import { ThemeService } from 'src/app/theme/theme.service';
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { Router } from '@angular/router';
+import { VERSION } from '../../environments/version';
 import { ScopesService } from '../scopes/scopes.service';
-import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { COMPONENTS_MENU_ITEM, CONFIGURATIONS_MENU_ITEM, CONTROLPLANE_MENU_ITEM, MenuItem, MENU_ITEMS } from './pages-menu';
 
 export interface DialogData {
   version: string;
@@ -112,7 +113,7 @@ export class PagesComponent implements OnInit, OnDestroy {
     this.dialog.open(AboutDialogComponent, {
       data: {
         version: this.version
-      }
+      } as DialogData
     });
   }
 
@@ -126,5 +127,13 @@ export class PagesComponent implements OnInit, OnDestroy {
   templateUrl: 'dialog-template.html',
 })
 export class AboutDialogComponent {
+  @ViewChild('info', { static: true }) public info: ElementRef;
+  public version = VERSION;
+
   constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) { }
+
+  copyInfo() {
+    const data = this.info.nativeElement?.innerText || '';
+    navigator.clipboard.writeText(data.replace('\n\n', '\n'));
+  }
 }

web/src/app/pages/pages.module.ts

@@ -18,6 +18,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { MatSelectModule } from '@angular/material/select';
 import { FormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   imports: [
@@ -30,6 +31,7 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatToolbarModule,
     MatIconModule,
     MatListModule,
+    MatButtonModule,
     ConfigurationModule,
     ControlPlaneModule,
     DaprComponentDetailModule,