Project

General

Profile

Download (29.1 KB) Statistics
| Branch: | Revision:
1 95b003ff Origo
<div dojoType="dijit.layout.BorderContainer"
2
     gutters="false"
3
     splitter="true"
4
     style="width:100%;"
5
     >
6
7
	<!-- outer div-->
8
    <div dojoType="dijit.layout.ContentPane" region="center"
9
         style="padding:0; margin:0; border:0; width:45%; height:80vh;">
10
        
11
        <div dojoType="dijit.layout.BorderContainer" style="padding:0; margin:0; border:0; width:100%;">
12
            
13
             <div dojoType="dijit.layout.ContentPane" title="Servers" region="center" id="homeServers" style="overflow:hidden;">
14
                <div id="ServersInfo" style="border-bottom: 1px solid #ddd; padding:8px;">
15
                    <span id="add_system">
16
                        <button class="btn btn-success btn-sm shadow" style="margin-right:10px;" id="new_app_button" onclick="systembuilder.system.create();">Install Stack&hellip;</button> <a href="https://www.origo.io/info/stabiledocs/web/dashboard/new-stack/" rel="help" target="_blank" class="irigo-tooltip">help</a>
17
                        <span style="margin:7px 2px 0 0" class="pull-right">
18
                            <a href="https://www.origo.io/info/stabiledocs/web/dashboard/add-empty-stack/" rel="help" target="_blank" class="irigo-tooltip">help</a>
19
                            <a href="#home" id="home_add_empty" onclick="home.grid.addSystem();" title="Add empty Stack"><img src="/stabile/static/img/icons/server--plus.png" hspace="5"></a>
20 48fcda6b Origo
                            <a href="#home" onclick="home.grid.refresh();home.updateVitals('update'); if (servers.grid.refresh){servers.grid.refresh();}" title="Refresh" class="pull-right float btn" style="position:absolute;right:26px;bottom:14px;z-index:500;margin-left:10px;"><img src="/stabile/static/img/ic_refresh_white_24dp_1x.png"></a>
21 95b003ff Origo
                        </span>
22
23
                    </span>
24
                </div>
25 80e0b3f5 hq
                <div id="systemsGrid" style="height:calc(100% - 50px);margin:0;" ></div>
26 95b003ff Origo
             </div>
27
			 <div dojoType="dijit.layout.ContentPane" title="vitalspane" 
28 8d7785ff Origo
                 splitter="true" region="bottom" id="homeServerVitals"  style="height:220px;">
29 95b003ff Origo
                 <div id="vitals"></div>
30
                 <div id="appstatus" style="padding-top: 5px"></div>
31
                 <div id="appid" style="padding-top: 5px"></div>
32
                 <span id="vitals_system" style="display:none;">
33
                 </span>
34
                 <span id="vitals_server" style="display:none;">
35
                 </span>
36
             </div>
37
        </div><!-- end border cont -->
38
    </div><!-- end left -->
39
40
    <div dojoType="dijit.layout.ContentPane"
41
         region="right"
42
         splitter="true"
43
         style="padding:0; margin:0; border:0; noborder-left: 2px solid #f0f0f0; width:55%; overflow:hidden; height:80vh;"
44
         id="homeContent"
45
    >
46
47
        <ul class="nav nav-pills" id="homeNav">
48
            <li role="presentation" class="active"><a href="#infoContentPane" data-toggle="tab">Info</a></li>
49
            <li role="presentation"><a href="#usageContentPane" data-toggle="tab">Usage</a></li>
50
            <li role="presentation"><a href="#monitoringContentPane" data-toggle="tab" onclick="home.updateMonitoring();">Monitoring</a></li>
51
            <li role="presentation"><a href="#packagesContentPane" data-toggle="tab" onclick="home.updatePackages();">Software</a></li>
52
            <li role="presentation"><a href="#statisticsContentPane" data-toggle="tab" id="statisticsTab" onclick="">Metrics</a></li>
