Changes for demo

This commit is contained in:
Rob Raymond 2014-04-29 12:27:34 -06:00
parent a96eab5bce
commit 6f6e4ead54
13 changed files with 134 additions and 300 deletions

View File

BIN
monitoring/api/__init__.pyc Normal file

Binary file not shown.

View File

@ -0,0 +1,99 @@
# vim: tabstop=4 shiftwidth=4 softtabstop=4
# 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.
import logging
from django.conf import settings
from monclient import client as mon_client
from horizon.utils import functions as utils
from openstack_dashboard.api import base
LOG = logging.getLogger(__name__)
class AttrStore:
pass
def format_parameters(params):
parameters = {}
for count, p in enumerate(params, 1):
parameters['Parameters.member.%d.ParameterKey' % count] = p
parameters['Parameters.member.%d.ParameterValue' % count] = params[p]
return parameters
def monclient(request, password=None):
api_version = "2_0"
insecure = getattr(settings, 'OPENSTACK_SSL_NO_VERIFY', False)
cacert = getattr(settings, 'OPENSTACK_SSL_CACERT', None)
endpoint = 'http://192.168.10.4:8080/v2.0' # base.url_for(request, 'orchestration')
LOG.debug('monclient connection created using token "%s" and url "%s"' %
(request.user.token.id, endpoint))
kwargs = {
'token': request.user.token.id,
'insecure': insecure,
'ca_file': cacert,
'username': request.user.username,
'password': password
#'timeout': args.timeout,
#'ca_file': args.ca_file,
#'cert_file': args.cert_file,
#'key_file': args.key_file,
}
client = mon_client.Client(api_version, endpoint, **kwargs)
client.format_parameters = format_parameters
return client
def alarm_list(request, marker=None, paginate=False):
limit = getattr(settings, 'API_RESULT_LIMIT', 1000)
page_size = utils.get_page_size(request)
if paginate:
request_size = page_size + 1
else:
request_size = limit
kwargs = {}
if marker:
kwargs['marker'] = marker
args = AttrStore()
args.runlocal = True
args.os_tenant_id = "12345678"
alarm_iter = monclient(request).alarms.list(args, **kwargs)
has_more_data = False
alarms = list(alarm_iter)
if paginate:
if len(alarms) > page_size:
alarms.pop()
has_more_data = True
return (alarms, has_more_data)
def alarm_delete(request, alarm_id):
return monclient(request).alarm.delete(alarm_id)
def alarm_get(request, alarm_id):
return monclient(request).alarm.get(alarm_id)
def alarm_create(request, password=None, **kwargs):
return monclient(request, password).alarm.create(**kwargs)
def alarm_update(request, alarm_id, **kwargs):
return monclient(request).alarm.update(alarm_id, **kwargs)

Binary file not shown.

View File

@ -1,11 +0,0 @@
<div ng-controller="alarmController">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</div>
<style>
.gridStyle {
border: 1px solid rgb(212,212,212);
height: 300px;
}
</style>

View File

