open-nomad/ui/app/templates/csi/plugins/plugin.hbs

{{title "CSI Plugin " model.plainId}}
<section class="section with-headspace">
  <h1 class="title" data-test-title>{{model.plainId}}</h1>

  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Plugin Details</span>
      <span class="pair" data-test-plugin-controller-health>
        <span class="term">Controller Health</span>
        {{format-percentage model.controllersHealthy total=model.controllersExpected}}
        ({{model.controllersHealthy}}/{{model.controllersExpected}})
      </span>
      <span class="pair" data-test-plugin-node-health>
        <span class="term">Node Health</span>
        {{format-percentage model.nodesHealthy total=model.nodesExpected}}
        ({{model.nodesHealthy}}/{{model.nodesExpected}})
      </span>
      <span class="pair" data-test-plugin-provider>
        <span class="term">Provider</span>
        {{model.provider}}
      </span>
    </div>
  </div>

  <div class="columns">
    <div class="column">
      <div class="boxed-section">
        <div class="boxed-section-head is-hollow">Controller Health</div>
        <div class="boxed-section-body">
          <div class="columns is-bottom-aligned">
            <div class="column is-half">
              {{gauge-chart
                label="Availability"
                value=model.controllersHealthy
                total=model.controllersExpected}}
            </div>
            <div class="column">
              <div class="metric">
                <h3 class="label">Available</h3>
                <p class="value">{{model.controllersHealthy}}</p>
              </div>
            </div>
            <div class="column">
              <div class="metric">
                <h3 class="label">Expected</h3>
                <p class="value">{{model.controllersExpected}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="boxed-section">
        <div class="boxed-section-head is-hollow">Node Health</div>
        <div class="boxed-section-body">
          <div class="columns is-bottom-aligned">
            <div class="column is-half">
              {{gauge-chart
                label="Availability"
                value=model.nodesHealthy
                total=model.nodesExpected}}
            </div>
            <div class="column">
              <div class="metric">
                <h3 class="label">Available</h3>
                <p class="value">{{model.nodesHealthy}}</p>
              </div>
            </div>
            <div class="column">
              <div class="metric">
                <h3 class="label">Expected</h3>
                <p class="value">{{model.nodesExpected}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head">
      Controller Allocations
    </div>
    <div class="boxed-section-body {{if model.controllers "is-full-bleed"}}">
      {{#if model.controllers}}
        {{#list-table
          source=sortedControllers
          class="with-foot" as |t|}}
          {{#t.head}}
            <th class="is-narrow"></th>
            <td>ID</td>
            <th>Created</th>
            <th>Modified</th>
            <th>Health</th>
            <th>Client</th>
            <th>Job</th>
            <th>Version</th>
            <th>Volumes</th>
            <th>CPU</th>
            <th>Memory</th>
          {{/t.head}}
          {{#t.body as |row|}}
            {{plugin-allocation-row
              data-test-controller-allocation=row.model.allocID
              pluginAllocation=row.model}}
          {{/t.body}}
        {{/list-table}}
      {{else}}
        <div class="empty-message" data-test-empty-controller-allocations>
          <h3 class="empty-message-headline" data-test-empty-controller-allocations-headline>No Controller Plugin Allocations</h3>
          <p class="empty-message-body" data-test-empty-controller-allocations-message>No allocations are providing controller plugin service.</p>
        </div>
      {{/if}}
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head">
      Node Allocations
    </div>
    <div class="boxed-section-body {{if model.nodes "is-full-bleed"}}">
      {{#if model.nodes}}
        {{#list-table
          source=sortedNodes
          class="with-foot" as |t|}}
          {{#t.head}}
            <th class="is-narrow"></th>
            <td>ID</td>
            <th>Created</th>
            <th>Modified</th>
            <th>Health</th>
            <th>Client</th>
            <th>Job</th>
            <th>Version</th>
            <th>Volumes</th>
            <th>CPU</th>
            <th>Memory</th>
          {{/t.head}}
          {{#t.body as |row|}}
            {{plugin-allocation-row
              data-test-node-allocation=row.model.allocID
              pluginAllocation=row.model}}
          {{/t.body}}
        {{/list-table}}
      {{else}}
        <div class="empty-message" data-test-empty-node-allocations>
          <h3 class="empty-message-headline" data-test-empty-node-allocations-headline>No Node Plugin Allocations</h3>
          <p class="empty-message-body" data-test-empty-node-allocations-message>No allocations are providing node plugin service.</p>
        </div>
      {{/if}}
    </div>
  </div>
</section>