From 483e34c6fc0d10c1be19f0117ee63fa9cedec643 Mon Sep 17 00:00:00 2001 From: loganhz Date: Mon, 10 Sep 2018 11:23:29 +0800 Subject: [PATCH 1/2] Improve pv list and pv detail page https://github.com/rancher/rancher/issues/15450 --- .../persistent-volumes/index/controller.js | 6 ++ .../persistent-volumes/index/template.hbs | 7 ++ .../cru-persistent-volume/template.hbs | 84 +++++++++++++------ .../form-node-affinity/template.hbs | 2 +- app/models/persistentvolume.js | 6 ++ translations/en-us.yaml | 2 + 6 files changed, 79 insertions(+), 28 deletions(-) diff --git a/app/authenticated/cluster/storage/persistent-volumes/index/controller.js b/app/authenticated/cluster/storage/persistent-volumes/index/controller.js index 053546e1d..2b959dd79 100644 --- a/app/authenticated/cluster/storage/persistent-volumes/index/controller.js +++ b/app/authenticated/cluster/storage/persistent-volumes/index/controller.js @@ -15,6 +15,12 @@ export const headers = [ searchField: 'displayName', translationKey: 'generic.name', }, + { + name: 'displayPvc', + sort: ['displayPvc', 'sortName', 'id'], + searchField: 'displayPvc', + translationKey: 'cruPersistentVolume.pvc', + }, { name: 'source', sort: ['displaySource', 'name', 'id'], diff --git a/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs b/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs index 2f18a9b4e..e3716d509 100644 --- a/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs +++ b/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs @@ -30,6 +30,13 @@ {{obj.displayName}} + + {{#if obj.displayPvc}} + {{obj.displayPvc}} + {{else}} +
{{t 'generic.na'}}
+ {{/if}} + {{obj.displaySource}} diff --git a/app/components/cru-persistent-volume/template.hbs b/app/components/cru-persistent-volume/template.hbs index e2c817c22..c5ea3b1bc 100644 --- a/app/components/cru-persistent-volume/template.hbs +++ b/app/components/cru-persistent-volume/template.hbs @@ -13,6 +13,9 @@ {{#if model.description}} {{banner-message color='bg-secondary mb-0 mt-10' message=(linkify model.description)}} {{/if}} + {{#if model.showTransitioningMessage}} +

{{uc-first model.transitioningMessage}}

+ {{/if}} {{else}} {{form-name-description model=primaryResource @@ -24,10 +27,39 @@ }} {{/if}} -
-
- - {{#if editing}} +{{#if isView}} + + +{{else}} +
+
+ {{new-select content=sourceChoices prompt="cruPersistentVolume.source.prompt" @@ -36,26 +68,18 @@ value=sourceName readOnly=isView }} - {{else}} -
- {{t (concat 'volumeSource.' sourceName '.title')}} -
- {{/if}} -
-
- - {{#if editing}} +
+
+
{{input-number classNames="form-control" value=capacity}} {{t 'cruPersistentVolume.capacity.unit'}}
- {{else}} -
- {{capacity}} {{t 'cruPersistentVolume.capacity.unit'}} -
- {{/if}} +
-
+{{/if}} + +
@@ -139,14 +163,20 @@ {{/accordion-list-item}} {{#if isView}} - {{resource-event-list - resourceType=(t 'generic.persistentVolume') - expandAll=al.expandAll - expandFn=expandFn - name=model.name - kind="PersistentVolume" - }} - {{/if}} + {{resource-event-list + resourceType=(t 'generic.persistentVolume') + expandAll=al.expandAll + expandFn=expandFn + name=model.name + kind="PersistentVolume" + }} + + {{annotations-section + model=model + expandAll=al.expandAll + expandFn=expandFn + }} + {{/if}} {{/accordion-list}} {{#unless isView}} diff --git a/app/components/form-node-affinity/template.hbs b/app/components/form-node-affinity/template.hbs index be9b64715..8effaa3d6 100644 --- a/app/components/form-node-affinity/template.hbs +++ b/app/components/form-node-affinity/template.hbs @@ -4,7 +4,7 @@ rule=rule editing=editing}} {{else if (not editing)}} -
{{t 'formNodeAffinity.noRules'}}
+
{{t 'formNodeAffinity.noRules'}}
{{/each}} {{#if editing}} diff --git a/app/models/persistentvolume.js b/app/models/persistentvolume.js index 0a37e171d..2bf59653f 100644 --- a/app/models/persistentvolume.js +++ b/app/models/persistentvolume.js @@ -14,6 +14,12 @@ export default Volume.extend({ return !!get(this, 'links.remove') && get(this, 'state') !== 'bound'; }), + displayPvc: computed('claimRef.namespace', 'claimRef.name', function() { + if ( get(this, 'claimRef.name') ) { + return `${ get(this, 'claimRef.namespace') }/${ get(this, 'claimRef.name') }`; + } + }), + actions: { edit() { get(this, 'router').transitionTo('authenticated.cluster.storage.persistent-volumes.detail.edit', get(this, 'id')); diff --git a/translations/en-us.yaml b/translations/en-us.yaml index dd615886f..e7edbc993 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -2261,6 +2261,8 @@ cruPersistentVolume: storageClass: label: Assign to Storage Class prompt: None + pvc: Persistent Volume Claim + reclaimPolicy: Reclaim Policy capacity: label: Capacity unit: GiB From 5993e8b47bde73f95757863b3c184d4e7b18ee04 Mon Sep 17 00:00:00 2001 From: loganhz Date: Mon, 10 Sep 2018 13:07:46 +0800 Subject: [PATCH 2/2] Improve storage class detail page --- .../storage/classes/detail/edit/route.js | 6 +- .../storage/classes/detail/index/template.hbs | 3 +- .../cluster/storage/classes/detail/route.js | 9 ++- .../persistent-volumes/index/template.hbs | 43 +----------- app/components/cru-storage-class/template.hbs | 59 +++++++++++++--- app/components/labels-section/component.js | 69 ++++++++++++------- app/components/labels-section/template.hbs | 6 +- .../persistent-volume-table/component.js} | 21 ++++-- .../persistent-volume-table/template.hbs | 42 +++++++++++ app/node/controller.js | 17 ----- app/node/template.hbs | 1 - translations/en-us.yaml | 4 ++ 12 files changed, 173 insertions(+), 107 deletions(-) rename app/{authenticated/cluster/storage/persistent-volumes/index/controller.js => components/persistent-volume-table/component.js} (69%) create mode 100644 app/components/persistent-volume-table/template.hbs delete mode 100644 app/node/controller.js diff --git a/app/authenticated/cluster/storage/classes/detail/edit/route.js b/app/authenticated/cluster/storage/classes/detail/edit/route.js index 27f832b37..05190753a 100644 --- a/app/authenticated/cluster/storage/classes/detail/edit/route.js +++ b/app/authenticated/cluster/storage/classes/detail/edit/route.js @@ -1,13 +1,13 @@ import Route from '@ember/routing/route'; -import { set } from '@ember/object'; +import { get, set } from '@ember/object'; export default Route.extend({ model() { const original = this.modelFor('authenticated.cluster.storage.classes.detail'); - set(this, 'originalModel', original); + set(this, 'originalModel', get(original, 'storageclass')); - return original.clone(); + return get(original, 'storageclass').clone(); }, setupController(controller/* , model*/) { diff --git a/app/authenticated/cluster/storage/classes/detail/index/template.hbs b/app/authenticated/cluster/storage/classes/detail/index/template.hbs index cabd27c4f..2e212699b 100644 --- a/app/authenticated/cluster/storage/classes/detail/index/template.hbs +++ b/app/authenticated/cluster/storage/classes/detail/index/template.hbs @@ -1,4 +1,5 @@ {{cru-storage-class mode="view" - model=model + model=model.storageclass + persistentVolumes=model.persistentVolumes }} diff --git a/app/authenticated/cluster/storage/classes/detail/route.js b/app/authenticated/cluster/storage/classes/detail/route.js index 8cdd774f1..db78e23b1 100644 --- a/app/authenticated/cluster/storage/classes/detail/route.js +++ b/app/authenticated/cluster/storage/classes/detail/route.js @@ -1,11 +1,18 @@ import Route from '@ember/routing/route'; import { get } from '@ember/object'; import { inject as service } from '@ember/service'; +import { hash } from 'rsvp'; export default Route.extend({ clusterStore: service(), model(params) { - return get(this, 'clusterStore').find('storageclass', params.storage_class_id); + const clusterStore = get(this, 'clusterStore'); + const storageClassId = params.storage_class_id; + + return hash({ + storageclass: clusterStore.find('storageclass', storageClassId), + persistentVolumes: clusterStore.findAll('persistentVolume').then((data) => (data || []).filterBy('storageClassId', storageClassId)) + }); }, }); diff --git a/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs b/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs index e3716d509..63543aaf7 100644 --- a/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs +++ b/app/authenticated/cluster/storage/persistent-volumes/index/template.hbs @@ -8,45 +8,4 @@

{{t 'persistentVolumePage.header'}}

-{{#sortable-table - tableClassNames="bordered" - paging=true - pagingLabel="pagination.volume" - headers=headers - bulkActions=true - descending=descending - body=rows - sortBy=sortBy - as |sortable kind obj dt| -}} - {{#if (eq kind "row")}} - - - {{check-box nodeId=obj.id}} - - - {{badge-state model=obj}} - - - {{obj.displayName}} - - - {{#if obj.displayPvc}} - {{obj.displayPvc}} - {{else}} -
{{t 'generic.na'}}
- {{/if}} - - - {{obj.displaySource}} - - - {{action-menu model=obj}} - - - {{else if (eq kind "nomatch")}} - {{t 'persistentVolumePage.noMatch'}} - {{else if (eq kind "norows")}} - {{t 'persistentVolumePage.noData'}} - {{/if}} -{{/sortable-table}} +{{persistent-volume-table rows=model.persistentVolumes}} diff --git a/app/components/cru-storage-class/template.hbs b/app/components/cru-storage-class/template.hbs index 1ee14fdb4..9778eb739 100644 --- a/app/components/cru-storage-class/template.hbs +++ b/app/components/cru-storage-class/template.hbs @@ -23,19 +23,44 @@ }} {{/if}} -
-
- - {{searchable-select - allowCustom=true - content=provisionerChoices - value=primaryResource.provisioner - readOnly=isView - }} +{{#if isView}} +
+ +
+{{else}} +
+
+ + {{searchable-select + allowCustom=true + content=provisionerChoices + value=primaryResource.provisioner + }} +
-
+{{/if}} {{#accordion-list showExpandAll=false as | al expandFn |}} + {{#if isView}} + {{#accordion-list-item + title=(t 'cruStorageClass.pv.title') + detail=(t 'cruStorageClass.pv.detail') + expandAll=expandAll + expand=(action expandFn) + expandOnInit=true + }} + {{persistent-volume-table rows=persistentVolumes}} + {{/accordion-list-item}} + {{/if}} {{#accordion-list-item title=(t 'cruStorageClass.parameters.title') detail=(t 'cruStorageClass.parameters.detail') @@ -119,6 +144,20 @@
{{/accordion-list-item}} + + {{#if isView}} + {{labels-section + model=primaryResource + showKind=false + expandAll=al.expandAll + expandFn=expandFn + }} + {{annotations-section + model=primaryResource + expandAll=al.expandAll + expandFn=expandFn + }} + {{/if}} {{/accordion-list}} {{#unless isView}} diff --git a/app/components/labels-section/component.js b/app/components/labels-section/component.js index ee4e8b79a..24e5fb223 100644 --- a/app/components/labels-section/component.js +++ b/app/components/labels-section/component.js @@ -1,43 +1,64 @@ -import { observer } from '@ember/object'; +import { computed, get, observer } from '@ember/object'; import { alias } from '@ember/object/computed'; import Component from '@ember/component'; import ManageLabels from 'shared/mixins/manage-labels'; import layout from './template'; +const HEADERS_WITH_KIND = [ + { + name: 'kind', + sort: ['type', 'key'], + translationKey: 'labelsSection.kind', + width: '90', + }, + { + name: 'key', + sort: ['key'], + translationKey: 'labelsSection.key', + width: '350', + }, + { + name: 'value', + sort: ['value', 'key'], + translationKey: 'labelsSection.value', + }, +]; + +const HEADERS = [ + { + name: 'key', + sort: ['key'], + translationKey: 'labelsSection.key', + width: '350', + }, + { + name: 'value', + sort: ['value', 'key'], + translationKey: 'labelsSection.value', + }, +]; + export default Component.extend(ManageLabels, { layout, model: null, - sortBy: 'kind', - showKind: true, - descending: true, - - headers: [ - { - name: 'kind', - sort: ['type', 'key'], - translationKey: 'labelsSection.kind', - width: '90', - }, - { - name: 'key', - sort: ['key'], - translationKey: 'labelsSection.key', - width: '350', - }, - { - name: 'value', - sort: ['value', 'key'], - translationKey: 'labelsSection.value', - }, - ], + sortBy: 'kind', + translationDetail: 'labelsSection.detail', + showKind: true, + descending: true, labelSource: alias('model.labels'), + didReceiveAttrs() { this.initLabels(this.get('labelSource')); }, + labelsObserver: observer('model.labels', function() { this.initLabels(this.get('labelSource')); }), + headers: computed('showKind', function() { + return get(this, 'showKind') ? HEADERS_WITH_KIND : HEADERS; + }), + }); diff --git a/app/components/labels-section/template.hbs b/app/components/labels-section/template.hbs index 16db71b25..6c5024b70 100644 --- a/app/components/labels-section/template.hbs +++ b/app/components/labels-section/template.hbs @@ -1,6 +1,6 @@ {{#accordion-list-item title=(t 'labelsSection.title') - detail=(t 'labelsSection.detail') + detail=(t translationDetail) status=(t 'labelsSection.status' count=labelArray.length) statusClass=(if labelArray.length 'bg-success' 'text-muted') expandAll=expandAll @@ -27,6 +27,10 @@ {{label.key}} {{pretty-json value=label.value}} + {{else if (eq kind "nomatch")}} + + {{t 'labelsSection.noMatch'}} + {{else if (eq kind "norows")}} {{t 'labelsSection.noData'}} diff --git a/app/authenticated/cluster/storage/persistent-volumes/index/controller.js b/app/components/persistent-volume-table/component.js similarity index 69% rename from app/authenticated/cluster/storage/persistent-volumes/index/controller.js rename to app/components/persistent-volume-table/component.js index 2b959dd79..ea54d43f1 100644 --- a/app/authenticated/cluster/storage/persistent-volumes/index/controller.js +++ b/app/components/persistent-volume-table/component.js @@ -1,7 +1,8 @@ -import Controller from '@ember/controller'; -import { alias } from '@ember/object/computed'; +import Component from '@ember/component'; +import layout from './template'; +import { inject as service } from '@ember/service'; -export const headers = [ +const headers = [ { name: 'state', sort: ['sortState', 'displayName'], @@ -29,9 +30,15 @@ export const headers = [ }, ]; -export default Controller.extend({ - queryParams: ['sortBy'], - sortBy: 'name', +export default Component.extend({ + scope: service(), + + layout, headers, - rows: alias('model.persistentVolumes'), + tagName: '', + sortBy: 'name', + searchText: '', + subRows: true, + suffix: true, + paging: true, }); diff --git a/app/components/persistent-volume-table/template.hbs b/app/components/persistent-volume-table/template.hbs new file mode 100644 index 000000000..186e0fc30 --- /dev/null +++ b/app/components/persistent-volume-table/template.hbs @@ -0,0 +1,42 @@ +{{#sortable-table + tableClassNames="bordered" + paging=true + pagingLabel="pagination.volume" + headers=headers + bulkActions=true + descending=descending + body=rows + sortBy=sortBy + as |sortable kind obj dt| +}} + {{#if (eq kind "row")}} + + + {{check-box nodeId=obj.id}} + + + {{badge-state model=obj}} + + + {{obj.displayName}} + + + {{#if obj.displayPvc}} + {{obj.displayPvc}} + {{else}} +
{{t 'generic.na'}}
+ {{/if}} + + + {{obj.displaySource}} + + + {{action-menu model=obj}} + + + {{else if (eq kind "nomatch")}} + {{t 'persistentVolumePage.noMatch'}} + {{else if (eq kind "norows")}} + {{t 'persistentVolumePage.noData'}} + {{/if}} +{{/sortable-table}} \ No newline at end of file diff --git a/app/node/controller.js b/app/node/controller.js deleted file mode 100644 index 71b3a1f44..000000000 --- a/app/node/controller.js +++ /dev/null @@ -1,17 +0,0 @@ -import Controller from '@ember/controller'; - -export default Controller.extend({ - labelHeaders: [ - { - name: 'key', - sort: ['key'], - translationKey: 'labelsSection.key', - width: '350', - }, - { - name: 'value', - sort: ['value', 'key'], - translationKey: 'labelsSection.value', - }, - ], -}); diff --git a/app/node/template.hbs b/app/node/template.hbs index 4b37713e6..e85616306 100644 --- a/app/node/template.hbs +++ b/app/node/template.hbs @@ -78,7 +78,6 @@ {{labels-section model=model.node showKind=false - headers=labelHeaders expandAll=al.expandAll expandFn=expandFn }} diff --git a/translations/en-us.yaml b/translations/en-us.yaml index e7edbc993..3c7166f3f 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -2623,6 +2623,9 @@ cruStorageClass: view: 'Storage Class: {name}' allowVolumeExpansion: label: Allow users to expand volumes + pv: + title: Persistent Volumes + detail: Persistent Volumes provisioned by the current storage class. mountOptions: label: Mount Options addActionLabel: Add Option @@ -4283,6 +4286,7 @@ labelsSection: key: Key value: Value noData: No labels + noMatch: No labels match the current search loginShibboleth: buttonText: Log In with Shibboleth