Update configuration UI in Grafana 7.x (#464)

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

@@ -1,18 +1,18 @@
 <div class="section gf-form-group">
   <div class="gf-form">
-    <label class="gf-form-label query-keyword">
+    <label class="gf-form-label query-keyword width-6">
       Name
     </label>
     <input
-      type="text" class="gf-form-input"
+      type="text" class="gf-form-input width-12"
       ng-model="analyticUnit.name"
       ng-blur="ctrl.onAnalyticUnitChange(analyticUnit)"
     >
   </div>
   <div class="gf-form">
-    <label class="gf-form-label query-keyword"> Type </label>
+    <label class="gf-form-label query-keyword width-6"> Type </label>
     <div class="gf-form-select-wrapper">
-      <select class="gf-form-input"
+      <select class="gf-form-input width-12"
         ng-model="analyticUnit.type"
         ng-options="type.value as type.name for type in ctrl.analyticUnitTypes[analyticUnit.detectorType]"
         ng-disabled="true"
@@ -23,7 +23,7 @@
 
 <div class="section gf-form-group">
   <div class="gf-form">
-    <label class="gf-form-label query-keyword"> Positive Color </label>
+    <label class="gf-form-label query-keyword width-6"> Positive Color </label>
     <label class="gf-form-label">
       <color-picker
         color="analyticUnit.labeledColor"
@@ -35,7 +35,7 @@
   <div class="gf-form"
     ng-if="analyticUnit.detectorType === 'pattern' || analyticUnit.detectorType === 'anomaly'"
   >
-    <label class="gf-form-label query-keyword"> Negative Color </label>
+    <label class="gf-form-label query-keyword width-6"> Negative Color </label>
     <label class="gf-form-label">
       <color-picker
         color="analyticUnit.deletedColor"
@@ -48,7 +48,7 @@
 <div class="section gf-form-group" ng-if="analyticUnit.detectorType === 'threshold'">
   <!-- TODO: move analytic-unit-specific fields rendering to class -->
   <div class="gf-form">
-    <label class="gf-form-label query-keyword"> Condition </label>
+    <label class="gf-form-label query-keyword width-6"> Condition </label>
     <select class="gf-form-input"
       ng-class="{
         'width-5': analyticUnit.condition !== 'NO_DATA',
@@ -69,12 +69,12 @@
 
 <div class="section gf-form-group" ng-if="analyticUnit.detectorType === 'anomaly'">
   <div class="gf-form">
-    <label class="gf-form-label query-keyword">
+    <label class="gf-form-label query-keyword width-6">
       Alpha
       &nbsp;
       <i class="fa fa-info" bs-tooltip="'Takes value from 0 to 1. Less Alpha means smoother bounds'"></i>
     </label>
-    <input class="gf-form-input"
+    <input class="gf-form-input width-12"
       min="0"
       max="1"
       type="number"
@@ -84,12 +84,12 @@
   </div>
 
   <div class="gf-form">
-    <label class="gf-form-label query-keyword">
+    <label class="gf-form-label query-keyword width-6">
       Сonfidence
       &nbsp;
       <i class="fa fa-info" bs-tooltip="'Bounds for the metric'"></i>
     </label>
-    <input class="gf-form-input"
+    <input class="gf-form-input width-12"
       min="0"
       type="number"
       ng-model="analyticUnit.confidence"

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

@@ -100,7 +100,7 @@
         </a>
       </button>
     </div>
-    <div class="query-editor-row__body">
+    <div>
       <ng-include src="ctrl.partialsPath + '/analytic_unit_7.x.html'"></ng-include>
     </div>
   </div>

src/panel/graph_panel/partials/new_analytic_unit.html

@@ -2,7 +2,7 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-8"> Name </label>
     <input
-      type="text" class="gf-form-input width-15"
+      type="text" class="gf-form-input width-12"
       ng-model="ctrl.analyticsController.newAnalyticUnit.name"
     >
   </div>
@@ -16,7 +16,7 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-8"> Detector Type </label>
     <div class="gf-form-select-wrapper">
-      <select class="gf-form-input width-10"
+      <select class="gf-form-input width-12"
         ng-model="ctrl.analyticsController.newAnalyticUnit.detectorType"
         ng-options="analyticUnitDetectorType for analyticUnitDetectorType in ctrl.analyticUnitDetectorTypes"
         ng-change="ctrl.analyticsController.onAnalyticUnitDetectorChange(ctrl.analyticUnitTypes);"
@@ -24,6 +24,12 @@
     </div>
   </div>
 
+  <div class="gf-form gf-form--grow">
+    <div class="gf-form-label gf-form-label--grow"></div>
+  </div>
+</div>
+
+<div class="gf-form-inline">
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-8"> Type </label>
     <div class="gf-form-select-wrapper">

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

@@ -8,7 +8,7 @@
     </div>
   </div>
 
-  <div class="query-editor-row__body gf-form-query">
+  <div class="gf-form-query">
     <ng-include src="ctrl.partialsPath + '/new_analytic_unit.html'"></ng-include>
   </div>
 </div>

src/panel/graph_panel/partials/tab_analytics.html

@@ -80,6 +80,7 @@
   </div>
 
   <div ng-if="ctrl.analyticsController.serverStatus === true && ctrl.analyticsController.loading">
-    <i class="fa fa-spinner fa-spin" > Fetching analytic units... </i>
+    <i class="fa fa-spinner fa-spin" ></i>
+    <span>Fetching analytic units...</span> 
   </div>
 </div>