Info tab #61 (#79)

* Editor tab
* Show server info
* Show panel info

src/controllers/analytic_controller.ts

@@ -11,6 +11,7 @@ import { DatasourceRequest } from '../models/datasource';
 import { Segment, SegmentId } from '../models/segment';
 import { SegmentsSet } from '../models/segment_set';
 import { SegmentArray } from '../models/segment_array';
+import { ServerInfo } from '../models/info';
 
 import { ANALYTIC_UNIT_COLORS } from '../colors';
 
@@ -41,6 +42,7 @@ export class AnalyticController {
   private _tempIdCounted: number = -1;
   private _graphLocked: boolean = false;
   private _statusRunners: Set<AnalyticUnitId> = new Set<AnalyticUnitId>();
+  private _serverInfo: ServerInfo;
 
   constructor(private _panelObject: any, private _analyticService: AnalyticService, private _emitter: Emitter) {
     if(_panelObject.anomalyTypes === undefined) {
@@ -392,6 +394,14 @@ export class AnalyticController {
     }
   }
 
+  public async updateServerInfo() {
+    this._serverInfo = await this._analyticService.getServerInfo();
+  }
+
+  public get serverInfo() {
+    return this._serverInfo;
+  }
+
 }
 
 function addAlphaToRGB(colorString: string, alpha: number): string {

src/models/info.ts

@@ -0,0 +1,17 @@
+export type ServerInfo = {
+  nodeVersion: string,
+  packageVersion: string,
+  npmUserAgent: string,
+  docker: boolean,
+  zmqConectionString: string,
+  serverPort: number,
+  gitBranch: string,
+  gitCommitHash: string
+}
+
+export type PanelInfo = {
+  grafanaVersion: string,
+  grafanaUrl: string,
+  datasourceType: string,
+  hasticServerUrl: string
+}

src/module.ts

@@ -11,6 +11,7 @@ import { DatasourceRequest } from './models/datasource';
 import { AnalyticUnitId, AnalyticUnit } from './models/analytic_unit';
 import { AnalyticService } from './services/analytic_service';
 import { AnalyticController } from './controllers/analytic_controller';
+import { PanelInfo } from './models/info';
 
 import { axesEditorComponent } from './axes_editor';
 
@@ -50,6 +51,8 @@ class GraphCtrl extends MetricsPanelCtrl {
   _graphRenderer: GraphRenderer;
   _graphLegend: GraphLegend;
 
+  _panelInfo: PanelInfo;
+
   panelDefaults = {
     // datasource name, null = default datasource
     datasource: null,
@@ -240,11 +243,15 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    var partialPath = this.panelPath + 'partials';
+    this._updatePanelInfo();
+    this.analyticsController.updateServerInfo();
+
+    const partialPath = this.panelPath + 'partials';
     this.addEditorTab('Analytics', `${partialPath}/tab_analytics.html`, 2);
     this.addEditorTab('Axes', axesEditorComponent, 3);
     this.addEditorTab('Legend', `${partialPath}/tab_legend.html`, 4);
     this.addEditorTab('Display', `${partialPath}/tab_display.html`, 5);
+    this.addEditorTab('Plugin info', `${partialPath}/tab_info.html`, 6);
 
     if(config.alertingEnabled) {
       this.addEditorTab('Alert', alertTab, 6);
@@ -590,6 +597,21 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
+  private async _updatePanelInfo() {
+    const datasource = await this.backendSrv.get(`/api/datasources/name/${this.panel.datasource}`);
+
+    this._panelInfo = {
+      grafanaVersion: this.contextSrv.version,
+      grafanaUrl: window.location.host,
+      datasourceType: datasource.type,
+      hasticServerUrl: this.backendURL
+    }
+  }
+
+  get panelInfo() {
+    return this._panelInfo;
+  }
+
   get renderError(): boolean { return this._renderError; }
   set renderError(value: boolean) { this._renderError = value; }
 }

src/partials/tab_info.html

@@ -0,0 +1,34 @@
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <h5>
+      Panel
+      <a ng-click="ctrl.updatePanelInfo()"><i class="fa fa-refresh"></i></a>
+    </h5>
+    <div class="gf-form-inline" ng-show="ctrl.panelInfo === undefined">
+      <i class="fa fa-spinner fa-spin"></i>
+    </div>
+    <div class="gf-form-inline"
+      ng-show="ctrl.panelInfo !== undefined"
+      ng-repeat="(key, value) in ctrl.panelInfo"
+    >
+      <label class="gf-form-label width-10">{{ key }}</label>
+      <label class="gf-form-label width-15">{{ value }}</label>
+    </div>
+  </div>
+  <div class="section gf-form-group">
+    <h5>
+      Server
+      <a ng-click="ctrl.analyticsController.updateServerInfo()"><i class="fa fa-refresh"></i></a>
+    </h5>
+    <div class="gf-form-inline" ng-show="ctrl.analyticsController.serverInfo === undefined">
+      <i class="fa fa-spinner fa-spin"></i>
+    </div>
+    <div class="gf-form-inline"
+      ng-show="ctrl.analyticsController.serverInfo !== undefined"
+      ng-repeat="(key, value) in ctrl.analyticsController.serverInfo"
+    >
+      <label class="gf-form-label width-10">{{ key }}</label>
+      <label class="gf-form-label width-15">{{ value }}</label>
+    </div>
+  </div>
+</div>

src/plugin.json

@@ -11,7 +11,8 @@
     "logos": {
       "small": "img/icn-graph-panel.png",
       "large": "img/icn-graph-panel.png"
-    }
+    },
+    "version": "0.2.3"
   },
 
   "dependencies": {

src/services/analytic_service.ts

@@ -3,6 +3,7 @@ import { MetricExpanded } from '../models/metric';
 import { DatasourceRequest } from '../models/datasource';
 import { SegmentsSet } from '../models/segment_set';
 import { AnalyticUnitId, AnalyticUnit, AnalyticSegment } from '../models/analytic_unit';
+import { ServerInfo } from '../models/info';
 
 import { BackendSrv } from 'grafana/app/core/services/backend_srv';
 
@@ -127,4 +128,18 @@ export class AnalyticService {
     );
   }
 
+  async getServerInfo(): Promise<ServerInfo> {
+    let data = await this._backendSrv.get(this._backendURL);
+    return {
+      nodeVersion: data.nodeVersion,
+      packageVersion: data.packageVersion,
+      npmUserAgent: data.npmUserAgent,
+      docker: data.docker,
+      zmqConectionString: data.zmqConectionString,
+      serverPort: data.serverPort,
+      gitBranch: data.git.branch,
+      gitCommitHash: data.git.commitHash
+    };
+  }
+
 }