Confusing Save / Detect buttons #321 (#333)

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -166,9 +166,7 @@ export class AnalyticController {
 
     this.labelingUnit.saving = false;
 
-    let unit = this.labelingUnit;
     this.dropLabeling();
-    this._runStatusWaiter(unit);
   }
 
   undoLabeling() {
@@ -185,6 +183,8 @@ export class AnalyticController {
     this._labelingDataAddedSegments.clear();
     this._labelingDataRemovedSegments.clear();
     this.labelingUnit.selected = false;
+    // TODO: it could be changed before labeling
+    this.labelingUnit.changed = false;
     this._selectedAnalyticUnitId = null;
     this._tempIdCounted = -1;
   }
@@ -206,6 +206,7 @@ export class AnalyticController {
 
   addSegment(segment: Segment, deleted = false) {
     const addedSegment = this.labelingUnit.addSegment(segment, deleted);
+    this.labelingUnit.changed = true;
     this._labelingDataAddedSegments.addSegment(addedSegment);
   }
 
@@ -311,9 +312,6 @@ export class AnalyticController {
     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;
   }
 
@@ -454,7 +452,14 @@ export class AnalyticController {
         this._labelingDataRemovedSegments.addSegment(s);
       }
     });
-    this._labelingDataAddedSegments.removeInRange(from, to);
+    const removed = this._labelingDataAddedSegments.removeInRange(from, to);
+    if(!_.isEmpty(removed)) {
+      this.labelingUnit.changed = true;
+    }
+    if(this._labelingDataAddedSegments.length === 0 &&
+      this._labelingDataRemovedSegments.length === 0) {
+      this.labelingUnit.changed = false;
+    }
   }
 
   toggleLabelingMode(labelingMode: LabelingMode): void {

src/panel/graph_panel/graph_ctrl.ts

@@ -604,11 +604,14 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.analyticsController.redetectAll(from, to);
   }
 
-  async runDetectInCurrentRange(analyticUnitId: AnalyticUnitId) {
+  async runDetectInCurrentRange(analyticUnit: AnalyticUnit) {
     const { from, to } = this.rangeTimestamp;
 
+    if(analyticUnit.changed) {
+      await this.onAnalyticUnitSave(analyticUnit);
+    }
     this.analyticsController.runDetect(
-      analyticUnitId,
+      analyticUnit.id,
       from, to
     );
   }
@@ -642,6 +645,9 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   async onAnalyticUnitSave(analyticUnit: AnalyticUnit) {
+    if(this.analyticsController.labelingUnit.id === analyticUnit.id) {
+      await this.onToggleLabelingMode(analyticUnit.id)
+    }
     await this.analyticsController.saveAnalyticUnit(analyticUnit);
     this.refresh();
   }

src/panel/graph_panel/graph_renderer.ts

@@ -164,6 +164,7 @@ export class GraphRenderer {
         );
       }
 
+      this.scope.$apply();
       this.renderPanel();
       return;
     }

src/panel/graph_panel/partials/analytic_units_5.x.html

@@ -128,27 +128,9 @@
       </a>
     </label>
 
-    <!-- TODO: Leave one Detect button instead of 2 -->
     <label class="gf-form-label"
-      ng-if="
+      ng-click="ctrl.runDetectInCurrentRange(analyticUnit)"
-        analyticUnit.detectorType === 'pattern' ||
+      ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving"
-        (analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality)
-      "
-      ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
-      ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed || !analyticUnit.selected"
-    >
-      <a class="pointer">
-        Detect
-      </a>
-    </label>
-
-    <label class="gf-form-label"
-      ng-if="
-        analyticUnit.detectorType === 'threshold' ||
-        (analyticUnit.detectorType === 'anomaly' && !analyticUnit.hasSeasonality)
-      "
-      ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)"
-      ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed"
     >
       <a class="pointer">
         Detect

src/panel/graph_panel/partials/analytic_units_6.x.html

@@ -117,27 +117,9 @@
         </a>
       </button>
 
-      <!-- TODO: Leave one Detect button instead of 2 -->
       <button class="query-editor-row__action"
-        ng-if="
+        ng-click="ctrl.runDetectInCurrentRange(analyticUnit)"
-          analyticUnit.detectorType === 'pattern' ||
+        ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving"
-          (analyticUnit.detectorType === 'anomaly' && analyticUnit.hasSeasonality)
-        "
-        ng-click="ctrl.onToggleLabelingMode(analyticUnit.id)"
-        ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed || !analyticUnit.selected"
-      >
-        <a class="pointer">
-          Detect
-        </a>
-      </button>
-
-      <button class="query-editor-row__action"
-        ng-if="
-          analyticUnit.detectorType === 'threshold' ||
-          (analyticUnit.detectorType === 'anomaly' && !analyticUnit.hasSeasonality)
-        "
-        ng-click="ctrl.runDetectInCurrentRange(analyticUnit.id)"
-        ng-disabled="analyticUnit.status === 'LEARNING' || analyticUnit.saving || analyticUnit.changed"
       >
         <a class="pointer">
           Detect