diff --git a/monitoring/alarmdefs/forms.py b/monitoring/alarmdefs/forms.py
index 79c30028..3fadb7c3 100644
--- a/monitoring/alarmdefs/forms.py
+++ b/monitoring/alarmdefs/forms.py
@@ -60,7 +60,6 @@ class ExpressionWidget(forms.Widget):
         t = get_template(constants.TEMPLATE_PREFIX + 'expression_field.html')
 
         local_attrs = {
-            'service': '',
             'func': ExpressionWidget.func,
             'comparators': ExpressionWidget.comparators,
             'operators': ExpressionWidget.operators,
diff --git a/monitoring/alarmdefs/tables.py b/monitoring/alarmdefs/tables.py
index 0c3e4b13..27580229 100644
--- a/monitoring/alarmdefs/tables.py
+++ b/monitoring/alarmdefs/tables.py
@@ -17,6 +17,7 @@
 import logging
 
 from django.core import urlresolvers
+from django.http import HttpResponse
 from django.utils.translation import ugettext_lazy as _  # noqa
 
 from horizon import tables
@@ -30,12 +31,11 @@ LOG = logging.getLogger(__name__)
 class CreateAlarm(tables.LinkAction):
     name = "create_alarm"
     verbose_name = _("Create Alarm Definition")
-    classes = ("ajax-modal",)
+    classes = ("ajax-modal", "btn-create")
     icon = "plus"
     policy_rules = (("alarm", "alarm:create"),)
     ajax = True
 
-
     def get_link_url(self):
         return urlresolvers.reverse(constants.URL_PREFIX + 'alarm_create',
                                     args=())
diff --git a/monitoring/alarmdefs/templates/alarmdefs/alarm.html b/monitoring/alarmdefs/templates/alarmdefs/alarm.html
index 22af43b3..60533f1e 100644
--- a/monitoring/alarmdefs/templates/alarmdefs/alarm.html
+++ b/monitoring/alarmdefs/templates/alarmdefs/alarm.html
@@ -8,7 +8,6 @@
 {% block css %}
     {% include "_stylesheets.html" %}
     <link href='{{ STATIC_URL }}monitoring/css/ng-tags-input.css' type="text/css" rel="stylesheet"/>
-    <link href='{{ STATIC_URL }}monitoring/css/alarm-create.css' type="text/css" rel="stylesheet"/>
 {% endblock %}
 
 {% block page_header %}
diff --git a/monitoring/alarmdefs/templates/alarmdefs/expression_field.html b/monitoring/alarmdefs/templates/alarmdefs/expression_field.html
index 4edc7fff..9fa6265d 100644
--- a/monitoring/alarmdefs/templates/alarmdefs/expression_field.html
+++ b/monitoring/alarmdefs/templates/alarmdefs/expression_field.html
@@ -1,95 +1,4 @@
-{% load i18n %}
-
-{% block js %}{% spaceless %}
-    <script type="text/javascript">
-        window._alarm_edit_ctrl_metrics = {{ metrics|safe|default:"[]" }}
-    </script>
-{% endspaceless %}{% endblock %}
-
-
-<div class="alarm-expression">
-
-    <input type="hidden" name="{{ name }}" id="expression">
-
-    <div class="row expression-details">
-        <div class="col-md-2">
-            <select id="function"
-                    class="form-control"
-                    aria-label="{% trans 'Function' %}"
-                    title="{% trans 'Function' %}"
-                    ng-model="currentFunction"
-                    ng-options="f[0] as f[1] for f in {{func}}"
-                    ng-change="saveExpression()"></select>
-        </div>
-        <div class="col-md-6">
-            <select id="metric-chooser"
-                    class="form-control"
-                    aria-label="{% trans 'Metric' %}"
-                    title="{% trans 'Metric' %}"
-                    ng-model="currentMetric"
-                    ng-options="metric for metric in metricNames"
-                    ng-change="metricChanged()"></select>
-        </div>
-        <div class="col-md-2">
-            <select class="form-control"
-                    aria-label="{% trans 'Comparator' %}"
-                    title="{% trans 'Comparator' %}"
-                    ng-model="currentComparator"
-                    ng-options="f[0] as f[1] for f in {{comparators}}"
-                    ng-change="saveExpression()"></select>
-        </div>
-        <div class="col-md-2">
-            <input type="number"
-                   step="any"
-                   class="form-control"
-                   aria-label="{% trans 'Threshold' %}"
-                   title="{% trans 'Threshold' %}"
-                   ng-model="currentThreshold"
-                   ng-change="saveExpression()"/>
-        </div>
-    </div>
-
-    <div class="row expression-details">
-        <div class="col-md-10">
-            <tags-input id="dimension-chooser"
-                    ng-model="tags"
-                    placeholder="{% trans 'Add a dimension' %}"
-                    add-from-autocomplete-only="true"
-                    on-tag-added="saveDimension()"
-                    on-tag-removed="saveDimension()">
-                <auto-complete source="possibleDimensions($query)"
-                               max-results-to-show="30"
-                               min-length="1">
-                </auto-complete>
-            </tags-input>
-        </div>
-        <div class="col-md-2">
-            <div class="form-group">
-                <label id="is-deterministic-expression"
-                       class="btn expression-deterministic"
-                       ng-class="{'btn-primary': currentIsDeterministic, 'btn-default': !currentIsDeterministic}"
-                       ng-click="currentIsDeterministic = !currentIsDeterministic;saveExpression()"
-                       ng-model="currentIsDeterministic">{% trans 'Deterministic' %}</label>
-            </div>
-        </div>
-    </div>
-
-    <div class="row expression-details">
-        <div class="topologyBalloon" id="metrics" style="position:static;display: block;">
-            <div class="contentBody">
-                <table class="detailInfoTable">
-                    <caption>Matching Metrics</caption>
-                    <tbody>
-                    <tr>
-                        <th ng-repeat="name in dimnames">{$name$}</th>
-                    </tr>
-                    <tr ng-repeat="metric in matchingMetrics">
-                        <td ng-repeat="dim in dimnames" style="white-space:normal">{$metric[dim] | spacedim $}</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
-</div>
+<mon-alarm-expression metrics="{{ metrics|default:'[]' }}"
+                      functions="{{ func }}"
+                      comparators="{{ comparators }}"
+                      operators="{{ operators }}"></mon-alarm-expression>
diff --git a/monitoring/alarmdefs/templates/alarmdefs/expression_step.html b/monitoring/alarmdefs/templates/alarmdefs/expression_step.html
deleted file mode 100644
index 0ea1ca41..00000000
--- a/monitoring/alarmdefs/templates/alarmdefs/expression_step.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<noscript><h3>{{ step }}</h3></noscript>
-
-<div class="container-fluid">
-    <div class="row">
-        <div class="col-sm-12 col-md-12 col-lg-12">
-            {{ step.get_help_text }}
-        </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-12 col-md-12 col-lg-12"
-           ng-controller="alarmEditController"
-           ng-init="init('{{ service }}')">
-        {% include "horizon/common/_form_fields.html" %}
-      </div>
-    </div>
-</div>
diff --git a/monitoring/alarmdefs/templates/alarmdefs/match_by_field.html b/monitoring/alarmdefs/templates/alarmdefs/match_by_field.html
index f4fbc643..d680c33d 100644
--- a/monitoring/alarmdefs/templates/alarmdefs/match_by_field.html
+++ b/monitoring/alarmdefs/templates/alarmdefs/match_by_field.html
@@ -1,12 +1,15 @@
 {% load i18n %}
-<div>
+<div ng-controller="alarmMatchByController as ctrl">
     <input type="hidden" name="{{ name }}" id="id_{{ name }}"/>
-    <tags-input id="dimkey-chooser" ng-model="matchByTags"
+    <tags-input id="dimkey-chooser"
+                ng-model="ctrl.matchByTags"
                 placeholder="{% trans 'Add a match by' %}"
                 add-from-autocomplete-only="true"
-                on-tag-added="saveDimKey()" on-tag-removed="saveDimKey()">
-        <auto-complete source="possibleDimKeys($query)"
-                       max-results-to-show="30" min-length="1">
+                on-tag-added="ctrl.saveDimKey()"
+                on-tag-removed="ctrl.saveDimKey()">
+        <auto-complete source="ctrl.possibleDimKeys($query)"
+                       max-results-to-show="30"
+                       min-length="1">
         </auto-complete>
     </tags-input>
 </div>
diff --git a/monitoring/alarmdefs/templates/alarmdefs/notification_step.html b/monitoring/alarmdefs/templates/alarmdefs/workflow_step.html
similarity index 54%
rename from monitoring/alarmdefs/templates/alarmdefs/notification_step.html
rename to monitoring/alarmdefs/templates/alarmdefs/workflow_step.html
index 44102b31..60b94f55 100644
--- a/monitoring/alarmdefs/templates/alarmdefs/notification_step.html
+++ b/monitoring/alarmdefs/templates/alarmdefs/workflow_step.html
@@ -2,13 +2,14 @@
 
 <div class="container-fluid">
     <div class="row">
-        <div class="col-sm-12 col-md-12 col-lg-12">
+        <!-- hide if window gets very small to save some space -->
+        <div class="col-sm-12 col-md-12 col-lg-12 hidden-xs">
             {{ step.get_help_text }}
         </div>
     </div>
     <div class="row">
-      <div class="col-sm-12 col-md-12 col-lg-12">
-        {% include "horizon/common/_form_fields.html" %}
-      </div>
+        <div class="col-sm-12 col-md-12 col-lg-12">
+            {% include "horizon/common/_form_fields.html" %}
+        </div>
     </div>
 </div>
diff --git a/monitoring/alarmdefs/tests.py b/monitoring/alarmdefs/tests.py
index 25bf0429..d0cb99a3 100644
--- a/monitoring/alarmdefs/tests.py
+++ b/monitoring/alarmdefs/tests.py
@@ -82,7 +82,7 @@ class AlarmDefinitionsTest(helpers.TestCase):
         self.assertContains(res, '<select class="form-control" '
                                  'id="id_severity"')
 
-        self.assertContains(res, '<input type="hidden" name="expression"')
+        self.assertContains(res, '<mon-alarm-expression')
 
         self.assertContains(res, '<input type="hidden" name="alarm_actions"')
         self.assertContains(res, '<input type="hidden" name="ok_actions"')
diff --git a/monitoring/alarmdefs/workflows.py b/monitoring/alarmdefs/workflows.py
index f9ecade7..fe562533 100644
--- a/monitoring/alarmdefs/workflows.py
+++ b/monitoring/alarmdefs/workflows.py
@@ -156,12 +156,13 @@ class SetAlarmDefinitionExpressionAction(workflows.Action):
 class SetDetailsStep(workflows.Step):
     action_class = SetAlarmDefinitionAction
     contributes = ('name', 'description', 'severity')
+    template_name = 'monitoring/alarmdefs/workflow_step.html'
 
 
 class SetExpressionStep(workflows.Step):
     action_class = SetAlarmDefinitionExpressionAction
     contributes = ('expression', 'match_by')
-    template_name = 'monitoring/alarmdefs/expression_step.html'
+    template_name = 'monitoring/alarmdefs/workflow_step.html'
 
     def contribute(self, data, context):
         context = (super(SetExpressionStep, self)
@@ -181,7 +182,7 @@ class SetExpressionStep(workflows.Step):
 class SetNotificationsStep(workflows.Step):
     action_class = SetAlarmNotificationsAction
     contributes = ('alarm_actions', 'ok_actions', 'undetermined_actions')
-    template_name = 'monitoring/alarmdefs/notification_step.html'
+    template_name = 'monitoring/alarmdefs/workflow_step.html'
 
 
 class AlarmDefinitionWorkflow(workflows.Workflow):
diff --git a/monitoring/enabled/_50_admin_add_monitoring_panel.py b/monitoring/enabled/_50_admin_add_monitoring_panel.py
index 046b3d6f..3825eb23 100644
--- a/monitoring/enabled/_50_admin_add_monitoring_panel.py
+++ b/monitoring/enabled/_50_admin_add_monitoring_panel.py
@@ -8,9 +8,15 @@ ADD_ANGULAR_MODULES = ['monitoringApp']
 
 # A list of javascript files to be included for all pages
 ADD_JS_FILES = ['monitoring/js/app.js',
+                'monitoring/js/filters.js',
                 'monitoring/js/controllers.js',
+                'monitoring/js/directives.js',
+                'monitoring/js/services.js',
                 'monitoring/js/ng-tags-input.js']
 
+ADD_SCSS_FILES = [
+    'monitoring/css/alarm-create.scss']
+
 from monascaclient import exc
 # A dictionary of exception classes to be added to HORIZON['exceptions'].
 ADD_EXCEPTIONS = {
diff --git a/monitoring/static/monitoring/css/alarm-create.css b/monitoring/static/monitoring/css/alarm-create.css
deleted file mode 100644
index 55e3beb8..00000000
--- a/monitoring/static/monitoring/css/alarm-create.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.alarm-expression .row {
-    margin-left: -5px;
-    margin-right: -5px;
-}
-.alarm-expression .expression-details {
-    margin-bottom: 5px;
-}
-.alarm-expression .expression-details > div {
-   padding-left: 2px;
-   padding-right: 2px;
-}
-
diff --git a/monitoring/static/monitoring/css/alarm-create.scss b/monitoring/static/monitoring/css/alarm-create.scss
new file mode 100644
index 00000000..99b48378
--- /dev/null
+++ b/monitoring/static/monitoring/css/alarm-create.scss
@@ -0,0 +1,60 @@
+.alarm-expression {
+
+    .row {
+        margin-left: -5px;
+        margin-right: -5px;
+    }
+
+    pre.expression-preview {
+        white-space: pre-wrap;
+        white-space: -moz-pre-wrap;
+        white-space: -pre-wrap;
+        white-space: -o-pre-wrap;
+    }
+
+    pre.expression-valid {
+        border-color: #00B700;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    }
+
+    pre.expression-invalid {
+        border-color: #A94442;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    }
+
+    .alarm-sub-expression {
+
+        margin-top: 5px;
+        margin-bottom: 5px;
+
+        padding: 10px;
+
+        .sub-expression-preview {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .expression-details {
+            margin-bottom: 5px;
+
+            div {
+               padding-left: 2px;
+               padding-right: 2px;
+            }
+        }
+
+        form {
+
+            .has-error {
+                border-color: #a94442;
+                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            }
+
+        }
+
+    }
+
+}
diff --git a/monitoring/static/monitoring/js/app.js b/monitoring/static/monitoring/js/app.js
index 47ec3712..a37a7ab9 100644
--- a/monitoring/static/monitoring/js/app.js
+++ b/monitoring/static/monitoring/js/app.js
@@ -1,6 +1,19 @@
 'use strict';
 
 // Declare app level module which depends on filters, and services
-angular.module('monitoringApp', [
-  'monitoring.controllers', 'ngTagsInput', 'monitoring.filters'
-]);
+angular
+    .module('monitoringApp', [
+        'monitoring.controllers',
+        'monitoring.directives',
+        'monitoring.filters',
+        'monitoring.services',
+        'ngTagsInput'
+    ])
+    .config(config);
+
+config.$inject = ['$provide', '$windowProvider'];
+
+function config($provide, $windowProvider) {
+    var path = $windowProvider.$get().STATIC_URL + 'monitoring/widgets/';
+    $provide.constant('monitoringApp.staticPath', path);
+}
diff --git a/monitoring/static/monitoring/js/controllers.js b/monitoring/static/monitoring/js/controllers.js
index 6908b2ba..19b52971 100644
--- a/monitoring/static/monitoring/js/controllers.js
+++ b/monitoring/static/monitoring/js/controllers.js
@@ -127,173 +127,63 @@ angular.module('monitoring.controllers', [])
         };
 
     }])
-    .controller('alarmEditController', [
-      "$window", "$scope", "$http", "$timeout", "$q",
-      function ($window, $scope, $http, $timeout, $q) {
+    .controller('alarmNotificationFieldController',
+        ['$rootScope', NotificationField]
+    )
+    .controller('alarmMatchByController',
+        ['$q', '$rootScope', MatchByController]
+    );
 
-        $scope.metrics = [];
-        $scope.metricNames = []
-        $scope.currentMetric = undefined;
+function MatchByController($q, $rootScope) {
+    // model
+    var vm = this;
 
-        $scope.currentFunction = "max";
-        $scope.currentComparator = ">";
-        $scope.currentThreshold = 0;
-        $scope.currentIsDeterministic = false;
-        $scope.matchingMetrics = [];
-        $scope.tags = [];
-        $scope.matchByTags = [];
+    vm.matchBy = [];
+    vm.matchByTags = [];
 
-        $scope.possibleDimensions = function(query) {
-            return $q(function(resolve, reject) {
-                var dim = {}
-                var dimList = []
-                angular.forEach($scope.matchingMetrics, function(value, name) {
-                    for (var key in value.dimensions) {
-                        if (value.dimensions.hasOwnProperty(key)) {
-                            var dimStr = key + "=" + value.dimensions[key]
-                            if (dimStr.indexOf(query) === 0) {
-                                dim[dimStr] = dimStr;
-                            }
-                        }
-                    }
-                });
-                angular.forEach(dim, function(value, name) {
+    // api
+    vm.saveDimKey = saveDimKey;
+    vm.possibleDimKeys = possibleDimKeys;
+
+    function possibleDimKeys(query) {
+        return $q(function(resolve, reject) {
+            var dimList = [];
+            angular.forEach(vm.matchBy, function(value) {
+                if (value.indexOf(query) === 0) {
                     dimList.push(value);
-                });
-                resolve(dimList);
-            });
-        };
-
-        $scope.possibleDimKeys = function(query) {
-            return $q(function(resolve, reject) {
-                var dimList = []
-                angular.forEach($scope.matchingMetrics, function(value, name) {
-                    for (var key in value.dimensions) {
-                        if (key.indexOf(query) === 0) {
-                            if (dimList.indexOf(key) < 0) {
-                                dimList.push(key);
-                            }
-                        }
-                    }
-                });
-                resolve(dimList);
-            });
-        }
-
-        $scope.metricChanged = function() {
-            if ($scope.defaultTag.length > 0) {
-                $scope.tags = [{text: $scope.defaultTag}];
-            }
-            $scope.saveDimension();
-        }
-
-        $scope.saveExpression = function() {
-            $('#expression').val($scope.formatDimension());
-        }
-
-        $scope.saveDimension = function() {
-            $scope.saveExpression();
-
-            var mm = []
-            angular.forEach($scope.metrics, function(value, key) {
-                if (value.name === $scope.currentMetric) {
-                    var match = true;
-                    for (var i = 0; i < $scope.tags.length; i++) {
-                        var vals = $scope.tags[i]['text'].split('=');
-                        if (value.dimensions[vals[0]] !== vals[1]) {
-                            match = false;
-                            break;
-                        }
-                    }
-                    if (match) {
-                        mm.push(value)
-                    }
                 }
             });
-            $scope.matchingMetrics = mm
-            $scope.dimnames = ['name', 'dimensions'];
-            $('#match').val($scope.formatMatchBy());
+            resolve(dimList);
+        });
+    }
+
+    function saveDimKey() {
+        var matchByTags = []
+        for (var i = 0; i < vm.matchByTags.length; i++) {
+            matchByTags.push(vm.matchByTags[i]['text'])
+        }
+        $('#id_match_by').val(matchByTags.join(','));
+    }
+
+    // init
+    $rootScope.$on('$destroy', (function() {
+
+        var watcher = $rootScope.$on('mon_match_by_changed', onMatchByChange);
+
+        return function destroyer() {
+            watcher();
         }
 
-        $scope.saveDimKey = function() {
-            var matchByTags = []
-            for (var i = 0; i < $scope.matchByTags.length; i++) {
-                matchByTags.push($scope.matchByTags[i]['text'])
-            }
-            $('#id_match_by').val(matchByTags.join(','));
-        }
-
-        $scope.formatDimension = function() {
-            var dim = '';
-            angular.forEach($scope.tags, function(value, key) {
-                if (dim.length) {
-                    dim += ',';
-                }
-                dim += value['text'];
-            })
-            return $scope.currentFunction
-                    + '('
-                    + $scope.currentMetric
-                    + '{' + dim + '}'
-                    + ($scope.currentIsDeterministic ? ',deterministic' : '')
-                    + ') '
-                    + $scope.currentComparator
-                    + ' '
-                    + $scope.currentThreshold;
-        }
-
-        $scope.formatMatchBy = function() {
-            var dimNames = {}
-            for (var i = 0; i < $scope.matchingMetrics.length; i++) {
-                for (var attrname in $scope.matchingMetrics[i].dimensions) { dimNames[attrname] = true; }
-            }
-            var matches = [];
-            for (var attrname in dimNames) { matches.push(attrname); }
-            return matches;
-        }
-
-        $scope.init = function(defaultTag) {
-
-            if (defaultTag.length > 0) {
-                $scope.tags = [{text: defaultTag}];
-            }
-
-            $scope.defaultTag = defaultTag;
-
-            metrics = $window._alarm_edit_ctrl_metrics
-
-            $scope.metrics = metrics && metrics.length ? metrics : [];
-            $scope.metricNames = uniqueNames($scope.metrics, 'name');
-            $scope.currentMetric = $scope.metricNames[0];
-
-            $scope.saveDimension();
-        }
-
-        $scope.$on('$destroy', (function() {
-            var detWatcher = $scope.$watch('currentIsDeterministic', function detWatcher(newValue, oldValue) {
-                if(newValue != oldValue){
-                    $scope.$emit('mon_deterministic_changed', newValue);
-                }
+        function onMatchByChange(event, matchBy) {
+            // remove from tags those match by that do not match
+            vm.matchByTags = vm.matchByTags.filter(function filter(tag){
+                return matchBy.indexOf(tag['text']) >= 0;
             });
-            return function() {
-                // destroy watchers
-                detWatcher();
-            }
-        }()));
-
-        function uniqueNames(input, key) {
-            var unique = {};
-            var uniqueList = [];
-            for(var i = 0; i < input.length; i++){
-                if(typeof unique[input[i][key]] == "undefined"){
-                    unique[input[i][key]] = "";
-                    uniqueList.push(input[i][key]);
-                }
-            }
-            return uniqueList.sort();
+            vm.matchBy = matchBy || [];
         }
-    }])
-    .controller('alarmNotificationFieldController', NotificationField);
+
+    }()));
+}
 
 function NotificationField($rootScope) {
 
@@ -316,11 +206,18 @@ function NotificationField($rootScope) {
         data.forEach(prepareNotify);
     };
     vm.add = function(){
-        if(vm.select.model){
-            vm.list.push(allOptions[vm.select.model]);
+        var opt;
+        if (vm.select.model) {
+            opt = allOptions[vm.select.model];
+
+            oldUndetermined[opt.id] = opt.undetermined;
+            opt.undetermined = !vm.isDeterministic;
+
+            vm.list.push(opt);
 
             removeFromSelect();
-            vm.select.model = null;
+            vm.select.model = undefined;
+
         }
     };
     vm.remove = function(id){
@@ -337,7 +234,7 @@ function NotificationField($rootScope) {
         }
     };
 
-    $rootScope.$on('mon_deterministic_changed', onDeterministicChange)
+    $rootScope.$on('mon_deterministic_changed', onDeterministicChange);
 
     function prepareNotify(item){
         var selected = item[7]
@@ -371,9 +268,7 @@ function NotificationField($rootScope) {
 
     function onDeterministicChange(event, isDeterministic) {
 
-        if (!(vm.list && vm.list.length)) {
-            return;
-        } else if (isDeterministic === vm.isDeterministic) {
+        if (isDeterministic === vm.isDeterministic) {
             return;
         }
 
@@ -393,14 +288,3 @@ function NotificationField($rootScope) {
         });
     }
 }
-
-NotificationField.$inject = ['$rootScope'];
-
-angular.module('monitoring.filters', [])
-    .filter('spacedim', function () {
-        return function(text) {
-            if (typeof text == "string")
-                return text;
-            return JSON.stringify(text).split(',').join(', ');
-        }
-    });
diff --git a/monitoring/static/monitoring/js/directives.js b/monitoring/static/monitoring/js/directives.js
new file mode 100644
index 00000000..bc6f2b2a
--- /dev/null
+++ b/monitoring/static/monitoring/js/directives.js
@@ -0,0 +1,366 @@
+/*
+ * Copyright 2016 FUJITSU LIMITED
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+'use strict';
+
+angular
+    .module('monitoring.directives', [
+        'horizon.framework.widgets',
+        'monitoring.filters',
+        'monitoring.services',
+        'gettext'
+    ])
+    .directive('monAlarmExpression',
+        ['monitoringApp.staticPath', monAlarmExpressionsDirective]
+    )
+    .directive('monAlarmSubExpression',
+        ['monitoringApp.staticPath', monAlarmSubExpressionDirective]
+    );
+
+function monAlarmExpressionsDirective(staticPath){
+
+    return {
+        restrict: 'E',
+        scope: {
+            metrics: '=metrics',
+            functions: '=functions',
+            operators: '=operators',
+            comparators: '=comparators',
+            connectable: '=connectable'
+        },
+        templateUrl: staticPath + 'expression/expression.tpl.html',
+        controller: ['$q', '$scope', 'monExpressionBuilder', AlarmExpressionController],
+        controllerAs: 'vm',
+        bindToController: true
+    };
+
+    function AlarmExpressionController($q, $scope, monExpressionBuilder) {
+        // private
+        var vm = this,
+            deterministic = false,
+            matchBy = undefined;
+
+        // scope
+        vm.expression = '';
+        vm.subExpressions = undefined;
+        vm.expressionValid = true;
+
+        // api
+        vm.touch = touch;
+        vm.addExpression = addExpression;
+        vm.removeExpression = removeExpression;
+        vm.reorderExpression = reorderExpression;
+
+        // listen
+        $scope.$on('$destroy', destroy);
+
+        // init
+        $scope.$applyAsync(init);
+
+        function addExpression($event, $index) {
+            if ($event) {
+                $event.preventDefault();
+            }
+
+            vm.subExpressions.splice($index, 0, {});
+            if ($index >= 1 && vm.subExpressions[$index - 1].$valid) {
+                // hide previous expression
+                // if it is valid
+                vm.subExpressions[$index -1]['preview'] = true;
+            }
+
+            applyConnectable();
+
+            return true;
+        }
+
+        function removeExpression($event, index) {
+            if ($event) {
+                $event.preventDefault();
+            }
+            vm.subExpressions.splice(index, 1);
+
+            applyConnectable();
+            touch();
+
+            return true;
+        }
+
+        function reorderExpression($event, which, where) {
+            $event.preventDefault();
+            vm.subExpressions[where]['op'] = [
+                vm.subExpressions[which]['op'],
+                vm.subExpressions[which]['op'] = vm.subExpressions[where]['op']
+            ][0];
+            vm.subExpressions[where] = vm.subExpressions.splice(which, 1, vm.subExpressions[where])[0];
+
+            applyConnectable();
+
+            return true;
+        }
+
+        function touch() {
+            var hasInvalid = false;
+                expression = undefined;
+
+            matchBy = [];
+            deterministic = true;
+
+            angular.forEach(vm.subExpressions, subExpressionIt);
+
+            if (hasInvalid) {
+                expression = undefined;
+            } else {
+                $scope.$emit('mon_match_by_changed', matchBy.sort());
+                $scope.$emit('mon_deterministic_changed', deterministic);
+
+                expression = monExpressionBuilder.asString(vm.subExpressions, true);
+
+                // change preview only if valid
+                vm.expression = expression;
+            }
+
+            // update that always, regardless if it's valid or not
+            // for invalid case that will reset input's value to empty
+            // disallowing form to be accepted by django
+            $('#expression').val(expression);
+            vm.expressionValid = !hasInvalid;
+
+            return true;
+
+            function subExpressionIt(expr){
+                if (!expr.$valid) {
+                    return !(hasInvalid = true);
+                }
+
+                angular.forEach(expr.matchBy || [], function it(mb){
+                    if(matchBy.indexOf(mb) < 0){
+                        matchBy.push(mb);
+                    }
+                });
+                deterministic = deterministic && (expr.deterministic || false);
+
+                return true;
+            }
+        }
+
+        function init() {
+            if(vm.metrics.length) {
+                vm.subExpressions = [];
+                vm.matchBy = [];
+
+                addExpression(undefined, 0);
+            }
+        }
+
+        function destroy() {
+            delete vm.metrics;
+            delete vm.expression;
+            delete vm.subExpressions;
+            delete vm.deterministic;
+        }
+
+        function applyConnectable() {
+            var count = vm.subExpressions.length;
+
+            switch(count) {
+                case 1:
+                    vm.subExpressions[0]['connectable'] = false;
+                    break;
+                default: {
+                    angular.forEach(vm.subExpressions, function(expr, index) {
+                        expr.connectable = index >= 1 && index < vm.subExpressions.length;
+                        if (!expr.connectable) {
+                            delete expr['op'];
+                        }
+                    });
+                }
+            }
+
+        }
+    }
+
+}
+
+function monAlarmSubExpressionDirective(staticPath) {
+    return {
+        restrict: 'E',
+        require: '^monAlarmExpression',
+        scope: {
+            metrics: '=metrics',
+            functions: '=functions',
+            comparators: '=comparators',
+            operators: '=operators',
+            model: '=subExpression',
+            connectable: '=connectable',
+            preview: '=preview'
+        },
+        templateUrl: staticPath + 'expression/sub-expression.tpl.html',
+        link: linkFn,
+        controller: ['$q', '$scope', 'monExpressionBuilder', AlarmSubExpressionController],
+        controllerAs: 'vm',
+        bindToController: true
+    };
+
+    function linkFn(scope, el, attrs, monAlarmExpressions) {
+        el.on('$destroy', (function(){
+
+            var watcher = scope.$watch('vm.model', function(expr, oldExpr) {
+                if (expr !== oldExpr) {
+                    monAlarmExpressions.touch();
+                }
+            }, true);
+
+            return function destroyer() {
+                watcher();
+            };
+
+        }()));
+    }
+
+    function AlarmSubExpressionController($q, $scope, monExpressionBuilder) {
+        var vm = this;
+
+        vm.tags = [];
+        vm.matchingMetrics = [];
+
+        // api
+        vm.possibleDimensions = possibleDimensions;
+        vm.onMetricChanged = onMetricChanged;
+        vm.onDimensionsUpdated = onDimensionsUpdated;
+
+        vm.updateExpression = updateExpression;
+        vm.resetExpression = resetExpression;
+        vm.updateExpression = updateExpression;
+
+        // init
+        $scope.$on('$destroy', destroyerFactory());
+
+        function opRemoverListener(nval) {
+            if (vm.model && 'op' in vm.model && !nval) {
+                delete vm.model['op'];
+            }
+        }
+
+        function destroyerFactory() {
+
+            var watcher = $scope.$watch('vm.model.connectable', opRemoverListener, true);
+
+            return function destroyer() {
+                watcher();
+
+                delete vm.tags;
+                delete vm.matchingMetrics;
+                delete vm.model;
+            }
+
+        }
+
+        function updateExpression() {
+            var dim = [],
+                formController = $scope.$$childHead.subExpressionForm;
+
+            vm.model.$valid = !formController.$invalid;
+
+            if (vm.model.$valid) {
+
+                if (vm.tags.length > 0) {
+                    angular.forEach(vm.tags, function(value, key) {
+                        dim.push(value['text']);
+                    });
+                    vm.model.dimensions = dim;
+                } else {
+                    vm.model.dimensions = [];
+                }
+
+            }
+
+        }
+
+        function resetExpression() {
+            vm.matchingMetrics = [];
+            vm.tags = [];
+        }
+
+        function possibleDimensions(query) {
+            return $q(function(resolve) {
+                var dim = {},
+                    dimList = [];
+
+                angular.forEach(vm.matchingMetrics, function(value, name) {
+                    for (var key in value.dimensions) {
+                        if (value.dimensions.hasOwnProperty(key)) {
+                            var dimStr = key + "=" + value.dimensions[key];
+                            if (dimStr.indexOf(query) === 0) {
+                                dim[dimStr] = dimStr;
+                            }
+                        }
+                    }
+                });
+
+                angular.forEach(dim, function(value, name) {
+                    dimList.push(value);
+                });
+
+                resolve(dimList);
+            });
+        }
+
+        function onDimensionsUpdated() {
+            onMetricChanged(vm.model.metric);
+        }
+
+        function onMetricChanged(metric) {
+            handleMetricChanged(metric);
+            updateExpression();
+        }
+
+        function handleMetricChanged(metric) {
+            var mm = [],
+                matchBy = [],
+                tags = vm.tags || [];
+
+            angular.forEach(vm.metrics, function(value, key) {
+                if (value.name === metric.name) {
+                    var match = true;
+                    for (var i = 0; i < tags.length; i++) {
+                        var vals = tags[i]['text'].split('=');
+                        if (value.dimensions[vals[0]] !== vals[1]) {
+                            match = false;
+                            break;
+                        }
+
+                    }
+                    if (match) {
+                        mm.push(value);
+                    }
+                }
+            });
+
+            angular.forEach(mm, function(value, key){
+                angular.forEach(value.dimensions, function(value, key){
+                    if(matchBy.indexOf(key) < 0){
+                        matchBy.push(key);
+                    }
+                });
+            });
+
+            vm.matchingMetrics = mm;
+            vm.model.matchBy = matchBy.sort();
+
+        }
+
+    }
+
+}
diff --git a/monitoring/static/monitoring/js/filters.js b/monitoring/static/monitoring/js/filters.js
new file mode 100644
index 00000000..6f80eb6b
--- /dev/null
+++ b/monitoring/static/monitoring/js/filters.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2016 FUJITSU LIMITED
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+'use strict';
+
+angular
+    .module('monitoring.filters', [
+        'monitoring.services'
+    ])
+    .filter('monUniqueMetric', uniqueMetricFilterFactory)
+    .filter('monExpression', ['monExpressionBuilder', monExpressionFilterFactory]);
+
+function monExpressionFilterFactory(monExpressionBuilder) {
+
+    return function monExpressionFilter(value, withOp) {
+        return monExpressionBuilder.asString([value], withOp);
+    };
+
+}
+
+function uniqueMetricFilterFactory() {
+
+    return function uniqueMetricFilter(arr) {
+        return uniqueNames(arr, 'name');
+    };
+
+    function uniqueNames(input, key) {
+        var unique = {};
+        var uniqueList = [];
+        for(var i = 0; i < input.length; i++){
+            if(typeof unique[input[i][key]] === 'undefined'){
+                unique[input[i][key]] = '';
+                uniqueList.push(input[i]);
+            }
+        }
+        return uniqueList;
+    }
+}
diff --git a/monitoring/static/monitoring/js/services.js b/monitoring/static/monitoring/js/services.js
new file mode 100644
index 00000000..a0cba392
--- /dev/null
+++ b/monitoring/static/monitoring/js/services.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2016 FUJITSU LIMITED
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+'use strict';
+
+angular
+    .module('monitoring.services', [])
+    .factory('monExpressionBuilder', expressionBuilder);
+
+function expressionBuilder() {
+
+    return {
+        asString: subExpressionToString
+    };
+
+
+    function subExpressionToString(subExpressions, withOp) {
+        var tmp = [],
+            exprAsStr;
+
+        angular.forEach(subExpressions, function(expr) {
+            exprAsStr = [
+                withOp ? renderOp(expr) : '',
+                expr.fun || '',
+                expr.fun && '(',
+                expr.metric ? expr.metric.name : '', renderDimensions(expr),
+                (expr.deterministic ? ',deterministic': ''),
+                expr.fun && ')',
+                expr.cmp || '',
+                expr.threshold || ''
+            ].join('');
+            tmp.push(exprAsStr);
+        });
+
+        return tmp.join('');
+    }
+
+    function renderDimensions(expr) {
+        var tmp = [];
+
+        if (angular.isUndefined(expr.dimensions) || !expr.dimensions.length){
+            return tmp.join('');
+        }
+
+        tmp.push('{');
+        tmp.push(expr.dimensions.join(','));
+        tmp.push('}');
+
+        return tmp.join('');
+    }
+
+    function renderOp(expr) {
+        var tmp = [];
+        if ('op' in expr) {
+            tmp.push(' ');
+            tmp.push(expr['op']);
+            tmp.push(' ');
+        }
+        return tmp.join('');
+    }
+}
diff --git a/monitoring/static/monitoring/widgets/expression/expression.tpl.html b/monitoring/static/monitoring/widgets/expression/expression.tpl.html
new file mode 100644
index 00000000..1669a308
--- /dev/null
+++ b/monitoring/static/monitoring/widgets/expression/expression.tpl.html
@@ -0,0 +1,103 @@
+<div class="alarm-expression">
+
+    <input id="expression"
+           name="expression"
+           type="hidden">
+
+    <div class="alert alert-warning"
+         role="alert"
+         ng-if="!vm.metrics.length"
+         translate>
+        No metric available
+    </div>
+
+    <div class="container-fluid" ng-if="vm.metrics.length">
+
+        <div class="row center-block" ng-if="vm.expression">
+            <pre class="text-primary expression-preview"
+                 ng-class="{'expression-valid': vm.expressionValid, 'expression-invalid': !vm.expressionValid}">{{ vm.expression }}</pre>
+        </div>
+
+        <div class="row"
+             ng-repeat="expr in vm.subExpressions track by $id(expr)" ng-cloak>
+
+            <div class="container-fluid"
+                 style="padding-left:0px;padding-right:0px">
+                <div class="row">
+                    <!-- :: one time binding -->
+
+                    <mon-alarm-sub-expression metrics="vm.metrics"
+                                              functions="::vm.functions"
+                                              comparators="::vm.comparators"
+                                              operators="::vm.operators"
+                                              sub-expression="vm.subExpressions[$index]"
+                                              preview="expr.preview"
+                                              connectable="expr.connectable"
+                                              class="alarm-sub-expression"
+                                              ng-class="{'col-lg-11 col-md-11 col-sm-11 col-xs-11': !expr.preview, 'col-lg-9 col-md-9 col-sm-9 col-xs-9': expr.preview}"
+                                              ng-cloak></mon-alarm-sub-expression>
+                    <div ng-class="{'col-lg-1 col-md-1 col-sm-1 col-xs-1': !expr.preview, 'col-lg-3 col-md-3 col-sm-3 col-xs-3': expr.preview}">
+
+                        <button role="button"
+                                title="{$ 'Edit'|translate $}"
+                                class="btn btn-default btn-xs"
+                                ng-class="{'btn-block': !expr.preview}"
+                                ng-if="expr.preview"
+                                ng-click="expr.preview = false">
+                            <span class="fa fa-edit" aria-hidden="true"></span>
+                        </button>
+                        <button role="button"
+                                title="{$ 'Submit'|translate $}"
+                                class="btn btn-default btn-xs"
+                                ng-class="{'btn-block': !expr.preview}"
+                                ng-if="!expr.preview"
+                                ng-disabled="!expr.$valid"
+                                ng-click="expr.preview = true">
+                            <span class="fa fa-check"
+                                  aria-hidden="true"></span>
+                        </button>
+
+                        <button class="btn btn-default btn-xs"
+                                role="button"
+                                title="{$ 'Up'|translate $}"
+                                ng-class="{'btn-block': !expr.preview}"
+                                ng-disabled="$index === 0 || !expr.$valid"
+                                ng-click="vm.reorderExpression($event, $index, $index - 1)">
+                            <span class="fa fa-sort-asc"
+                                  aria-hidden="true"></span>
+                        </button>
+                        <button class="btn btn-default btn-xs"
+                                role="button"
+                                title="{$ 'Add'|translate $}"
+                                ng-class="{'btn-block': !expr.preview}"
+                                ng-disabled="!expr.$valid"
+                                ng-click="vm.addExpression($event, $index + 1)">
+                            <span class="fa fa-plus" aria-hidden="true"></span>
+                        </button>
+                        <button class="btn btn-default btn-xs"
+                                role="button"
+                                title="{$ 'Remove'|translate $}"
+                                ng-class="{'btn-block': !expr.preview}"
+                                ng-disabled="vm.subExpressions.length === 1"
+                                ng-click="vm.removeExpression($event, $index)">
+                            <span class="fa fa-minus"
+                                  aria-hidden="true"></span>
+                        </button>
+                        <button class="btn btn-default btn-xs"
+                                role="button"
+                                title="{$ 'Down'|translate $}"
+                                ng-class="{'btn-block': !expr.preview}"
+                                ng-disabled="$index === vm.subExpressions.length - 1 || !expr.$valid"
+                                ng-click="vm.reorderExpression($event, $index, $index + 1)">
+                            <span class="fa fa-sort-desc"
+                                  aria-hidden="true"></span>
+                        </button>
+
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/monitoring/static/monitoring/widgets/expression/sub-expression.tpl.html b/monitoring/static/monitoring/widgets/expression/sub-expression.tpl.html
new file mode 100644
index 00000000..2b9d42d6
--- /dev/null
+++ b/monitoring/static/monitoring/widgets/expression/sub-expression.tpl.html
@@ -0,0 +1,155 @@
+<div ng-if="vm.preview" class="sub-expression-preview">
+    <span class="text-muted">{{ vm.model | monExpression:false }}</span>
+</div>
+
+<form name="subExpressionForm" ng-if="!vm.preview" novalidate>
+
+    <div class="row expression-details" ng-if="vm.connectable">
+        <div class="col-md-2 col-xs-6">
+            <label class="control-label" for="expressionOperator">
+                <span class="field-label">{{ 'Operator'|translate }}</span>
+                <span class="hz-icon-required fa fa-asterisk"></span>
+            </label>
+            <select id="expressionOperator"
+                    name="operator"
+                    class="form-control input-sm"
+                    title="{$ 'Operators'|translate $}"
+                    aria-label="{$ 'Operators'|translate $}"
+                    data-toggle="tooltip"
+                    data-placement="right"
+                    required
+                    ng-change="vm.updateExpression()"
+                    ng-model="vm.model.op"
+                    ng-options="f[0] as f[1] for f in vm.operators"
+                    ng-class="{'has-error': subExpressionForm.operator.$invalid && !subExpressionForm.$pristine}"
+                    aria-describedby="helpBlock"></select>
+        </div>
+    </div>
+
+    <div class="row expression-details">
+        <div class="col-md-2 col-xs-6">
+            <label class="control-label" for="expressionFunction">
+                <span class="field-label">{{ 'Function'|translate }}</span>
+                <span class="hz-icon-required fa fa-asterisk"></span>
+            </label>
+            <select id="expressionFunction"
+                    name="function"
+                    class="form-control input-sm"
+                    aria-label="{$ 'Function'|translate $}"
+                    title="{$ 'Function'|translate $}"
+                    required
+                    ng-change="vm.updateExpression()"
+                    ng-model="vm.model.fun"
+                    ng-options="f[0] as f[1] for f in vm.functions"
+                    ng-class="{'has-error': subExpressionForm.function.$invalid && !subExpressionForm.$pristine}"
+                    aria-describedby="helpBlock"></select>
+        </div>
+        <div class="col-md-6 col-xs-6">
+            <label class="control-label" for="expressionFunction">
+                <span class="field-label">{{ 'Metric'|translate }}</span>
+                <span class="hz-icon-required fa fa-asterisk"></span>
+            </label>
+            <select id="expressionMetric"
+                    name="metric"
+                    class="form-control input-sm"
+                    aria-label="{$ 'Metric'|translate $}"
+                    title="{$ 'Metric'|translate $}"
+                    required
+                    ng-change="vm.resetExpression();vm.onMetricChanged(vm.model.metric)"
+                    ng-model="vm.model.metric"
+                    ng-options="metric.name for metric in vm.metrics|monUniqueMetric|orderBy:'name'"
+                    ng-class="{'has-error': subExpressionForm.metric.$invalid && !subExpressionForm.$pristine}"
+                    aria-describedby="helpBlock"></select>
+        </div>
+        <div class="col-md-2 col-xs-6">
+            <label class="control-label" for="expressionFunction">
+                <span class="field-label">{{ 'Comparator'|translate }}</span>
+                <span class="hz-icon-required fa fa-asterisk"></span>
+            </label>
+            <select id="expressionComparator"
+                    name="comparator"
+                    class="form-control input-sm"
+                    title="{$ 'Comparator'|translate $}"
+                    aria-label="{$ 'Comparator'|translate $}"
+                    data-toggle="tooltip"
+                    data-placement="right"
+                    required
+                    ng-change="vm.updateExpression()"
+                    ng-model="vm.model.cmp"
+                    ng-options="f[0] as f[1] for f in vm.comparators"
+                    ng-class="{'has-error': subExpressionForm.comparator.$invalid && !subExpressionForm.$pristine}"
+                    aria-describedby="helpBlock"></select>
+        </div>
+        <div class="col-md-2 col-xs-6">
+            <label class="control-label" for="expressionFunction">
+                <span class="field-label">{{ 'Threshold'|translate }}</span>
+                <span class="hz-icon-required fa fa-asterisk"></span>
+            </label>
+            <input id="expressionThreshold"
+                   name="threshold"
+                   type="number"
+                   step="any"
+                   class="form-control input-sm"
+                   aria-label="{$ 'Threshold'|translate $}"
+                   title="{$ 'Threshold'|translate $}"
+                   required
+                   ng-change="vm.updateExpression()"
+                   ng-model="vm.model.threshold"
+                   ng-class="{'has-error': subExpressionForm.threshold.$invalid && !subExpressionForm.$pristine}"
+                   aria-describedby="helpBlock"/>
+        </div>
+    </div>
+
+    <div class="row expression-details">
+        <div class="col-md-10 col-xs-10">
+            <tags-input id="dimension-chooser"
+                        ng-model="vm.tags"
+                        placeholder="{$ 'Add a dimension'|translate $}"
+                        add-from-autocomplete-only="true"
+                        on-tag-added="vm.onDimensionsUpdated()"
+                        on-tag-removed="vm.onDimensionsUpdated()">
+                <auto-complete source="vm.possibleDimensions($query)"
+                               max-results-to-show="30"
+                               min-length="1">
+                </auto-complete>
+            </tags-input>
+        </div>
+        <div class="col-md-2 col-xs-2">
+            <div class="form-group">
+                <label class="btn expression-deterministic"
+                       ng-class="{'btn-primary active': vm.model.deterministic, 'btn-default': !vm.model.deterministic}"
+                       ng-click="vm.model.deterministic = !vm.model.deterministic; vm.updateExpression()"
+                       translate>Deterministic</label>
+                <input name="deterministic"
+                       type="hidden"
+                       ng-model="vm.model.deterministic">
+            </div>
+        </div>
+    </div>
+
+    <!-- if window is small enough better hide this div to save some space -->
+    <div class="row expression-details hidden-sm hidden-xs"
+         ng-if="vm.matchingMetrics.length">
+        <div class="topologyBalloon" id="metrics"
+             style="position:static;display: block;">
+            <div class="contentBody">
+                <table class="detailInfoTable">
+                    <caption translate>Matching Metrics</caption>
+                    <tbody>
+                    <tr>
+                        <th translate>name</th>
+                        <th translate>dimensions</th>
+                    </tr>
+                    <tr ng-repeat="metric in vm.matchingMetrics track by $id(metric)">
+                        <td>{$ metric.name $}</td>
+                        <td style="white-space:normal">{$ metric.dimensions |
+                            json $}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+</form>