Skip to content

Commit

Permalink
Disk and Network usage chart changed to Progress Bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@mareklibra
mareklibra committed Mar 2, 2016
1 parent 1d565af commit 0acf51d
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 30 deletions.
4 changes: 4 additions & 0 deletions src/globaldata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,9 @@ export var GLOBAL = {
latestHostVMSList: {}, // latest parsed&successful VDSM's getAllVmStats() result
latestEngineVmsList: {}, // latest parsed&successful engine VMS list
vmUsage: {}, // historical usage statistics, see addVmUsage()
vmUsageMax: {
disk: 0,
net: 0
},
hosts: {} // map host-id : host
}
6 changes: 6 additions & 0 deletions src/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,9 @@ export function pruneArray (ar) {
debugMsg('pruneArray(): starting length: ' + ar.length + ', resulting length: ' + result.length)
return result
}

export function computePercent (val, max) {
var f = (max > 0) ? (val / max) : (0)
f = f.toFixed(4)
return f * 100.0
}
83 changes: 57 additions & 26 deletions src/hostvms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {CONFIG} from './constants'
import {GLOBAL} from './globaldata'

import {downloadConsole, forceoff, shutdown, renderVmDetailActual, guestIPsToHtml, vmStatusToHtml} from './vmdetail'
import {debugMsg, normalizePercentage, spawnVdsm, parseVdsmJson, printError, goTo, getActualTimeStamp, registerBtnOnClickListener, pruneArray, formatHumanReadableSecsToTime} from './helpers'
import {debugMsg, normalizePercentage, spawnVdsm, parseVdsmJson, printError, goTo, getActualTimeStamp, registerBtnOnClickListener, pruneArray, formatHumanReadableSecsToTime, computePercent} from './helpers'

