Console: URL Alert setup redo to match current design

console/src/main/scripts/plugins/directives/alert/html/fieldset-dampening.html

@@ -1,30 +1,29 @@
 <fieldset>
-  <legend>Alert</legend>
+  <hk-switch ng-show="hkSwitchEnabled"
+             hk-model="hkSwitch"
+             id="usage-less-switch" class="pull-right-switch"></hk-switch>
+  <legend>{{hkTitle || 'Alert'}}</legend>
   <div class="form-group">
     <label class="col-sm-3 control-label">Create Alert</label>
     <div class="col-sm-9">
       <div class="radio">
         <label for="every-time-heap">
           <input type="radio" name="alert-heap" id="every-time-heap" ng-value="false" ng-model="durationEnabled"
-                 ng-click="durationToggle()" checked="">
-          Every time conditions are met.
+                 ng-click="durationToggle()" checked="" ng-disabled="!hkSwitch">
+          {{hkTitleMet || 'Every time conditions are met.'}}
         </label>
       </div>
       <div class="radio">
         <label for="greater-time-heap">
           <input type="radio" name="alert-heap" id="greater-time-heap" ng-value="true" ng-model="durationEnabled"
-                 ng-click="durationToggle()">
-          Only when conditions are met for greater than:
+                 ng-click="durationToggle()" ng-disabled="!hkSwitch">
+          {{hkTitleUnmet || 'Only when conditions are met for greater than:'}}
         </label>
       </div>
-      <div class="input-group input-select indented">
-        <input type="number" class="form-control" placeholder="Duration" ng-model="hkConvertedDuration"
-               ng-disabled="!durationEnabled" ng-change="durationChange()">
-        <select pf-select ng-model="responseUnit" id="responseUnit"
-                ng-disabled="!durationEnabled"
-                ng-options="item.value as item.label for item in timeUnits"
-                ng-change="computeTimeInUnits()"></select>
-      </div>
+      <hk-time-input hk-duration="hkDuration"
+                     hk-disabled="!durationEnabled || !hkSwitch"
+                     hk-change="durationChange()"
+                     id="dw-duration"></hk-time-input>
     </div>
   </div>
 </fieldset>

console/src/main/scripts/plugins/directives/alert/ts/alertDirective.ts

