Move hastic server url to app config #156 (#158)

build/webpack.base.conf.js

@@ -50,6 +50,10 @@ module.exports = {
         ],
         exclude: /node_modules/,
       },
+      {
+        test: /\.html$/,
+        use: 'raw-loader'
+      },
       {
         test: /jquery\.flot\.(?!events)/,
         loaders: [

package.json

@@ -33,16 +33,16 @@
     "jquery": "^3.3.1",
     "loader-utils": "^1.1.0",
     "md5": "^2.2.1",
+    "perfect-scrollbar": "^1.3.0",
+    "raw-loader": "^1.0.0",
+    "tether-drop": "^1.4.2",
     "tinycolor": "0.0.1",
+    "tinycolor2": "^1.4.1",
     "ts-jest": "^22.4.6",
     "ts-loader": "^4.2.0",
     "typescript": "^2.8.3",
     "webpack": "4.7.0",
     "webpack-cli": "^2.1.2"
   },
-  "dependencies": {
-    "perfect-scrollbar": "^1.3.0",
-    "tether-drop": "^1.4.2",
-    "tinycolor2": "^1.4.1"
-  }
+  "dependencies": {}
 }

src/config/config_ctrl.ts

@@ -0,0 +1,14 @@
+import template from './template.html';
+
+
+class ConfigCtrl {
+  static template = template;
+  appModel: any;
+  constructor() {
+    if(this.appModel.jsonData === undefined) {
+      this.appModel.jsonData = {};
+    }
+  }
+}
+
+export { ConfigCtrl };

src/config/template.html

@@ -0,0 +1,7 @@
+<h3 class="page-heading">Enter your Hastic config</h3>
+<div class="gf-form-group">
+  <div class="gf-form">
+    <label class="gf-form-label width-10">Hastic server url</label>
+    <input type="url" class="gf-form-input max-width-20" ng-model='ctrl.appModel.jsonData.hasticServerUrl'/>
+  </div>
+</div>

src/module.ts

@@ -1 +1,3 @@
-export { };
+import { ConfigCtrl } from './config/config_ctrl'
+
+export { ConfigCtrl };

src/module_raw.d.ts

@@ -0,0 +1,4 @@
+declare module '*.html' {
+  const contents: string
+  export = contents
+}

src/panel/graph_panel/graph_ctrl.ts

@@ -1,6 +1,6 @@
 import './series_overrides_ctrl';
 
-import template from './template';
+import template from './template.html';
 
 import { GraphRenderer } from './graph_renderer';
 import { GraphLegend } from './graph_legend';