@ -1,118 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CoverFlow</title>
<style>
html { height: 100%; }
body { background-image: -webkit-radial-gradient(gray 0%, black 100%); }
#coverflow {
width: 800px;
height: 400px;
overflow: hidden;
margin: 100px auto;
-webkit-perspective: 500;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
}
#container {
height: 100%;
width: 100%;
margin-left: 350px;
background-color: transparent;
-webkit-transition: all 400ms ease-in-out;
}
.holder {
float: left;
position: absolute;
margin-top: 100px;
margin-left: 20px;
-webkit-transition: all 300ms ease-in-out;
-webkit-box-reflect: below 4px
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, .3)),
color-stop(1, rgba(255, 255, 255, .3))
);
}
.slider {
position: absolute;
width: 200px;
height: 30px;
margin: 0 0 0 430px;
-webkit-appearance: none !important;
border-radius: 6px;
border: 1px solid white;
background: #999;
opacity: .5;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 50px;
height: 18px;
border-radius: 8px;
border: 2px solid #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999), color-stop(.5, #000) );
}
#log { color: white; font-size: 30pt; }
</style>
</head>
<body onload="flow()">
<div id="coverflow">
<div id="container">
<div class="holder" id="1"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="2"><img src="../img/2.jpg" width="200"></div>
<div class="holder" id="3"><img src="../img/3.jpg" width="200"></div>
<div class="holder" id="4"><img src="../img/4.jpg" width="200"></div>
<div class="holder" id="5"><img src="../img/5.jpg" width="200"></div>
<div class="holder" id="6"><img src="../img/6.jpg" width="200"></div>
<div class="holder" id="7"><img src="../img/7.jpg" width="200"></div>
<div class="holder" id="8"><img src="../img/8.jpg" width="200"></div>
<div class="holder" id="9"><img src="../img/9.jpg" width="200"></div>
<div class="holder" id="10"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="11"><img src="../img/2.jpg" width="200"></div>
</div>
</div>
<input id="slider" class="slider" type="range" min="1" max="11" value="6" onchange="flow();">
<a id="log">value</a>
<script>
function flow() {
var space = 2;
var coverCount = 11;
var current = slider.value;
var cover = document.getElementById(current + "");
var position = [0, 230, 180, 130, 80, 30, -20, -70, -120, -170, -220, -270];
for (var i = current; i < (coverCount +1); i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i+space)*50)+"px,0,-10px) rotateY(-65deg)";
document.getElementById(i + "").style.zIndex = -i + "";
}
for (var i = 1; i < current; i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i-space)*50)+"px,0,-10px) rotateY(65deg)";
document.getElementById(i + "").style.zIndex = i + "";
}
cover.style.webkitTransform = "translate3d("+(slider.value*50)+"px,0,100px) rotateY(0deg)";
cover.style.zIndex = current + "";
document.getElementById("container").style.marginLeft = position[current] + "px";
document.getElementById("log").innerHTML = slider.value + "";
}
</script>
</body>
</html>

View File

@ -1,52 +0,0 @@
var monitoringAnimations = angular.module('monitoring.animations', ['ngAnimate']);
monitoringAnimations.animation('.phone', function() {
var animateUp = function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
top: 500,
left: 0,
display: 'block'
});
jQuery(element).animate({
top: 0
}, done);
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
var animateDown = function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
left: 0,
top: 0
});
jQuery(element).animate({
top: -500
}, done);
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
return {
addClass: animateUp,
removeClass: animateDown
};
});

View File

