1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>biruda</title>
<link rel="stylesheet" href="/web/jquery-ui.css"/>
<script src="/web/jquery.js"></script>
<script src="/web/jquery-ui.js"></script>
<script>
$( function( ) {
$( "#tabs" ).tabs({
cache: false,
beforeLoad: function( event, ui ) {
event.preventDefault( );
return false;
}
});
var tabs = $( "#tabs" ).tabs( );
tabs.delegate( 'span.ui-icon-close', 'click', function( ) {
var panelId = $( this ).closest( "li" ).remove( ).attr( 'aria-controls' );
$( '#' + panelId ).remove( );
tabs.tabs( 'refresh' );
});
tabs.find( ".ui-tabs-nav" ).sortable( {
axis: "x",
stop: function( ) {
var tabs = $( "#tabs" ).tabs( );
tabs.tabs( "refresh" );
}
});
});
$(document).ready( function( ) {
refresh_status( );
});
function refresh_status( ) {
$.get( "/status", { } )
.done( function( data ) {
var html;
if( data == '' ) {
html = "<p>Loading..</p>";
} else {
html = "<table><tr><th>worker</th><th>status</th><th>action</th></tr>\n";
var lines = data.split( '\n' );
$.each( lines, function( ) {
var fields = this.split( ' ' );
var type = fields[0];
var name = fields[1];
var status = fields[2];
if( type == "worker" ) {
var start_button = "<button id=\"start_" + name + "\">Start</button><script>$( \"#start_" + name + "\" ).button( );<\/script>";
var stop_button = "<button id=\"stop_" + name + "\">Stop</button><script>$( \"#stop_" + name + "\" ).button( );<\/script>";
var details_button = "<button id=\"details_" + name + "\">Details</button><script>$( \"#details_" + name + "\" ).button( );<\/script>";
var buttons = start_button + stop_button + details_button;
html += "<tr><td>" + name + "</td><td>" + status + "</td><td>" + buttons + "</td></tr>\n";
if( status == "running" ) {
html += '<script>$( "#start_' + name + '" ).button( "option", "disabled", true );<\/script>\n';
}
if( status == "stopped" ) {
html += '<script>$( "#stop_' + name + '" ).button( "option", "disabled", true );<\/script>\n';
}
html += '<script>$( "#details_' + name + '" ).click( function( ) { showWorkerTab( "' + name + '" ); } );<\/script>\n';
}
});
html += "</table>\n";
}
$( '#tabs-1' ).html( html );
}).fail( function( ) {
$( '#tabs-1' ).html( "<p>Couldn't load status of biruda. Check if biruda is running and the webserver is enabled.</p>" )
});
}
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
function showWorkerTab( worker ) {
var label = worker;
var id = "tab-worker-" + worker;
var tabs = $( "#tabs" ).tabs( );
if( $( "#" + id ).length ) {
tabs.tabs( "option", "active", $( "#" + id ).index( ) - 1 );
return;
}
var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
var tabContentHtml = "worker details of worker '" + worker + "'";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
tabs.tabs( "option", "active", $( "#" + id ).index( ) - 1 );
}
var refreshId = setInterval( refresh_status, 5000 );
</script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Status</a></li>
</ul>
<div id="tabs-1">
<p>.. loading status ..</p>
</div>
</div>
</body>
</html>
|