@@ -31,6 +31,8 @@ class GraphCtrl extends MetricsPanelCtrl {
   hiddenSeries: any = {};
   seriesList: any = [];
   dataList: any = [];
+
+  _backendUrl: string = undefined;
   // annotations: any = [];
 
   private _datasourceRequest: DatasourceRequest;
@@ -140,7 +142,7 @@ class GraphCtrl extends MetricsPanelCtrl {
 
   /** @ngInject */
   constructor(
-    $scope, $injector, $http,
+    $scope, $injector, private $http,
     private annotationsSrv,
     private keybindingSrv,
     private backendSrv: BackendSrv,
@@ -154,52 +156,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     _.defaults(this.panel.legend, this.panelDefaults.legend);
     _.defaults(this.panel.xaxis, this.panelDefaults.xaxis);
 
-    this.processor = new DataProcessor(this.panel);
-
-    this.analyticService = new AnalyticService(this.backendURL, $http);
-
-    this.runBackendConnectivityCheck();
-
-    this.analyticsController = new AnalyticController(this.panel, this.analyticService, this.events);
-
-    this.bindDKey();
-
-    this.events.on('render', this.onRender.bind(this));
-    this.events.on('data-received', this.onDataReceived.bind(this));
-    this.events.on('data-error', this.onDataError.bind(this));
-    this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
-    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
-    this.events.on('init-panel-actions', this.onInitPanelActions.bind(this));
-
-    this.events.on('analytic-unit-status-change', async (analyticUnit: AnalyticUnit) => {
-      if(analyticUnit === undefined) {
-        throw new Error('analyticUnit is undefined');
-      }
-      if(analyticUnit.status === '404') {
-        await this.analyticsController.removeAnalyticUnit(analyticUnit.id, true);
-      }
-      if(analyticUnit.status === 'READY') {
-        await this.analyticsController.fetchSegments(analyticUnit, +this.range.from, +this.range.to);
-      }
-      this.render(this.seriesList);
-      this.$scope.$digest();
-    });
-
-    this._datasources = {};
-
-    appEvents.on('ds-request-response', data => {
-      let requestConfig = data.config;
-
-      this._datasourceRequest = {
-        url: requestConfig.url,
-        method: requestConfig.method,
-        data: requestConfig.data,
-        params: requestConfig.params,
-        type: undefined
-      };
-    });
 
-    this.analyticsController.fetchAnalyticUnitsStatuses();
 
   }
 
@@ -212,11 +169,18 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.bindDKey();
   }
 
-  get backendURL(): string {
-    if(this.templateSrv.index[BACKEND_VARIABLE_NAME] === undefined) {
+  async getBackendURL(): Promise<string> {
+    if(this._backendUrl !== undefined) {
+      return this._backendUrl;
+    }
+    var data = await this.backendSrv.get('/api/plugins/hastic-app/settings');
+    if(data.jsonData === undefined) {
+      return undefined;
+    }
+    let val = data.jsonData.hasticServerUrl;
+    if(val === undefined) {
       return undefined;
     }
-    let val = this.templateSrv.index[BACKEND_VARIABLE_NAME].current.value;
     val = val.replace(/\/+$/, "");
     return val;
   }
@@ -235,12 +199,13 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   async runBackendConnectivityCheck() {
-    if(this.backendURL === '' || this.backendURL === undefined) {
+    let backendURL = await this.getBackendURL();
+    if(backendURL === '' || backendURL === undefined) {
       appEvents.emit(
         'alert-warning',
         [
-          `Dashboard variable $${BACKEND_VARIABLE_NAME} is missing`,
-          `Please set $${BACKEND_VARIABLE_NAME}`
+          `hasticServerUrl is missing`,
+          `Please set it in config`
         ]
       );
       return;
@@ -253,17 +218,67 @@ class GraphCtrl extends MetricsPanelCtrl {
         'alert-success',
         [
           'Connected to Hastic server',
-          `Hastic server: "${this.backendURL}"`
+          `Hastic server: "${backendURL}"`
         ]
       );
     }
   }
 
-  link(scope, elem, attrs, ctrl) {
+  async link(scope, elem, attrs, ctrl) {
+
+    this.processor = new DataProcessor(this.panel);
+
+    let backendURL = await this.getBackendURL();
+    this.analyticService = new AnalyticService(backendURL, this.$http);
+
+    this.runBackendConnectivityCheck();
+
+    this.analyticsController = new AnalyticController(this.panel, this.analyticService, this.events);
+
+    this.bindDKey();
+
+    this.events.on('render', this.onRender.bind(this));
+    this.events.on('data-received', this.onDataReceived.bind(this));
+    this.events.on('data-error', this.onDataError.bind(this));
+    this.events.on('data-snapshot-load', this.onDataSnapshotLoad.bind(this));
+    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
+    this.events.on('init-panel-actions', this.onInitPanelActions.bind(this));
+
+    this.events.on('analytic-unit-status-change', async (analyticUnit: AnalyticUnit) => {
+      if(analyticUnit === undefined) {
+        throw new Error('analyticUnit is undefined');
+      }
+      if(analyticUnit.status === '404') {
+        await this.analyticsController.removeAnalyticUnit(analyticUnit.id, true);
+      }
+      if(analyticUnit.status === 'READY') {
+        await this.analyticsController.fetchSegments(analyticUnit, +this.range.from, +this.range.to);
+      }
+      this.render(this.seriesList);
+      this.$scope.$digest();
+    });
+
+    this._datasources = {};
+
+    appEvents.on('ds-request-response', data => {
+      let requestConfig = data.config;
+
+      this._datasourceRequest = {
+        url: requestConfig.url,
+        method: requestConfig.method,
+        data: requestConfig.data,
+        params: requestConfig.params,
+        type: undefined
+      };
+    });
+
+    this.analyticsController.fetchAnalyticUnitsStatuses();
+
+
     var $graphElem = $(elem[0]).find('#graphPanel');
     var $legendElem = $(elem[0]).find('#graphLegend');
     this._graphRenderer = new GraphRenderer(
-      $graphElem, this.timeSrv, this.popoverSrv, this.contextSrv,this.$scope
+      $graphElem, this.timeSrv, this.popoverSrv, this.contextSrv, this.$scope
     );
     this._graphLegend = new GraphLegend($legendElem, this.popoverSrv, this.$scope);
   }
@@ -607,12 +622,13 @@ class GraphCtrl extends MetricsPanelCtrl {
 
   private async _updatePanelInfo() {
     const datasource = await this._getDatasourceByName(this.panel.datasource);
+    const backendUrl = await this.getBackendURL();
 
     this._panelInfo = {
       grafanaVersion: this.contextSrv.version,
       grafanaUrl: window.location.host,
       datasourceType: datasource.type,
-      hasticServerUrl: this.backendURL
+      hasticServerUrl: backendUrl
     };
   }
 

src/panel/graph_panel/template.html

@@ -1,8 +1,4 @@
-var template = `
 <div class="graph-panel" ng-class="{'graph-panel--legend-right': ctrl.panel.legend.rightSide}">
   <div class="graph-panel__chart" id="graphPanel" ng-dblclick="ctrl.zoomOut()" />
   <div class="hastic-graph-legend" id="graphLegend" />
 </div>
-`;
-
-export default template;