Adding dashboard version information to overview (dapr#71)

* added version command * added version icon to front page * updated readme image * normalizing dialog component name * fixing dialog title
umerkle · Aug 13, 2020 · 2c4e095 · 2c4e095
1 parent fe4ff48
commit 2c4e095
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 7 deletions.
diff --git a/build.sh b/build.sh
@@ -4,6 +4,7 @@
 # --generate-artifacts flag is passed in github actions workflow to generate artifacts.
 GENERATE_ARTIFACTS=false
 RELEASE_DIR=./release
+DASHBOARD_VERSION=edge
 OTHER_ARGUMENTS=()
 
 for arg in "$@"
@@ -13,8 +14,13 @@ do
         GENERATE_ARTIFACTS=true
         shift # Remove ----generate-artifacts from processing
         ;;
+        -v|--release-version)
+        DASHBOARD_VERSION="$2"
+        shift # Remove argument name from processing
+        shift # Remove argument value from processing
+        ;;
         -r|--release-dir)
-        RELEASE_DIR="$2"
+        RELEASE_DIR="$3"
         shift # Remove argument name from processing
         shift # Remove argument value from processing
         ;;
@@ -27,6 +33,7 @@ done
 
 echo "# Release directory: $RELEASE_DIR"
 echo "# Generate artifacts: $GENERATE_ARTIFACTS"
+echo "# Version: $DASHBOARD_VERSION"
 #echo "# Other arguments: ${OTHER_ARGUMENTS[*]}"
 
 cd web
@@ -52,7 +59,7 @@ do
   fi
 
   echo building go executable for $GOOS $GOARCH, output will be $go_executable_output_file
-  env CGO_ENABLED=0 GOOS=$GOOS GOARCH=$GOARCH go build -a -o $go_executable_output_file
+  env CGO_ENABLED=0 GOOS=$GOOS GOARCH=$GOARCH go build -a -o $go_executable_output_file -ldflags="-X 'github.com/dapr/dashboard/pkg/version.Version=$DASHBOARD_VERSION'"
 
   platform_release_dir=${RELEASE_DIR}/${platform}  
 

diff --git a/cmd/dashboard.go b/cmd/dashboard.go
@@ -0,0 +1,23 @@
+package cmd
+
+import (
+	"flag"
+	"fmt"
+	"os"
+
+	"github.com/dapr/dashboard/pkg/version"
+)
+
+// RunDashboard runs the dashboard with the supplied flags
+func RunDashboard() {
+	dashboardVersion := flag.Bool("version", false, "Prints the dashboard version")
+
+	flag.Parse()
+
+	if *dashboardVersion {
+		fmt.Println(version.GetVersion())
+		os.Exit(0)
+	} else {
+		RunWebServer()
+	}
+}
diff --git a/cmd/webserver.go b/cmd/webserver.go
@@ -14,6 +14,7 @@ import (
 	configurations "github.com/dapr/dashboard/pkg/configurations"
 	instances "github.com/dapr/dashboard/pkg/instances"
 	kube "github.com/dapr/dashboard/pkg/kube"
+	"github.com/dapr/dashboard/pkg/version"
 	"github.com/gorilla/mux"
 )
 