@ -1,61 +1,7 @@
'use strict'; 'use strict';
angular.module('monitoring.controllers', []) angular.module('monitoring.controllers', [])
.controller('monitoringController', function ($scope, $http) { .controller('monitoringController', function ($scope, $http) {
$scope._serviceModel = [{'name': 'Platform Services', $scope.fetchStatus = function() {
'services': [{'name': 'MaaS',
'display': 'MaaS'},
{'name': 'DBaaS',
'display': 'DBaaS'},
{'name': 'LBaaS',
'display': 'LBaaS'},
{'name': 'DNSaaS',
'display': 'DNSaaS'},
{'name': 'MSGaaS',
'display': 'MSGaaS'},
]},
{'name': 'The OverCloud Services',
'services': [{'name': 'nova',
'display': 'Nova'},
{'name': 'swift',
'display': 'Swift'},
{'name': 'bock',
'display': 'Cinder'},
{'name': 'glance',
'display': 'Glance'},
{'name': 'quantum',
'display': 'Neutron'},
{'name': 'mysql',
'display': 'MySQL'},
{'name': 'rabbitmq',
'display': 'RabbitMQ'},
]},
{'name': 'The UnderCloud Services',
'services': [{'name': 'nova',
'display': 'Nova'},
{'name': 'swift',
'display': 'Cinder'},
{'name': 'glance',
'display': 'Glance'},
{'name': 'horizon',
'display': 'Horizon'},
]},
{'name': 'Network Services',
'services': [{'name': 'dhcp',
'display': 'DHCP'},
{'name': 'dns',
'display': 'DNS'},
{'name': 'dns-servers',
'display': 'DNS Servers'},
{'name': 'http',
'display': 'http'},
{'name': 'web_proxy',
'display': 'Web Proxy'}
]}
]
$scope.setStatus = function() {
$scope.fetchStatus()
};
$scope.fetchStatus = function() {
$http({method: 'GET', url: '/admin/monitoring/status'}). $http({method: 'GET', url: '/admin/monitoring/status'}).
success(function(data, status, headers, config) { success(function(data, status, headers, config) {
// this callback will be called asynchronously // this callback will be called asynchronously
@ -76,22 +22,7 @@ angular.module('monitoring.controllers', [])
alert("error") alert("error")
}); });
} }
$scope.serviceModel = function() { })
$scope.setStatus()
return $scope._serviceModel
}
$scope.current = 1;
$scope.showService = function(ev) {
// href="#/alarms/{{service.name}}"
console.log(ev.clientX, ev.clientY);
//$("#current"+$scope.current)[0].style.webkitTransform = "scale3d(10, 10, +1)"
//$("#current"+$scope.current).style.opacity = "0"
//$("#current"+$scope.current).style.visibility = false
$scope.current += 1;
//$("#current"+$scope.current)[0].style.webkitTransform = "translate3d(0,-400px,-1)"
};
$scope.format = 'M/d/yy h:mm:ss a';
})
.controller('alarmController', function($scope) { .controller('alarmController', function($scope) {
$scope.myData = [{name: "API Response Time", status: 'Normal'}, $scope.myData = [{name: "API Response Time", status: 'Normal'},
{name: "System Health", status: 'Normal'}, {name: "System Health", status: 'Normal'},
@ -102,23 +33,6 @@ angular.module('monitoring.controllers', [])
columnDefs: [{field:'name', displayName:'Name'}, {field:'status', displayName:'Status'}]}; columnDefs: [{field:'name', displayName:'Name'}, {field:'status', displayName:'Status'}]};
}); });
function getRandomStatusValue() {
var distribution = [
{prob:.04, value:'alert-error'},
{prob:.04, value:'alert-warning'},
{prob:.04, value:'alert-unknown'},
{prob:.04, value:'alert-notfound'},
{value:'alert-success'},
]
var num = Math.random()
for (var i=0; i < distribution.length - 1; i++) {
if (num < distribution[i]["prob"])
return distribution[i]["value"]
num = num - distribution[i]["prob"]
}
return distribution[distribution.length - 1]["value"]
}
function getIcon(status) { function getIcon(status) {
if (status === 'alert-error') if (status === 'alert-error')
return '/static/monitoring/img/critical-icon.png' return '/static/monitoring/img/critical-icon.png'

View File

@ -1,5 +1,4 @@
<script src='{{ STATIC_URL }}monitoring/controllers.js' type='text/javascript' charset='utf-8'></script> <script src='{{ STATIC_URL }}monitoring/controllers.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}monitoring/js/directives.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}monitoring/app.js' type='text/javascript' charset='utf-8'></script> <script src='{{ STATIC_URL }}monitoring/app.js' type='text/javascript' charset='utf-8'></script>
<script src="{{ STATIC_URL }}horizon/lib/ng-grid/ng-grid-2.0.7.debug.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ STATIC_URL }}horizon/lib/angular/angular-route.js" type="text/javascript" charset="utf-8"></script> <script src="{{ STATIC_URL }}horizon/lib/angular/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ STATIC_URL }}horizon/lib/angular/angular-animate.js" type="text/javascript" charset="utf-8"></script>

View File

@ -7,5 +7,5 @@
{% endblock page_header %} {% endblock page_header %}
{% load url from future %} {% load url from future %}
{% block main %} {% block main %}
{% include 'admin/monitoring/monitorng.html' %} {% include 'admin/monitoring/newmonitor.html' %}
{% endblock %} {% endblock %}

View File

@ -1,5 +1,4 @@
<div>
<div ng-app="modalTest">
<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="alert alert-block fade in" style="background:#F1F1F1;color:black;font-weight: bold;">

View File

@ -19,27 +19,28 @@ border-color: blue;
color: lightgrey; color: lightgrey;
} }
.diagram { .diagram {
-webkit-transition: all 600ms ease-in-out;
background-color: darkgray;
padding: 5px; padding: 5px;
} }
</style> </style>
<div> <div ng-controller = "monitoringController" ng-init="fetchStatus()">
Current time is: <span my-current-time="format"></span> <button ng-click="fetchStatus()">Refresh</button> Current time is: <span my-current-time="format"></span> <button ng-click="fetchStatus()">Refresh</button>
<div id="current1" class="diagram"> <div id="current1" class="diagram">
<div class="alert alert-block fade in" style="background:#E1E1E1;color:black;" ng-repeat="group in _serviceModel"> <div class="alert alert-block fade in" style="background:#E1E1E1;color:black;" ng-repeat="group in _serviceModel">
<div> <div>
{{ group.name }} {$ group.name $}
</div> </div>
<div ng-repeat="service in group.services" style="display:inline-block; margin-bottom:4px;"> <div ng-repeat="service in group.services" style="display:inline-block; margin-bottom:4px;">
<a ng-click="showService($event)"> <a href="{% url 'horizon:admin:monitoring:alert' 'nova' %}" ng-click="showService($event)">
<div class="alert alert-block {{ service.class }} fade in" style="display: inline-block; margin:2px;"> <div class="alert alert-block {$ service.class $} fade in" style="display: inline-block; margin:2px;">
<img style="margin-right:5px;vertical-align:top;" ng-src="{$ service.icon $}"/>
<img style="margin-right:5px;vertical-align:top;" ng-src="{{ service.icon }}"/> {$ service.display $}
{{ service.display }}
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src='{{ STATIC_URL }}monitoring/js/app.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}monitoring/js/controllers.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}monitoring/js/directives.js' type='text/javascript' charset='utf-8'></script>
<script src="{{ STATIC_URL }}horizon/lib/angular/angular-route.js" type="text/javascript" charset="utf-8"></script>

