Browse Source

Make it work

master
rozetko 5 years ago
parent
commit
58dd7605ce
  1. 3
      src/panel/graph_panel/controllers/analytic_controller.ts
  2. 153
      src/panel/graph_panel/graph_ctrl.ts
  3. 4
      src/panel/graph_panel/models/info.ts
  4. 9
      src/panel/graph_panel/partials/tab_analytics.html
  5. 42
      src/panel/graph_panel/services/analytic_service.ts

3
src/panel/graph_panel/controllers/analytic_controller.ts

@ -430,6 +430,9 @@ export class AnalyticController {
); );
for await (const data of statusGenerator) { for await (const data of statusGenerator) {
if(data === undefined) {
break;
}
let status = data.status; let status = data.status;
let error = data.errorMessage; let error = data.errorMessage;
if(analyticUnit.status !== status) { if(analyticUnit.status !== status) {

153
src/panel/graph_panel/graph_ctrl.ts

@ -29,7 +29,6 @@ class GraphCtrl extends MetricsPanelCtrl {
seriesList: any = []; seriesList: any = [];
dataList: any = []; dataList: any = [];
_backendUrl: string = undefined;
// annotations: any = []; // annotations: any = [];
private _datasourceRequest: DatasourceRequest; private _datasourceRequest: DatasourceRequest;
@ -51,10 +50,15 @@ class GraphCtrl extends MetricsPanelCtrl {
_panelInfo: PanelInfo; _panelInfo: PanelInfo;
private _analyticUnitTypes: any; private _analyticUnitTypes: any;
private _hasticDatasources: any[];
private $graphElem: any;
private $legendElem: any;
panelDefaults = { panelDefaults = {
// datasource name, null = default datasource // datasource name, null = default datasource
datasource: null, datasource: null,
hasticDatasource: null,
// sets client side (flot) or native graphite png renderer (png) // sets client side (flot) or native graphite png renderer (png)
renderer: 'flot', renderer: 'flot',
yaxes: [ yaxes: [
@ -180,20 +184,16 @@ class GraphCtrl extends MetricsPanelCtrl {
this.rebindKeys(); this.rebindKeys();
} }
async getBackendURL(): Promise<string> { getBackendURL(): string {
if(this._backendUrl !== undefined) { const datasourceId = this.panel.hasticDatasource;
return this._backendUrl; if(datasourceId !== undefined && datasourceId !== null) {
} const datasource = _.find(this._hasticDatasources, { id: datasourceId });
var data = await this.backendSrv.get('api/plugins/corpglory-hastic-app/settings'); if(datasource.access === 'proxy') {
if(data.jsonData === undefined || data.jsonData === null) { return `/api/datasources/proxy/${datasource.id}`;
return undefined; }
} return datasource.url;
let val = data.jsonData.hasticServerUrl;
if(val === undefined || val === null) {
return undefined;
} }
val = val.replace(/\/+$/, ""); return undefined;
return val;
} }
async updateAnalyticUnitTypes() { async updateAnalyticUnitTypes() {
@ -210,53 +210,34 @@ class GraphCtrl extends MetricsPanelCtrl {
return _.keys(this._analyticUnitTypes); return _.keys(this._analyticUnitTypes);
} }
private _checkBackendUrlOk(backendURL: string): boolean {
if(backendURL === null || backendURL === undefined || backendURL === '') {
appEvents.emit(
'alert-warning',
[
`hasticServerUrl is missing`,
`Please set it in config. More info: https://github.com/hastic/hastic-grafana-app/wiki/Getting-started`
]
);
return false;
}
return true;
}
async runBackendConnectivityCheck() { async runBackendConnectivityCheck() {
let backendURL = await this.getBackendURL(); const backendURL = this.getBackendURL();
if(!this._checkBackendUrlOk(backendURL)) {
return; try {
const connected = await this.analyticService.isBackendOk();
if(connected) {
this.updateAnalyticUnitTypes();
appEvents.emit(
'alert-success',
[
'Connected to Hastic server',
`Hastic server: "${backendURL}"`
]
);
}
} }
let connected = await this.analyticService.isBackendOk(); catch(err) {
if(connected) { console.error(err);
this.updateAnalyticUnitTypes();
appEvents.emit(
'alert-success',
[
'Connected to Hastic server',
`Hastic server: "${backendURL}"`
]
);
} }
} }
async link(scope, elem, attrs, ctrl) { async link(scope, elem, attrs, ctrl) {
this._datasources = {};
this.processor = new DataProcessor(this.panel); this.$graphElem = $(elem[0]).find('#graphPanel');
this.$legendElem = $(elem[0]).find('#graphLegend');
let backendURL = await this.getBackendURL();
if(!this._checkBackendUrlOk(backendURL)) {
return;
}
this.analyticService = new AnalyticService(backendURL, this.$http);
this.runBackendConnectivityCheck();
this.analyticsController = new AnalyticController(this.panel, this.analyticService, this.events);
this.onHasticDatasourceChange();
this.events.on('render', this.onRender.bind(this)); this.events.on('render', this.onRender.bind(this));
this.events.on('data-received', this.onDataReceived.bind(this)); this.events.on('data-received', this.onDataReceived.bind(this));
@ -281,8 +262,6 @@ class GraphCtrl extends MetricsPanelCtrl {
this.$scope.$digest(); this.$scope.$digest();
}); });
this._datasources = {};
appEvents.on('ds-request-response', data => { appEvents.on('ds-request-response', data => {
let requestConfig = data.config; let requestConfig = data.config;
@ -294,19 +273,6 @@ class GraphCtrl extends MetricsPanelCtrl {
type: undefined 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.contextSrv, this.$scope
);
this._graphLegend = new GraphLegend($legendElem, this.popoverSrv, this.$scope);
this._updatePanelInfo();
this.analyticsController.updateServerInfo();
} }
onInitEditMode() { onInitEditMode() {
@ -329,6 +295,27 @@ class GraphCtrl extends MetricsPanelCtrl {
actions.push({ text: 'Toggle legend', click: 'ctrl.toggleLegend()' }); actions.push({ text: 'Toggle legend', click: 'ctrl.toggleLegend()' });
} }
async onHasticDatasourceChange() {
this.processor = new DataProcessor(this.panel);
await this._fetchHasticDatasources();
const backendURL = this.getBackendURL();
this.analyticService = new AnalyticService(backendURL, this.$http);
this.runBackendConnectivityCheck();
this.analyticsController = new AnalyticController(this.panel, this.analyticService, this.events);
this.analyticsController.fetchAnalyticUnitsStatuses();
this._graphRenderer = new GraphRenderer(
this.$graphElem, this.timeSrv, this.contextSrv, this.$scope
);
this._graphLegend = new GraphLegend(this.$legendElem, this.popoverSrv, this.$scope);
this._updatePanelInfo();
this.analyticsController.updateServerInfo();
}
issueQueries(datasource) { issueQueries(datasource) {
// this.annotationsPromise = this.annotationsSrv.getAnnotations({ // this.annotationsPromise = this.annotationsSrv.getAnnotations({
// dashboard: this.dashboard, // dashboard: this.dashboard,
@ -385,15 +372,17 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
} }
var loadTasks = [ if(this.analyticsController !== undefined) {
// this.annotationsPromise, var loadTasks = [
this.analyticsController.fetchAnalyticUnitsSegments(+this.range.from, +this.range.to) // this.annotationsPromise,
]; this.analyticsController.fetchAnalyticUnitsSegments(+this.range.from, +this.range.to)
];
var results = await Promise.all(loadTasks); await Promise.all(loadTasks);
this.loading = false; this.loading = false;
// this.annotations = results[0].annotations; // this.annotations = results[0].annotations;
this.render(this.seriesList); this.render(this.seriesList);
}
} }
@ -657,7 +646,7 @@ class GraphCtrl extends MetricsPanelCtrl {
private async _updatePanelInfo() { private async _updatePanelInfo() {
const datasource = await this._getDatasourceByName(this.panel.datasource); const datasource = await this._getDatasourceByName(this.panel.datasource);
const backendUrl = await this.getBackendURL(); const backendUrl = this.getBackendURL();
let grafanaVersion = 'unknown'; let grafanaVersion = 'unknown';
if(_.has(window, 'grafanaBootData.settings.buildInfo.version')) { if(_.has(window, 'grafanaBootData.settings.buildInfo.version')) {
@ -691,6 +680,16 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
} }
private async _fetchHasticDatasources() {
this._hasticDatasources = await this.backendSrv.get('/api/datasources');
this._hasticDatasources = this._hasticDatasources.filter(ds => ds.type === 'corpglory-hastic-datasource');
this.$scope.$digest();
}
get hasticDatasources() {
return this._hasticDatasources;
}
get panelInfo() { get panelInfo() {
return this._panelInfo; return this._panelInfo;
} }

4
src/panel/graph_panel/models/info.ts

@ -2,9 +2,9 @@ export type ServerInfo = {
nodeVersion: string, nodeVersion: string,
packageVersion: string, packageVersion: string,
npmUserAgent: string, npmUserAgent: string,
docker: boolean, docker: string | boolean,
zmqConectionString: string, zmqConectionString: string,
serverPort: number, serverPort: string | number,
gitBranch: string, gitBranch: string,
gitCommitHash: string gitCommitHash: string
} }

9
src/panel/graph_panel/partials/tab_analytics.html

@ -1,3 +1,12 @@
<div class="gf-form">
<label class="gf-form-label">Select Hastic datasource</label>
<select class="gf-form-input max-width-15"
ng-model="ctrl.panel.hasticDatasource"
ng-options="ds.id as ds.name for ds in ctrl.hasticDatasources"
ng-change="ctrl.onHasticDatasourceChange()"
/>
</div>
<div class="gf-form-button-row" ng-if="ctrl.analyticsController.serverStatus === false"> <div class="gf-form-button-row" ng-if="ctrl.analyticsController.serverStatus === false">
<h5>Hastic server at "{{ctrl.backendURL}}" is not available</h5> <h5>Hastic server at "{{ctrl.backendURL}}" is not available</h5>
<button class="btn btn-inverse" ng-click="ctrl.runBackendConnectivityCheck()"> <button class="btn btn-inverse" ng-click="ctrl.runBackendConnectivityCheck()">

42
src/panel/graph_panel/services/analytic_service.ts

@ -14,9 +14,7 @@ export class AnalyticService {
constructor( constructor(
private _backendURL: string, private _backendURL: string,
private $http private $http
) { ) { }
this.isBackendOk();
}
async getAnalyticUnitTypes() { async getAnalyticUnitTypes() {
return await this.get('/analyticUnits/types'); return await this.get('/analyticUnits/types');
@ -24,6 +22,9 @@ export class AnalyticService {
async getThresholds(ids: AnalyticUnitId[]) { async getThresholds(ids: AnalyticUnitId[]) {
const resp = await this.get('/threshold', { ids: ids.join(',') }); const resp = await this.get('/threshold', { ids: ids.join(',') });
if(resp === undefined) {
return [];
}
return resp.thresholds.filter(t => t !== null); return resp.thresholds.filter(t => t !== null);
} }
@ -61,6 +62,10 @@ export class AnalyticService {
} }
async isBackendOk(): Promise<boolean> { async isBackendOk(): Promise<boolean> {
if(!this._checkBackendUrl()) {
this._isUp = false;
return false;
}
await this.get('/'); await this.get('/');
return this._isUp; return this._isUp;
} }
@ -135,7 +140,19 @@ export class AnalyticService {
} }
async getServerInfo(): Promise<ServerInfo> { async getServerInfo(): Promise<ServerInfo> {
let data = await this.get('/'); const data = await this.get('/');
if(data === undefined) {
return {
nodeVersion: 'unknown',
packageVersion: 'unknown',
npmUserAgent: 'unknown',
docker: 'unknown',
zmqConectionString: 'unknown',
serverPort: 'unknown',
gitBranch: 'unknown',
gitCommitHash: 'unknown'
};
}
return { return {
nodeVersion: data.nodeVersion, nodeVersion: data.nodeVersion,
packageVersion: data.packageVersion, packageVersion: data.packageVersion,
@ -184,8 +201,23 @@ export class AnalyticService {
} else { } else {
this._isUp = true; this._isUp = true;
} }
throw error; // throw error;
}
}
private _checkBackendUrl(): boolean {
if(this._backendURL === null || this._backendURL === undefined || this._backendURL === '') {
appEvents.emit(
'alert-warning',
[
`Datasource (or URL in datasource) is missing`,
`Please set it in datasource config. More info: https://github.com/hastic/hastic-grafana-app/wiki/Getting-started`
]
);
return false;
} }
return true;
} }
private async get(url, params?) { private async get(url, params?) {

Loading…
Cancel
Save