diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index e852b42..0ae0515 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -706,6 +706,15 @@ export class AnalyticController { this.analyticUnits .filter(analyticUnit => analyticUnit.id !== id) .forEach(unit => unit.inspect = false); + + const analyticUnit = this._analyticUnitsSet.byId(id); + analyticUnit.inspect = !analyticUnit.inspect; + } + + public toggleCollapsed(id: AnalyticUnitId) { + const analyticUnit = this._analyticUnitsSet.byId(id); + analyticUnit.collapsed = !analyticUnit.collapsed; + analyticUnit.changed = true; } public async updateSeasonality(id: AnalyticUnitId, value?: number) { diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index cdbe696..bc86d3e 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -292,13 +292,12 @@ class GraphCtrl extends MetricsPanelCtrl { this.rebindKeys(); // a small hask: bind if we open page in edit mode - const partialPath = this.panelPath + '/partials'; - this.addEditorTab('Analytics', `${partialPath}/tab_analytics.html`, 2); - this.addEditorTab('Webhooks', `${partialPath}/tab_webhooks.html`, 3); + this.addEditorTab('Analytics', `${this.partialsPath}/tab_analytics.html`, 2); + this.addEditorTab('Webhooks', `${this.partialsPath}/tab_webhooks.html`, 3); this.addEditorTab('Axes', axesEditorComponent, 4); - this.addEditorTab('Legend', `${partialPath}/tab_legend.html`, 5); - this.addEditorTab('Display', `${partialPath}/tab_display.html`, 6); - this.addEditorTab('Hastic info', `${partialPath}/tab_info.html`, 7); + this.addEditorTab('Legend', `${this.partialsPath}/tab_legend.html`, 5); + this.addEditorTab('Display', `${this.partialsPath}/tab_display.html`, 6); + this.addEditorTab('Hastic info', `${this.partialsPath}/tab_info.html`, 7); this.subTabIndex = 0; } @@ -555,7 +554,32 @@ class GraphCtrl extends MetricsPanelCtrl { } get panelPath() { - return this.pluginPath + '/panel/graph_panel'; + return `${this.pluginPath}/panel/graph_panel`; + } + + get partialsPath() { + return `${this.panelPath}/partials`; + } + + get grafanaVersion() { + if(_.has(window, 'grafanaBootData.settings.buildInfo.version')) { + return window.grafanaBootData.settings.buildInfo.version; + } + return null; + } + + getTemplatePath(filename: string) { + const grafanaVersion = this.grafanaVersion; + if(grafanaVersion === null) { + throw new Error('Unknown Grafana version'); + } + if(grafanaVersion[0] === '5') { + return `${this.partialsPath}/${filename}_5.x.html`; + } + if(grafanaVersion[0] === '6') { + return `${this.partialsPath}/${filename}_6.x.html`; + } + throw new Error(`Unsupported Grafana version: ${grafanaVersion}`); } createNew() { @@ -681,6 +705,11 @@ class GraphCtrl extends MetricsPanelCtrl { this.refresh(); } + onToggleCollapsed(id: AnalyticUnitId) { + this.analyticsController.toggleCollapsed(id); + this.refresh(); + } + onSeasonalityChange(id: AnalyticUnitId, value?: number) { this.analyticsController.updateSeasonality(id, value); this.refresh(); @@ -694,9 +723,9 @@ class GraphCtrl extends MetricsPanelCtrl { const hasticDatasource = this.hasticDatasource; - let grafanaVersion = 'unknown'; - if(_.has(window, 'grafanaBootData.settings.buildInfo.version')) { - grafanaVersion = window.grafanaBootData.settings.buildInfo.version; + let grafanaVersion = this.grafanaVersion; + if(grafanaVersion === null) { + grafanaVersion = 'unknown'; } this._panelInfo = { grafanaVersion, diff --git a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts index a7c48b6..d8f4a4a 100644 --- a/src/panel/graph_panel/models/analytic_units/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_units/analytic_unit.ts @@ -47,7 +47,8 @@ const DEFAULTS = { labeledColor: ANALYTIC_UNIT_COLORS[0], deletedColor: DEFAULT_DELETED_SEGMENT_COLOR, alert: false, - visible: true + visible: true, + collapsed: false }; const LABELING_MODES = []; @@ -85,6 +86,7 @@ export class AnalyticUnit { deletedColor: this.deletedColor, alert: this.alert, visible: this.visible, + collapsed: this.collapsed }; } @@ -106,6 +108,9 @@ export class AnalyticUnit { set deletedColor(value: string) { this._serverObject.deletedColor = value; } get deletedColor(): string { return this._serverObject.deletedColor; } + get collapsed(): boolean { return this._serverObject.collapsed; } + set collapsed(value: boolean) { this._serverObject.collapsed = value; } + set alert(value: boolean) { this._serverObject.alert = value; } get alert(): boolean { return this._serverObject.alert; } diff --git a/src/panel/graph_panel/partials/analytic_unit.html b/src/panel/graph_panel/partials/analytic_unit.html new file mode 100644 index 0000000..beec8a1 --- /dev/null +++ b/src/panel/graph_panel/partials/analytic_unit.html @@ -0,0 +1,148 @@ +
+
+ + +
+
+
+
+
+ +
+
+ +
+ + +
+
+
+
+
+ +
+
+ + +
+ +
+ + +
+ +
+
+
+
+ +
+
+ +
+ +
+ + +
+ +
+
+ + + + + + + + + +
+
diff --git a/src/panel/graph_panel/partials/analytic_units_6.x.html b/src/panel/graph_panel/partials/analytic_units_6.x.html new file mode 100644 index 0000000..a08183e --- /dev/null +++ b/src/panel/graph_panel/partials/analytic_units_6.x.html @@ -0,0 +1,155 @@ +
+
+
+ + + {{analyticUnit.name}} + ({{analyticUnit.id}}) +
+   + + + + + + + +
+
+ +
+ + + + + + + + + + + +
+ +
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
diff --git a/src/panel/graph_panel/partials/new_analytic_unit_5.x.html b/src/panel/graph_panel/partials/new_analytic_unit_5.x.html new file mode 100644 index 0000000..3b129b6 --- /dev/null +++ b/src/panel/graph_panel/partials/new_analytic_unit_5.x.html @@ -0,0 +1,11 @@ +
+
+ +
+ +
+ +
+
diff --git a/src/panel/graph_panel/partials/new_analytic_unit_6.x.html b/src/panel/graph_panel/partials/new_analytic_unit_6.x.html new file mode 100644 index 0000000..adf15b6 --- /dev/null +++ b/src/panel/graph_panel/partials/new_analytic_unit_6.x.html @@ -0,0 +1,29 @@ +
+
+
+ New analytic unit +
+ +
+
+ +
+ + + +
+
+ +
+ +
+
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index 65a0e4f..6538aa4 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -9,7 +9,7 @@
-
+
Hastic server at "{{ctrl.hasticDatasource.url}}" is not available
-
Analytic Units
-
-
-
- - -
- -
- -
- -
- -
- -
- -
- - - -
- -
-
- - Cancel - -
-
- -
- -
-
- -
-
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
-
- - -
- -
- -
- -
-
- -
- - Cancel - -
- -
- - Create - Saving... - -
-
+ + + + +