53
        </ul>
54
55
        <div id="homeTabs" class="tab-content" nodojoType="dijit.layout.TabContainer" style="padding:0; overflow: hidden auto;">
56
          <div id="infoContentPane" class="tab-pane active" dojoType="dijit.layout.ContentPane" title="Info" style="padding:10px;">
57
              <div style="float:left; padding-right:6px; margin-top:5px;">
58
                  <a href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/account/" rel="help" target="_blank" class="irigo-tooltip">help</a>
59
              </div>
60
              <h4 id="info_header" style="margin-top:4px;"></h4>
61
              <div class="well well-sm">
62
                  <div id="info_name" style="display:none;">
63
                      <table style="width:100%;">
64
                          <tr>
65
                              <td width="150"><b>Name:</b></td>
66
                              <td><span data-dojo-type="dijit.InlineEditBox" id="info_name_field" data-dojo-props="editor:'dijit.form.TextBox'"
67
                                width="100%" title="Name" onChange="home.grid.updateSystem('name');"></span></td>
68
                          </tr>
69
                      </table>
70
                  </div>
71
                  <div id="info_server" style="display:none;">
72
                      <table style="width:100%;">
73
                          <tr>
74
                              <td width="150"><b>Belongs to stack:</b></td>
75
                              <td>
76
                                  <span id="info_system_field"></span>
77
                                  <button id="updateSystemButton" onclick="home.grid.updateSystem('system');" class="btn btn-info btn-xs" type="button">
78
                                      update
79
                                  </button>
80
                              </td>
81
                          </tr>
82
                      </table>
83
                  </div>
84
                  <div id="info_contacts" style="display:none;">
85
                      <table style="width:100%;">
86
                        <tr>
87
                          <td width="150"><b class="info-system">Owner name:</b><b class="info-account">Name:</b></td>
88
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_fullname_field" data-dojo-props="editor:'dijit.form.TextBox'"
89
                                    width="100%" title="Name" onChange="home.grid.updateSystem('fullname');"></span></td>
90
                        </tr>
91
                        <tr>
92
                          <td><b class="info-system">Owner email:</b><b class="info-account">Email:</b></td>
93
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_email_field" data-dojo-props="editor:'dijit.form.TextBox'"
94
                                    width="100%" title="Name" onChange="home.grid.updateSystem('email');"></span></td>
95
                        </tr>
96
                        <tr>
97
                          <td><b class="info-system">Owner phone:</b><b class="info-account">Phone:</b></td>
98
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_phone_field" data-dojo-props="editor:'dijit.form.TextBox'"
99
                                    width="100%" title="Name" onChange="home.grid.updateSystem('phone');"></span></td>
100
                        </tr>
101
                        <tr>
102
                          <td><b>Technician name:</b></td>
103
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_opfullname_field" data-dojo-props="editor:'dijit.form.TextBox'"
104
                                    width="100%" title="Name" onChange="home.grid.updateSystem('opfullname');"></span></td>
105
                        </tr>
106
                        <tr>
107
                          <td><b>Technician email:</b></td>
108
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_opemail_field" data-dojo-props="editor:'dijit.form.TextBox'"
109
                                    width="100%" title="Name" onChange="home.grid.updateSystem('opemail');"></span></td>
110
                        </tr>
111
                        <tr>
112
                          <td><b>Technician phone:</b></td>
113
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_opphone_field" data-dojo-props="editor:'dijit.form.TextBox'"
114
                                    width="100%" title="Name" onChange="home.grid.updateSystem('opphone');"></span></td>
115
                        </tr>
116
                        <tr>
117
                          <td><b>Alert email:</b></td>
118
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_alertemail_field" data-dojo-props="editor:'dijit.form.TextBox'" width="100%" title="Name" onChange="home.grid.updateSystem('alertemail');"></span>
119
                              <a id="irigo-alertemail-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/alert-email" rel="help" target="_blank" class="irigo-tooltip">help</a>
