github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/templates/csi/plugins/plugin.hbs (about)

     1  {{title "CSI Plugin " model.plainId}}
     2  <section class="section with-headspace">
     3    <h1 class="title" data-test-title>{{model.plainId}}</h1>
     4  
     5    <div class="boxed-section is-small">
     6      <div class="boxed-section-body inline-definitions">
     7        <span class="label">Plugin Details</span>
     8        <span class="pair" data-test-plugin-controller-health>
     9          <span class="term">Controller Health</span>
    10          {{format-percentage model.controllersHealthy total=model.controllersExpected}}
    11          ({{model.controllersHealthy}}/{{model.controllersExpected}})
    12        </span>
    13        <span class="pair" data-test-plugin-node-health>
    14          <span class="term">Node Health</span>
    15          {{format-percentage model.nodesHealthy total=model.nodesExpected}}
    16          ({{model.nodesHealthy}}/{{model.nodesExpected}})
    17        </span>
    18        <span class="pair" data-test-plugin-provider>
    19          <span class="term">Provider</span>
    20          {{model.provider}}
    21        </span>
    22      </div>
    23    </div>
    24  
    25    <div class="columns">
    26      <div class="column">
    27        <div class="boxed-section">
    28          <div class="boxed-section-head is-hollow">Controller Health</div>
    29          <div class="boxed-section-body">
    30            <div class="columns is-bottom-aligned">
    31              <div class="column is-half">
    32                {{gauge-chart
    33                  label="Availability"
    34                  value=model.controllersHealthy
    35                  total=model.controllersExpected}}
    36              </div>
    37              <div class="column">
    38                <div class="metric">
    39                  <h3 class="label">Available</h3>
    40                  <p class="value">{{model.controllersHealthy}}</p>
    41                </div>
    42              </div>
    43              <div class="column">
    44                <div class="metric">
    45                  <h3 class="label">Expected</h3>
    46                  <p class="value">{{model.controllersExpected}}</p>
    47                </div>
    48              </div>
    49            </div>
    50          </div>
    51        </div>
    52      </div>
    53      <div class="column">
    54        <div class="boxed-section">
    55          <div class="boxed-section-head is-hollow">Node Health</div>
    56          <div class="boxed-section-body">
    57            <div class="columns is-bottom-aligned">
    58              <div class="column is-half">
    59                {{gauge-chart
    60                  label="Availability"
    61                  value=model.nodesHealthy
    62                  total=model.nodesExpected}}
    63              </div>
    64              <div class="column">
    65                <div class="metric">
    66                  <h3 class="label">Available</h3>
    67                  <p class="value">{{model.nodesHealthy}}</p>
    68                </div>
    69              </div>
    70              <div class="column">
    71                <div class="metric">
    72                  <h3 class="label">Expected</h3>
    73                  <p class="value">{{model.nodesExpected}}</p>
    74                </div>
    75              </div>
    76            </div>
    77          </div>
    78        </div>
    79      </div>
    80    </div>
    81  
    82    <div class="boxed-section">
    83      <div class="boxed-section-head">
    84        Controller Allocations
    85      </div>
    86      <div class="boxed-section-body {{if model.controllers "is-full-bleed"}}">
    87        {{#if model.controllers}}
    88          {{#list-table
    89            source=sortedControllers
    90            class="with-foot" as |t|}}
    91            {{#t.head}}
    92              <th class="is-narrow"></th>
    93              <td>ID</td>
    94              <th>Created</th>
    95              <th>Modified</th>
    96              <th>Health</th>
    97              <th>Client</th>
    98              <th>Job</th>
    99              <th>Version</th>
   100              <th>Volumes</th>
   101              <th>CPU</th>
   102              <th>Memory</th>
   103            {{/t.head}}
   104            {{#t.body key="model.allocID" as |row|}}
   105              {{plugin-allocation-row
   106                data-test-controller-allocation=row.model.allocID
   107                pluginAllocation=row.model}}
   108            {{/t.body}}
   109          {{/list-table}}
   110        {{else}}
   111          <div class="empty-message" data-test-empty-controller-allocations>
   112            <h3 class="empty-message-headline" data-test-empty-controller-allocations-headline>No Controller Plugin Allocations</h3>
   113            <p class="empty-message-body" data-test-empty-controller-allocations-message>No allocations are providing controller plugin service.</p>
   114          </div>
   115        {{/if}}
   116      </div>
   117    </div>
   118  
   119    <div class="boxed-section">
   120      <div class="boxed-section-head">
   121        Node Allocations
   122      </div>
   123      <div class="boxed-section-body {{if model.nodes "is-full-bleed"}}">
   124        {{#if model.nodes}}
   125          {{#list-table
   126            source=sortedNodes
   127            class="with-foot" as |t|}}
   128            {{#t.head}}
   129              <th class="is-narrow"></th>
   130              <td>ID</td>
   131              <th>Created</th>
   132              <th>Modified</th>
   133              <th>Health</th>
   134              <th>Client</th>
   135              <th>Job</th>
   136              <th>Version</th>
   137              <th>Volumes</th>
   138              <th>CPU</th>
   139              <th>Memory</th>
   140            {{/t.head}}
   141            {{#t.body key="model.allocID" as |row|}}
   142              {{plugin-allocation-row
   143                data-test-node-allocation=row.model.allocID
   144                pluginAllocation=row.model}}
   145            {{/t.body}}
   146          {{/list-table}}
   147        {{else}}
   148          <div class="empty-message" data-test-empty-node-allocations>
   149            <h3 class="empty-message-headline" data-test-empty-node-allocations-headline>No Node Plugin Allocations</h3>
   150            <p class="empty-message-body" data-test-empty-node-allocations-message>No allocations are providing node plugin service.</p>
   151          </div>
   152        {{/if}}
   153      </div>
   154    </div>
   155  </section>