From 18e64911de4bc0a32c15bbf4448e48da6270211c Mon Sep 17 00:00:00 2001 From: rozetko Date: Thu, 14 Feb 2019 20:05:44 +0300 Subject: [PATCH 01/25] Fixes for deleted segments --- .../controllers/analytic_controller.ts | 27 ++++++++----------- src/panel/graph_panel/graph_renderer.ts | 5 ++-- src/panel/graph_panel/graph_tooltip.ts | 6 +---- src/panel/graph_panel/models/analytic_unit.ts | 2 +- 4 files changed, 15 insertions(+), 25 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 6991cc0..6792105 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -26,7 +26,7 @@ export const REGION_STROKE_ALPHA = 0.9; export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; export const REGION_DELETE_COLOR_DARK = 'white'; const LABELED_SEGMENT_BORDER_COLOR = 'black'; -const DELETED_SEGMENT_FILL_COLOR = 'black'; +const DELETED_SEGMENT_FILL_COLOR = '#00f0ff'; const DELETED_SEGMENT_BORDER_COLOR = 'black'; @@ -185,7 +185,7 @@ export class AnalyticController { return this.labelingUnit.deleteMode; } - addLabelSegment(segment: Segment, deleted?: boolean) { + addLabelSegment(segment: Segment, deleted = false) { var asegment = this.labelingUnit.addLabeledSegment(segment, deleted); this._labelingDataAddedSegments.addSegment(asegment); } @@ -288,23 +288,17 @@ export class AnalyticController { let segmentBorderColor; let segmentFillColor = fillColor; - if(this.labelingDeleteMode) { - if(s.deleted) { - segmentBorderColor = deletedSegmentBorderColor; - segmentFillColor = deletedSegmentFillColor; - } + if(s.deleted) { + segmentBorderColor = deletedSegmentBorderColor; + segmentFillColor = deletedSegmentFillColor; } else { - if(s.deleted) { - return; + if(s.labeled) { + segmentBorderColor = labeledSegmentBorderColor; + } else { + segmentBorderColor = borderColor; } } - if(s.labeled) { - segmentBorderColor = labeledSegmentBorderColor; - } else { - segmentBorderColor = borderColor; - } - var expanded = s.expandDist(rangeDist, 0.01); options.grid.markings.push({ xaxis: { from: expanded.from, to: expanded.to }, @@ -324,10 +318,11 @@ export class AnalyticController { } deleteLabelingAnalyticUnitSegmentsInRange(from: number, to: number) { - var allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to); + let allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to); allRemovedSegs.forEach(s => { if(!this._labelingDataAddedSegments.has(s.id)) { this._labelingDataDeletedSegments.addSegment(s); + this.labelingUnit.addLabeledSegment(s, true); } }); this._labelingDataAddedSegments.removeInRange(from, to); diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index cf8d9cd..0a419d8 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/src/panel/graph_panel/graph_renderer.ts @@ -150,10 +150,9 @@ export class GraphRenderer { this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange( segment.from, segment.to ); + } else { + this._analyticController.addLabelSegment(segment); } - this._analyticController.addLabelSegment( - segment, this._analyticController.labelingDeleteMode - ); this.renderPanel(); return; diff --git a/src/panel/graph_panel/graph_tooltip.ts b/src/panel/graph_panel/graph_tooltip.ts index ae5028e..46761eb 100644 --- a/src/panel/graph_panel/graph_tooltip.ts +++ b/src/panel/graph_panel/graph_tooltip.ts @@ -200,12 +200,8 @@ export class GraphTooltip { var from = this.dashboard.formatDate(s.segment.from, 'HH:mm:ss.SSS'); var to = this.dashboard.formatDate(s.segment.to, 'HH:mm:ss.SSS'); - if(s.segment.deleted && !s.analyticUnit.deleteMode) { - return; - } - let icon; - if (s.segment.labeled) { + if(s.segment.labeled) { icon = 'fa-thumb-tack'; } else if (s.segment.deleted) { icon = 'fa-trash'; diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 92ac121..4c3c5c8 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -81,7 +81,7 @@ export class AnalyticUnit { } addLabeledSegment(segment: Segment, deleted: boolean): AnalyticSegment { - var asegment = new AnalyticSegment(true, segment.id, segment.from, segment.to, deleted); + var asegment = new AnalyticSegment(!deleted, segment.id, segment.from, segment.to, deleted); this._segmentSet.addSegment(asegment); return asegment; } From 40573826f370517d6a6cb5af5989fed28222b64e Mon Sep 17 00:00:00 2001 From: rozetko Date: Thu, 14 Feb 2019 20:51:33 +0300 Subject: [PATCH 02/25] Small refactoring --- .../controllers/analytic_controller.ts | 41 +++++++++---------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 6792105..b6b0393 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -21,8 +21,9 @@ import { Emitter } from 'grafana/app/core/utils/emitter'; import _ from 'lodash'; import * as tinycolor from 'tinycolor2'; -export const REGION_FILL_ALPHA = 0.7; -export const REGION_STROKE_ALPHA = 0.9; +export const REGION_FILL_ALPHA = 0.5; +export const REGION_STROKE_ALPHA = 0.8; +const LABELING_MODE_ALPHA = 0.7; export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; export const REGION_DELETE_COLOR_DARK = 'white'; const LABELED_SEGMENT_BORDER_COLOR = 'black'; @@ -253,39 +254,39 @@ export class AnalyticController { } // TODO: move to renderer - updateFlotEvents(isEditMode, options) { + updateFlotEvents(isEditMode: boolean, options: any) { if(options.grid.markings === undefined) { options.markings = []; } for(var i = 0; i < this.analyticUnits.length; i++) { - var analyticUnit = this.analyticUnits[i]; - var borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA); - var fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA); - var segments = analyticUnit.segments.getSegments(); + const analyticUnit = this.analyticUnits[i]; if(!analyticUnit.visible) { continue; } - if(isEditMode && this.labelingMode) { - if(analyticUnit.selected) { - borderColor = addAlphaToRGB(borderColor, 0.7); - fillColor = addAlphaToRGB(borderColor, 0.7); - } else { - continue; - } - } - - var rangeDist = +options.xaxis.max - +options.xaxis.min; + let borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA); + let fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA); let labeledSegmentBorderColor = tinycolor(LABELED_SEGMENT_BORDER_COLOR).toRgbString(); labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, REGION_STROKE_ALPHA); let deletedSegmentFillColor = tinycolor(DELETED_SEGMENT_FILL_COLOR).toRgbString(); - deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_STROKE_ALPHA); + deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_FILL_ALPHA); let deletedSegmentBorderColor = tinycolor(DELETED_SEGMENT_BORDER_COLOR).toRgbString(); deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, REGION_STROKE_ALPHA); + if(isEditMode && this.labelingMode && analyticUnit.selected) { + borderColor = addAlphaToRGB(borderColor, LABELING_MODE_ALPHA); + fillColor = addAlphaToRGB(fillColor, LABELING_MODE_ALPHA); + labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, LABELING_MODE_ALPHA); + deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, LABELING_MODE_ALPHA); + deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, LABELING_MODE_ALPHA); + } + + const segments = analyticUnit.segments.getSegments(); + const rangeDist = +options.xaxis.max - +options.xaxis.min; + segments.forEach(s => { - let segmentBorderColor; + let segmentBorderColor = borderColor; let segmentFillColor = fillColor; if(s.deleted) { @@ -294,8 +295,6 @@ export class AnalyticController { } else { if(s.labeled) { segmentBorderColor = labeledSegmentBorderColor; - } else { - segmentBorderColor = borderColor; } } From 1e977b7223e1ad80c13a6e2aa2701d9460d48395 Mon Sep 17 00:00:00 2001 From: rozetko Date: Thu, 14 Feb 2019 20:53:20 +0300 Subject: [PATCH 03/25] var -> const --- src/panel/graph_panel/controllers/analytic_controller.ts | 2 +- src/panel/graph_panel/models/analytic_unit.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index b6b0393..d6311df 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -187,7 +187,7 @@ export class AnalyticController { } addLabelSegment(segment: Segment, deleted = false) { - var asegment = this.labelingUnit.addLabeledSegment(segment, deleted); + const asegment = this.labelingUnit.addLabeledSegment(segment, deleted); this._labelingDataAddedSegments.addSegment(asegment); } diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 4c3c5c8..3a7ea50 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -81,7 +81,7 @@ export class AnalyticUnit { } addLabeledSegment(segment: Segment, deleted: boolean): AnalyticSegment { - var asegment = new AnalyticSegment(!deleted, segment.id, segment.from, segment.to, deleted); + const asegment = new AnalyticSegment(!deleted, segment.id, segment.from, segment.to, deleted); this._segmentSet.addSegment(asegment); return asegment; } From e86479b7000f64628db3d0083e5d0f5f15a36ee2 Mon Sep 17 00:00:00 2001 From: Alexey Velikiy Date: Fri, 15 Feb 2019 17:59:28 +0300 Subject: [PATCH 04/25] support and consulting --- README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 79d1284..8be2a3e 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,6 @@ A version of Grafana's default Graph Panel for rendering and labeling Hastic's p - See also: * [Getting started](https://github.com/hastic/hastic-grafana-app/wiki/Getting-started) * [Wiki](https://github.com/hastic/hastic-grafana-app/wiki) @@ -27,16 +26,11 @@ See also: * [Installation from source](https://github.com/hastic/hastic-grafana-app/wiki/Installation-from-source) * [Changelog](https://github.com/hastic/hastic-grafana-app/wiki/Changelog) - # Prerequisites * [hastic-server](https://github.com/hastic/hastic-server) * [Grafana >= 5.4.0](https://grafana.com/grafana/download) +## Support and Consulting -# Credits - -Based on - -* [grafana-plugin-template-webpack-typescript](https://github.com/CorpGlory/grafana-plugin-template-webpack-typescript) -* [@types/grafana](https://github.com/CorpGlory/types-grafana) +Commercial support, consulting, professional services — please send us your inquiry to ping@hastic.io From a86c63f60849e8642476ec5479709996463cb2cd Mon Sep 17 00:00:00 2001 From: Alexey Velikiy Date: Fri, 15 Feb 2019 18:12:25 +0300 Subject: [PATCH 05/25] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8be2a3e..af6e496 100644 --- a/README.md +++ b/README.md @@ -33,4 +33,4 @@ See also: ## Support and Consulting -Commercial support, consulting, professional services — please send us your inquiry to ping@hastic.io +Commercial support, consulting, professional services — please send us your inquiry at ping@hastic.io From 483039aef09d57ca3d77834050972bbc4d7f6246 Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 01:06:55 +0300 Subject: [PATCH 06/25] Deleted segments --- .../graph_panel/controllers/analytic_controller.ts | 7 +++---- src/panel/graph_panel/models/analytic_unit.ts | 3 --- src/panel/graph_panel/services/analytic_service.ts | 12 +++++++----- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index d6311df..3469652 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -162,7 +162,7 @@ export class AnalyticController { this.labelingUnit.segments.remove(s.id); }); this._labelingDataDeletedSegments.getSegments().forEach(s => { - s.deleted = false; + this.labelingUnit.segments.addSegment(s); }); this.dropLabeling(); } @@ -298,7 +298,7 @@ export class AnalyticController { } } - var expanded = s.expandDist(rangeDist, 0.01); + const expanded = s.expandDist(rangeDist, 0.01); options.grid.markings.push({ xaxis: { from: expanded.from, to: expanded.to }, color: segmentFillColor @@ -317,11 +317,10 @@ export class AnalyticController { } deleteLabelingAnalyticUnitSegmentsInRange(from: number, to: number) { - let allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to); + const allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to); allRemovedSegs.forEach(s => { if(!this._labelingDataAddedSegments.has(s.id)) { this._labelingDataDeletedSegments.addSegment(s); - this.labelingUnit.addLabeledSegment(s, true); } }); this._labelingDataAddedSegments.removeInRange(from, to); diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 3a7ea50..2841548 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -88,9 +88,6 @@ export class AnalyticUnit { removeSegmentsInRange(from: number, to: number): AnalyticSegment[] { let deletedSegments = this._segmentSet.removeInRange(from, to); - deletedSegments.forEach(s => { - s.deleted = true; - }); return deletedSegments; } diff --git a/src/panel/graph_panel/services/analytic_service.ts b/src/panel/graph_panel/services/analytic_service.ts index cb4f6e3..01663d7 100644 --- a/src/panel/graph_panel/services/analytic_service.ts +++ b/src/panel/graph_panel/services/analytic_service.ts @@ -66,20 +66,22 @@ export class AnalyticService { } async updateSegments( - id: AnalyticUnitId, addedSegments: SegmentsSet, removedSegments: SegmentsSet + id: AnalyticUnitId, addedSegments: SegmentsSet, removedSegments: SegmentsSet ): Promise { - const getJSONs = (segs: SegmentsSet) => segs.getSegments().map(segment => ({ + const getJSONs = (segs: SegmentsSet) => segs.getSegments().map(segment => ({ from: segment.from, - to: segment.to + to: segment.to, + labeled: segment.labeled, + deleted: segment.deleted })); - var payload = { + const payload = { id, addedSegments: getJSONs(addedSegments), removedSegments: removedSegments.getSegments().map(s => s.id) }; - var data = await this.patch('/segments', payload); + const data = await this.patch('/segments', payload); if(data.addedIds === undefined) { throw new Error('Server didn`t send addedIds'); } From 35ce72c6a6bd7d5f3673b2f9b451a9a6b6f0d890 Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 01:06:59 +0300 Subject: [PATCH 07/25] Codestyle fixes --- src/panel/graph_panel/graph_ctrl.ts | 1 - src/panel/graph_panel/graph_renderer.ts | 7 ++++--- src/panel/graph_panel/models/segment_array.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index 745b45f..ebbc3cc 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -35,7 +35,6 @@ class GraphCtrl extends MetricsPanelCtrl { private _datasourceRequest: DatasourceRequest; private _datasources: any; - private _panelPath: any; private _renderError: boolean = false; // annotationsPromise: any; diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index 0a419d8..2f474aa 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/src/panel/graph_panel/graph_renderer.ts @@ -140,8 +140,8 @@ export class GraphRenderer { if(this._isHasticEvent(selectionEvent)) { this.plot.clearSelection(); - var id = this._analyticController.getNewTempSegmentId(); - var segment = new Segment( + const id = this._analyticController.getNewTempSegmentId(); + const segment = new Segment( id, Math.round(selectionEvent.xaxis.from), Math.round(selectionEvent.xaxis.to) @@ -150,8 +150,9 @@ export class GraphRenderer { this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange( segment.from, segment.to ); + this._analyticController.addLabelSegment(segment, true); } else { - this._analyticController.addLabelSegment(segment); + this._analyticController.addLabelSegment(segment, false); } this.renderPanel(); diff --git a/src/panel/graph_panel/models/segment_array.ts b/src/panel/graph_panel/models/segment_array.ts index a07ffa4..5038eeb 100644 --- a/src/panel/graph_panel/models/segment_array.ts +++ b/src/panel/graph_panel/models/segment_array.ts @@ -47,7 +47,7 @@ export class SegmentArray implements SegmentsSet { findSegments(point: number, rangeDist: number): T[] { return this._segments.filter(s => { - var expanded = s.expandDist(rangeDist, 0.01); + const expanded = s.expandDist(rangeDist, 0.01); return (expanded.from <= point) && (point <= expanded.to); }); } From 256ba3796911e4c11a00246976bfad4432e71683 Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 01:08:18 +0300 Subject: [PATCH 08/25] _labelingDataDeletedSegments -> _labelingDataRemovedSegments --- .../controllers/analytic_controller.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 3469652..6c2b0a9 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -37,7 +37,7 @@ export class AnalyticController { private _selectedAnalyticUnitId: AnalyticUnitId = null; private _labelingDataAddedSegments: SegmentsSet; - private _labelingDataDeletedSegments: SegmentsSet; + private _labelingDataRemovedSegments: SegmentsSet; private _newAnalyticUnit: AnalyticUnit = null; private _creatingNewAnalyticType: boolean = false; private _savingNewAnalyticUnit: boolean = false; @@ -54,7 +54,7 @@ export class AnalyticController { _panelObject.analyticUnits = _panelObject.anomalyTypes || []; } this._labelingDataAddedSegments = new SegmentArray(); - this._labelingDataDeletedSegments = new SegmentArray(); + this._labelingDataRemovedSegments = new SegmentArray(); this._analyticUnitsSet = new AnalyticUnitsSet(this._panelObject.analyticUnits); this._thresholds = []; this.updateThresholds(); @@ -161,7 +161,7 @@ export class AnalyticController { this._labelingDataAddedSegments.getSegments().forEach(s => { this.labelingUnit.segments.remove(s.id); }); - this._labelingDataDeletedSegments.getSegments().forEach(s => { + this._labelingDataRemovedSegments.getSegments().forEach(s => { this.labelingUnit.segments.addSegment(s); }); this.dropLabeling(); @@ -169,7 +169,7 @@ export class AnalyticController { dropLabeling() { this._labelingDataAddedSegments.clear(); - this._labelingDataDeletedSegments.clear(); + this._labelingDataRemovedSegments.clear(); this.labelingUnit.selected = false; this._selectedAnalyticUnitId = null; this._tempIdCounted = -1; @@ -228,7 +228,7 @@ export class AnalyticController { var allSegmentsSet = new SegmentArray(allSegmentsList); if(analyticUnit.selected) { this._labelingDataAddedSegments.getSegments().forEach(s => allSegmentsSet.addSegment(s)); - this._labelingDataDeletedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.id)); + this._labelingDataRemovedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.id)); } analyticUnit.segments = allSegmentsSet; } @@ -241,7 +241,7 @@ export class AnalyticController { if( this._labelingDataAddedSegments.length === 0 && - this._labelingDataDeletedSegments.length === 0 + this._labelingDataRemovedSegments.length === 0 ) { return []; } @@ -249,7 +249,7 @@ export class AnalyticController { await this._analyticService.updateMetric(unit.id, this._currentMetric, this._currentDatasource); return this._analyticService.updateSegments( - unit.id, this._labelingDataAddedSegments, this._labelingDataDeletedSegments + unit.id, this._labelingDataAddedSegments, this._labelingDataRemovedSegments ); } @@ -320,7 +320,7 @@ export class AnalyticController { const allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to); allRemovedSegs.forEach(s => { if(!this._labelingDataAddedSegments.has(s.id)) { - this._labelingDataDeletedSegments.addSegment(s); + this._labelingDataRemovedSegments.addSegment(s); } }); this._labelingDataAddedSegments.removeInRange(from, to); From c0b44f587ebadf652bbe073e9cb9401763ecd00c Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 02:07:39 +0300 Subject: [PATCH 09/25] Choose deleted segment color #182 --- src/panel/graph_panel/colors.ts | 8 +++- .../controllers/analytic_controller.ts | 43 ++++++++++--------- src/panel/graph_panel/graph_ctrl.ts | 4 +- src/panel/graph_panel/graph_renderer.ts | 9 ++-- src/panel/graph_panel/graph_tooltip.ts | 2 +- src/panel/graph_panel/models/analytic_unit.ts | 10 +++-- .../graph_panel/partials/tab_analytics.html | 14 ++++-- 7 files changed, 57 insertions(+), 33 deletions(-) diff --git a/src/panel/graph_panel/colors.ts b/src/panel/graph_panel/colors.ts index 33b9f9f..72886fe 100644 --- a/src/panel/graph_panel/colors.ts +++ b/src/panel/graph_panel/colors.ts @@ -76,6 +76,12 @@ export const ANALYTIC_UNIT_COLORS = [ '#f8c171', ]; +export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; +export const REGION_DELETE_COLOR_DARK = 'white'; +export const LABELED_SEGMENT_BORDER_COLOR = 'black'; +export const DELETED_SEGMENT_FILL_COLOR = '#00f0ff'; +export const DELETED_SEGMENT_BORDER_COLOR = 'black'; + export function hexToHsl(color) { return tinycolor(color).toHsl(); } @@ -85,4 +91,4 @@ export function hslToHex(color) { } -export default colors; \ No newline at end of file +export default colors; diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 6c2b0a9..abcbbe7 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -14,7 +14,12 @@ import { SegmentArray } from '../models/segment_array'; import { ServerInfo } from '../models/info'; import { Threshold, Condition } from '../models/threshold'; -import { ANALYTIC_UNIT_COLORS } from '../colors'; +import { + ANALYTIC_UNIT_COLORS, + LABELED_SEGMENT_BORDER_COLOR, + DELETED_SEGMENT_FILL_COLOR, + DELETED_SEGMENT_BORDER_COLOR +} from '../colors'; import { Emitter } from 'grafana/app/core/utils/emitter'; @@ -23,13 +28,7 @@ import * as tinycolor from 'tinycolor2'; export const REGION_FILL_ALPHA = 0.5; export const REGION_STROKE_ALPHA = 0.8; -const LABELING_MODE_ALPHA = 0.7; -export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; -export const REGION_DELETE_COLOR_DARK = 'white'; -const LABELED_SEGMENT_BORDER_COLOR = 'black'; -const DELETED_SEGMENT_FILL_COLOR = '#00f0ff'; -const DELETED_SEGMENT_BORDER_COLOR = 'black'; - +export const LABELING_MODE_ALPHA = 0.7; export class AnalyticController { @@ -87,11 +86,11 @@ export class AnalyticController { this._creatingNewAnalyticType = true; this._savingNewAnalyticUnit = false; if (this.analyticUnits.length === 0) { - this._newAnalyticUnit.color = ANALYTIC_UNIT_COLORS[0]; + this._newAnalyticUnit.labeledColor = ANALYTIC_UNIT_COLORS[0]; } else { - let colorIndex = ANALYTIC_UNIT_COLORS.indexOf(_.last(this.analyticUnits).color) + 1; + let colorIndex = ANALYTIC_UNIT_COLORS.indexOf(_.last(this.analyticUnits).labeledColor) + 1; colorIndex %= ANALYTIC_UNIT_COLORS.length; - this._newAnalyticUnit.color = ANALYTIC_UNIT_COLORS[colorIndex]; + this._newAnalyticUnit.labeledColor = ANALYTIC_UNIT_COLORS[colorIndex]; } } @@ -195,11 +194,15 @@ export class AnalyticController { return this._analyticUnitsSet.items; } - onAnalyticUnitColorChange(id: AnalyticUnitId, value: string) { + onAnalyticUnitColorChange(id: AnalyticUnitId, value: string, deleted: boolean) { if(id === undefined) { throw new Error('id is undefined'); } - this._analyticUnitsSet.byId(id).color = value; + if(deleted) { + this._analyticUnitsSet.byId(id).deletedColor = value; + } else { + this._analyticUnitsSet.byId(id).labeledColor = value; + } } fetchAnalyticUnitsStatuses() { @@ -265,18 +268,18 @@ export class AnalyticController { continue; } - let borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA); - let fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA); + let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_STROKE_ALPHA); + let defaultFillColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_FILL_ALPHA); let labeledSegmentBorderColor = tinycolor(LABELED_SEGMENT_BORDER_COLOR).toRgbString(); labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, REGION_STROKE_ALPHA); - let deletedSegmentFillColor = tinycolor(DELETED_SEGMENT_FILL_COLOR).toRgbString(); + let deletedSegmentFillColor = tinycolor(analyticUnit.deletedColor).toRgbString(); deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_FILL_ALPHA); let deletedSegmentBorderColor = tinycolor(DELETED_SEGMENT_BORDER_COLOR).toRgbString(); deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, REGION_STROKE_ALPHA); if(isEditMode && this.labelingMode && analyticUnit.selected) { - borderColor = addAlphaToRGB(borderColor, LABELING_MODE_ALPHA); - fillColor = addAlphaToRGB(fillColor, LABELING_MODE_ALPHA); + defaultBorderColor = addAlphaToRGB(defaultBorderColor, LABELING_MODE_ALPHA); + defaultFillColor = addAlphaToRGB(defaultFillColor, LABELING_MODE_ALPHA); labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, LABELING_MODE_ALPHA); deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, LABELING_MODE_ALPHA); deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, LABELING_MODE_ALPHA); @@ -286,8 +289,8 @@ export class AnalyticController { const rangeDist = +options.xaxis.max - +options.xaxis.min; segments.forEach(s => { - let segmentBorderColor = borderColor; - let segmentFillColor = fillColor; + let segmentBorderColor = defaultBorderColor; + let segmentFillColor = defaultFillColor; if(s.deleted) { segmentBorderColor = deletedSegmentBorderColor; diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index ebbc3cc..72ef6ab 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -580,11 +580,11 @@ class GraphCtrl extends MetricsPanelCtrl { this.analyticsController.fetchAnalyticUnitName(analyticUnit); } - onColorChange(id: AnalyticUnitId, value: string) { + onColorChange(id: AnalyticUnitId, deleted: boolean, value: string) { if(id === undefined) { throw new Error('id is undefined'); } - this.analyticsController.onAnalyticUnitColorChange(id, value); + this.analyticsController.onAnalyticUnitColorChange(id, value, deleted); this.render(); } diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index 2f474aa..2a81e58 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/src/panel/graph_panel/graph_renderer.ts @@ -5,10 +5,13 @@ import { convertValuesToHistogram, getSeriesValues } from './histogram'; import { AnalyticController, REGION_FILL_ALPHA, - REGION_STROKE_ALPHA, + REGION_STROKE_ALPHA +} from './controllers/analytic_controller'; + +import { REGION_DELETE_COLOR_LIGHT, REGION_DELETE_COLOR_DARK -} from './controllers/analytic_controller'; +} from './colors'; import { GraphCtrl } from './graph_ctrl'; @@ -345,7 +348,7 @@ export class GraphRenderer { REGION_DELETE_COLOR_LIGHT : REGION_DELETE_COLOR_DARK; } else { - color = this._analyticController.labelingUnit.color; + color = this._analyticController.labelingUnit.labeledColor; } fillAlpha = REGION_FILL_ALPHA; strokeAlpha = REGION_STROKE_ALPHA; diff --git a/src/panel/graph_panel/graph_tooltip.ts b/src/panel/graph_panel/graph_tooltip.ts index 46761eb..97c5f31 100644 --- a/src/panel/graph_panel/graph_tooltip.ts +++ b/src/panel/graph_panel/graph_tooltip.ts @@ -211,7 +211,7 @@ export class GraphTooltip { result += `
- + ${s.analyticUnit.name}:
diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 2841548..8a19cb3 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -36,7 +36,8 @@ export class AnalyticUnit { } _.defaults(this._panelObject, { name: 'AnalyticUnitName', - color: ANALYTIC_UNIT_COLORS[0], + labeledColor: ANALYTIC_UNIT_COLORS[0], + deletedColor: '#00f0ff', detectorType: 'pattern', type: 'GENERAL', alert: false @@ -58,8 +59,11 @@ export class AnalyticUnit { set confidence(value: number) { this._panelObject.confidence = value; } get confidence(): number { return this._panelObject.confidence; } - set color(value: string) { this._panelObject.color = value; } - get color(): string { return this._panelObject.color; } + set labeledColor(value: string) { this._panelObject.labeledColor = value; } + get labeledColor(): string { return this._panelObject.labeledColor; } + + set deletedColor(value: string) { this._panelObject.deletedColor = value; } + get deletedColor(): string { return this._panelObject.deletedColor; } set alert(value: boolean) { this._panelObject.alert = value; } get alert(): boolean { return this._panelObject.alert; } diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index 8a4e3f7..066ee09 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -39,11 +39,19 @@ /> --> - + + + + + + From a9a82d374ba8d06f5cd886226f5dace30ea3bebf Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 03:52:37 +0300 Subject: [PATCH 10/25] Unlabeling mode --- src/panel/graph_panel/colors.ts | 9 ++- .../controllers/analytic_controller.ts | 55 +++++++++++-------- src/panel/graph_panel/graph_ctrl.ts | 33 ++++++++--- src/panel/graph_panel/graph_renderer.ts | 44 ++++++++------- src/panel/graph_panel/models/analytic_unit.ts | 13 ++++- .../graph_panel/partials/tab_analytics.html | 15 ++--- .../graph_panel/services/analytic_service.ts | 4 ++ 7 files changed, 109 insertions(+), 64 deletions(-) diff --git a/src/panel/graph_panel/colors.ts b/src/panel/graph_panel/colors.ts index 72886fe..778fea7 100644 --- a/src/panel/graph_panel/colors.ts +++ b/src/panel/graph_panel/colors.ts @@ -76,12 +76,15 @@ export const ANALYTIC_UNIT_COLORS = [ '#f8c171', ]; -export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; -export const REGION_DELETE_COLOR_DARK = 'white'; +export const REGION_UNLABEL_COLOR_LIGHT = '#d1d1d1'; +export const REGION_UNLABEL_COLOR_DARK = 'white'; export const LABELED_SEGMENT_BORDER_COLOR = 'black'; -export const DELETED_SEGMENT_FILL_COLOR = '#00f0ff'; export const DELETED_SEGMENT_BORDER_COLOR = 'black'; +export const SEGMENT_FILL_ALPHA = 0.5; +export const SEGMENT_STROKE_ALPHA = 0.8; +export const LABELING_MODE_ALPHA = 0.7; + export function hexToHsl(color) { return tinycolor(color).toHsl(); } diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index abcbbe7..f5c878b 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -4,7 +4,8 @@ import { AnalyticService } from '../services/analytic_service' import { AnalyticUnitId, AnalyticUnit, - AnalyticUnitsSet, AnalyticSegment, AnalyticSegmentsSearcher, AnalyticSegmentPair + AnalyticUnitsSet, AnalyticSegment, AnalyticSegmentsSearcher, AnalyticSegmentPair, + LabelingMode } from '../models/analytic_unit'; import { MetricExpanded } from '../models/metric'; import { DatasourceRequest } from '../models/datasource'; @@ -14,11 +15,13 @@ import { SegmentArray } from '../models/segment_array'; import { ServerInfo } from '../models/info'; import { Threshold, Condition } from '../models/threshold'; -import { +import { ANALYTIC_UNIT_COLORS, LABELED_SEGMENT_BORDER_COLOR, - DELETED_SEGMENT_FILL_COLOR, - DELETED_SEGMENT_BORDER_COLOR + DELETED_SEGMENT_BORDER_COLOR, + SEGMENT_FILL_ALPHA, + SEGMENT_STROKE_ALPHA, + LABELING_MODE_ALPHA } from '../colors'; import { Emitter } from 'grafana/app/core/utils/emitter'; @@ -26,10 +29,6 @@ import { Emitter } from 'grafana/app/core/utils/emitter'; import _ from 'lodash'; import * as tinycolor from 'tinycolor2'; -export const REGION_FILL_ALPHA = 0.5; -export const REGION_STROKE_ALPHA = 0.8; -export const LABELING_MODE_ALPHA = 0.7; - export class AnalyticController { private _analyticUnitsSet: AnalyticUnitsSet; @@ -174,15 +173,15 @@ export class AnalyticController { this._tempIdCounted = -1; } - get labelingMode(): boolean { + get inLabelingMode(): boolean { return this._selectedAnalyticUnitId !== null; } - get labelingDeleteMode(): boolean { - if(!this.labelingMode) { - return false; + get labelingMode(): LabelingMode { + if(!this.inLabelingMode) { + return LabelingMode.NOT_IN_LABELING_MODE; } - return this.labelingUnit.deleteMode; + return this.labelingUnit.labelingMode; } addLabelSegment(segment: Segment, deleted = false) { @@ -251,9 +250,13 @@ export class AnalyticController { await this._analyticService.updateMetric(unit.id, this._currentMetric, this._currentDatasource); - return this._analyticService.updateSegments( + const newIds = await this._analyticService.updateSegments( unit.id, this._labelingDataAddedSegments, this._labelingDataRemovedSegments ); + if(unit.labelingMode !== LabelingMode.UNLABELING) { + await this._analyticService.runDetect(unit.id); + } + return newIds; } // TODO: move to renderer @@ -268,16 +271,16 @@ export class AnalyticController { continue; } - let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_STROKE_ALPHA); - let defaultFillColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_FILL_ALPHA); + let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, SEGMENT_STROKE_ALPHA); + let defaultFillColor = addAlphaToRGB(analyticUnit.labeledColor, SEGMENT_FILL_ALPHA); let labeledSegmentBorderColor = tinycolor(LABELED_SEGMENT_BORDER_COLOR).toRgbString(); - labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, REGION_STROKE_ALPHA); + labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, SEGMENT_STROKE_ALPHA); let deletedSegmentFillColor = tinycolor(analyticUnit.deletedColor).toRgbString(); - deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_FILL_ALPHA); + deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, SEGMENT_FILL_ALPHA); let deletedSegmentBorderColor = tinycolor(DELETED_SEGMENT_BORDER_COLOR).toRgbString(); - deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, REGION_STROKE_ALPHA); + deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, SEGMENT_STROKE_ALPHA); - if(isEditMode && this.labelingMode && analyticUnit.selected) { + if(isEditMode && this.inLabelingMode && analyticUnit.selected) { defaultBorderColor = addAlphaToRGB(defaultBorderColor, LABELING_MODE_ALPHA); defaultFillColor = addAlphaToRGB(defaultFillColor, LABELING_MODE_ALPHA); labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, LABELING_MODE_ALPHA); @@ -329,11 +332,15 @@ export class AnalyticController { this._labelingDataAddedSegments.removeInRange(from, to); } - toggleDeleteMode() { - if(!this.labelingMode) { - throw new Error('Cant enter delete mode is labeling mode disabled'); + toggleLabelingMode(mode: LabelingMode) { + if(!this.inLabelingMode) { + throw new Error(`Can't enter ${mode} mode when labeling mode is disabled`); + } + if(this.labelingUnit.labelingMode === mode) { + this.labelingUnit.labelingMode = LabelingMode.LABELING; + } else { + this.labelingUnit.labelingMode = mode; } - this.labelingUnit.deleteMode = !this.labelingUnit.deleteMode; } async removeAnalyticUnit(id: AnalyticUnitId, silent: boolean = false) { diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index 72ef6ab..0329e15 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -7,7 +7,7 @@ import { GraphLegend } from './graph_legend'; import { DataProcessor } from './data_processor'; import { MetricExpanded } from './models/metric'; import { DatasourceRequest } from './models/datasource'; -import { AnalyticUnitId, AnalyticUnit } from './models/analytic_unit'; +import { AnalyticUnitId, AnalyticUnit, LabelingMode } from './models/analytic_unit'; import { AnalyticService } from './services/analytic_service'; import { AnalyticController } from './controllers/analytic_controller'; import { PanelInfo } from './models/info'; @@ -156,19 +156,28 @@ class GraphCtrl extends MetricsPanelCtrl { this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); } - rebindDKey() { + rebindKeys() { + const dKeyCode = 68; + const uKeyCode = 85; + $(document).off('keydown.hasticDKey'); $(document).on('keydown.hasticDKey', (e) => { - // 68 is 'd' key kode - if(e.keyCode === 68) { + if(e.keyCode === dKeyCode) { this.onDKey(); } }); + + $(document).off('keydown.hasticUKey'); + $(document).on('keydown.hasticUKey', (e) => { + if(e.keyCode === uKeyCode) { + this.onUKey(); + } + }); } editPanel() { super.editPanel(); - this.rebindDKey(); + this.rebindKeys(); } async getBackendURL(): Promise { @@ -299,7 +308,7 @@ class GraphCtrl extends MetricsPanelCtrl { onInitEditMode() { - this.rebindDKey(); // a small hask: bind if we open page in edit mode + 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); @@ -623,10 +632,18 @@ class GraphCtrl extends MetricsPanelCtrl { } onDKey() { - if(!this.analyticsController.labelingMode) { + if(!this.analyticsController.inLabelingMode) { + return; + } + this.analyticsController.toggleLabelingMode(LabelingMode.DELETING); + this.refresh(); + } + + onUKey() { + if(!this.analyticsController.inLabelingMode) { return; } - this.analyticsController.toggleDeleteMode(); + this.analyticsController.toggleLabelingMode(LabelingMode.UNLABELING); this.refresh(); } diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index 2a81e58..9537249 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/src/panel/graph_panel/graph_renderer.ts @@ -1,16 +1,15 @@ import { Segment } from './models/segment'; +import { LabelingMode } from './models/analytic_unit'; import { GraphTooltip } from './graph_tooltip'; import { convertValuesToHistogram, getSeriesValues } from './histogram'; import { - AnalyticController, - REGION_FILL_ALPHA, - REGION_STROKE_ALPHA + AnalyticController } from './controllers/analytic_controller'; import { - REGION_DELETE_COLOR_LIGHT, - REGION_DELETE_COLOR_DARK + REGION_UNLABEL_COLOR_LIGHT, + REGION_UNLABEL_COLOR_DARK } from './colors'; import { GraphCtrl } from './graph_ctrl'; @@ -149,14 +148,20 @@ export class GraphRenderer { Math.round(selectionEvent.xaxis.from), Math.round(selectionEvent.xaxis.to) ); - if(this._analyticController.labelingDeleteMode) { + if(this._analyticController.labelingMode === LabelingMode.DELETING) { this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange( segment.from, segment.to ); this._analyticController.addLabelSegment(segment, true); - } else { + } + if(this._analyticController.labelingMode === LabelingMode.LABELING) { this._analyticController.addLabelSegment(segment, false); } + if(this._analyticController.labelingMode === LabelingMode.UNLABELING) { + this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange( + segment.from, segment.to + ); + } this.renderPanel(); return; @@ -339,21 +344,22 @@ export class GraphRenderer { } private _chooseSelectionColor(e) { - var color = COLOR_SELECTION; - var fillAlpha = 0.4; - var strokeAlpha = 0.4; + let color = COLOR_SELECTION; + if(this._isHasticEvent(e)) { - if(this._analyticController.labelingDeleteMode) { - color = this.contextSrv.user.lightTheme ? - REGION_DELETE_COLOR_LIGHT : - REGION_DELETE_COLOR_DARK; - } else { + if(this._analyticController.labelingMode === LabelingMode.DELETING) { + color = this._analyticController.labelingUnit.deletedColor; + } + if(this._analyticController.labelingMode === LabelingMode.LABELING) { color = this._analyticController.labelingUnit.labeledColor; } - fillAlpha = REGION_FILL_ALPHA; - strokeAlpha = REGION_STROKE_ALPHA; + if(this._analyticController.labelingMode === LabelingMode.UNLABELING) { + color = this.contextSrv.user.lightTheme ? + REGION_UNLABEL_COLOR_LIGHT : + REGION_UNLABEL_COLOR_DARK; + } } - this.plot.getOptions().selection.color = color + this.plot.getOptions().selection.color = color; } private _buildFlotPairs(data) { @@ -810,7 +816,7 @@ export class GraphRenderer { private _isHasticEvent(obj: any) { return (obj.ctrlKey || obj.metaKey) && this.contextSrv.isEditor && - this._analyticController.labelingMode; + this._analyticController.inLabelingMode; } } diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 8a19cb3..8d81310 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -7,6 +7,13 @@ import { ANALYTIC_UNIT_COLORS } from '../colors'; import _ from 'lodash'; +export enum LabelingMode { + LABELING = 'LABELING', + UNLABELING = 'UNLABELING', + DELETING = 'DELETING', + NOT_IN_LABELING_MODE = 'NOT_IN_LABELING_MODE' +}; + export type AnalyticSegmentPair = { analyticUnit: AnalyticUnit, segment: AnalyticSegment }; export type AnalyticSegmentsSearcher = (point: number, rangeDist: number) => AnalyticSegmentPair[]; @@ -23,8 +30,8 @@ export class AnalyticSegment extends Segment { export class AnalyticUnit { + private _labelingMode: LabelingMode = LabelingMode.LABELING; private _selected: boolean = false; - private _deleteMode: boolean = false; private _saving: boolean = false; private _segmentSet = new SegmentArray(); private _status: string; @@ -71,8 +78,8 @@ export class AnalyticUnit { get selected(): boolean { return this._selected; } set selected(value: boolean) { this._selected = value; } - get deleteMode(): boolean { return this._deleteMode; } - set deleteMode(value: boolean) { this._deleteMode = value; } + get labelingMode(): LabelingMode { return this._labelingMode; } + set labelingMode(value: LabelingMode) { this._labelingMode = value; } get saving(): boolean { return this._saving; } set saving(value: boolean) { this._saving = value; } diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index 066ee09..dc8a519 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -11,7 +11,7 @@
-
diff --git a/src/utlis.ts b/src/utlis.ts new file mode 100644 index 0000000..4bab590 --- /dev/null +++ b/src/utlis.ts @@ -0,0 +1,29 @@ +import url from 'url-parse'; + +export function normalizeUrl(grafanaUrl: string) { + if(!grafanaUrl) { + return grafanaUrl; + } + let urlObj = new url(grafanaUrl, {}); + if(urlObj.protocol !== 'http:' && urlObj.protocol !== 'https:') { + grafanaUrl = `http://${grafanaUrl}`; + urlObj = new url(grafanaUrl, {}); + console.log('No protocol provided in GRAFANA_URL -> inserting "http://"'); + } + if(urlObj.slashes === false) { + urlObj = new url(`${urlObj.protocol}//${urlObj.pathname}`, {}); + console.log('No slashes were provided after the protocol -> inserting slashes'); + } + if(urlObj.pathname.slice(-1) === '/') { + urlObj.pathname = urlObj.pathname.slice(0, -1); + console.log('Removing the slash at the end of GRAFANA_URL'); + } + let finalUrl = `${urlObj.protocol}//${urlObj.hostname}`; + if(urlObj.port !== '') { + finalUrl = finalUrl + ':' + urlObj.port; + } + if(urlObj.pathname !== '') { + finalUrl = finalUrl + urlObj.pathname; + } + return finalUrl; +} diff --git a/tests/utils.jest.ts b/tests/utils.jest.ts new file mode 100644 index 0000000..5ad7711 --- /dev/null +++ b/tests/utils.jest.ts @@ -0,0 +1,26 @@ +import { normalizeUrl } from '../src/utlis'; + +describe('Normalize URL', function() { + const cases = [ + { value: '127.0.0.1:8000', expected: 'http://127.0.0.1:8000' }, + { value: '127.0.0.1:8000/', expected: 'http://127.0.0.1:8000' }, + { value: 'localhost:8000', expected: 'http://localhost:8000' }, + { value: 'localhost:8000/', expected: 'http://localhost:8000' }, + { value: 'http://localhost:3000', expected: 'http://localhost:3000' }, + { value: 'http://localhost:3000/', expected: 'http://localhost:3000' }, + { value: 'https://localhost:8000', expected: 'https://localhost:8000' }, + { value: 'https://localhost:8000/', expected: 'https://localhost:8000' }, + { value: 'http://example.com', expected: 'http://example.com' }, + { value: 'http://example.com/', expected: 'http://example.com' }, + { value: 'https://example.com', expected: 'https://example.com' }, + { value: 'https://example.com/', expected: 'https://example.com' }, + { value: 'https://example.com/grafana', expected: 'https://example.com/grafana' }, + { value: 'https://example.com/grafana/', expected: 'https://example.com/grafana' }, + ]; + + it('should normalize URLs correctly', function() { + cases.forEach(testCase => { + expect(normalizeUrl(testCase.value)).toBe(testCase.expected); + }); + }); +}); From f00f7625be85c8f6458df9341d3aed3156cbdfaa Mon Sep 17 00:00:00 2001 From: sanke1 <22073083+sankerust@users.noreply.github.com> Date: Mon, 25 Feb 2019 15:50:38 +0300 Subject: [PATCH 14/25] Update help section in Analytics tab (#190) --- .../graph_panel/partials/tab_analytics.html | 25 ++++--------------- 1 file changed, 5 insertions(+), 20 deletions(-) diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index dc8a519..9ad1396 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -199,28 +199,13 @@ 
-    Adding Analytic Units:
-        1) Click on 'Add Analytic Unit' button to add an analytic unit.
-        2) Type in desired analytic unit name into provided 'Name' field.
-        3) Choose pattern type from the 'Type' dropdown menu. Pattern types explained below.
-        4) Click 'create' button.
+    For usage instructions:
+        Visit our Wiki page.
 
-    Labeling segments:
-        1) Click on the chart symbol  to enter labeling mode.
-        2) Hold down 'Ctrl' button on your keyboard and hold down left mouse button while dragging to label segments manually. Release LMB to finish labeling the segment.
-        3) After all of the needed segments are labeled click on the chart symbol again to exit labeling mode.
+    If you encounter any problems:
+        Look for solution or create a new Issue here.
 
-        Hastic will now start learning, and after a short while you will see the results on your graph.
-
-    Deleting segments:
-        1) Click on the chart symbol to enter labeling mode. (skip this step if you are already in labeling mode)
-        2) Press 'D' key twice to switch from  to .
-        3) Hold down 'Ctrl' button on your keyboard and hold down left mouse button while dragging to mark segments for deletion.
-        4) After all of the needed segments are deleted click on the chart symbol again to exit labeling mode.
-
-        Hastic will now start learning again, based on updated segments list.
-
-    Available labeling patterns:
+    Available labeling patterns examples:
       1) General: patterns in your data that don't fall under any of provided built-in patterns.
 
       2) Peaks: a sharp increase to a certain single value, followed by a return to the original value.

From 9f923eb15051afe171889773eb209df03a6046e7 Mon Sep 17 00:00:00 2001
From: rozetko 
Date: Mon, 25 Feb 2019 18:02:03 +0300
Subject: [PATCH 15/25] Threshold detection runs on creation #177

---
 src/panel/graph_panel/controllers/analytic_controller.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index f5c878b..efe927c 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -77,6 +77,7 @@ export class AnalyticController {
 
   async sendThresholdParamsToServer(id: AnalyticUnitId) {
     await this.saveThreshold(id);
+    await this._analyticService.runDetect(id);
     await this._runStatusWaiter(this._analyticUnitsSet.byId(id));
   }
 

From 4527d7f05350b3e6aa41d6c0da0ef49c517b9a40 Mon Sep 17 00:00:00 2001
From: rozetko 
Date: Mon, 25 Feb 2019 20:06:50 +0300
Subject: [PATCH 16/25] Hotfix for #177 - don't run status waiter on create if
 it is threshold

---
 src/panel/graph_panel/controllers/analytic_controller.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index efe927c..21c5595 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -105,8 +105,9 @@ export class AnalyticController {
     this._analyticUnitsSet.addItem(this._newAnalyticUnit);
     this._creatingNewAnalyticType = false;
     this._savingNewAnalyticUnit = false;
-    // this.runEnabledWaiter(this._newAnalyticUnit);
-    this._runStatusWaiter(this._newAnalyticUnit);
+    if(this._newAnalyticUnit.detectorType !== 'threshold') {
+      this._runStatusWaiter(this._newAnalyticUnit);
+    }
   }
 
   get creatingNew() { return this._creatingNewAnalyticType; }

From 79fd7c4f6900e17de7cdf6649d0a72c9b3e22048 Mon Sep 17 00:00:00 2001
From: rozetko 
Date: Mon, 25 Feb 2019 20:34:44 +0300
Subject: [PATCH 17/25] this.range is undefined #191

---
 src/panel/graph_panel/graph_ctrl.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts
index 0329e15..6ad9072 100644
--- a/src/panel/graph_panel/graph_ctrl.ts
+++ b/src/panel/graph_panel/graph_ctrl.ts
@@ -272,6 +272,9 @@ class GraphCtrl extends MetricsPanelCtrl {
         await this.analyticsController.removeAnalyticUnit(analyticUnit.id, true);
       }
       if(analyticUnit.status === 'READY') {
+        if(this.range === undefined) {
+          this.updateTimeRange();
+        }
         await this.analyticsController.fetchSegments(analyticUnit, +this.range.from, +this.range.to);
       }
       this.render(this.seriesList);

From 25cca8586372609a0390f3f404d55ba66015068f Mon Sep 17 00:00:00 2001
From: sankerust 
Date: Tue, 26 Feb 2019 12:53:27 +0300
Subject: [PATCH 18/25] fix icon path

---
 src/panel/graph_panel/plugin.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panel/graph_panel/plugin.json b/src/panel/graph_panel/plugin.json
index a93b7f6..8dc7ca0 100644
--- a/src/panel/graph_panel/plugin.json
+++ b/src/panel/graph_panel/plugin.json
@@ -4,8 +4,8 @@
   "id": "corpglory-hastic-graph-panel",
   "info": {
     "logos": {
-      "small": "corpglory-hastic-app/img/icn-graph-panel.png",
-      "large": "corpglory-hastic-app/img/icn-graph-panel.png"
+      "small": "../corpglory-hastic-app/img/icn-graph-panel.png",
+      "large": "../corpglory-hastic-app/img/icn-graph-panel.png"
     }
   }
 }

From 42019323bd98a49f9a8acd896a8be67cf3ce122e Mon Sep 17 00:00:00 2001
From: sanke1 <22073083+sankerust@users.noreply.github.com>
Date: Tue, 26 Feb 2019 13:13:32 +0300
Subject: [PATCH 19/25] Deleted color css #192 (#193)

---
 src/panel/graph_panel/partials/tab_analytics.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 9ad1396..ef57a28 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -47,6 +47,9 @@
         />
       
 
+      
+      

+
       
       
         
Date: Tue, 26 Feb 2019 16:23:11 +0300
Subject: [PATCH 20/25] Fix axes_editor path

---
 src/panel/graph_panel/axes_editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel/graph_panel/axes_editor.ts b/src/panel/graph_panel/axes_editor.ts
index 80677e0..c252d9c 100644
--- a/src/panel/graph_panel/axes_editor.ts
+++ b/src/panel/graph_panel/axes_editor.ts
@@ -82,7 +82,7 @@ export function axesEditorComponent() {
   return {
     restrict: 'E',
     scope: true,
-    templateUrl: 'public/plugins/hastic-graph-panel/partials/axes_editor.html',
+    templateUrl: 'public/plugins/corpglory-hastic-app/panel/graph_panel/partials/axes_editor.html',
     controller: AxesEditorCtrl,
   };
 }

From 3b2daf1bc836e2fc8eff5c0a8af094da54757226 Mon Sep 17 00:00:00 2001
From: sanke1 <22073083+sankerust@users.noreply.github.com>
Date: Tue, 26 Feb 2019 18:14:13 +0300
Subject: [PATCH 21/25] Change help section in analytics tab (#194)

---
 .../controllers/analytic_controller.ts        |  3 +++
 .../graph_panel/partials/help_section.html    | 25 +++++++++++++++++
 .../graph_panel/partials/tab_analytics.html   | 27 +------------------
 tests/setup_tests.ts                          |  2 ++
 4 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 src/panel/graph_panel/partials/help_section.html

diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts
index 21c5595..3f60b65 100644
--- a/src/panel/graph_panel/controllers/analytic_controller.ts
+++ b/src/panel/graph_panel/controllers/analytic_controller.ts
@@ -14,6 +14,7 @@ import { SegmentsSet } from '../models/segment_set';
 import { SegmentArray } from '../models/segment_array';
 import { ServerInfo } from '../models/info';
 import { Threshold, Condition } from '../models/threshold';
+import text from '../partials/help_section.html';
 
 import {
   ANALYTIC_UNIT_COLORS,
@@ -60,6 +61,8 @@ export class AnalyticController {
     // this.analyticUnits.forEach(a => this.runEnabledWaiter(a));
   }
 
+  get helpSectionText() { return text; }
+
   getSegmentsSearcher(): AnalyticSegmentsSearcher {
     return this._segmentsSearcher.bind(this);
   }
diff --git a/src/panel/graph_panel/partials/help_section.html b/src/panel/graph_panel/partials/help_section.html
new file mode 100644
index 0000000..4b1dd26
--- /dev/null
+++ b/src/panel/graph_panel/partials/help_section.html
@@ -0,0 +1,25 @@
+
+  For usage instructions:
+  Visit our Wiki page.
+  
+  If you encounter any problems:
+  Look for solution or create a new Issue here.
+  
+  Available labeling patterns examples:
+  1) General: patterns in your data that don't fall under any of provided built-in patterns.
+  
+  2) Peaks: a sharp increase to a certain single value, followed by a return to the original value.
+  
+  
+  
+  3) Troughs: a sharp decrease to a certain single value, followed by a return to the original value.
+  
+  
+  4) Jumps: increase to a certain value without returning to the original state.
+  
+  
+  5) Drops: decrease to a certain value without returning to the original state.
+  
+  
+  6) Custom: any custom model created and imported by you.
+

diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index ef57a28..5846c38 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -200,30 +200,5 @@
-
- 
-    For usage instructions:
-        Visit our Wiki page.
-
-    If you encounter any problems:
-        Look for solution or create a new Issue here.
-
-    Available labeling patterns examples:
-      1) General: patterns in your data that don't fall under any of provided built-in patterns.
-
-      2) Peaks: a sharp increase to a certain single value, followed by a return to the original value.
-      
-
-      3) Troughs: a sharp decrease to a certain single value, followed by a return to the original value.
-      
-
-      4) Jumps: increase to a certain value without returning to the original state.
-      
-
-      5) Drops: decrease to a certain value without returning to the original state.
-      
-
-      6) Custom: any custom model created and imported by you.
-
-
+
diff --git a/tests/setup_tests.ts b/tests/setup_tests.ts index 0d55b96..46dfac2 100644 --- a/tests/setup_tests.ts +++ b/tests/setup_tests.ts @@ -25,5 +25,7 @@ analyticService.postNewItem = async function (newItem: AnalyticUnit, metric: Met export const analyticController = new AnalyticController({}, analyticService, new Emitter()); +jest.mock('../src/panel/graph_panel/partials/help_section.html', () => ''); + console.log = jest.fn(); console.error = jest.fn(); From 655bfeed443afe82318267fe880256cfdb8fbb2e Mon Sep 17 00:00:00 2001 From: rozetko Date: Tue, 26 Feb 2019 21:14:41 +0300 Subject: [PATCH 22/25] labeled / deleted segments -> positive / negative #196 (#197) - rename labeled / deleted segments to positive / negative - fix to show Grafana version in Hastic Info tab - minor UI fixes --- .../controllers/analytic_controller.ts | 13 ++++++--- src/panel/graph_panel/graph_ctrl.ts | 6 +++- .../graph_panel/partials/help_section.html | 3 +- .../graph_panel/partials/tab_analytics.html | 28 +++++++++++-------- 4 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 3f60b65..285f1f8 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -140,6 +140,7 @@ export class AnalyticController { await this.disableLabeling(); this._selectedAnalyticUnitId = id; this.labelingUnit.selected = true; + this.toggleLabelingMode(LabelingMode.LABELING); this.toggleVisibility(id, true); } @@ -189,6 +190,10 @@ export class AnalyticController { return this.labelingUnit.labelingMode; } + set labelingMode(labelingMode: LabelingMode) { + this.labelingUnit.labelingMode = labelingMode; + } + addLabelSegment(segment: Segment, deleted = false) { const asegment = this.labelingUnit.addLabeledSegment(segment, deleted); this._labelingDataAddedSegments.addSegment(asegment); @@ -337,14 +342,14 @@ export class AnalyticController { this._labelingDataAddedSegments.removeInRange(from, to); } - toggleLabelingMode(mode: LabelingMode) { + toggleLabelingMode(labelingMode: LabelingMode) { if(!this.inLabelingMode) { - throw new Error(`Can't enter ${mode} mode when labeling mode is disabled`); + throw new Error(`Can't enter ${labelingMode} mode when labeling mode is disabled`); } - if(this.labelingUnit.labelingMode === mode) { + if(this.labelingUnit.labelingMode === labelingMode) { this.labelingUnit.labelingMode = LabelingMode.LABELING; } else { - this.labelingUnit.labelingMode = mode; + this.labelingUnit.labelingMode = labelingMode; } } diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index 6ad9072..719487f 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -659,8 +659,12 @@ class GraphCtrl extends MetricsPanelCtrl { const datasource = await this._getDatasourceByName(this.panel.datasource); const backendUrl = await this.getBackendURL(); + let grafanaVersion = 'unknown'; + if(_.has(window, 'grafanaBootData.settings.buildInfo.version')) { + grafanaVersion = window.grafanaBootData.settings.buildInfo.version; + } this._panelInfo = { - grafanaVersion: this.contextSrv.version, + grafanaVersion, grafanaUrl: window.location.host, datasourceType: datasource.type, hasticServerUrl: backendUrl diff --git a/src/panel/graph_panel/partials/help_section.html b/src/panel/graph_panel/partials/help_section.html index 4b1dd26..64dc52e 100644 --- a/src/panel/graph_panel/partials/help_section.html +++ b/src/panel/graph_panel/partials/help_section.html @@ -1,6 +1,5 @@ 
-  For usage instructions:
-  Visit our Wiki page.
+  For usage instructions: Visit our Wiki page.
   
   If you encounter any problems:
   Look for solution or create a new Issue here.
diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html
index 5846c38..b52dbd2 100644
--- a/src/panel/graph_panel/partials/tab_analytics.html
+++ b/src/panel/graph_panel/partials/tab_analytics.html
@@ -23,7 +23,7 @@
 
       
       

-        
+
        Type 
       

-