120
                          </td>
121
                        </tr>
122 45cc3024 hq
                          <tr id="info_dnsdomain_tr" class="info-account">
123
                              <td><b>Default DNS domain:</b></td>
124
                              <td><span width="100%" style="vertical-align: middle;" title="Default DNS domain" id="info_dnsdomain"></span>
125
                                  <a id="irigo-alertemail-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/dns-domain" rel="help" target="_blank" class="irigo-tooltip">help</a>
126
                              </td>
127
                          </tr>
128 95b003ff Origo
                          <tr id="info_resettoaccountinfo_tr">
129
                              <td colspan="2" align="right">
130
                              <a href="#home" id="info_resettoaccountinfo_button" onClick="home.showResetInfo();">Reset stacks and server contacts...</a> <a id="irigo-link-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/resetcontacts" rel="help" target="_blank" class="irigo-tooltip">help</a>
131
                              </td>
132
                          </tr>
133
                      </table>
134
                  </div>
135
              </div>
136
              <h4 style="margin-top:4px;" class="info-security">Account Security</h4>
137
              <div class="well well-sm info-security" id="info_security" style="display:none;">
138
                  <div>
139
                      <table style="width:100%;">
140
                          <tr>
141
                              <td width="150"><b>Allow login from:</b></td>
142
                              <td><span data-dojo-type="dijit.InlineEditBox" id="info_allowfrom_field" data-dojo-props="editor:'dijit.form.TextBox'"
143
                                        width="100%"onChange="home.grid.updateSystem('allowfrom');"></span>
144
                                  <a id="irigo-allowloginfrom-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/allowloginfrom" rel="help" target="_blank" class="irigo-tooltip">help</a>
145
                              </td>
146
                          </tr>
147
                          <tr>
148
                              <td><b>Last login:</b></td>
149
                              <td><span data-dojo-type="dijit.form.TextBox" id="info_lastlogin_field" readonly
150
                                        width="100%" style="border:0;"></span></td>
151
                          </tr>
152
                          <tr>
153
                              <td><b>Last login from:</b></td>
154
                              <td><span data-dojo-type="dijit.form.TextBox" id="info_lastloginfrom_field" readonly
155
                                        width="100%" style="border:0;"></span></td>
156
                          </tr>
157
                          <tr>
158
                              <td><b>API access:</b></td>
159
                              <td><span data-dojo-type="dijit.form.CheckBox" id="info_allowinternalapi_field"
160
                                        style="border:0;" onChange="home.grid.updateSystem('allowinternalapi');"></span></td>
161
                          </tr>
162
                          <tr id="info_changepasswordinfo_tr">
163
                              <td colspan="2" align="right">
164
                                  <a href="#home" id="info_changepasswordinfo_button" onClick="home.showChangePassword();">Change password...</a>
165
                              </td>
166
                          </tr>
167
                      </table>
168
                  </div>
169
              </div>
170
              <h4 style="margin-top:4px;" class="info-engine">Engine <a id="irigo-engine-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/engine" rel="help" target="_blank" class="irigo-tooltip">help</a></h4>
171
              <div class="well well-sm info-engine" id="info_engine">
172
                  <table style="width:100%;">
173
                      <tr id="info_enginename_tr">
174
                          <td width="150"><b>Engine name:</b></td>
175
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_enginename_field" data-dojo-props="editor:'dijit.form.TextBox'"
176 48fcda6b Origo
                                    onChange="home.updateEngine('updateenginename');"></span>
177 d3d1a2d4 Origo
                              <span style="float:right; display:block"><a href="api" target="_blank" class="pull-right" title="Click to load the Stabile API Explorer">API Explorer...</a></span>
178 95b003ff Origo
                          </td>
179
                      </tr>
180
                      <tr id="info_linkengine_tr" style="height:30px;">
