github.com/hernad/nomad@v1.6.112/ui/app/templates/csi/plugins/plugin/index.hbs (about) 1 {{! 2 Copyright (c) HashiCorp, Inc. 3 SPDX-License-Identifier: MPL-2.0 4 ~}} 5 6 {{page-title "CSI Plugin " this.model.plainId}} 7 <PluginSubnav @plugin={{this.model}} /> 8 <section class="section"> 9 <h1 class="title" data-test-title>{{this.model.plainId}}</h1> 10 11 <div class="boxed-section is-small"> 12 <div class="boxed-section-body inline-definitions"> 13 <span class="label">Plugin Details</span> 14 {{#if this.model.controllerRequired}} 15 <span class="pair" data-test-plugin-controller-health> 16 <span class="term">Controller Health</span> 17 {{format-percentage this.model.controllersHealthy total=this.model.controllersExpected}} 18 ({{this.model.controllersHealthy}}/{{this.model.controllersExpected}}) 19 </span> 20 {{/if}} 21 <span class="pair" data-test-plugin-node-health> 22 <span class="term">Node Health</span> 23 {{format-percentage this.model.nodesHealthy total=this.model.nodesExpected}} 24 ({{this.model.nodesHealthy}}/{{this.model.nodesExpected}}) 25 </span> 26 <span class="pair" data-test-plugin-provider> 27 <span class="term">Provider</span> 28 {{this.model.provider}} 29 </span> 30 </div> 31 </div> 32 33 <div class="columns"> 34 {{#if this.model.controllerRequired}} 35 <div class="column" data-test-plugin-controller-availability> 36 <div class="boxed-section"> 37 <div class="boxed-section-head is-hollow">Controller Health</div> 38 <div class="boxed-section-body"> 39 <div class="columns is-centered is-bottom-aligned"> 40 <div class="column is-half"> 41 <GaugeChart 42 @label="Availability" 43 @value={{this.model.controllersHealthy}} 44 @total={{this.model.controllersExpected}} /> 45 </div> 46 <div class="column"> 47 <div class="metric"> 48 <h3 class="label">Available</h3> 49 <p class="value">{{this.model.controllersHealthy}}</p> 50 </div> 51 </div> 52 <div class="column"> 53 <div class="metric"> 54 <h3 class="label">Expected</h3> 55 <p class="value">{{this.model.controllersExpected}}</p> 56 </div> 57 </div> 58 </div> 59 </div> 60 </div> 61 </div> 62 {{/if}} 63 <div class="column"> 64 <div class="boxed-section" data-test-plugin-node-availability> 65 <div class="boxed-section-head is-hollow">Node Health</div> 66 <div class="boxed-section-body"> 67 <div class="columns is-centered is-bottom-aligned {{unless this.model.controllerRequired "is-max-half"}}"> 68 <div class="column is-half"> 69 <GaugeChart 70 @label="Availability" 71 @value={{this.model.nodesHealthy}} 72 @total={{this.model.nodesExpected}} /> 73 </div> 74 <div class="column"> 75 <div class="metric"> 76 <h3 class="label">Available</h3> 77 <p class="value">{{this.model.nodesHealthy}}</p> 78 </div> 79 </div> 80 <div class="column"> 81 <div class="metric"> 82 <h3 class="label">Expected</h3> 83 <p class="value">{{this.model.nodesExpected}}</p> 84 </div> 85 </div> 86 </div> 87 </div> 88 </div> 89 </div> 90 </div> 91 92 {{#if this.model.controllerRequired}} 93 <div class="boxed-section" data-test-controller-allocations> 94 <div class="boxed-section-head"> 95 Controller Allocations 96 </div> 97 <div class="boxed-section-body {{if this.model.controllers "is-full-bleed"}}"> 98 {{#if this.model.controllers}} 99 <ListTable 100 @source={{take 10 this.sortedControllers}} 101 @class="with-foot" as |t|> 102 <t.head> 103 <th class="is-narrow"></th> 104 <td>ID</td> 105 <th>Created</th> 106 <th>Modified</th> 107 <th>Health</th> 108 <th>Client</th> 109 <th>Job</th> 110 <th>Version</th> 111 <th>Volumes</th> 112 <th>CPU</th> 113 <th>Memory</th> 114 </t.head> 115 <t.body @key="model.allocID" as |row|> 116 <PluginAllocationRow 117 @data-test-controller-allocation={{row.model.allocID}} 118 @pluginAllocation={{row.model}} /> 119 </t.body> 120 </ListTable> 121 {{else}} 122 <div class="empty-message" data-test-empty-controller-allocations> 123 <h3 class="empty-message-headline" data-test-empty-controller-allocations-headline>No Controller Plugin Allocations</h3> 124 <p class="empty-message-body" data-test-empty-controller-allocations-message>No allocations are providing controller plugin service.</p> 125 </div> 126 {{/if}} 127 </div> 128 {{#if this.model.controllers}} 129 <div class="boxed-section-foot"> 130 <p class="pull-right"> 131 <LinkTo 132 @route="csi.plugins.plugin.allocations" 133 @model={{this.model}} 134 @query={{hash qpType=(qp-serialize (array "controller"))}} 135 data-test-go-to-controller-allocations> 136 View all {{this.model.controllers.length}} Controller {{pluralize "allocation" this.model.controllers.length}} 137 </LinkTo> 138 </p> 139 </div> 140 {{/if}} 141 </div> 142 {{/if}} 143 144 <div class="boxed-section"> 145 <div class="boxed-section-head"> 146 Node Allocations 147 </div> 148 <div class="boxed-section-body {{if this.model.nodes "is-full-bleed"}}"> 149 {{#if this.model.nodes}} 150 <ListTable 151 @source={{take 10 this.sortedNodes}} 152 @class="with-foot" as |t|> 153 <t.head> 154 <th class="is-narrow"></th> 155 <td>ID</td> 156 <th>Created</th> 157 <th>Modified</th> 158 <th>Health</th> 159 <th>Client</th> 160 <th>Job</th> 161 <th>Version</th> 162 <th>Volumes</th> 163 <th>CPU</th> 164 <th>Memory</th> 165 </t.head> 166 <t.body @key="model.allocID" as |row|> 167 <PluginAllocationRow 168 @data-test-node-allocation={{row.model.allocID}} 169 @pluginAllocation={{row.model}} /> 170 </t.body> 171 </ListTable> 172 {{else}} 173 <div class="empty-message" data-test-empty-node-allocations> 174 <h3 class="empty-message-headline" data-test-empty-node-allocations-headline>No Node Plugin Allocations</h3> 175 <p class="empty-message-body" data-test-empty-node-allocations-message>No allocations are providing node plugin service.</p> 176 </div> 177 {{/if}} 178 </div> 179 {{#if this.model.nodes}} 180 <div class="boxed-section-foot"> 181 <p class="pull-right"> 182 <LinkTo 183 @route="csi.plugins.plugin.allocations" 184 @model={{this.model}} 185 @query={{hash qpType=(qp-serialize (array "node"))}} 186 data-test-go-to-node-allocations> 187 View all {{this.model.nodes.length}} Node {{pluralize "allocation" this.model.nodes.length}} 188 </LinkTo> 189 </p> 190 </div> 191 {{/if}} 192 </div> 193 </section>