xen-orchestra/app/modules/pool/view.jade

//- TODO: lots of stuff.
.grid-sm
  .panel.panel-default
    p.page-title
      i.xo-icon-pool
      |  {{pool.name_label}}
.grid-sm
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-cogs
      |  General
      span.quick-edit(tooltip="Edit General settings", ng-click="poolSettings.$show()")
        i.fa.fa-edit.fa-fw
    .panel-body
      form(editable-form="", name="poolSettings", onbeforesave="savePool($data)")
        dl.dl-horizontal
          dt Name
          dd
            span(editable-text="pool.name_label", e-name="name_label", e-form="poolSettings")
              | {{pool.name_label}}
          dt Description
          dd
            span(editable-text="pool.name_description", e-name="name_description", e-form="poolSettings")
              | {{pool.name_description}}
          dt Master
          dd(ng-repeat="master in [pool.master] | resolve")
            a(ui-sref="hosts_view({id: master.id})")
              | {{master.name_label}}
          dt Tags
          dd
            xo-tag(ng-if = 'pool', object = 'pool')
          dt(ng-if="pool.default_SR") Default SR
          dd(ng-if="pool.default_SR", ng-init="default_SR = (pool.default_SR | resolve)")
            a(ui-sref="SRs_view({id: default_SR.id})") {{default_SR.name_label}}
          dt HA
          dd
            | {{pool.HA_enabled}}
          dt UUID
          dd {{pool.UUID}}
        .btn-form(ng-show="poolSettings.$visible")
          p.center
            button.btn.btn-default(type="button", ng-disabled="poolSettings.$waiting", ng-click="poolSettings.$cancel()")
              i.fa.fa-times
              | Cancel
            |  
            button.btn.btn-primary(type="submit", ng-disabled="poolSettings.$waiting")
              i.fa.fa-save
              | Save
  .panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-stats
      |  Stats
    .row
      .col-xs-6
        p.stat-name Hosts:
        p.center.big-stat {{hosts | count}}
      .col-xs-6
        p.stat-name Running:
        p.center.big-stat {{runningHosts | count}}

//- Action panel
.grid-sm
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-flash
      |  Actions
    .panel-body
      .grid-cell.text-center
        .grid
          .grid-cell.btn-group
            button.btn(tooltip="Add SR", tooltip-placement="top", type="button", style="width: 90%", disabled)
              i.xo-icon-sr.fa-2x.fa-fw
          .grid-cell.btn-group
            button.btn(tooltip="Add VM", tooltip-placement="top", type="button", style="width: 90%", xo-sref="VMs_new({container: pool.id})")
              i.xo-icon-vm.fa-2x.fa-fw
          .grid-cell.btn-group
            button.btn(tooltip="Patch the pool", tooltip-placement="top", type="button", style="width: 90%", ng-file-select = "patchPool($files, pool.id)")
              i.fa.fa-file-code-o.fa-2x.fa-fw
          .grid-cell.btn-group
            button.btn(tooltip="Add Host", tooltip-placement="top", type="button", style="width: 90%")
              i.xo-icon-host.fa-2x.fa-fw
          .grid-cell.btn-group
            button.btn(tooltip="Disconnect", tooltip-placement="top", type="button", style="width: 90%; margin-bottom: 0.5em")
              i.fa.fa-unlink.fa-2x.fa-fw

//- Hosts panel
.grid-sm
  .panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-host
      |  Hosts
    .panel-body
      table.table.table-hover.table-condensed
        th Name
        th.col-md-4 Description
        th.col-md-6 Memory
        tr(xo-sref="hosts_view({id: host.id})", ng-repeat="host in hosts | map | orderBy:natural('name_label') track by host.id")
          td.oneliner {{host.name_label}}
          td.oneliner {{host.name_description}}
          td
            .progress-condensed
              .progress-bar(role="progressbar", aria-valuemin="0", aria-valuenow="{{host.memory.usage}}", aria-valuemax="{{host.memory.size}}", style="width: {{[host.memory.usage, host.memory.size] | percentage}}")

//- Shared SR panel
.grid-sm
  .panel.panel-default
    .panel-heading.panel-title
      i.xo-icon-sr
      |  Shared SR
    .panel-body
      table.table.table-hover
        th Name
        th Description
        th Type
        th Size
        th.col-md-4 Physical/Allocated usage
        tr(
          ng-repeat="SR in srs | map | orderBy:natural('name_label') track by SR.id"
          xo-sref="SRs_view({id: SR.id})"
        )
          td.oneliner {{SR.name_label}}
          td.oneliner {{SR.name_description}}
          td {{SR.SR_type}}
          td {{SR.size | bytesToSize}}
          td
            .progress-condensed
              .progress-bar(role="progressbar", aria-valuemin="0", aria-valuenow="{{SR.usage}}", aria-valuemax="{{SR.size}}", style="width: {{[SR.physical_usage, SR.size] | percentage}}", tooltip="Physical usage: {{[SR.physical_usage, SR.size] | percentage}}")
              .progress-bar.progress-bar-info(role="progressbar", aria-valuemin="0", aria-valuenow="{{SR.physical_usage}}", aria-valuemax="{{SR.size}}", style="width: {{[(SR.usage-SR.physical_usage), SR.size] | percentage}}", tooltip="Allocated: {{[(SR.usage), SR.size] | percentage}}")

//- Logs panel
.grid-sm
  .panel.panel-default
    .panel-heading.panel-title
      i.fa.fa-comments
      |  Logs
      span.quick-edit(ng-if="pool.messages | isNotEmpty", tooltip="Remove all logs", xo-click="deleteAllLog()")
        i.fa.fa-trash-o.fa-fw
    .panel-body
      p.center(ng-if="pool.messages | isEmpty") No recent logs
      table.table.table-hover(ng-if="pool.messages | isNotEmpty")
        th Date
        th Name
        tr(ng-repeat="message in pool.messages | map | orderBy:'-time' | slice:(5*(currentLogPage-1)):(5*currentLogPage) track by message.id")
          td {{message.time*1e3 | date:"medium"}}
          td
            | {{message.name}}
            span.pull-right.btn-group.quick-buttons
              a(xo-click="deleteLog(message.id)")
                i.fa.fa-trash-o.fa-lg(tooltip="Remove this log entry")
      .center(ng-if = '(pool.messages | count) > 5 || currentLogPage > 1')
        pagination(boundary-links="true", total-items="pool.messages | count", ng-model="$parent.currentLogPage", items-per-page="5", max-size="5", class="pagination-sm", previous-text="<", next-text=">", first-text="<<", last-text=">>")