openstack/monasca-ui
Code Issues Proposed changes

Redesign chicklets based on UX feedback

Browse Source
This commit is contained in:
Rob Raymond 2014-05-29 14:14:48 -06:00
parent 7ee268bcd1
commit 2da1ea67d8
3 changed files with 63 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
monitoring/static/monitoring/img/notfound-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 573 B

After

Width:  |  Height:  |  Size: 3.2 KiB

63
monitoring/templates/monitoring/monitor.html
View File

@ -1,37 +1,66 @@
<style> <style>
.alert-notfound { .chicklet-container {
border: 1px solid #F1F1F1;
color:black;
font-weight: bold;
background-color: white; background-color: white;
border-color: grey; padding: 14px 35px 14px 14px;
color: grey; margin-bottom: 18px;
border-radius: 4px;
} }
.alert-unknown { .base-chicklet {
background-color: #6666FF; border: 3px solid;
border-color: blue; color: #7C7C7C;
color: lightgrey; background-color: white;
display:inline-block;
padding:0px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-radius: 4px;
} }
.alert-error { .chicklet-success {
background-color: #D64C4C; border-color: #36A32C;
border-color: red;
color: #EEEEEE;
} }
.alert-warning { .chicklet-notfound {
background-color: #F7F700; border-color: #e5e5e5;
border-color: yellow; }
.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> </style>
<div style="border: 1px solid #dddddd;"> <div style="border: 1px solid #dddddd;">
<div> <div>
{% for group in service_groups %} {% 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> <div>
{{ group.name }} {{ group.name }}
</div> </div>
{% for service in group.services %} {% for service in group.services %}
<a href="{% url 'horizon:overcloud:monitoring:servicealarm' service.name %}" class="showspinner"> <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> <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 }} {{ service.display }}
</div>
{% if service.count %} {% if service.count %}
({{ service.count }}) ({{ service.count }})
{% endif %} {% endif %}

34
monitoring/views.py
View File

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