[UI] add tab for monthly costs per cluster (#796)

* add tab for monthly costs per cluster
* sync run_local and update version number
* lowering resources
* some Makefile polishing and updated admin docs on UI
* extend admin docs on UI
* add api-service manifest for operator
* set min limits in UI to default min limits of operator
* reflect new UI helm charts in docs
* make cluster name label configurable
This commit is contained in:
Felix Kunde
2020-02-19 12:58:24 +01:00
committed by GitHub
parent aea9e9bd33
commit d5660f65bb
17 changed files with 257 additions and 86 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "postgres-operator-ui",
"version": "1.0.0",
"version": "1.3.0",
"description": "PostgreSQL Operator UI",
"main": "src/app.js",
"config": {
+8 -8
View File
@@ -408,7 +408,7 @@ new
ref='cpuLimit'
type='number'
placeholder='{ cpu.state.limit.initialValue }'
min='1'
min='250'
required
value='{ cpu.state.limit.state }'
onchange='{ cpu.state.limit.edit }'
@@ -434,7 +434,7 @@ new
onkeyup='{ memory.state.request.edit }'
)
.input-group-addon
.input-units Gi
.input-units Mi
.input-group
.input-group-addon.resource-type Limit
@@ -442,14 +442,14 @@ new
ref='memoryLimit'
type='number'
placeholder='{ memory.state.limit.initialValue }'
min='1'
min='250'
required
value='{ memory.state.limit.state }'
onchange='{ memory.state.limit.edit }'
onkeyup='{ memory.state.limit.edit }'
)
.input-group-addon
.input-units Gi
.input-units Mi
.col-lg-3
help-general(config='{ opts.config }')
@@ -519,10 +519,10 @@ new
resources:
requests:
cpu: {{ cpu.state.request.state }}m
memory: {{ memory.state.request.state }}Gi
memory: {{ memory.state.request.state }}Mi
limits:
cpu: {{ cpu.state.limit.state }}m
memory: {{ memory.state.limit.state }}Gi{{#if restoring}}
memory: {{ memory.state.limit.state }}Mi{{#if restoring}}
clone:
cluster: "{{ backup.state.name.state }}"
@@ -786,8 +786,8 @@ new
return instance
}
this.cpu = DynamicResource({ request: 100, limit: 1000 })
this.memory = DynamicResource({ request: 1, limit: 1 })
this.cpu = DynamicResource({ request: 100, limit: 500 })
this.memory = DynamicResource({ request: 100, limit: 500 })
this.backup = DynamicSet({
type: () => 'empty',
+3
View File
@@ -76,6 +76,9 @@ postgresql
.alert.alert-danger(if='{ progress.requestStatus !== "OK" }') Create request failed
.alert.alert-success(if='{ progress.requestStatus === "OK" }') Create request successful ({ new Date(progress.createdTimestamp).toLocaleString() })
.alert.alert-info(if='{ !progress.postgresql }') PostgreSQL cluster manifest pending
.alert.alert-success(if='{ progress.postgresql }') PostgreSQL cluster manifest created
.alert.alert-info(if='{ !progress.statefulSet }') StatefulSet pending
.alert.alert-success(if='{ progress.statefulSet }') StatefulSet created
+62 -17
View File
@@ -45,12 +45,14 @@ postgresqls
thead
tr
th(style='width: 120px') Team
th(style='width: 130px') Namespace
th Name
th(style='width: 50px') Pods
th(style='width: 140px') CPU
th(style='width: 130px') Memory
th(style='width: 100px') Size
th(style='width: 130px') Namespace
th Name
th(style='width: 120px') Cost/Month
th(stlye='width: 120px')
tbody
tr(
@@ -58,19 +60,21 @@ postgresqls
hidden='{ !namespaced_name.toLowerCase().includes(filter.state.toLowerCase()) }'
)
td { team }
td { nodes }
td { cpu } / { cpu_limit }
td { memory } / { memory_limit }
td { volume_size }
td(style='white-space: pre')
| { namespace }
td
a(
href='/#/status/{ cluster_path(this) }'
)
| { name }
td { nodes }
td { cpu } / { cpu_limit }
td { memory } / { memory_limit }
td { volume_size }
td { calcCosts(nodes, cpu, memory, volume_size) }$
td
.btn-group.pull-right(
aria-label='Cluster { qname } actions'
@@ -124,12 +128,14 @@ postgresqls
thead
tr
th(style='width: 120px') Team
th(style='width: 130px') Namespace
th Name
th(style='width: 50px') Pods
th(style='width: 140px') CPU
th(style='width: 130px') Memory
th(style='width: 100px') Size
th(style='width: 130px') Namespace
th Name
th(style='width: 120px') Cost/Month
th(stlye='width: 120px')
tbody
tr(
@@ -137,20 +143,20 @@ postgresqls
hidden='{ !namespaced_name.toLowerCase().includes(filter.state.toLowerCase()) }'
)
td { team }
td { nodes }
td { cpu } / { cpu_limit }
td { memory } / { memory_limit }
td { volume_size }
td(style='white-space: pre')
| { namespace }
td
a(
href='/#/status/{ cluster_path(this) }'
)
| { name }
td { nodes }
td { cpu } / { cpu_limit }
td { memory } / { memory_limit }
td { volume_size }
td { calcCosts(nodes, cpu, memory, volume_size) }$
td
.btn-group.pull-right(
aria-label='Cluster { qname } actions'
@@ -223,6 +229,45 @@ postgresqls
+ '/' + encodeURI(cluster.name)
)
const calcCosts = this.calcCosts = (nodes, cpu, memory, disk) => {
costs = nodes * (toCores(cpu) * opts.config.cost_core + toMemory(memory) * opts.config.cost_memory + toDisk(disk) * opts.config.cost_ebs)
return costs.toFixed(2)
}
const toDisk = this.toDisk = value => {
if(value.endsWith("Gi")) {
value = value.substring(0, value.length-2)
value = Number(value)
return value
}
return value
}
const toMemory = this.toMemory = value => {
if (value.endsWith("Mi")) {
value = value.substring(0, value.length-2)
value = Number(value) / 1000.
return value
}
else if(value.endsWith("Gi")) {
value = value.substring(0, value.length-2)
value = Number(value)
return value
}
return value
}
const toCores = this.toCores = value => {
if (value.endsWith("m")) {
value = value.substring(0, value.length-1)
value = Number(value) / 1000.
return value
}
return value
}
this.on('mount', () =>
jQuery
.get('/postgresqls')