Change help section in analytics tab (#194)

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);
   }

src/panel/graph_panel/partials/help_section.html

@@ -0,0 +1,25 @@
+<pre>
+  <b>For usage instructions:</b>
+  Visit our <a href="https://github.com/hastic/hastic-grafana-app/wiki/Analytic-units"><b>Wiki</b></a> page.
+  
+  <b>If you encounter any problems:</b>
+  Look for solution or create a new Issue <a href="https://github.com/hastic/hastic-grafana-app/issues"><b>here</b></a>.
+  
+  <b>Available labeling patterns examples:</b>
+  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.
+  <!-- TODO use ng-src="ctrl.pluginPath/..." instead -->
+  <img src="public/plugins/corpglory-hastic-app/img/peaks.jpg">
+  
+  3) Troughs: a sharp decrease to a certain single value, followed by a return to the original value.
+  <img src="public/plugins/corpglory-hastic-app/img/troughs.jpg">
+  
+  4) Jumps: increase to a certain value without returning to the original state.
+  <img src="public/plugins/corpglory-hastic-app/img/jumps.jpg">
+  
+  5) Drops: decrease to a certain value without returning to the original state.
+  <img src="public/plugins/corpglory-hastic-app/img/drops.jpg">
+  
+  6) Custom: any custom model created and imported by you.
+</pre>

src/panel/graph_panel/partials/tab_analytics.html

@@ -200,30 +200,5 @@
     </button>
   </div>
 
-<div class="gf-form" ng-show="ctrl.showHelp" >
+<div class="gf-form" ng-show="ctrl.showHelp" ng-bind-html="ctrl.analyticsController.helpSectionText"></div>
-  <pre class="gf-form-pre alert alert-info">
-    <b>For usage instructions:</b>
-        Visit our <a href="https://github.com/hastic/hastic-grafana-app/wiki/Analytic-units"><b>Wiki</b></a> page.
-
-    <b>If you encounter any problems:</b>
-        Look for solution or create a new Issue <a href="https://github.com/hastic/hastic-grafana-app/issues"><b>here</b></a>.
-
-    <b>Available labeling patterns examples:</b>
-      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.
-      <img ng-src="{{ctrl.pluginPath}}/img/peaks.jpg">
-
-      3) Troughs: a sharp decrease to a certain single value, followed by a return to the original value.
-      <img ng-src="{{ctrl.pluginPath}}/img/troughs.jpg">
-
-      4) Jumps: increase to a certain value without returning to the original state.
-      <img ng-src="{{ctrl.pluginPath}}/img/jumps.jpg">
-
-      5) Drops: decrease to a certain value without returning to the original state.
-      <img ng-src="{{ctrl.pluginPath}}/img/drops.jpg">
-
-      6) Custom: any custom model created and imported by you.
-      </pre>
-</div>
 

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();