From f37760e07ff0971ddc763f5146f9fa7610dc4941 Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 12:04:01 -0700 Subject: [PATCH 1/8] Add remaining resources for a project w/limits for new ns rancher/rancher#15522 --- .../cluster/projects/new-ns/template.hbs | 2 ++ .../namespace-quota-row/template.hbs | 7 ++++ .../namespace-resource-quota/component.js | 35 ++++++++++++++++--- .../namespace-resource-quota/template.hbs | 3 +- app/components/workload-row/template.hbs | 12 ++++--- translations/en-us.yaml | 2 ++ 6 files changed, 50 insertions(+), 11 deletions(-) diff --git a/app/authenticated/cluster/projects/new-ns/template.hbs b/app/authenticated/cluster/projects/new-ns/template.hbs index 47a92caf5..518384ae2 100644 --- a/app/authenticated/cluster/projects/new-ns/template.hbs +++ b/app/authenticated/cluster/projects/new-ns/template.hbs @@ -39,6 +39,8 @@ editing=(or editing isNew) expanded=expanded limit=primaryResource.resourceQuota.limit + projectLimit=primaryResource.project.resourceQuota.limit + usedLimit=primaryResource.project.resourceQuota.usedLimit nsDefaultQuota=primaryResource.project.namespaceDefaultResourceQuota.limit changed=(action "updateNsQuota") }} diff --git a/app/components/namespace-quota-row/template.hbs b/app/components/namespace-quota-row/template.hbs index b24728267..b0ed966bb 100644 --- a/app/components/namespace-quota-row/template.hbs +++ b/app/components/namespace-quota-row/template.hbs @@ -1,6 +1,13 @@ {{resource-quota-select editing=false quota=quota}} + + {{progress-bar-multi + values=quota.projectLimits + tooltipValues=quota.totalLimits + max=quota.max + }} + {{input-resource-quota editing=editing quota=quota key='value'}} \ No newline at end of file diff --git a/app/components/namespace-resource-quota/component.js b/app/components/namespace-resource-quota/component.js index 01c8ecafd..9d41634c4 100644 --- a/app/components/namespace-resource-quota/component.js +++ b/app/components/namespace-resource-quota/component.js @@ -4,11 +4,15 @@ import Component from '@ember/component'; import { convertToMillis } from 'shared/utils/util'; import { parseSi } from 'shared/utils/parse-unit'; import layout from './template'; +import { inject as service } from '@ember/service'; export default Component.extend({ - layout, + intl: service(), + layout, limit: null, + usedLimit: null, + projectlimit: null, projectQuota: null, nsDefaultQuota: null, @@ -54,18 +58,23 @@ export default Component.extend({ }), initQuotaArray() { - let limit = get(this, 'limit'); - const nsDefaultQuota = get(this, 'nsDefaultQuota'); - const array = []; + let limit = get(this, 'limit'); + const nsDefaultQuota = get(this, 'nsDefaultQuota'); + const array = []; + const used = get(this, 'usedLimit'); + const currentProjectLimit = get(this, 'projectLimit') Object.keys(nsDefaultQuota).forEach((key) => { if ( key !== 'type' && typeof nsDefaultQuota[key] === 'string') { let value; + let usedValue = ''; + let projectLimitValue = ''; if ( limit && !limit[key] ) { array.push({ key, - value: '', + value: '', + projectLimits: [], }); return; @@ -75,15 +84,31 @@ export default Component.extend({ if ( key === 'limitsCpu' || key === 'requestsCpu' ) { value = convertToMillis(value); + usedValue = convertToMillis(get(used, key)); + projectLimitValue = convertToMillis(get(currentProjectLimit, key)); } else if ( key === 'limitsMemory' || key === 'requestsMemory' ) { value = parseSi(value, 1024) / 1048576; + usedValue = parseSi(get(used, key), 1024) / 1048576; + projectLimitValue = parseSi(get(currentProjectLimit, key), 1024) / 1048576; } else if ( key === 'requestsStorage' ) { value = parseSi(value) / (1024 ** 3); + usedValue = parseSi(get(used, key)) / (1024 ** 3); + projectLimitValue = parseSi(get(currentProjectLimit, key)) / (1024 ** 3); } array.push({ key, value, + max: projectLimitValue, + projectLimits: [{ + color: 'bg-error', + label: key, + value: usedValue, + }], + totalLimits: [{ + label: get(this, 'intl').t(`formResourceQuota.resources.${ key }`), + value: `${ projectLimitValue - usedValue } of ${ projectLimitValue } remaining`, + }], }); } }); diff --git a/app/components/namespace-resource-quota/template.hbs b/app/components/namespace-resource-quota/template.hbs index 76b1b65c1..bb324ae2a 100644 --- a/app/components/namespace-resource-quota/template.hbs +++ b/app/components/namespace-resource-quota/template.hbs @@ -3,12 +3,13 @@ {{t 'formResourceQuota.table.type.label'}} + {{t 'formResourceQuota.table.resources.label'}} {{t 'formResourceQuota.table.value.label'}} {{#each quotaArray as |quota|}} - {{namespace-quota-row + {{namespace-quota-row quota=quota editing=editing }} diff --git a/app/components/workload-row/template.hbs b/app/components/workload-row/template.hbs index 969fbbeb3..8953bc52c 100644 --- a/app/components/workload-row/template.hbs +++ b/app/components/workload-row/template.hbs @@ -39,12 +39,14 @@ {{/if}} + {{log 'pg vals' model.podStates.byColor}} + {{log 'pg tt vals' model.podStates.byName}} {{progress-bar-multi - classNames="mt-5" - labelKey="state" - valueKey="count" - values=model.podStates.byColor - tooltipValues=model.podStates.byName + classNames="mt-5" + labelKey="state" + valueKey="count" + values=model.podStates.byColor + tooltipValues=model.podStates.byName }} {{model.displayScale}} diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 8f261a763..7c37aa146 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -3379,6 +3379,8 @@ formResourceQuota: placeholder: e.g. 10 milliCpuPlaceholder: e.g. 500 memoryPlaceholder: e.g. 1Gi + resources: + label: Project Resource Availability projectLimit: label: Project Limit placeholder: e.g. 50 From 3057e8dcc95e8114418436d2afc1941655c6a2b7 Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 12:07:36 -0700 Subject: [PATCH 2/8] property extension fixes --- .../progress-bar-multi/component.js | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/app/components/progress-bar-multi/component.js b/app/components/progress-bar-multi/component.js index 07fe577db..7de6edf03 100644 --- a/app/components/progress-bar-multi/component.js +++ b/app/components/progress-bar-multi/component.js @@ -1,4 +1,4 @@ -import { defineProperty, computed, get } from '@ember/object'; +import { defineProperty, computed, get, observer } from '@ember/object'; import Component from '@ember/component'; import layout from './template'; @@ -28,19 +28,19 @@ export default Component.extend({ init() { this._super(...arguments); - let colorKey = this.get('colorKey'); - let labelKey = this.get('labelKey'); - let valueKey = this.get('valueKey'); + let colorKey = get(this, 'colorKey'); + let labelKey = get(this, 'labelKey'); + let valueKey = get(this, 'valueKey'); let valueDep = `values.@each.{${ colorKey },${ labelKey },${ valueKey }}`; defineProperty(this, 'pieces', computed('min', 'max', valueDep, () => { - let min = this.get('min'); - let max = this.get('max'); + let min = get(this, 'min'); + let max = get(this, 'max'); var out = []; - (this.get('values') || []).forEach((obj) => { + (get(this, 'values') || []).forEach((obj) => { out.push({ color: get(obj, colorKey), label: get(obj, labelKey), @@ -56,7 +56,7 @@ export default Component.extend({ } let sum = 0; - let minPercent = this.get('minPercent'); + let minPercent = get(this, 'minPercent'); out.forEach((obj) => { let per = Math.max(minPercent, toPercent(obj.value, min, max)); @@ -79,12 +79,12 @@ export default Component.extend({ valueDep = `tooltipValues.@each.{${ labelKey },${ valueKey }}`; defineProperty(this, 'tooltipContent', computed(valueDep, () => { - let labelKey = this.get('labelKey'); - let valueKey = this.get('valueKey'); + let labelKey = get(this, 'labelKey'); + let valueKey = get(this, 'valueKey'); var out = []; - (this.get('tooltipValues') || []).forEach((obj) => { + (get(this, 'tooltipValues') || []).forEach((obj) => { out.push(`${ get(obj, labelKey) }: ${ get(obj, valueKey) }`); }); @@ -95,8 +95,9 @@ export default Component.extend({ didInsertElement() { this.zIndexDidChange(); }, - zIndexDidChange: function() { - this.$().css('zIndex', this.get('zIndex') || 'inherit'); - }.observes('zIndex'), + + zIndexDidChange: observer('zIndex', function() { + this.$().css('zIndex', get(this, 'zIndex') || 'inherit'); + }), }); From 782c74772cb0151b6f17a2cbf07c73bffce0e4ef Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 12:11:57 -0700 Subject: [PATCH 3/8] Remove offending code that prevents multi actions rancher/rancher#15646 --- app/components/namespace-table/template.hbs | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app/components/namespace-table/template.hbs b/app/components/namespace-table/template.hbs index 230606a6d..197b361f9 100644 --- a/app/components/namespace-table/template.hbs +++ b/app/components/namespace-table/template.hbs @@ -16,12 +16,7 @@ {{#if (eq kind "row")}} - {{#if projectsWithoutNamespace.length}} -   - {{else}} - {{check-box nodeId=ns.id}} - {{/if}} - + {{check-box nodeId=ns.id}} {{badge-state model=ns}} From ce895604dc2a1394da920fe2ced2d4061b54d538 Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 12:18:41 -0700 Subject: [PATCH 4/8] previous fix wasn't right, need to check for lack of both resources --- app/components/namespace-table/template.hbs | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/components/namespace-table/template.hbs b/app/components/namespace-table/template.hbs index 197b361f9..8b05127bc 100644 --- a/app/components/namespace-table/template.hbs +++ b/app/components/namespace-table/template.hbs @@ -15,9 +15,13 @@ }} {{#if (eq kind "row")}} - - {{check-box nodeId=ns.id}} - + + {{#if (and projectsWithoutNamespace.length (not model.length))}} +   + {{else}} + {{check-box nodeId=ns.id}} + {{/if}} + {{badge-state model=ns}} From 45a425369fb29340faa25d8b9ce3fb98e103fee8 Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 14:33:09 -0700 Subject: [PATCH 5/8] Tooltip was always landing on far left when it should be center --- app/components/progress-bar-multi/template.hbs | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/components/progress-bar-multi/template.hbs b/app/components/progress-bar-multi/template.hbs index 7897cd7bb..535e94c40 100644 --- a/app/components/progress-bar-multi/template.hbs +++ b/app/components/progress-bar-multi/template.hbs @@ -1,4 +1,12 @@ -{{#tooltip-element type="tooltip-basic" model=tooltipContent tooltipTemplate='tooltip-static' aria-describedby="tooltip-base" tooltipFor="progress-bar" inlineBlock=false}} +{{#tooltip-element + type="tooltip-basic" + model=tooltipContent + tooltipTemplate='tooltip-static' + aria-describedby="tooltip-base" + tooltipFor="progress-bar" + inlineBlock=true + classNames="full-width" +}}
{{~#each pieces as |obj|~}}
From 3823cc414b94238d49e70180abfeb301628adc7e Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 14:34:23 -0700 Subject: [PATCH 6/8] remove logs --- app/components/pod-row/template.hbs | 1 - app/components/workload-row/template.hbs | 2 -- 2 files changed, 3 deletions(-) diff --git a/app/components/pod-row/template.hbs b/app/components/pod-row/template.hbs index 03b4c52e1..e1fe98cf2 100644 --- a/app/components/pod-row/template.hbs +++ b/app/components/pod-row/template.hbs @@ -32,7 +32,6 @@ {{#copy-inline clipboardText=model.displayIp}}{{format-ip model.displayIp}}{{/copy-inline}} / {{/if}} {{#if (and showNode model.node)}} - {{log model.node}} {{model.node.displayName}} / {{/if}} {{t 'generic.createdDate' date=(date-from-now model.created) htmlSafe=true}} diff --git a/app/components/workload-row/template.hbs b/app/components/workload-row/template.hbs index 8953bc52c..945e94f17 100644 --- a/app/components/workload-row/template.hbs +++ b/app/components/workload-row/template.hbs @@ -39,8 +39,6 @@ {{/if}} - {{log 'pg vals' model.podStates.byColor}} - {{log 'pg tt vals' model.podStates.byName}} {{progress-bar-multi classNames="mt-5" labelKey="state" From ec32f115b95954d5d12b94618ebbf00d1e60e5ac Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 16:44:44 -0700 Subject: [PATCH 7/8] Feedback from review --- .../namespace-quota-row/template.hbs | 2 +- .../namespace-resource-quota/component.js | 101 +++++++++++++----- translations/en-us.yaml | 1 + 3 files changed, 78 insertions(+), 26 deletions(-) diff --git a/app/components/namespace-quota-row/template.hbs b/app/components/namespace-quota-row/template.hbs index b0ed966bb..41232b6a2 100644 --- a/app/components/namespace-quota-row/template.hbs +++ b/app/components/namespace-quota-row/template.hbs @@ -3,7 +3,7 @@ {{progress-bar-multi - values=quota.projectLimits + values=quota.currentProjectUse tooltipValues=quota.totalLimits max=quota.max }} diff --git a/app/components/namespace-resource-quota/component.js b/app/components/namespace-resource-quota/component.js index 9d41634c4..64d55ad37 100644 --- a/app/components/namespace-resource-quota/component.js +++ b/app/components/namespace-resource-quota/component.js @@ -55,26 +55,49 @@ export default Component.extend({ }); this.sendAction('changed', Object.keys(out).length ? out : null); + this.updateLimits(); }), + updateLimits() { + ( get(this, 'quotaArray') || [] ).forEach((quota) => { + if ( quota.key ) { + const value = parseInt(get(quota, 'value'), 10) || 0; + const usedValue = get(quota, 'currentProjectUse.firstObject.value'); + const newUse = get(quota, 'currentProjectUse.lastObject'); + const totalLimits = get(quota, 'totalLimits.firstObject'); + const myNewUse = usedValue + value; + const translation = get(this, 'intl').t('formResourceQuota.table.resources.tooltip', { + usedValue, + newUse: myNewUse, + remaining: ( get(quota, 'max') - ( myNewUse ) ), + }); + + set(newUse, 'value', value); + set(totalLimits, 'value', translation); + } + }); + }, + initQuotaArray() { - let limit = get(this, 'limit'); + const limit = get(this, 'limit'); const nsDefaultQuota = get(this, 'nsDefaultQuota'); const array = []; const used = get(this, 'usedLimit'); const currentProjectLimit = get(this, 'projectLimit') + const intl = get(this, 'intl'); Object.keys(nsDefaultQuota).forEach((key) => { if ( key !== 'type' && typeof nsDefaultQuota[key] === 'string') { - let value; - let usedValue = ''; - let projectLimitValue = ''; + let value, currentProjectUse, totalLimits; + let usedValue = ''; + let max = ''; + let newUse = null; if ( limit && !limit[key] ) { array.push({ key, - value: '', - projectLimits: [], + value: '', + currentProjectUse: [], }); return; @@ -82,33 +105,61 @@ export default Component.extend({ value = limit && limit[key] ? limit[key] : nsDefaultQuota[key]; - if ( key === 'limitsCpu' || key === 'requestsCpu' ) { - value = convertToMillis(value); + switch (key) { + case 'limitsCpu': + case 'requestsCpu': + value = convertToMillis(value); usedValue = convertToMillis(get(used, key)); - projectLimitValue = convertToMillis(get(currentProjectLimit, key)); - } else if ( key === 'limitsMemory' || key === 'requestsMemory' ) { - value = parseSi(value, 1024) / 1048576; + max = convertToMillis(get(currentProjectLimit, key)); + break; + case 'limitsMemory': + case 'requestsMemory': + value = parseSi(value, 1024) / 1048576; usedValue = parseSi(get(used, key), 1024) / 1048576; - projectLimitValue = parseSi(get(currentProjectLimit, key), 1024) / 1048576; - } else if ( key === 'requestsStorage' ) { - value = parseSi(value) / (1024 ** 3); + max = parseSi(get(currentProjectLimit, key), 1024) / 1048576; + break; + case 'requestsStorage': + value = parseSi(value) / (1024 ** 3); usedValue = parseSi(get(used, key)) / (1024 ** 3); - projectLimitValue = parseSi(get(currentProjectLimit, key)) / (1024 ** 3); + max = parseSi(get(currentProjectLimit, key)) / (1024 ** 3); + break; + default: + break; } - array.push({ - key, - value, - max: projectLimitValue, - projectLimits: [{ + + newUse = usedValue + value; + + currentProjectUse = [ + { + // current use color: 'bg-error', label: key, value: usedValue, - }], - totalLimits: [{ - label: get(this, 'intl').t(`formResourceQuota.resources.${ key }`), - value: `${ projectLimitValue - usedValue } of ${ projectLimitValue } remaining`, - }], + }, + { + // only need the new value here because progress-multi-bar adds this to the previous + color: 'bg-warning', + label: key, + value, + } + ]; + + totalLimits = [{ + label: get(this, 'intl').t(`formResourceQuota.resources.${ key }`), + value: intl.t('formResourceQuota.table.resources.tooltip', { + usedValue, + newUse, + remaining: ( max - newUse ), + }) + }]; + + array.push({ + currentProjectUse, + key, + max, + totalLimits, + value, }); } }); diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 7c37aa146..7500c6da9 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -3381,6 +3381,7 @@ formResourceQuota: memoryPlaceholder: e.g. 1Gi resources: label: Project Resource Availability + tooltip: "Current: { usedValue }, New: { newUse }, Limit Remaining: { remaining }" projectLimit: label: Project Limit placeholder: e.g. 50 From 2ea65394bc88a09b3f522370c4229d4f358d5c7f Mon Sep 17 00:00:00 2001 From: Westly Wright Date: Mon, 17 Sep 2018 16:49:20 -0700 Subject: [PATCH 8/8] translations --- translations/en-us.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 7500c6da9..5cff2d211 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -3381,7 +3381,7 @@ formResourceQuota: memoryPlaceholder: e.g. 1Gi resources: label: Project Resource Availability - tooltip: "Current: { usedValue }, New: { newUse }, Limit Remaining: { remaining }" + tooltip: "Reserved - { usedValue }, This Namespace - { newUse }, Available - { remaining }" projectLimit: label: Project Limit placeholder: e.g. 50