github.com/aminovpavel/nomad@v0.11.8/ui/app/templates/csi/plugins/plugin/index.hbs (about) 1 {{title "CSI Plugin " model.plainId}} 2 <div data-test-subnav="plugins" class="tabs is-subnav"> 3 <ul> 4 <li data-test-tab="overview">{{#link-to "csi.plugins.plugin.index" model activeClass="is-active"}}Overview{{/link-to}}</li> 5 <li data-test-tab="allocations">{{#link-to "csi.plugins.plugin.allocations" model activeClass="is-active"}}Allocations{{/link-to}}</li> 6 </ul> 7 </div> 8 <section class="section"> 9 <h1 class="title" data-test-title>{{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 model.controllerRequired}} 15 <span class="pair" data-test-plugin-controller-health> 16 <span class="term">Controller Health</span> 17 {{format-percentage model.controllersHealthy total=model.controllersExpected}} 18 ({{model.controllersHealthy}}/{{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 model.nodesHealthy total=model.nodesExpected}} 24 ({{model.nodesHealthy}}/{{model.nodesExpected}}) 25 </span> 26 <span class="pair" data-test-plugin-provider> 27 <span class="term">Provider</span> 28 {{model.provider}} 29 </span> 30 </div> 31 </div> 32 33 <div class="columns"> 34 {{#if 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 {{gauge-chart 42 label="Availability" 43 value=model.controllersHealthy 44 total=model.controllersExpected}} 45 </div> 46 <div class="column"> 47 <div class="metric"> 48 <h3 class="label">Available</h3> 49 <p class="value">{{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">{{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 model.controllerRequired "is-max-half"}}"> 68 <div class="column is-half"> 69 {{gauge-chart 70 label="Availability" 71 value=model.nodesHealthy 72 total=model.nodesExpected}} 73 </div> 74 <div class="column"> 75 <div class="metric"> 76 <h3 class="label">Available</h3> 77 <p class="value">{{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">{{model.nodesExpected}}</p> 84 </div> 85 </div> 86 </div> 87 </div> 88 </div> 89 </div> 90 </div> 91 92 {{#if 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 model.controllers "is-full-bleed"}}"> 98 {{#if model.controllers}} 99 {{#list-table 100 source=(take 10 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 {{plugin-allocation-row 117 data-test-controller-allocation=row.model.allocID 118 pluginAllocation=row.model}} 119 {{/t.body}} 120 {{/list-table}} 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 model.controllers}} 129 <div class="boxed-section-foot"> 130 <p class="pull-right"> 131 {{#link-to "csi.plugins.plugin.allocations" 132 model 133 data-test-go-to-controller-allocations 134 (query-params qpType=(qp-serialize (array "controller")))}} 135 View all {{model.controllers.length}} Controller {{pluralize "allocation" model.controllers.length}} 136 {{/link-to}} 137 </p> 138 </div> 139 {{/if}} 140 </div> 141 {{/if}} 142 143 <div class="boxed-section"> 144 <div class="boxed-section-head"> 145 Node Allocations 146 </div> 147 <div class="boxed-section-body {{if model.nodes "is-full-bleed"}}"> 148 {{#if model.nodes}} 149 {{#list-table 150 source=(take 10 sortedNodes) 151 class="with-foot" as |t|}} 152 {{#t.head}} 153 <th class="is-narrow"></th> 154 <td>ID</td> 155 <th>Created</th> 156 <th>Modified</th> 157 <th>Health</th> 158 <th>Client</th> 159 <th>Job</th> 160 <th>Version</th> 161 <th>Volumes</th> 162 <th>CPU</th> 163 <th>Memory</th> 164 {{/t.head}} 165 {{#t.body key="model.allocID" as |row|}} 166 {{plugin-allocation-row 167 data-test-node-allocation=row.model.allocID 168 pluginAllocation=row.model}} 169 {{/t.body}} 170 {{/list-table}} 171 {{else}} 172 <div class="empty-message" data-test-empty-node-allocations> 173 <h3 class="empty-message-headline" data-test-empty-node-allocations-headline>No Node Plugin Allocations</h3> 174 <p class="empty-message-body" data-test-empty-node-allocations-message>No allocations are providing node plugin service.</p> 175 </div> 176 {{/if}} 177 </div> 178 {{#if model.nodes}} 179 <div class="boxed-section-foot"> 180 <p class="pull-right"> 181 {{#link-to "csi.plugins.plugin.allocations" 182 model 183 data-test-go-to-node-allocations 184 (query-params qpType=(qp-serialize (array "node")))}} 185 View all {{model.nodes.length}} Node {{pluralize "allocation" model.nodes.length}} 186 {{/link-to}} 187 </p> 188 </div> 189 {{/if}} 190 </div> 191 </section>