Redesign chicklets based on UX feedback

monitoring/templates/monitoring/monitor.html

@@ -1,37 +1,66 @@
 <style>
-.alert-notfound {
+.chicklet-container {
+ border: 1px solid #F1F1F1;
+ color:black;
+ font-weight: bold;
  background-color: white;
- border-color: grey;
- color: grey;
+ padding: 14px 35px 14px 14px;
+ margin-bottom: 18px;
+ border-radius: 4px;
 }
-.alert-unknown {
- background-color: #6666FF;
- border-color: blue;
- color: lightgrey;
+.base-chicklet {
+ border: 3px solid;
+ color: #7C7C7C;
+ background-color: white;
+ display:inline-block;
+ padding:0px;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ border-radius: 4px;
 }
-.alert-error {
- background-color: #D64C4C;
- border-color: red;
- color: #EEEEEE;
+.chicklet-success {
+ border-color: #36A32C;
 }
-.alert-warning {
- background-color: #F7F700;
- border-color: yellow;
+.chicklet-notfound {
+ border-color: #e5e5e5;
+}
+.chicklet-unknown {
+ border-color: #626262;
+}
+.chicklet-error {
+ border-color: #9E1213;
+}
+.chicklet-warning {
+ border-color: #D6C037;
+}
+.status-icon-holder {
+ background-color: #EDEEF0;
+ width: 20px;
+ height: 30px;
+ float: left;
+ padding-top:10px;
+ padding-left: 4px;
+ padding-right: 4px;
+ border-right:2px solid;
+ border-color: #D8D7DD;
 }
 </style>
 <div style="border: 1px solid #dddddd;">
    <div>
         {% for group in service_groups %}
-        <div class="alert alert-block fade in" style="background:#F1F1F1;color:black;font-weight: bold;">
+        <div class="chicklet-container">
             <div>
                 {{ group.name }}
             </div>
             {% for service in group.services %}
                 <a href="{% url 'horizon:overcloud:monitoring:servicealarm' service.name %}" class="showspinner">
-                 <div class="alert alert-block {{ service.class }} fade in" style="display:inline-block; margin-bottom:4px;">
+                 <div class="base-chicklet {{ service.class }}">
                     <div>
-                        <img style="margin-right:5px;vertical-align:top;" src="{{ service.icon }}"/>
+                        <div class = "status-icon-holder" >
+                            <img src="{{ service.icon }}"/>
+                        </div>
+                        <div style="float: right; margin: 10px;">
                         {{ service.display }}
+                        </div>
                         {% if service.count %}
                             ({{ service.count }})
                         {% endif %}

monitoring/views.py

@@ -95,32 +95,32 @@ SAMPLE = [{'name': _('Platform Services'),
 
 
 def get_icon(status):
-    if status == 'alert-success':
+    if status == 'chicklet-success':
         return constants.OK_ICON
-    if status == 'alert-error':
+    if status == 'chicklet-error':
         return constants.CRITICAL_ICON
-    if status == 'alert-warning':
+    if status == 'chicklet-warning':
         return constants.WARNING_ICON
-    if status == 'alert-unknown':
+    if status == 'chicklet-unknown':
         return constants.UNKNOWN_ICON
-    if status == 'alert-notfound':
+    if status == 'chicklet-notfound':
         return constants.NOTFOUND_ICON
 
 
 priorities = [
-    {'status': 'alert-success', 'severity': 'OK'},
-    {'status': 'alert-unknown', 'severity': 'UNDETERMINED'},
-    {'status': 'alert-warning', 'severity': 'LOW'},
-    {'status': 'alert-warning', 'severity': 'MEDIUM'},
-    {'status': 'alert-warning', 'severity': 'HIGH'},
-    {'status': 'alert-error', 'severity': 'CRITICAL'},
+    {'status': 'chicklet-success', 'severity': 'OK'},
+    {'status': 'chicklet-unknown', 'severity': 'UNDETERMINED'},
+    {'status': 'chicklet-warning', 'severity': 'LOW'},
+    {'status': 'chicklet-warning', 'severity': 'MEDIUM'},
+    {'status': 'chicklet-warning', 'severity': 'HIGH'},
+    {'status': 'chicklet-error', 'severity': 'CRITICAL'},
 ]
 index_by_severity = {d['severity']: i for i, d in enumerate(priorities)}
 
 
 def get_status(alarms):
     if not alarms:
-        return 'alert-notfound'
+        return 'chicklet-notfound'
     status_index = 0
     for a in alarms:
         severity = show_severity(a)
@@ -359,11 +359,11 @@ class AlarmMeterView(TemplateView):
 
 def get_random_status():
     distribution = [
-        {'prob': .04, 'value': 'alert-error'},
-        {'prob': .04, 'value': 'alert-warning'},
-        {'prob': .04, 'value': 'alert-unknown'},
-        {'prob': .04, 'value': 'alert-notfound'},
-        {'prob': 1.0, 'value': 'alert-success'},
+        {'prob': .04, 'value': 'chicklet-error'},
+        {'prob': .04, 'value': 'chicklet-warning'},
+        {'prob': .04, 'value': 'chicklet-unknown'},
+        {'prob': .04, 'value': 'chicklet-notfound'},
+        {'prob': 1.0, 'value': 'chicklet-success'},
     ]
     num = random.random()
     for dist in distribution: