dtp-liberty-links/app/views/admin/host/view.pug

extends ../layouts/main
block content

  - var latestReport = stats[stats.length - 1];

  mixin renderCpuStatsGraph (cpu)
    - var totalTime = cpu.user + cpu.nice + cpu.sys + cpu.idle + cpu.irq
    .no-select
      canvas(width="320", height="100", class= {
          'cpu-overload': ((cpu.idle / totalTime) < 0.1),
      }).dtp-cpu-graph
      .dtp-stats-bar
        .dtp-cpu-stat-bar.dtp-cpu-user(style=`width: ${(cpu.user / totalTime) * 100}%;`)= numeral(cpu.user / totalTime).format('0%')
        .dtp-cpu-stat-bar.dtp-cpu-nice(style=`width: ${(cpu.nice / totalTime) * 100}%;`)= numeral(cpu.nice / totalTime).format('0%')
        .dtp-cpu-stat-bar.dtp-cpu-sys(style=`width: ${(cpu.sys / totalTime) * 100}%;`)= numeral(cpu.sys / totalTime).format('0%')
        .dtp-cpu-stat-bar.dtp-cpu-irq(style=`width: ${(cpu.irq / totalTime) * 100}%;`)= numeral(cpu.irq / totalTime).format('0%')
        .dtp-cpu-stat-bar.dtp-cpu-idle(style=`width: ${(cpu.idle / totalTime) * 100}%;`)= numeral(cpu.idle / totalTime).format('0%')
  
  mixin renderStatCell (label, value)
    .dtp-stat-cell.uk-width-auto
      .uk-text-bold= value
      .uk-text-small= label

  .uk-margin
    .uk-overflow-auto
      table.uk-table.uk-table-small.uk-table-divider
        thead
          th Host
          th Status
          th Memory
          th Disk
          th Platform
          th Arch
          th Created
          th Updated
        tbody
          tr
            td
              a(href=`/admin/host/${host._id}`)= host.hostname
            td= host.status
            td= numeral((host.totalmem - host.freemem) / host.totalmem).format('0.00%')
            td= numeral(latestReport.disk.cache.pctUsed / 100.0).format('0.00%')
            td= host.platform
            td= host.arch
            td= moment(host.created).fromNow()
            td= host.updated ? moment(host.updated).fromNow() : 'N/A'

  .dtp-dashboard-cluster.uk-margin
    fieldset
      legend [Processor]
      div(uk-grid).uk-grid-small.uk-flex-between
        each cpu in latestReport.cpus
          div(class="uk-width-1-1 uk-width-auto@m")
            +renderCpuStatsGraph(cpu)
  
  .dtp-dashboard-cluster.uk-margin
    div(uk-grid).uk-flex-between
      div(class="uk-width-1-1 uk-width-auto@m")
        fieldset
          legend [Core Memory]
          .dtp-stats-bar
            .dtp-mem-stat-bar.dtp-mem-used(style=`width: ${(latestReport.memory.active / latestReport.memory.total) * 100}%;`)= numeral(latestReport.memory.active / latestReport.memory.total).format('0%')
            .dtp-mem-stat-bar.dtp-mem-available(style=`width: ${(latestReport.memory.available / latestReport.memory.total) * 100}%;`)= numeral(latestReport.memory.available / latestReport.memory.total).format('0%')
          .uk-margin-small-top            
            div(uk-grid)
              +renderStatCell('total', numeral(latestReport.memory.total).format('0,0.0 b'))
              +renderStatCell('avail.', numeral(latestReport.memory.available).format('0,0.0 b'))
              +renderStatCell('active', numeral(latestReport.memory.active).format('0,0.0 b'))
              +renderStatCell('used', numeral(latestReport.memory.used).format('0,0.0 b'))
              +renderStatCell('free', numeral(latestReport.memory.free).format('0,0.0 b'))

      div(class="uk-width-1-1 uk-width-auto@m")
        fieldset
          legend [Buffers]
          .dtp-stats-bar
            .dtp-mem-stat-bar.dtp-mem-cached(style=`width: ${(latestReport.memory.cached / latestReport.memory.buffcache) * 100}%;`)= numeral(latestReport.memory.cached / latestReport.memory.buffcache).format('0%')
            .dtp-mem-stat-bar.dtp-mem-buffers(style=`width: ${(latestReport.memory.buffers / latestReport.memory.buffcache) * 100}%;`)= numeral(latestReport.memory.buffers / latestReport.memory.buffcache).format('0%')
            .dtp-mem-stat-bar.dtp-mem-slab(style=`width: ${(latestReport.memory.slab / latestReport.memory.buffcache) * 100}%;`)= numeral(latestReport.memory.slab / latestReport.memory.buffcache).format('0%')
          .uk-margin-small-top
            div(uk-grid)
              +renderStatCell('buffers', numeral(latestReport.memory.buffers).format('0,0.0 b'))
              +renderStatCell('cached', numeral(latestReport.memory.cached).format('0,0.0 b'))
              +renderStatCell('slab', numeral(latestReport.memory.slab).format('0,0.0 b'))
              +renderStatCell('buffcache', numeral(latestReport.memory.buffcache).format('0,0.0 b'))

      div(class="uk-width-1-1 uk-width-auto@m")
        fieldset
          legend [Swap]
          .dtp-stats-bar
            .dtp-mem-stat-bar.dtp-mem-used(style=`width: ${(latestReport.memory.swapused / latestReport.memory.swaptotal) * 100}%;`)= numeral(latestReport.memory.swapused / latestReport.memory.swaptotal).format('0%')
            .dtp-mem-stat-bar.dtp-mem-available(style=`width: ${(latestReport.memory.swapfree / latestReport.memory.swaptotal) * 100}%;`)= numeral(latestReport.memory.swapfree / latestReport.memory.swaptotal).format('0%')
          .uk-margin-small-top
            div(uk-grid)
              +renderStatCell('used', numeral(latestReport.memory.swapused).format('0,0.0 b'))
              +renderStatCell('free', numeral(latestReport.memory.swapfree).format('0,0.0 b'))
              +renderStatCell('total', numeral(latestReport.memory.swaptotal).format('0,0.0 b'))
      div(class="uk-width-1-1 uk-width-auto@m")
        fieldset
          legend [Load Avg]
          div(uk-grid)
            +renderStatCell('1 min', latestReport.load[0])
            +renderStatCell('5 min', latestReport.load[1])
            +renderStatCell('15 min', latestReport.load[2])


  .dtp-dashboard-cluster.uk-margin
    fieldset
      legend [Host Cache]
      div(uk-grid).uk-flex-between
        +renderStatCell('objects', numeral(latestReport.cache.itemCount).format('0,0'))
        +renderStatCell('data size', numeral(latestReport.cache.dataSize).format('0,0.00b'))
        +renderStatCell('expire count', numeral(latestReport.cache.expireCount).format('0,0'))
        +renderStatCell('expire size', numeral(latestReport.cache.expireDataSize).format('0,0.00b'))
        +renderStatCell('hits', numeral(latestReport.cache.hitCount).format('0,0'))
        +renderStatCell('hit size', numeral(latestReport.cache.hitDataSize).format('0,0.00b'))
        +renderStatCell('misses', numeral(latestReport.cache.missCount).format('0,0'))
        +renderStatCell('miss size', numeral(latestReport.cache.missDataSize).format('0,0.00b'))

  .dtp-dashboard-cluster.uk-margin
    div(uk-grid).uk-grid-small
      each iface in latestReport.network
        div(class="uk-width-1-1 uk-width-auto@m")
          fieldset 
            legend= `[${iface.iface}]`
            canvas(data-iface= iface.iface, width="300", height="100").dtp-iface-graph

block viewjs

  script(src="/chart.js/chart.min.js")

  script.
    const dtp = window.dtp = window.dtp || { };

    dtp.hostStats = !{JSON.stringify(stats)};

    window.addEventListener('dtp-load-admin', ( ) => {
      dtp.adminApp.prepareGraphData();
      dtp.adminApp.renderCpuGraphs();
      dtp.adminApp.renderNetworkGraphs();
    });