181
                          <td width="150"><b>Linking:</b></td>
182
                          <td>
183
                              <span class="awesome" id="info_linkengine_button">
184
                                  Link engine...
185
                              </span>
186
                          </td>
187
                      </tr>
188
                      <tr id="info_downloadmasters_tr">
189
                          <td width="150"><b>Download masters:</b></td>
190
                          <td><span data-dojo-type="dijit.form.CheckBox" id="info_downloadmasters_field"
191
                                    style="border:0;" onChange="home.grid.updateSystem('downloadmasters');"></span>
192 2a63870a Christian Orellana
                              <button id="checkfordownloads" style="display:none;" class="btn btn-xs btn-info" onclick="home.saveServerValue(IRIGO.user.username, 'downloadmasters', 2);" >check now</button>
193 95b003ff Origo
                              <a id="irigo-downloadmasters-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/downloadmasters" rel="help" target="_blank" class="irigo-tooltip">help</a>
194
                          </td>
195
                      </tr>
196
                      <tr id="info_externaliprange_tr">
197
                          <td width="150"><b>Mapped IP-range:</b></td>
198
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_externaliprangestart_field" data-dojo-props="editor:'dijit.form.TextBox'"
199
                                    onChange="home.grid.updateSystem('externaliprangestart');"></span>
200
                              &#8594;
201
                              <span data-dojo-type="dijit.InlineEditBox" id="info_externaliprangeend_field" data-dojo-props="editor:'dijit.form.TextBox'"
202
                                  onChange="home.grid.updateSystem('externaliprangeend');"></span>
203
                              <a id="irigo-externaliprangestart-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/ip-ranges" rel="help" target="_blank" class="irigo-tooltip">help</a>
204
                          </td>
205
                      </tr>
206
                      <tr id="info_proxyiprange_tr">
207
                          <td width="150"><b>Proxied IP-range:</b></td>
208
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_proxyiprangestart_field" data-dojo-props="editor:'dijit.form.TextBox'"
209
                                    onChange="home.grid.updateSystem('proxyiprangestart');"></span>
210
                              &#8594;
211
                              <span data-dojo-type="dijit.InlineEditBox" id="info_proxyiprangeend_field" data-dojo-props="editor:'dijit.form.TextBox'"
212
                                  onChange="home.grid.updateSystem('proxyiprangeend');"></span>
213
                              GW:
214
                              <span data-dojo-type="dijit.InlineEditBox" id="info_proxygw_field" data-dojo-props="editor:'dijit.form.TextBox'"
215
                                  onChange="home.grid.updateSystem('proxygw');"></span>
216
                              <a id="irigo-proxyiprange-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/ip-ranges" rel="help" target="_blank" class="irigo-tooltip">help</a>
217
                          </td>
218
                      </tr>
219
                      <tr id="info_disablesnat_tr">
220
                          <td width="150"><b>Disable SNAT:</b></td>
221
                          <td><span data-dojo-type="dijit.form.CheckBox" id="info_disablesnat_field"
222
                                    style="border:0;" onChange="home.grid.updateSystem('disablesnat');"></span>
223
                              <a id="irigo-disablesnat-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/source-nat" rel="help" target="_blank" class="irigo-tooltip">help</a></td>
224
                      </tr>
225
                      <tr id="info_imagespartition_tr">
226
                          <td width="150"><b>Images storage:</b></td>
227
                          <td><select id="info_imagesdevice_field" style="display:inline-block; margin-bottom: 4px; vertical-align: bottom;" dojoType="dijit.form.Select"
228
                                      store="stores.imagesDevices" sortbylabel="false" onChange='home.toggleImagesButtons(this);'></select>
229
230 e9af6c24 Origo
                              <button class="btn btn-xs btn-info" id="info_imagesdevice_button" onclick="grid.actionConfirmDialog('info_imagesdevice_field','setimagesdevice','Primary images storage','use this storage device as primary images device?','Engine', 'home.deviceHandler');return false;" style="margin-top: -3px;">Use this device</button>
