Statistics
| Branch: | Tag: | Revision:

root / ui / templates / list.html @ a4531705

History | View | Annotate | Download (7.6 kB)

1
<div id="machinesview" class="list">
2
    <div id="spinner"></div>
3
    <div class="actions">
4
        <a id="action-start">Start</a>
5
        <a id="action-reboot">Reboot</a>
6
        <a id="action-shutdown">Shutdown</a>
7
        <br />
8
        <a id="action-destroy">Destroy</a>
9
        <br />
10
        <a id="action-details">Show Details</a>
11
        <a id="action-group">Add to group</a>
12
        <br />
13
        <a id="action-band">Out of band</a>
14
        <br />
15
        <a id="action-attach">Attach disk</a>
16
        <a id="action-detach">Detach disk</a>
17
        <br />
18
        <a id="action-connect">Connect to network</a>
19
        <a id="action-disconnect">Disconnect from net</a>
20
    </div>
21
    <table class="list-template" style="display: none">
22
        <tr id="machine-template">
23
            <td><input type="checkbox" id="node-id" /></td>
24
            <td><span class="imagetag"></span><img class="list-logo" src="" width="16" height="16" /></td>
25
            <td><a class="name"><span class="name">node.name</span></a></td> 
26
            <td><a class="ip"><span class="public">node.public_ip</span></a></td>
27
            <td>group</td>
28
            <td class="status">Running</td>
29
        </tr>        
30
    </table>
31
    <table class="list-running" style="display: none">
32
        <thead> 
33
            <tr> 
34
                <th id="selection" class="select-running">
35
                    <input type="checkbox"/>
36
                    <div class="expand-icon"></div>
37
                    <ul style="display: none">
38
                        <li><a class="select-all" href="#">all</a></li>
39
                        <li><a class="select-none" href="#">none</a></li>
40
                        <li><a class="select-group" href="#">group</a></li>
41
                    </ul>            
42
                </th>
43
                <th id="os">OS</th> 
44
                <th id="name">Name</th> 
45
                <th id="ip">IP</th> 
46
                <th id="group">Group</th>
47
                <th id="status">Status</th> 
48
            </tr>
49
        </thead> 
50
        <tbody class="running"></tbody>
51
    </table>
52
    <div id="mini" class="seperator"></div>
53
    <table class="list-terminated" style="display: none">
54
        <thead> 
55
            <tr> 
56
                <th id="selection" class="select-terminated">
57
                    <input type="checkbox"/>
58
                    <div class="expand-icon"></div>
59
                    <ul style="display: none">
60
                        <li><a class="select-all" href="#">all</a></li>
61
                        <li><a class="select-none" href="#">none</a></li>
62
                        <li><a class="select-group" href="#">group</a></li>
63
                    </ul> 
64
                </th>
65
                <th id="os">OS</th> 
66
                <th id="name">Name</th> 
67
                <th id="ip">IP</th> 
68
                <th id="group">Group</th>
69
                <th id="status">Status</th> 
70
            </tr>  
71
        </thead> 
72
        <tbody class="terminated"></tbody>
73
    </table>
74
</div>
75

    
76

    
77
<script>
78
// select/deselect all from checkbox widget of table headers
79
$("table thead tr th#selection :checkbox").live('change', function() {
80
    // select/deselect running or terminated?
81
    var state = $(this).parent().attr("class").replace('select-','');
82
    if ( $(this).is(":checked") ) {
83
        $("." + state + " :checkbox").attr("checked", true);
84
    }
85
    else {
86
        $("." + state + " :checkbox").attr("checked", false);
87
    }
88
        updateActions();
89
});
90

91
// select all/none from drop down menu
92
$("table thead tr th#selection ul li a").live('click', function() {
93
    // find the state of the machines
94
    var state = $(this).closest("th#selection").attr("class").replace('select-','list-');
95
    // all or none?
96
    var all = ($(this).attr("class") == "select-all");
97
    // toggle checkboxes
98
    $("." + state + " :checkbox").attr("checked", all);
99
    // update actions
100
        updateActions();
101
});
102

103
// select group from drop down menu
104
$("table thead tr th#selection ul li a.select-group").live('click', function() {
105
    // find the state of the machines
106
    var state = $(this).closest("th#selection").attr("class").replace('select-','');
107
    $("." + state + " :checkbox").attr("checked", true);
108
        updateActions();
109
});
110

111
// menu toggle, running menu
112
$("table.list-running thead tr th#selection div.expand-icon").live('click', function () {
113
        $("table.list-running thead tr th#selection ul").slideToggle('medium');
114
    return false;
115
});
116