var vdsmDataVmsList = '' // might be partial output from the VDSM process TODO: risk of data overlapping
function vdsmOutput (data) {
Expand All @@ -34,11 +34,11 @@ function getAllVmStatsSuccess () {
}

function renderHostVms (vmsFull) {
// the 'vmsFull' is parsed json result of getAllVmStats()
// the 'vmsFull' is parsed json result of getAllVmStats()
if (vmsFull.hasOwnProperty('items') && vmsFull.items.length > 0) {
var vms = []

// prepare data
// prepare data
var timestamp = getActualTimeStamp()
vmsFull.items.forEach(function translate (srcVm) {
var vm = _getVmDetails(srcVm)
Expand All @@ -48,18 +48,20 @@ function renderHostVms (vmsFull) {
var diskWrite = getVmDeviceRate(srcVm, 'disks', 'writeRate')
var netRx = getVmDeviceRate(srcVm, 'network', 'rxRate')
var netTx = getVmDeviceRate(srcVm, 'network', 'txRate')
addVmUsage(vm.id, vm.vcpuCount, timestamp, parseFloat(vm.cpuUser), parseFloat(vm.cpuSys), parseFloat(vm.memUsage),
diskRead, diskWrite, netRx, netTx)

var lastUsageRecord = addVmUsage(vm.id, vm.vcpuCount, timestamp, parseFloat(vm.cpuUser),
parseFloat(vm.cpuSys), parseFloat(vm.memUsage), diskRead, diskWrite, netRx, netTx)
appendVmUsage(vm, lastUsageRecord)
})

// render vms list from template
// render vms list from template
var data = {units: vms}
var template = $('#vms-list-templ').html()
var html = Mustache.to_html(template, data)
$('#virtual-machines-list').html(html)
$('#virtual-machines-novm-message').hide()

// register button event listeners
// register button event listeners
registerBtnOnClickListener('btn-download-console-', downloadConsole)
registerBtnOnClickListener('btn-forceoff-vm-', forceoff)
registerBtnOnClickListener('btn-shutdown-vm-', shutdown)
Expand Down Expand Up @@ -91,6 +93,19 @@ export function onVmClick (vmId) { // show vm detail
}

// --- vms-screen usage charts ------------------------------------------
// var diskMax = 0
// var netMax = 0
function computeUsageMaxs (lastRecord) {
/* $.each(GLOBAL.vmUsage, function (key, usageRecords) {
var last = usageRecords[usageRecords.length - 1]
diskMax = Math.max(last.diskRead, last.diskWrite, diskMax)
netMax = Math.max(last.netRx, last.netTx, netMax)
}) */
GLOBAL.vmUsageMax.disk = Math.max(lastRecord.diskRead, lastRecord.diskWrite, GLOBAL.vmUsageMax.disk)
GLOBAL.vmUsageMax.net = Math.max(lastRecord.netRx, lastRecord.netTx, GLOBAL.vmUsageMax.net)
debugMsg('Max diskMax=' + GLOBAL.vmUsageMax.disk + ', netMax=' + GLOBAL.vmUsageMax.net)
}

function addVmUsage (vmId, vcpuCount, timestamp, cpuUser, cpuSys, mem, diskRead, diskWrite, netRx, netTx) {
var record = {
timestamp: timestamp,
Expand All @@ -112,6 +127,10 @@ function addVmUsage (vmId, vcpuCount, timestamp, cpuUser, cpuSys, mem, diskRead,
GLOBAL.vmUsage[vmId] = pruneArray(GLOBAL.vmUsage[vmId])
}
GLOBAL.vmUsage[vmId].push(record)

computeUsageMaxs(record)

return record
}

function getUsageElementId (device, vmId) {
Expand Down Expand Up @@ -145,7 +164,7 @@ function refreshMemoryChart (chartDivId, usageRecord) {
var labels = [used + '%']
refreshDonutChart(chartDivId, labels, [['Free', free], ['Used', used]], [['available', 'used']])
}

/*
function refreshDiskIOChart (chartDivId, usageRecord, diskMax) {
var r = usageRecord.diskRead
var w = usageRecord.diskWrite
Expand All @@ -159,7 +178,7 @@ function refreshNetworkIOChart (chartDivId, usageRecord, netMax) {
refreshDoubleBarChart(chartDivId, 'Net MB/s', 'Rx', r, 'Tx', w, netMax)
}

*/
function refreshDonutChart (chartDivId, labels, columns, groups) {
var chartConfig = $().c3ChartDefaults().getDefaultDonutConfig()
chartConfig.bindto = chartDivId
Expand All @@ -178,15 +197,15 @@ function refreshDonutChart (chartDivId, labels, columns, groups) {

c3.generate(chartConfig)

// add labels
// add labels
var donutChartTitle = d3.select(chartDivId).select('text.c3-chart-arcs-title')
donutChartTitle.text('')
donutChartTitle.insert('tspan').text(labels[0]).classed('donut-title-small-pf', true).attr('dy', 0).attr('x', 0)
if (labels.length > 1) {
donutChartTitle.insert('tspan').text(labels[1]).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0)
}
}

/*
function refreshDoubleBarChart (chartElemId, categoryName, leftDescr, leftVal, rightDescr, rightVal, maximum) {
var height = $(chartElemId).attr('chartHeight')
height = height || 100
Expand Down Expand Up @@ -226,38 +245,29 @@ function refreshDoubleBarChart (chartElemId, categoryName, leftDescr, leftVal, r
}
chartConfig.data = {
columns: [
[leftDescr, leftVal],
[rightDescr, rightVal]
[leftDescr, leftVal],
[rightDescr, rightVal]
],
type: 'bar'
}
c3.generate(chartConfig)
}

var diskMax = 0
var netMax = 0
*/
function refreshUsageCharts () {
$.each(GLOBAL.vmUsage, function (key, usageRecords) {
var last = usageRecords[usageRecords.length - 1]
diskMax = Math.max(last.diskRead, last.diskWrite, diskMax)
netMax = Math.max(last.netRx, last.netTx, netMax)
})
debugMsg('Max diskMax=' + diskMax + ', netMax=' + netMax)

$.each(GLOBAL.vmUsage, function (key, usageRecords) {
if (usageRecords.length > 0) {
var last = usageRecords[usageRecords.length - 1]
refreshCpuChart(getUsageElementId('cpu', key), last)
refreshMemoryChart(getUsageElementId('mem', key), last)
refreshDiskIOChart(getUsageElementId('diskio', key), last, diskMax)
refreshNetworkIOChart(getUsageElementId('networkio', key), last, netMax)
// refreshDiskIOChart(getUsageElementId('diskio', key), last, diskMax)
// refreshNetworkIOChart(getUsageElementId('networkio', key), last, netMax)
}
})
}

// ----------------------------------------------------------------------
export function _getVmDetails (src) { // src is one item from parsed getAllVmStats
export function _getVmDetails (src, usageRecord) { // src is one item from parsed getAllVmStats
if (!src) {
return undefined
}
Expand Down Expand Up @@ -293,5 +303,26 @@ export function _getVmDetails (src) { // src is one item from parsed getAllVmSta
kvmEnable: src.kvmEnable,
acpiEnable: src.acpiEnable
}

return vm
}

function appendVmUsage (vm, usageRecord) {
vm['diskUsage'] = {
Read: usageRecord.diskRead,
ReadMax: GLOBAL.vmUsageMax.disk,
ReadPercent: computePercent(usageRecord.diskRead, GLOBAL.vmUsageMax.disk),
Write: usageRecord.diskWrite,
WriteMax: GLOBAL.vmUsageMax.disk,
WritePercent: computePercent(usageRecord.diskWrite, GLOBAL.vmUsageMax.disk)
}

vm['netUsage'] = {
Rx: usageRecord.netRx,
RxMax: GLOBAL.vmUsageMax.net,
RxPercent: computePercent(5, GLOBAL.vmUsageMax.net),
Tx: usageRecord.netTx,
TxMax: GLOBAL.vmUsageMax.net,
TxPercent: computePercent(50, GLOBAL.vmUsageMax.net)
}
}
8 changes: 5 additions & 3 deletions src/vmdetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {VM_STATUS_ICONS, VM_STATUS_ICONS_PATH_PREFIX} from './constants'
import {CONFIG} from './constants'
import {GLOBAL} from './globaldata'

import {printError, spawnVdsm, vdsmFail} from './helpers'
import {printError, spawnVdsm, vdsmFail, debugMsg} from './helpers'
import {_getVmDetails, readVmsList} from './hostvms'

// depends on hostvms.js::latestHostVMSList
Expand All @@ -32,6 +32,7 @@ export function downloadConsole (vmId) {
}

export function shutdown (vmId) {
debugMsg('shutdown of: ' + vmId)
spawnVdsm('shutdown', null, null, shutdownSuccess, vdsmFail, vmId)
}

Expand All @@ -40,6 +41,7 @@ function shutdownSuccess () {
}

export function forceoff (vmId) {
debugMsg('forceoff of: ' + vmId)
spawnVdsm('destroy', null, null, shutdownSuccess, vdsmFail, vmId)
}

Expand All @@ -59,12 +61,12 @@ export function renderVmDetail (vmId) {
return
}

$('#vm-detail-not-available').hide()

var template = $('#vm-detail-templ').html()
var html = Mustache.to_html(template, vm)
$('#vm-detail-content').html(html)

$('#vm-detail-not-available').hide()

renderUsageChartsDetail(vmId)
}

Expand Down
38 changes: 37 additions & 1 deletion static/ovirt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,12 +221,48 @@
<div class="list-view-pf-additional-info-item" style="width: 100px;">
<span id="memUsageChart-{{id}}"></span>
</div>

<div style="width: 200px;margin-right: 20px;">
<div class="progress-description">
<strong>Disk:</strong>
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar" role="progressbar" aria-valuenow="{{diskUsage.Read}}" aria-valuemin="0" aria-valuemax="{{diskUsage.ReadMax}}" style="width: {{diskUsage.ReadPercent}}%;">
<span>Read <small>({{diskUsage.Read}} / {{diskUsage.ReadMax}})</small></span>
</div>
</div>
<div class="progress progress-label-top-right"> <!-- style="margin-bottom: 30px;" -->
<div class="progress-bar" role="progressbar" aria-valuenow="{{diskUsage.Write}}" aria-valuemin="0" aria-valuemax="{{diskUsage.WriteMax}}" style="width: {{diskUsage.WritePercent}}%;line-height:40px;">
<span>Write <small>({{diskUsage.Write}} / {{diskUsage.WriteMax}})</small></span>
</div>
</div>
</div>

<div style="width: 200px;margin-right: 20px;">
<div class="progress-description">
<strong>Network:</strong>
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar" role="progressbar" aria-valuenow="{{netUsage.Rx}}" aria-valuemin="0" aria-valuemax="{{netUsage.RxMax}}" style="width: {{netUsage.RxPercent}}%;">
<span>Rx <small>({{netUsage.Rx}} / {{netUsage.RxMax}})</small></span>
</div>
</div>
<div class="progress progress-label-top-right"> <!-- style="margin-bottom: 30px;" -->
<div class="progress-bar" role="progressbar" aria-valuenow="{{netUsage.Tx}}" aria-valuemin="0" aria-valuemax="{{netUsage.TxMax}}" style="width: {{netUsage.TxPercent}}%;line-height:40px;">
<span>Tx <small>({{netUsage.Tx}} / {{netUsage.TxMax}})</small></span>
</div>
</div>
</div>

<!--
<div class="list-view-pf-additional-info-item" style="width: 220px;">
<span id="diskioUsageChart-{{id}}" chartHeight="100"></span>
</div>
<div class="list-view-pf-additional-info-item" style="width: 220px;">
-->
<!-- <div class="list-view-pf-additional-info-item" style="width: 220px;">
<span id="networkioUsageChart-{{id}}" chartHeight="100"></span>
</div>
-->
</div>
</div>
</div>
Expand Down

0 comments on commit 0acf51d

Please sign in to comment.