231 95b003ff Origo
232
                              <button class="btn btn-xs btn-info" id="info_imageszfs_button" onclick="grid.actionConfirmDialog('info_imagesdevice_field','formatimagesdevice','Images ZFS storage','configure this storage device as primary images device? This will erase all current data on the device!!','Engine', 'home.deviceHandler');return false;" style="margin-top: -3px;">Format this device</button>
233
234
                              <a id="irigo-imagespartition-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/storage" rel="help" target="_blank" class="irigo-tooltip">help</a></td>
235
                      </tr>
236
                      <tr id="info_backuppartition_tr">
237
                          <td width="150"><b>Backup storage:</b></td>
238
                          <td><select id="info_backupdevice_field" style="display:inline-block; margin-bottom: 4px; vertical-align: bottom;" dojoType="dijit.form.Select"
239
                                      store="stores.backupDevices" sortbylabel="false" onChange='home.toggleBackupButtons(this);'></select>
240
241
                              <button class="btn btn-xs btn-info" id="info_backupdevice_button" onclick="grid.actionConfirmDialog('info_backupdevice_field','setbackupdevice','Backup storage','use this storage device as backup device?','Engine', 'home.deviceHandler');return false;" style="margin-top: -3px; display:none;">Use this device</button>
242
243
                              <button class="btn btn-xs btn-info" id="info_backupzfs_button" onclick="grid.actionConfirmDialog('info_backupdevice_field','formatbackupdevice','Backup storage','configure this storage device as backup device? This will erase all current data on the device!!','Engine', 'home.deviceHandler');return false;" style="margin-top: -3px; display:none;">Format this device</button>
244
245
                              <a id="irigo-backuppartition-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/storage" rel="help" target="_blank" class="irigo-tooltip">help</a></td>
246
                      </tr>
247
                      <tr id="info_ioreadlimits_tr">
248
                          <td width="150"><b>Disk read default limits:</b></td>
249
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_vmreadlimit_field" data-dojo-props="editor:'dijit.form.TextBox'"
250
                                    onChange="home.grid.updateSystem('vmreadlimit');"></span> MB/s,
251
                              <span data-dojo-type="dijit.InlineEditBox" id="info_vmiopsreadlimit_field" data-dojo-props="editor:'dijit.form.TextBox'"
252
                                  onChange="home.grid.updateSystem('vmiopsreadlimit');"></span> IOPS
253
                              <a id="irigo-ioreadlimits-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/io-limits" rel="help" target="_blank" class="irigo-tooltip">help</a>
254
                          </td>
255
                      </tr>
256
                      <tr id="info_iowritelimits_tr">
257
                          <td width="150"><b>Disk write default limits:</b></td>
258
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_vmwritelimit_field" data-dojo-props="editor:'dijit.form.TextBox'"
259
                                    onChange="home.grid.updateSystem('vmwritelimit');"></span> MB/s,
260
                              <span data-dojo-type="dijit.InlineEditBox" id="info_vmiopswritelimit_field" data-dojo-props="editor:'dijit.form.TextBox'"
261
                                  onChange="home.grid.updateSystem('vmiopswritelimit');"></span> IOPS
262
                              <a id="irigo-iowritelimits-tooltip" href="https://www.origo.io/info/stabiledocs/web/dashboard/info-tab/io-limits" rel="help" target="_blank" class="irigo-tooltip">help</a>
263
                          </td>
264
                      </tr>
265
                  </table>
266
               </div>
267
268
            <h4 style="margin-top:4px;" class="info-services">Services</h4>
269 d24d9a01 hq
            <div class="well well-sm info-services" style="overflow-y:auto;" id="info_rtfs">
270 95b003ff Origo
              <div style="display:none;" id="info_recovery">
271
                  <table style="width:100%;">
272 c899e439 Origo
                      <tr style="height: 32px; vertical-align: top;">
