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