Filters and "time based thresholds" tab merge

dist/partials/thresholds.html → dist/partials/patterns-advanced-options.html

@@ -12,14 +12,31 @@ <h5 class="text-warning">Patterns</h5>
             <li ng-class="{active: ctrl.panel.activePatternIndex === -1}">
                 <a ng-click="ctrl.panel.activePatternIndex = -1">Default</a>
             </li>
-            <li>
-                <a class="pointer" ng-click="ctrl.addPattern()">
-                    <i class="fa fa-plus"></i>&nbsp;Add
-                </a>
-            </li>
         </ul>
     </aside>
     <div class="edit-tab-content" ng-repeat="pattern in ctrl.panel.patterns track by $index" ng-if="ctrl.panel.activePatternIndex === $index">
+            <div class="editor-row">
+                    <div class="section gf-form-group">
+                        <div class="gr-form-inline">
+                            <div class="gf-form">
+                                <label class="gf-form-label width-13">Hide if value is below</label>
+                                <input type="text" placeholder="Number" class="gf-form-input width-18" ng-model="pattern.filter.value_below" bs-tooltip="'Hide values from display if below this value. Default is empty'"  ng-blur="ctrl.render()">
+                            </div>
+                        </div>
+                        <div class="gr-form-inline">
+                            <div class="gf-form">
+                                <label class="gf-form-label width-13">Hide if value is above</label>
+                                <input type="text" placeholder="Number" class="gf-form-input width-18" ng-model="pattern.filter.value_above" bs-tooltip="'Hide values from display if above this value. Default is empty'"  ng-blur="ctrl.render()">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="section">
+                        <h5 class="section-heading text-warning">WARNING: "Value Filters" is for advance usage. This may hide part of the data based on the input. You
+                            can safely ignore this section if you don't know the behaviour.</h5>
+                    </div>
+                </div>
         <div class="editor-row">
             <div class="section gf-form-group">
                 <div class="gr-form-inline">
@@ -64,11 +81,33 @@ <h5 class="section-heading text-warning">Note: If multiple matches found last wi
         </div>
     </div>
     <div class="edit-tab-content" ng-if="ctrl.panel.activePatternIndex === -1">
+            <div class="editor-row">
+                    <div class="section gf-form-group">
+                            <div class="gr-form-inline">
+                                    <div class="gf-form">
+                                        <label class="gf-form-label width-13">Hide if value is below</label>
+                                        <input type="text" placeholder="Number" class="gf-form-input width-18" ng-model="ctrl.panel.defaultPattern.filter.value_below" bs-tooltip="'Hide values from display if below this value. Default is empty'"  ng-blur="ctrl.render()">
+                                    </div>
+                                </div>
+                                <div class="gr-form-inline">
+                                    <div class="gf-form">
+                                        <label class="gf-form-label width-13">Hide if value is above</label>
+                                        <input type="text" placeholder="Number" class="gf-form-input width-18" ng-model="ctrl.panel.defaultPattern.filter.value_above" bs-tooltip="'Hide values from display if above this value. Default is empty'"  ng-blur="ctrl.render()">
+                                    </div>
+                                </div>
+                    </div>
+                </div>
+                <div class="editor-row">
+                    <div class="section">
+                        <h5 class="section-heading text-warning">WARNING: "Value Filters" is for advance usage. This may hide part of the data based on the input. You
+                            can safely ignore this section if you don't know the behaviour.</h5>
+                    </div>
+                </div>
         <div class="editor-row">
             <div class="section gf-form-group">
                 <div class="gr-form-inline">
                     <div class="gf-form">
-                        <label class="gf-form-label width-15">Enable Time based thresholds?</label>
+                        <label class="gf-form-label width-30">Enable Time based thresholds for default pattern?</label>
                         <input type="checkbox" class="gf-form-input width-4" ng-model="ctrl.panel.defaultPattern.enable_time_based_thresholds" ng-blur="ctrl.render()"
                             ng-change="ctrl.render()">
                     </div>

src/app/app.ts

@@ -55,18 +55,15 @@ const config: any = {
         name: "Patterns",
         template: "/partials/patterns.html",
         position: 2
+    },
+    {
+        name: "Time based thresholds & Filters",
+        template: "/partials/patterns-advanced-options.html",
+        position: 3
     }, {
         name: "Options",
         template: "/partials/options.html",
-        position: 5
-    }, {
-        name: "Filters",
-        template: "/partials/filters.html",
         position: 4
-    }, {
-        name: "Time based thresholds",
-        template: "/partials/thresholds.html",
-        position: 3
     }],
     valueNameOptions: [{
         value: "min",