View File

@ -24,9 +24,11 @@ from django.utils.translation import ugettext as _
from django.views.generic import TemplateView from django.views.generic import TemplateView
from horizon import tables from horizon import tables
from monitoring.api import monitoring
from .tables import AlertsTable from .tables import AlertsTable
from .tables import AlertHistoryTable from .tables import AlertHistoryTable
from openstack_dashboard import api
LOG = logging.getLogger(__name__) LOG = logging.getLogger(__name__)
@ -140,7 +142,7 @@ class StatusView(TemplateView):
def get(self, request, *args, **kwargs): def get(self, request, *args, **kwargs):
services = ['MaaS', services = ['MaaS',
] ]
#api.monitoring.alarm_list(self.request) #monitoring.alarm_list(self.request)
for group in SAMPLE: for group in SAMPLE:
for service in group['services']: for service in group['services']:
service['class'] = get_random_status() service['class'] = get_random_status()
@ -151,21 +153,6 @@ class StatusView(TemplateView):
return HttpResponse(json.dumps(ret), return HttpResponse(json.dumps(ret),
content_type='application/json') content_type='application/json')
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'},
]
num = random.random()
for dist in distribution:
if num < dist["prob"]:
return dist["value"]
num = num - dist["prob"]
return distribution[len(distribution) - 1]["value"]
class AlertView(tables.DataTableView): class AlertView(tables.DataTableView):
table_class = AlertsTable table_class = AlertsTable
@ -224,3 +211,19 @@ class AlertHistoryView(tables.DataTableView):
class AlertMeterView(TemplateView): class AlertMeterView(TemplateView):
template_name = 'admin/monitoring/alert_meter.html' template_name = 'admin/monitoring/alert_meter.html'
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'},
]
num = random.random()
for dist in distribution:
if num < dist["prob"]:
return dist["value"]
num = num - dist["prob"]
return distribution[len(distribution) - 1]["value"]