Skip to content

S
slapos.core
Commit 7f1b6510 authored by Thomas Lechauve's avatar Thomas Lechauve
Browse files
Options

Refresh automatically instances list 

Supported: refresh when an instance is modified or created
parent ea2791e6
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 130 deletions
jquery.slapos/src/jquery.slapos.js
View file @ 7f1b6510
...@@ -3,9 +3,6 @@ ...@@ -3,9 +3,6 @@
var methods = { var methods = {
init: function (options) { init: function (options) {
var settings = $.extend({ var settings = $.extend({
'host': '',
'access_token': '',
'clientID': ''
}, options); }, options);
return this.each(function () { return this.each(function () {
...@@ -58,80 +55,88 @@ ...@@ -58,80 +55,88 @@
statusDefault: function () { statusDefault: function () {
return { return {
0: function () { console.error("status error code: 0"); }, 0: function () { console.error("status error code: 0"); },
404: function () { console.error("status error code: Not Found !"); } 404: function () { console.error("status error code: Not Found !"); },
500: function () { console.error("Server error !"); }
}; };
}, },
request: function (type, url, callback, statusCode, data) { request: function (type, authentication, args) {
data = data || ''; var statusCode;
statusCode = statusCode || this.statusDefault; var data;
if (args.hasOwnProperty('statusCode')) {
statusCode = args.statusCode || methods.statusDefault();
} else {
statusCode = methods.statusDefault();
}
if (args.hasOwnProperty('data')) {
data = args.data || undefined;
} else {
data = undefined;
}
delete args.data
$.extend(args, {statusCode: statusCode});
return this.each(function () { return this.each(function () {
$.ajax({ var ajaxOptions = {
url: "http://" + $(this).slapos('host') + url,
type: type, type: type,
contentType: 'application/octet-stream', contentType: 'application/json',
data: JSON.stringify(data), data: JSON.stringify(data),
dataType: 'json', datatype: 'json',
context: $(this), context: $(this),
beforeSend: function (xhr) { beforeSend: function (xhr) {
if ($(this).slapos("access_token")) { if ($(this).slapos("access_token") && authentication) {
xhr.setRequestHeader("Authorization", $(this).slapos("store", "token_type") + " " + $(this).slapos("access_token")); xhr.setRequestHeader("Authorization", $(this).slapos("store", "token_type") + " " + $(this).slapos("access_token"));
xhr.setRequestHeader("Accept", "application/json"); xhr.setRequestHeader("Accept", "application/json");
} }
}, }
statusCode: statusCode, };
success: callback $.extend(ajaxOptions, args);
}); $.ajax(ajaxOptions);
}); });
}, },
newInstance: function (data, callback, statusEvent) { prepareRequest: function (methodName, args) {
return $(this).slapos('request', 'POST', '/request', callback, statusEvent, data); var $this = $(this);
}, return this.each(function(){
$(this).slapos('discovery', function(access){
deleteInstance: function (id, callback, statusEvent) { if (access.hasOwnProperty(methodName)) {
return $(this).slapos('request', 'DELETE', '/instance/' + id, callback, statusEvent); var url = args.url || access[methodName].url;
}, $.extend(args, {'url': url});
$this.slapos('request',
getInstance: function (id, callback, statusEvent) { access[methodName].method,
return $(this).slapos('request', 'GET', '/instance/' + id, callback, statusEvent); access[methodName].authentication,
}, args);
}
getInstanceCert: function (id, callback, statusEvent) { });
return $(this).slapos('request', 'GET', '/instance/' + id + '/certificate', callback, statusEvent); })
},
bangInstance: function (id, log, callback, statusEvent) {
return $(this).slapos('request', 'POST', '/instance/' + id + '/bang', callback, statusEvent, log);
},
editInstance: function (id, data, callback, statusEvent) {
return $(this).slapos('request', 'PUT', '/instance/' + id, callback, statusEvent, data);
},
newComputer: function (data, callback, statusEvent) {
return $(this).slapos('request', 'POST', '/computer', callback, statusEvent, data);
},
getComputer: function (id, callback, statusEvent) {
return $(this).slapos('request', 'GET', '/computer/' + id, callback, statusEvent);
}, },
editComputer: function (id, data, callback, statusEvent) { discovery: function (callback) {
return $(this).slapos('request', 'PUT', '/computer/' + id, callback, statusEvent, data); return this.each(function(){
$.ajax({
url: "http://10.8.2.34:12002/erp5/portal_vifib_rest_api_v1",
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json");
},
success: callback
});
});
}, },
newSoftware: function (computerId, data, callback, statusEvent) { instanceList: function (args) {
return $(this).slapos('request', 'POST', '/computer/' + computerId + '/supply', callback, statusEvent, data); return $(this).slapos('prepareRequest', 'instance_list', args);
}, },
bangComputer: function (id, log, callback, statusEvent) { instanceInfo: function (url, args) {
return $(this).slapos('request', 'POST', '/computer/' + id + '/bang', callback, statusEvent, log); url = decodeURIComponent(url);
$.extend(args, {'url': url});
return $(this).slapos('prepareRequest', 'instance_info', args);
}, },
computerReport: function (id, data, callback, statusEvent) { instanceRequest: function (args) {
return $(this).slapos('request', 'POST', '/computer/' + id + '/report', callback, statusEvent, data); return $(this).slapos('prepareRequest', 'request_instance', args)
} }
}; };
$.fn.slapos = function (method) { $.fn.slapos = function (method) {
......
vifib/index.html
View file @ 7f1b6510
...@@ -16,17 +16,14 @@ ...@@ -16,17 +16,14 @@
</article> </article>
</script> </script>
<script id="service.list" type="text/html"> <script id="instance.list" type="text/html">
<article> <table class="table table-condensed" id="instance-table">
<table class="table table-condensed" id="service.table">
<caption><h2>Instances list</h2></caption> <caption><h2>Instances list</h2></caption>
<tr><th>Title</th><th>Status</th></tr>
</table> </table>
</article>
</script> </script>
<script id="service.list.elem" type="text/html"> <script id="instance.list.elem" type="text/html">
<tr><td><a href="{{ url }}">{{ title }}</a></td><td>{{ status }}</td></tr> <td><a href="{{ url }}">{{ title }}</a></td><td>{{ status }}</td>
</script> </script>
<script id="invoice.list" type="text/html"> <script id="invoice.list" type="text/html">
...@@ -90,7 +87,7 @@ ...@@ -90,7 +87,7 @@
<div class="control-group"> <div class="control-group">
<label class="control-label">Reference</label> <label class="control-label">Reference</label>
<div class="controls"> <div class="controls">
<span class="uneditable-input">{{ }}</span> <span class="uneditable-input">{{ title }}</span>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
...@@ -109,8 +106,8 @@ ...@@ -109,8 +106,8 @@
<label class="control-label">Status</label> <label class="control-label">Status</label>
<div class="controls"> <div class="controls">
<div class="btn-group"> <div class="btn-group">
<button class="btn">Stop</button> <button class="btn" id="stopInstance">Stop</button>
<button class="btn btn-success disabled">Started</button> <button class="btn btn-success disabled" id="startInstance">Started</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -159,7 +156,7 @@ ...@@ -159,7 +156,7 @@
<script id="error" type="text/html"> <script id="error" type="text/html">
<div class="alert alert-{{ state }}"> <div class="alert alert-{{ state }}">
<a class="close" data-dismiss="alert" href="#">×</a> <a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">{{ state }}</h4> <h4 class="alert-heading">{{ state }} - {{ date }}</h4>
{{ message }} {{ message }}
</div> </div>
</script> </script>
...@@ -196,8 +193,8 @@ ...@@ -196,8 +193,8 @@
<li autofocus="autofocus"><a href="#/computers"><i class="icon-list"></i>List all servers</a></li> <li autofocus="autofocus"><a href="#/computers"><i class="icon-list"></i>List all servers</a></li>
<li><a href="#/computer"><i class="icon-plus-sign"></i>Add new server</a></li> <li><a href="#/computer"><i class="icon-plus-sign"></i>Add new server</a></li>
<li class="nav-header">Services</li> <li class="nav-header">Services</li>
<li><a href="#/instances"><i class="icon-list"></i>List all services</a></li> <li><a href="#/instances"><i class="icon-list"></i>List all instances</a></li>
<li><a href="#/instance"><i class="icon-plus-sign"></i>Add new service</a></li> <li><a href="#/instance"><i class="icon-plus-sign"></i>Add new instance</a></li>
<li class="nav-header">Account</li> <li class="nav-header">Account</li>
<li><a href="#/invoices"><i class="icon-inbox"></i>Invoices</a></li> <li><a href="#/invoices"><i class="icon-inbox"></i>Invoices</a></li>
<li><a href="#/settings"><i class="icon-cog"></i>Settings</a></li> <li><a href="#/settings"><i class="icon-cog"></i>Settings</a></li>
......
vifib/static/js/fake.js
View file @ 7f1b6510
...@@ -71,7 +71,7 @@ var inst1 = ...@@ -71,7 +71,7 @@ var inst1 =
var fakeserver = sinon.fakeServer.create(); var fakeserver = sinon.fakeServer.create();
// Get instance // Get instance
/*fakeserver.respondWith("GET", "/instance/200",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst0)]); fakeserver.respondWith("GET", "/instance/200",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst0)]);
fakeserver.respondWith("GET", "/instance/201",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst1)]); fakeserver.respondWith("GET", "/instance/201",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst1)]);
// Get instance FAIL // Get instance FAIL
fakeserver.respondWith("GET", "/instance/408",[408, {"Content-Type":"application/json; charset=utf-8"}, "NOT FOUND"]); fakeserver.respondWith("GET", "/instance/408",[408, {"Content-Type":"application/json; charset=utf-8"}, "NOT FOUND"]);
...@@ -82,4 +82,4 @@ $.ajax = function(url, options){ ...@@ -82,4 +82,4 @@ $.ajax = function(url, options){
var result = tmp(url, options); var result = tmp(url, options);
fakeserver.respond(); fakeserver.respond();
return result; return result;
}*/ };
vifib/static/js/form.js
View file @ 7f1b6510
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
*/ */
(function($) { (function($) {
var routes = { var routes = {
"/instance" : "requestService", "/instance" : "requestInstance",
"/instance/:url" : "showInstance", "/instance/:url" : "showInstance",
"/computers" : "listComputers", "/computers" : "listComputers",
"/instances" : "listInstances", "/instances" : "listInstances",
...@@ -24,10 +24,26 @@ ...@@ -24,10 +24,26 @@
} }
}); });
} }
var getDate = function () {
var today = new Date();
return [today.getFullYear(), today.getMonth(), today.getDay()].join('/')
+ ' ' + [today.getHours(), today.getMinutes(), today.getSeconds()].join(':');
};
var substractLists = function(l1, l2){
var newList = [];
$.each(l2, function(){
if ($.inArray(""+this, l1) == -1) {
newList.push(""+this);
}
});
return newList;
};
var redirect = function(){ var redirect = function(){
$(this).vifib('render', 'auth', { $(this).vifib('render', 'auth', {
'host':'http://192.168.242.64:12002/erp5/web_site_module/hosting/request-access-token', 'host':'http://10.8.2.34:12002/erp5/web_site_module/hosting/request-access-token',
'client_id': 'client', 'client_id': 'client',
'redirect':escape(window.location.href) 'redirect':escape(window.location.href)
}) })
...@@ -53,7 +69,7 @@ ...@@ -53,7 +69,7 @@
var methods = { var methods = {
init: function() { init: function() {
// Initialize slapos in this context // Initialize slapos in this context
$(this).slapos({host: 'http://192.168.242.64:12002/erp5/portal_vifib_rest_api_v1'}); $(this).slapos();
var $this = $(this); var $this = $(this);
// Bind Loading content // Bind Loading content
$("#loading").ajaxStart(function(){ $("#loading").ajaxStart(function(){
...@@ -76,6 +92,10 @@ ...@@ -76,6 +92,10 @@
return location.href.split('#')[0] + "#/instance/" + encodeURIComponent(uri) return location.href.split('#')[0] + "#/instance/" + encodeURIComponent(uri)
}, },
extractInstanceURIFromUrl: function () {
return decodeURIComponent($(this).attr('href').split('/').pop())
},
authenticate: function(data) { authenticate: function(data) {
for (var d in data) { for (var d in data) {
if (data.hasOwnProperty(d)) { if (data.hasOwnProperty(d)) {
...@@ -84,6 +104,19 @@ ...@@ -84,6 +104,19 @@
} }
}, },
refresh: function(method, interval, eventName){
eventName = eventName || 'ajaxStop';
var $this = $(this);
$(this).one(eventName, function(){
var id = setInterval(function(){
method.call($this);
}, interval * 1000);
$.subscribe('urlChange', function(e, d){
clearInterval(id);
})
});
},
showInstance: function (uri) { showInstance: function (uri) {
var statusCode = { var statusCode = {
401: redirect, 401: redirect,
...@@ -91,35 +124,84 @@ ...@@ -91,35 +124,84 @@
404: notFound, 404: notFound,
500: serverError 500: serverError
}; };
var $this = $(this); $(this).slapos('instanceInfo', uri, {
$(this).slapos('instanceInfo', uri, function(infos){ success: function(infos){
$this.vifib('render', 'instance', infos); $(this).vifib('render', 'instance', infos);
}, statusCode); },
statusCode: statusCode
});
},
getCurrentList: function () {
var list = [];
$.each($(this).find('a'), function () {
list.push($(this).vifib('extractInstanceURIFromUrl'));
});
return list;
}, },
listComputers: function(){ listComputers: function(){
$(this).vifib('render', 'server.list'); $(this).vifib('render', 'server.list');
}, },
refreshRowInstance: function(){
return this.each(function(){
var url = $(this).find('a').vifib('extractInstanceURIFromUrl');
$(this).vifib('fillRowInstance', url);
});
},
fillRowInstance: function(url){
return this.each(function(){
$(this).slapos('instanceInfo', url, {
success: function(instance){
$.extend(instance, {'url': methods.genInstanceUrl(url)});
$(this).vifib('render', 'instance.list.elem', instance);
}
});
});
},
refreshListInstance: function () {
var currentList = $(this).vifib('getCurrentList');
$(this).slapos('instanceList', {
success: function (data) {
var $this = $(this);
var newList = substractLists(currentList, data['list']);
var oldList = substractLists(data['list'], currentList);
$.each(newList, function(){
var url = this+"";
var row = $("<tr></tr>").vifib('fillRowInstance', url);
$this.prepend(row);
});
console.log("newList")
console.log(newList)
console.log("oldList")
console.log(oldList)
},
});
},
listInstances: function(){ listInstances: function(){
var $this = $(this);
var statusCode = { var statusCode = {
401: redirect, 401: redirect,
402: payment, 402: payment,
404: notFound, 404: notFound,
500: serverError 500: serverError,
503: serverError
}; };
var $this = $(this); var table = $(this).vifib('render', 'instance.list').find("#instance-table");
$(this).slapos('instanceList', function(data){ table.vifib('refresh', methods.refreshListInstance, 30);
$(this).vifib('render', 'service.list'), $(this).slapos('instanceList', {
success: function(data){
$.each(data['list'], function(){ $.each(data['list'], function(){
var url = this+""; var url = this+"";
$this.vifib('instanceInfo', url, function(instance){ var row = $("<tr></tr>").vifib('fillRowInstance', url);
$.extend(instance, {'url': methods.genInstanceUrl(url)}) row.vifib('refresh', methods.refreshRowInstance, 30);
$this.vifib('renderAppend', 'service.list.elem', 'service.table', instance); table.append(row);
}) });
})}, }, statusCode: statusCode});
statusCode
);
}, },
listInvoices: function(){ listInvoices: function(){
...@@ -127,10 +209,12 @@ ...@@ -127,10 +209,12 @@
}, },
instanceInfo: function (url, callback) { instanceInfo: function (url, callback) {
$(this).slapos('instanceInfo', url, callback); $(this).slapos('instanceInfo', {
success: callback, url: url
});
}, },
requestService: function() { requestInstance: function() {
$(this).vifib('render', 'form.new.instance'); $(this).vifib('render', 'form.new.instance');
var data = {}; var data = {};
$(this).find("form").submit(function(){ $(this).find("form").submit(function(){
...@@ -143,46 +227,59 @@ ...@@ -143,46 +227,59 @@
}, },
requestAsking: function(data){ requestAsking: function(data){
var request = { var statusCode = {
401: redirect,
402: payment,
404: notFound,
500: serverError
};
var instance = {
software_type: "type_provided_by_the_software", software_type: "type_provided_by_the_software",
slave: false, slave: false,
status: "started", status: "started",
parameter: { parameter: {
Custom1: "one string", Custom1: "one string",
Custom2: "one float", Custom2: "one float",
Custom3: ["abc", "def"], Custom3: ["abc", "def"],
}, },
sla: { sla: {
computer_id: "COMP-0", computer_id: "COMP-0",
} }
}; };
var statusCode = { $.extend(instance, data);
401: redirect, var args = {
402: payment, statusCode: statusCode,
404: notFound, data: instance,
500: serverError success: function (response) {
console.log(response);
}
}; };
$.extend(request, data); return this.each(function(){
$(this).slapos('newInstance', request, function(data){ $(this).slapos('instanceRequest', args);
$(this).html(data);}, });
statusCode
);
}, },
popup: function(message, state) { popup: function(message, state) {
state = state || 'error'; state = state || 'error';
return this.each(function(){ return this.each(function(){
$(this).prepend(ich['error']({'message': message, 'state': state}, true)) $(this).prepend(ich['error'](
{'message': message, 'state': state, 'date': getDate()}
, true))
}) })
}, },
render: function(template, data){ render: function(template, data){
$(this).html(ich[template](data, true)); return this.each(function(){
$(this).html(ich[template](data, true));
});
},
renderAppend: function(template, data){
$(this).append(ich[template](data, true));
}, },
renderAppend: function(template, rootId, data){ renderPrepend: function(template, data){
rootId = rootId.replace('.', '\\.'); $(this).prepend(ich[template](data, true));
$(this).find('#'+rootId).append(ich[template](data, true));
} }
}; };
......
vifib/static/js/jquery.slapos.js
View file @ 7f1b6510
...@@ -60,42 +60,51 @@ ...@@ -60,42 +60,51 @@
}; };
}, },
request: function (type, url, authentication, callback, statusCode, data) { request: function (type, authentication, args) {
var statusCode;
var data;
if (args.hasOwnProperty('statusCode')) {
statusCode = args.statusCode || methods.statusDefault();
} else {
statusCode = methods.statusDefault();
}
if (args.hasOwnProperty('data')) {
data = args.data || undefined;
} else {
data = undefined;
}
delete args.data
$.extend(args, {statusCode: statusCode});
return this.each(function () { return this.each(function () {
$.ajax({ var ajaxOptions = {
url: url,
type: type, type: type,
contentType: 'application/json', contentType: 'application/json',
data: JSON.stringify(data), data: JSON.stringify(data),
dataType: 'json', datatype: 'json',
context: $(this), context: $(this),
beforeSend: function (xhr) { beforeSend: function (xhr) {
if ($(this).slapos("access_token") && authentication) { if ($(this).slapos("access_token") && authentication) {
xhr.setRequestHeader("Authorization", $(this).slapos("store", "token_type") + " " + $(this).slapos("access_token")); xhr.setRequestHeader("Authorization", $(this).slapos("store", "token_type") + " " + $(this).slapos("access_token"));
xhr.setRequestHeader("Accept", "application/json"); xhr.setRequestHeader("Accept", "application/json");
} }
}, }
statusCode: statusCode, };
success: callback $.extend(ajaxOptions, args);
}); $.ajax(ajaxOptions);
}); });
}, },
prepareRequest: function (methodName, callback, statusCode, url, data) { prepareRequest: function (methodName, args) {
data = data || undefined;
statusCode = statusCode || methods.statusDefault();
var $this = $(this); var $this = $(this);
return this.each(function(){ return this.each(function(){
$(this).slapos('discovery', function(access){ $(this).slapos('discovery', function(access){
if (access.hasOwnProperty(methodName)) { if (access.hasOwnProperty(methodName)) {
url = url || access[methodName].url; var url = args.url || access[methodName].url;
$.extend(args, {'url': url});
$this.slapos('request', $this.slapos('request',
access[methodName].method, access[methodName].method,
url,
access[methodName].authentication, access[methodName].authentication,
callback, args);
statusCode,
data);
} }
}); });
}) })
...@@ -104,7 +113,7 @@ ...@@ -104,7 +113,7 @@
discovery: function (callback) { discovery: function (callback) {
return this.each(function(){ return this.each(function(){
$.ajax({ $.ajax({
url: "http://192.168.242.64:12002/erp5/portal_vifib_rest_api_v1", url: "http://10.8.2.34:12002/erp5/portal_vifib_rest_api_v1",
dataType: "json", dataType: "json",
beforeSend: function (xhr) { beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json"); xhr.setRequestHeader("Accept", "application/json");
...@@ -114,13 +123,18 @@ ...@@ -114,13 +123,18 @@
}); });
}, },
instanceList: function (callback, statusCode) { instanceList: function (args) {
return $(this).slapos('prepareRequest', 'instance_list', callback, statusCode); return $(this).slapos('prepareRequest', 'instance_list', args);
}, },
instanceInfo: function (url, callback, statusCode) { instanceInfo: function (url, args) {
url = decodeURIComponent(url); url = decodeURIComponent(url);
return $(this).slapos('prepareRequest', 'instance_info', callback, statusCode, url); $.extend(args, {'url': url});
return $(this).slapos('prepareRequest', 'instance_info', args);
},
instanceRequest: function (args) {
return $(this).slapos('prepareRequest', 'request_instance', args)
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7