@@ -223,23 +223,19 @@ module Alert {
     public link: (scope: any) => void;
     public replace = 'true';
     public scope = {
-      hkDuration: '='
+      hkDuration: '=',
+      hkSwitch: '=',
+      hkTitle: '@'
     };
     public templateUrl = 'plugins/directives/alert/html/fieldset-dampening.html';
 
     constructor(private hkTimeUnit: any) {
       this.link = (scope: any) => {
+        var localChange = false;
         var durationBackup = scope.hkDuration || 0;
 
-        scope.timeUnits = hkTimeUnit.timeUnits;
-        scope.timeUnitsDict = hkTimeUnit.timeUnitDictionary;
-
-        scope.durationChange = (): void => {
-          scope.hkDuration = scope.hkConvertedDuration * scope.responseUnit;
-        };
-
-        scope.computeTimeInUnits = ():void => {
-          scope.hkConvertedDuration = scope.hkDuration / scope.responseUnit;
+        scope.durationChange = ():void => {
+          localChange = true;
         };
 
         scope.durationToggle = ():void => {
@@ -254,10 +250,15 @@ module Alert {
           }
         };
 
-        scope.$watch('hkDuration', (newDuration, oldDuration) => {
-          scope.durationEnabled = scope.hkDuration !== 0;
-          scope.responseUnit = hkTimeUnit.getFittestTimeUnit(scope.hkDuration);
-          scope.computeTimeInUnits();
+        scope.$watch('hkDuration', () => {
+          if (!localChange) {
+            scope.durationEnabled = scope.hkDuration !== 0;
+          }
+          localChange = false;
+        });
+
+        scope.$watch('hkSwitch', () => {
+            scope.hkSwitchEnabled = (scope.hkSwitch !== undefined);
         });
       };
     }

console/src/main/scripts/plugins/directives/components/html/hk-switch.html

@@ -1,15 +1,15 @@
 <div class="onoffswitch" tabindex='0'>
   <input type="checkbox"
          class="onoffswitch-checkbox"
-         ng-model="ngModel"
-         ng-disabled="ngDisabled"
+         ng-model="hkModel"
+         ng-disabled="hkDisabled"
          ng-click="hkClick()"
          ng-change="hkChange()"
          id="{{id}}">
   <label class="onoffswitch-label" for="{{id}}">
     <span class="onoffswitch-inner">
       <span class="onoffswitch-active ng-binding">{{hkOnText}}</span>
-      <span class="onoffswitch-inactive ng-binding">{{hkOnText}}</span>
+      <span class="onoffswitch-inactive ng-binding">{{hkOffText}}</span>
     </span>
     <span class="onoffswitch-switch"></span>
   </label>

console/src/main/scripts/plugins/directives/components/html/time-input.html

@@ -0,0 +1,8 @@
+<div class="input-group input-select indented">
+  <input type="number" class="form-control" placeholder="Duration" ng-model="hkConvertedDuration"
+         ng-disabled="hkDisabled" ng-change="durationChange()" id="{{id}}">
+  <select pf-select ng-model="responseUnit" id="responseUnit"
+          ng-disabled="hkDisabled"
+          ng-options="item.value as item.label for item in timeUnits"
+          ng-change="computeTimeInUnits()"></select>
+</div>

console/src/main/scripts/plugins/directives/components/ts/alertDirective.ts → console/src/main/scripts/plugins/directives/components/ts/hkComponents.ts

@@ -18,17 +18,18 @@
 /// <reference path="../../includes.ts"/>
 module HawkularComponents {
 
-  export var _module = angular.module('hawkular.components', []);
+  export var _module = angular.module('hawkular-components', []);
 
   export class HkSwitch {
 
-    public link:(scope:any, attrs:any, element:any) => void;
+    public link:(scope:any, element:any, attrs:any) => void;
+    public restrict = 'E';
     public replace = 'true';
     public scope = {
       name: '@',
       id: '@',
-      ngModel: '=',
-      ngDisabled: '=',
+      hkModel: '=',
+      hkDisabled: '=',
       hkChange: '&',
       hkClick: '&'
     };
@@ -65,4 +66,61 @@ module HawkularComponents {
   }
 
   _module.directive('hkSwitch', HawkularComponents.HkSwitch.Factory());
+
+  export class HkTimeInput {
+
+    public link:(scope:any, attrs:any, element:any) => void;
+    public replace = 'true';
+    public restrict = 'E';
+    public scope = {
+      id: '@',
+      hkDuration: '=',
+      hkDisabled: '=',
+      hkAutoConvert: '=',
+      hkChange: '&'
+    };
+    public templateUrl = 'plugins/directives/components/html/time-input.html';
+
+    constructor(private hkTimeUnit:any) {
+      this.link = (scope:any, element:any, attrs:any) => {
+        element.removeAttr('id');
+
+        var localChange = false;
+
+        scope.timeUnits = hkTimeUnit.timeUnits;
+        scope.timeUnitsDict = hkTimeUnit.timeUnitDictionary;
+
+        scope.durationChange = ():void => {
+          localChange = true;
+          scope.hkDuration = scope.hkConvertedDuration * scope.responseUnit;
+          scope.hkChange();
+        };
+
+        scope.computeTimeInUnits = ():void => {
+          scope.hkConvertedDuration = scope.hkDuration / scope.responseUnit;
+        };
+
+        scope.$watch('hkDuration', (newDuration, oldDuration) => {
+          scope.durationEnabled = scope.hkDuration !== 0;
+          if (!localChange) {
+            scope.responseUnit = hkTimeUnit.getFittestTimeUnit(scope.hkDuration);
+            scope.computeTimeInUnits();
+          }
+          localChange = false;
+        });
+      };
+    }
+
+    public static Factory() {
+      var directive = (hkTimeUnit:any) => {
+        return new HkTimeInput(hkTimeUnit);
+      };
+
+      directive['$inject'] = ['hkTimeUnit'];
+
+      return directive;
+    }
+  }
+
+  _module.directive('hkTimeInput', HawkularComponents.HkTimeInput.Factory());
 }

console/src/main/scripts/plugins/metrics/html/availability.html

@@ -59,9 +59,9 @@ <h3 class="pull-left" data-toggle="tooltip" data-placement="top" title="" data-o
           Availability Alerts <span ng-show="vm.alertList.length > 0">({{showAllAlerts ? vm.alertList.length : MetricsAvailabilityController.min(vm.alertList.length, 3)}} of {{vm.alertList.length}})</span>
         </button>
       </h3>
-      <span class="hk-settings pull-right"><a href="#" ng-controller="MetricsAlertController as mac"
-                                              ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert
-        Settings</a></span>
+      <span class="hk-settings pull-right">
+        <a href="#" ng-click="vm.openAvailabilitySetup()"><i class="fa fa-cog"></i>Availability Alert Settings</a>
+      </span>
     </div>
 
     <div class="clearfix">

console/src/main/scripts/plugins/metrics/html/modals/alerts-url-availability-setup.html

@@ -0,0 +1,31 @@
+<div class="modal-header">
+  <button type="button" class="close" ng-click="mas.cancel()">
+    <span class="pficon pficon-close"></span>
+  </button>
+  <h4 class="modal-title">Availability Alert Settings</h4>
+</div>
+
+<div class="modal-body alert-settings">
+  <div class="hk-tab-content">
+    <p>Configure conditions settings for Availability alerts and notifications.</p>
+
+    <form class="form-horizontal">
+      <hk-fieldset-dampening hk-duration="mas.adm.avail.responseDuration"
+                             hk-title="Downtime"
+                             hk-switch="mas.adm.avail.conditionEnabled"
+                             hk-title-met="Everytime the URL is down."
+                             hk-title-unmet="Only when the URL is down for more than:"></hk-fieldset-dampening>
+
+      <hk-fieldset-notification hk-alert-email="mas.adm.avail.email"></hk-fieldset-notification>
+    </form>
+  </div>
+</div>
+
+<div class="modal-footer alert-settings">
+  <button type="button" class="btn btn-primary" ng-click="mas.save()"
+          ng-disabled="!mas.isSettingChange || mas.saveProgress">
+    <div ng-show="mas.saveProgress" class="spinner spinner-xs hk-modal-spinner"></div>
+    Save
+  </button>
+  <button type="button" class="btn btn-default" ng-click="mas.cancel()">Cancel</button>
+</div>