@@ -83,6 +84,7 @@ func RunWebServer() {
 	api.HandleFunc("/platform", getPlatformHandler).Methods("GET")
 	api.HandleFunc("/scopes", getScopesHandler).Methods("GET")
 	api.HandleFunc("/features", getFeaturesHandler).Methods("GET")
+	api.HandleFunc("/version", getVersionHandler).Methods("GET")
 
 	spa := spaHandler{staticPath: "web/dist", indexPath: "index.html"}
 	r.PathPrefix("/").Handler(spa)
@@ -276,6 +278,11 @@ func getScopesHandler(w http.ResponseWriter, r *http.Request) {
 	respondWithJSON(w, 200, resp)
 }
 
+func getVersionHandler(w http.ResponseWriter, r *http.Request) {
+	resp := version.GetVersion()
+	respondWithPlainString(w, 200, resp)
+}
+
 func respondWithError(w http.ResponseWriter, code int, message string) {
 	respondWithJSON(w, code, map[string]string{"error": message})
 }

diff --git a/img/img.PNG b/img/img.PNG
diff --git a/main.go b/main.go
@@ -5,5 +5,5 @@ import (
 )
 
 func main() {
-	cmd.RunWebServer()
+	cmd.RunDashboard()
 }
diff --git a/pkg/version/version.go b/pkg/version/version.go
@@ -0,0 +1,9 @@
+package version
+
+// Version is the current Dapr dashboard version
+var Version = "edge"
+
+// GetVersion returns the current dashboard version
+func GetVersion() string {
+	return Version
+}
diff --git a/web/src/app/globals/globals.service.ts b/web/src/app/globals/globals.service.ts
@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -15,4 +14,8 @@ export class GlobalsService {
   getPlatform(): Observable<string> {
     return this.http.get('/api/platform', { responseType: 'text' });
   }
+
+  getVersion(): Observable<string> {
+    return this.http.get('/api/version', { responseType: 'text' });
+  }
 }
diff --git a/web/src/app/pages/dashboard/dashboard.component.ts b/web/src/app/pages/dashboard/dashboard.component.ts
@@ -89,6 +89,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   delete(id: string): void {
     this.instanceService.deleteInstance(id).subscribe(() => {
       this.showSnackbar('Deleted Dapr instance with ID ' + id);
+      this.getInstances();
     }, error => {
       this.showSnackbar('Failed to remove Dapr instance with ID ' + id);
     });

diff --git a/web/src/app/pages/dialog-template.html b/web/src/app/pages/dialog-template.html
@@ -0,0 +1,4 @@
+<h1 mat-dialog-title>About</h1>
+<div mat-dialog-content>
+  Version: <strong>{{ data.version }}</strong>
+</div>
diff --git a/web/src/app/pages/pages.component.html b/web/src/app/pages/pages.component.html
@@ -28,8 +28,12 @@ <h1 class="app-header">Dashboard</h1>
             class="navigation-item-label">{{ component.title }}</span>
         </a>
       </ng-container>
+      <a id="info-dialog" class="navigation-item" mat-list-item (click)="openDialog()">
+        <mat-icon>info</mat-icon>
+        <mat-divider class="navigation-divider"></mat-divider>
+      </a>
       <mat-divider class="navigation-divider"></mat-divider>
-      <a *ngIf="globals.changesEnabledRoutes.includes(router.url)" id="theme-selector" class="navigation-item"
+      <a fxLayout="row" fxLayoutAlign="space-around end" id="theme-selector" *ngIf="globals.changesEnabledRoutes.includes(router.url)" class="navigation-item"
         mat-list-item (click)="onThemeChange()">
         <mat-icon class="material-icons">{{ isLightMode ? 'nights_stay' : 'wb_sunny' }}</mat-icon><span
           class="navigation-item-label">{{ isLightMode ? 'Dark Theme' : 'Light Theme' }}</span>

diff --git a/web/src/app/pages/pages.component.scss b/web/src/app/pages/pages.component.scss
@@ -68,11 +68,17 @@ mat-icon {
   left: 0;
 }
 
+#info-dialog {
+  position: absolute;
+  bottom: 48px;
+  left: 0;
+}
+
 #scopeContainer {
   position: absolute;
   top: 0;
   right: 0;
-  width: 15%;
+  width: 200px;
   height: 100%;
 }
 

diff --git a/web/src/app/pages/pages.component.ts b/web/src/app/pages/pages.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, OnInit, HostBinding, OnDestroy } from '@angular/core';
+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 { MatSidenav } from '@angular/material/sidenav';
@@ -7,6 +7,11 @@ import { ThemeService } from 'src/app/theme/theme.service';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Router } from '@angular/router';
 import { ScopesService } from '../scopes/scopes.service';
+import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface DialogData {
+  version: string;
+}
 
 @Component({
   selector: 'app-pages',
@@ -26,6 +31,8 @@ export class PagesComponent implements OnInit, OnDestroy {
   public themeSelectorEnabled: boolean;
   public scopeValue = 'All';
   public scopes: string[];
+  public version: string;
+  public versionLoaded: boolean;
   private intervalHandler;
 
   constructor(
@@ -35,9 +42,11 @@ export class PagesComponent implements OnInit, OnDestroy {
     private overlayContainer: OverlayContainer,
     public router: Router,
     private scopesService: ScopesService,
+    public dialog: MatDialog,
   ) { }
 
   ngOnInit(): void {
+    this.getVersion();
     this.getFeatures();
     this.getScopes();
     this.componentCssClass = this.themeService.getTheme();
@@ -52,6 +61,13 @@ export class PagesComponent implements OnInit, OnDestroy {
     clearInterval(this.intervalHandler);
   }
 
+  getVersion(): void {
+    this.globals.getVersion().subscribe(version => {
+      this.version = version;
+      this.versionLoaded = true;
+    });
+  }
+
   getFeatures(): void {
     this.featuresService.get().subscribe((data: string[]) => {
       for (const feature of data) {
@@ -103,4 +119,20 @@ export class PagesComponent implements OnInit, OnDestroy {
     this.scopesService.changeScope(this.scopeValue);
     this.getScopes();
   }
+
+  openDialog() {
+    this.dialog.open(AboutDialogComponent, {
+      data: {
+        version: this.version
+      }
+    });
+  }
+}
+
+@Component({
+  selector: 'app-about-dialog',
+  templateUrl: 'dialog-template.html',
+})
+export class AboutDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
 }
diff --git a/web/src/app/pages/pages.module.ts b/web/src/app/pages/pages.module.ts
@@ -16,6 +16,7 @@ import { ConfigurationDetailModule } from './configuration/configuration-detail/
 import { OverlayModule } from '@angular/cdk/overlay';
 import { MatSelectModule } from '@angular/material/select';
 import { FormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   imports: [
@@ -35,6 +36,7 @@ import { FormsModule } from '@angular/forms';
     OverlayModule,
     MatSelectModule,
     FormsModule,
+    MatDialogModule
   ],
   declarations: [
     PagesComponent,