273
                          <td><b>Auto-start:</b></td>
274
                          <td><span data-dojo-type="dijit.form.CheckBox" id="info_autostart_field"
275
                                    style="border:0;" onChange="home.grid.updateSystem('autostart');"></span></td>
276
                      </tr>
277 95b003ff Origo
                      <tr>
278
                          <td width="150"><b>Services provided:</b></td>
279
                          <td><span data-dojo-type="dijit.InlineEditBox" id="info_services_field" data-dojo-props="editor:'dijit.form.TextBox'"
280
                                    width="100%" title="Name" onChange="home.grid.updateSystem('services');"></span></td>
281
                      </tr>
282
                  </table>
283
                  <div style="margin-top: 10px; margin-left: 2px;"><b>Suggested recovery procedures for failed services:</b></div>
284
                  <div id="recovery" style="margin-left: 2px; width: 100%;"></div>
285
              </div>
286
              <div id="info_notes" style="display:none;">
287
                   <div style="margin-top: 10px; margin-left: 2px;"><b>Notes:</b></div>
288
                   <div id="notes" style="margin-left: 2px; width: 100%;"></div>
289
               </div>
290
            </div>
291
          </div>
292
          <div id="usageContentPane" class="tab-pane" style="padding:4px;" dojoType="dijit.layout.ContentPane" title="Usage">
293
              <div>
294
                  <select id="usage_select" dojoType="dijit.form.Select" store="stores.usageMonths">
295
                      <script type="dojo/method" event="onChange" args="value">
296
                          (function(){
297
                          home.currentUsageMonth = value;
298
                          home.updateUsage();
299
                          $("#usagecsv")[0].href = home.usageCSV();;
300
                          })();
301
                      </script>
302
                  </select>
303
                  <a href="#home" onclick="home.updateUsage();" title="refresh"><img src="/stabile/static/img/icons/arrow-circle.png" style="margin-top:4px; margin-left:5px;"></a>
304
                  <span style="vertical-align:sub;">(<a id="usagecsv" href="/stabile/users?action=usage&format=csv" target="_blank" title="CSV">csv</a>)</span>
305
                  <span class="alert alert-info pull-right" style="display:none; margin: 0 0 10px 0; padding:5px;" id="total_cost"></span>
306
              </div>
307
              <div id="usage" style="font-size:90%; vertical-align: middle; margin: 5px 0;
308
             padding: 4px; overflow: auto; clear: both;"></div>
309
             <div class="alert alert-warning" id="cost_warning" style="display:none;margin-top:30px;">Please note that usage listed above is your raw ressource usage. Actual cost is based on  this, but may also include app rebates or license costs.</div>
310
          </div>
311
          <div id="monitoringContentPane" class="tab-pane" dojoType="dijit.layout.ContentPane" title="Monitoring">
312
            <div id="monitoringGrid" style="padding:0; margin-bottom:2px; width:100%;"></div>
313
            <span id="missingmonitors"></span>
314
            <span style="text-align:right; padding:2px; height:32px; float:right;">
315
                <button onclick="home.monitoringGrid.newItem()" style="display:none;" id="new_monitor_button" class="btn btn-success btn-xs">New monitor&hellip;</button>
316
                <a href="#home" onClick="home.monitoringGrid.refresh();" title="refresh monitors"><img src="/stabile/static/img/icons/arrow-circle.png" hspace="5"></a>
317
            </span>
318
            <div style="padding:4px;">
319
                <div style="margin:2px 4px 0 4px;">
320
                    <span style="font-weight:400;">Show uptime for:</span>
321
                    <select id="uptime_select" dojoType="dijit.form.Select" store="stores.uptimeMonths" style="margin-top:-5px;">
322
                        <script type="dojo/method" event="onChange" args="value">
323
                            (function(){
324
                                home.currentUptimeMonth = value;
325
                                home.updateUptime();
326
                            })();