117
$("table.list-running thead tr th#selection ul").live('click', function () {
118
        $("table.list-running thead tr th#selection ul").slideToggle('medium');
119
    return false;
120
});
121

122
// menu toggle, terminated menu
123
$("table.list-terminated thead tr th#selection div.expand-icon").live('click', function () {
124
        $("table.list-terminated thead tr th#selection ul").slideToggle('medium');
125
    return false;
126
});
127

128
$("table.list-terminated thead tr th#selection ul").live('click', function () {
129
        $("table.list-terminated thead tr th#selection ul").slideToggle('medium');
130
    return false;
131
});
132

133
var actions = { 'reboot':                ['ACTIVE', 'REBOOT', 'multiple'],
134
                                'shutdown':                ['ACTIVE', 'REBOOT', 'multiple'],
135
                                'connect':                ['ACTIVE', ],
136
                                'disconnect':        ['ACTIVE', 'network'],
137
                                'band':                        ['ACTIVE', 'REBOOT'],
138
                                'details':                ['ACTIVE', 'REBOOT', 'STOPPED'],
139
                                'start':                 ['STOPPED', 'multiple'],
140
                                'destroy':                ['ACTIVE', 'STOPPED', 'REBOOT', 'multiple'],
141
                                'group':                ['ACTIVE', 'STOPPED', 'REBOOT','multiple'],
142
                           };
143

144
// on checkbox click, update the actions
145
$("tbody input[type='checkbox']").live('change', function() { updateActions(); });
146

147
function updateActions() {
148
        var states = [];
149
        var on = [];
150
        var checked = $("table tbody input[type='checkbox']:checked").toArray();
151
        
152
        // disable all actions to begin with
153
        for (action in actions) {
154
                $("#action-" + action).removeClass('enabled');
155
        }
156

157
        // are there multiple machines selected?
158
        if (checked.length>1)
159
                states[0] = 'multiple';
160
        
161
        // check the states of selected machines
162
        checked.forEach(function(checkbox) {
163
                states[states.length] = checkbox.className;
164
                var ip = $("#" + checkbox.id.replace('input-','') + ".ip span.public").text();
165
                if (ip.replace('undefined','').length)
166
                        states[states.length] = 'network';
167
        });
168

169
        // decide which actions should be enabled
170
        for (a in actions) {
171
                var enabled = false;
172
                for (s in states) {
173
                        if (actions[a].indexOf(states[s]) != -1 ) {
174
                                enabled = true;
175
                        } else {
176
                                enabled = false;
177
                                break;
178
                        }
179
                }
180
                if (enabled)
181
                        on[on.length]=a;
182
        }
183
        // enable those actions
184
        for (action in on) {
185
                $("#action-" + on[action]).addClass('enabled');
186
        }
187
}
188

189
// destroy action
190
$("a.enabled#action-destroy").live('click', function() {
191
        var checked = $("tbody input[type='checkbox']:checked").toArray();        
192
        for (c in checked) {
193
                $.ajax({
194
                        url: '/api/v1.0/servers/' + checked[c].id.replace('input-',''),
195
                        type: "DELETE",
196
                        //async: false,
197
                        dataType: "json",
198
                        success: function() {}
199
                });
200
        }
201
});
202

203
// reboot action
204
$("a.enabled#action-reboot").live('click', function() {
205
        var checked = $("tbody input[type='checkbox']:checked").toArray();        
206
        for (c in checked) {
207
                $.ajax({
208
                        url: '/api/v1.0/servers/' + checked[c].id.replace('input-','') + '/action',
209
                        type: "POST",
210
                        data: {
211
                                "reboot": '{"type" : "HARD"}'
212
                                },
213
                        //async: false,
214
                        dataType: "json",
215
                        success: function() {}
216
                });
217
        }
218
});
219

220
// shutdown action. Not implemented by rackspace API atm
221
$("a.enabled#action-shutdown").live('click', function() {
222
        var checked = $("tbody input[type='checkbox']:checked").toArray();        
223
        for (c in checked) {
224
                $.ajax({
225
                        url: '/api/v1.0/servers/' + checked[c].id.replace('input-','') + '/action',
226
                        type: "POST",
227
                        data: {
228
                                "shutdown": '{"timeout" : "5"}'
229
                                },
230
                        //async: false,
231
                        dataType: "json",
232
                        success: function() {}
233
                });
234
        }
235
});
236

    
237
</script>