327
                        </script>
328
                    </select>
329
                    <button class="btn btn-xs btn-info" onClick="home.updateUptime();" style="margin-top: -3px;">Show</button>
330
                </div>
331
                <div id="uptime" style="font-size:90%; color:#666666; noheight: 220px;
332
                 width:100%; padding: 6px; overflow-y: auto; overflow-x: hidden;
333
                 border-bottom: solid 1px #E8E8E8; border-top: solid 1px #E8E8E8;">
334
                 </div>
335
            </div>
336
          </div>
337
          <div id="packagesContentPane" class="tab-pane" dojoType="dijit.layout.ContentPane" title="Software">
338
          <!-- div style="padding:0;" -->
339
                  <h5 style="padding:4px 4px 8px 4px;">
340
                      Operating Systems <span style="font-weight:normal;">(<a id="oslistcsv_link" href="/stabile/systems/?action=register&format=csv" target="_blank">csv</a>)</span>
341
                      <span class="pull-right">
342
                          <button class="btn btn-info btn-xs" onClick="home.updatePackages();" style="display:none;">Show</button>
343
                          <button class="btn btn-info btn-xs" id="clear_packages" onClick="home.clearPackages();">Clear</button>
344
                          <button class="btn btn-info btn-xs" id="load_packages" onClick="home.loadPackages();" style="display:none;">Rescan server(s)&hellip;</button>
345
                      </span>
346
                  </h5>
347
                  <div id="oslist" nostyle="color:#666666; vertical-align: middle; " style="margin: 5px 0; font-size:90%; padding: 4px; border-top: solid 1px #E8E8E8; border-bottom: solid 1px #E8E8E8;"></div>
348
              <!-- /div -->
349
              <h5 style="padding:4px 4px 0 4px;">Installed software <span style="font-weight:normal;">(<a id="packlistcsv_link" href="/stabile/systems/?action=packages&format=csv"  target="_blank">csv</a>)</span>
350
              </h5>
351
              <div id="packages"></div>
352
          </div>
353
          <div id="statisticsContentPane" class="tab-pane" dojoType="dijit.layout.ContentPane" title="Metrics" style="padding-top:12px;">
354
            <div style="float:right; padding-right:12px;">
355
                <a href="https://www.origo.io/info/stabiledocs/web/dashboard/metrics" rel="help" target="_blank" class="irigo-tooltip">help</a>
356
            </div>
357
            <div id="refresh_charts" style="float:right;">
358
                <a href="#" onclick="home.updateApexCharts();"><img src="/stabile/static/img/icons/arrow-circle.png" alt="update" style="margin: 0 5px 0 12px;"></a>
359
            </div>
360
            <div style="margin:5px; margin-bottom:0" class="clearfix">
361
                <div style="margin-bottom:5px; margin-top: 20px; text-align: center;" id="statsInfo">
362
                    <span class="label label-info" style="font-size: 15px; font-weight: 300;">Please select a server or an app to show metrics</span>
363
                </div>
364
                <div id="slider" style="display:none;">
365
                    <div id="rules" style="width:100%"></div>
366
                </div>
367
            </div>
368
            <div id="chartsPanel" style="margin:20px 0 0 0; padding:0; display: none; height:700px; overflow:hidden;">
369
                <div class="chart" style="width:100%; margin: 6px 2px;" id="cpuLoad">
370
                  <div id="chartCpuLoad" style="width:100%;"></div>
371
                </div>
372
                <div class="chart" style="width:100%;margin:2px;" id="networkActivity">
373
                    <div id="chartNetworkActivity" style="width:100%;"></div>
374
                </div>
375
                <div class="chart" style="width:100%;margin:2px;" id="IO">
376
                  <div id="chartIO" style="width:100%;"></div>
377
                </div>
378
            </div>
379
        </div>
380
      </div>
381
    </div>
382
</div><!-- end bordercontainer-->