mirror of https://github.com/rancher/ui.git
Add new tables to storage and project edit
This commit is contained in:
Westly Wright
parent
148a555957
commit
b34104b4cd
|
|
@ -2,7 +2,7 @@ import Ember from 'ember';
|
||||||
|
|
||||||
export default Ember.Component.extend({
|
export default Ember.Component.extend({
|
||||||
model: null,
|
model: null,
|
||||||
tagName: 'TR',
|
tagName: '',
|
||||||
|
|
||||||
projects: Ember.inject.service(),
|
projects: Ember.inject.service(),
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,5 +2,5 @@ import Ember from 'ember';
|
||||||
|
|
||||||
export default Ember.Component.extend({
|
export default Ember.Component.extend({
|
||||||
model: null,
|
model: null,
|
||||||
tagName: 'TR',
|
tagName: '',
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,27 @@ export default Ember.Component.extend(Sortable, {
|
||||||
name: ['displayName','id'],
|
name: ['displayName','id'],
|
||||||
mounts: ['mounts.length','displayName','id'],
|
mounts: ['mounts.length','displayName','id'],
|
||||||
},
|
},
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
name: 'state',
|
||||||
|
sort: ['state','displayName','id'],
|
||||||
|
translationKey: 'generic.state',
|
||||||
|
width: '115',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'name',
|
||||||
|
sort: ['displayName','id'],
|
||||||
|
translationKey: 'storagePoolSection.models.table.header.volumeName',
|
||||||
|
width: '350',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
translationKey: 'storagePoolSection.models.table.header.mounts',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
isActions: true,
|
||||||
|
width: '75',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
init: function() {
|
init: function() {
|
||||||
|
|
|
||||||
|
|
@ -39,72 +39,54 @@
|
||||||
{{#if model.volumes.length}}
|
{{#if model.volumes.length}}
|
||||||
<div class="subsection gutter col span-9 col-full-height">
|
<div class="subsection gutter col span-9 col-full-height">
|
||||||
<h6>{{t 'storagePoolSection.volumes.header'}}</h6>
|
<h6>{{t 'storagePoolSection.volumes.header'}}</h6>
|
||||||
<table class="grid" style="margin-bottom: 0">
|
{{#sortable-table
|
||||||
<thead>
|
classNames="grid mb-0 sortable-table"
|
||||||
<tr>
|
bulkActions=false
|
||||||
{{sortable-th sortable=this action="changeSort" name="state" width="115" label="generic.state"}}
|
paging=false
|
||||||
{{sortable-th sortable=this action="changeSort" name="name" width="350" label="storagePoolSection.models.table.header.volumeName"}}
|
search=false
|
||||||
<th>{{t 'storagePoolSection.models.table.header.mounts'}}</th>
|
sortBy=sortBy
|
||||||
<th width="75"> </th>
|
descending=descending
|
||||||
</tr>
|
headers=headers
|
||||||
</thead>
|
body=model
|
||||||
<tbody>
|
as |sortable kind vol|
|
||||||
{{#each arranged as |vol|}}
|
}}
|
||||||
<tr>
|
{{#if (eq kind "row")}}
|
||||||
<td class="state">
|
<td class="state">
|
||||||
{{badge-state model=vol}}
|
{{badge-state model=vol}}
|
||||||
</td>
|
</td>
|
||||||
<td class="force-wrap">
|
<td class="force-wrap">
|
||||||
{{#tooltip-element type="tooltip-basic" model=vol tooltipTemplate="tooltip-storage" tooltipFor="storagePoolSection"}}
|
{{#tooltip-element type="tooltip-basic" model=vol tooltipTemplate="tooltip-storage" tooltipFor="storagePoolSection"}}
|
||||||
<p class="hand force-wrap clip m-0">{{vol.displayName}}</p> <i classs="icon icon-info"></i>
|
<p class="hand force-wrap clip m-0">{{vol.displayName}}</p> <i classs="icon icon-info"></i>
|
||||||
{{/tooltip-element}}
|
{{/tooltip-element}}
|
||||||
</td>
|
</td>
|
||||||
<td class="force-wrap">
|
<td class="force-wrap">
|
||||||
{{#if vol.mounts.length}}
|
{{#if vol.mounts.length}}
|
||||||
{{#each vol.mounts as |mount|}}
|
{{#each vol.mounts as |mount|}}
|
||||||
<div>
|
<div>
|
||||||
{{~#if mount.instance.isVm~}}
|
{{~#if mount.instance.isVm~}}
|
||||||
{{#link-to "virtualmachine" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
|
{{#link-to "virtualmachine" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
|
||||||
{{~else~}}
|
{{~else~}}
|
||||||
{{#link-to "container" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
|
{{#link-to "container" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
|
||||||
{{~/if~}}
|
{{~/if~}}
|
||||||
: {{mount.path}}
|
: {{mount.path}}
|
||||||
{{#if (eq mount.permissions "ro")}}
|
{{#if (eq mount.permissions "ro")}}
|
||||||
<span class="text-muted">{{t 'storagePoolSection.readOnly'}}</span>
|
<span class="text-muted">{{t 'storagePoolSection.readOnly'}}</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="text-muted">{{t 'generic.none'}}</span>
|
<span class="text-muted">{{t 'generic.none'}}</span>
|
||||||
{{/if}}
|
|
||||||
</td>
|
|
||||||
<td class="actions wide">
|
|
||||||
{{action-menu model=vol}}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{{#if vol.snapshots.length}}
|
|
||||||
<tr class="nohover">
|
|
||||||
<td colspan="4" class="subtable pl-10">
|
|
||||||
<table class="grid fixed no-lines">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th width="125">{{t 'storagePoolSection.models.table.header.snapshotState'}}</th>
|
|
||||||
<th>{{t 'storagePoolSection.models.table.header.snapshotName'}}</th>
|
|
||||||
<th width="70"> </th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{{#each vol.snapshots as |snapshot|}}
|
|
||||||
{{snapshot-section volume=vol snapshot=snapshot}}
|
|
||||||
{{/each}}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/each}}
|
</td>
|
||||||
</tbody>
|
<td class="actions wide">
|
||||||
</table>
|
{{action-menu model=vol}}
|
||||||
|
</td>
|
||||||
|
{{else if (eq kind "norows")}}
|
||||||
|
<tr>
|
||||||
|
<td colspan="{{headers.length}}" class="text-center text-muted">{{t 'storagePoolSection.volumes.none'}}</td>
|
||||||
|
</tr>
|
||||||
|
{{/if}}
|
||||||
|
{{/sortable-table}}
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="text-muted text-center pl-10">{{t 'storagePoolSection.volumes.none'}}</div>
|
<div class="text-muted text-center pl-10">{{t 'storagePoolSection.volumes.none'}}</div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
import Ember from 'ember';
|
import Ember from 'ember';
|
||||||
import Sortable from 'ui/mixins/sortable';
|
|
||||||
import C from 'ui/utils/constants';
|
import C from 'ui/utils/constants';
|
||||||
import NewOrEdit from 'ui/mixins/new-or-edit';
|
import NewOrEdit from 'ui/mixins/new-or-edit';
|
||||||
import { sortInsensitiveBy } from 'ui/utils/sort';
|
import { sortInsensitiveBy } from 'ui/utils/sort';
|
||||||
|
|
||||||
export default Ember.Component.extend(NewOrEdit, Sortable, {
|
export default Ember.Component.extend(NewOrEdit, {
|
||||||
projects: Ember.inject.service(),
|
projects: Ember.inject.service(),
|
||||||
access: Ember.inject.service(),
|
access: Ember.inject.service(),
|
||||||
growl: Ember.inject.service(),
|
growl: Ember.inject.service(),
|
||||||
|
|
@ -18,15 +17,30 @@ export default Ember.Component.extend(NewOrEdit, Sortable, {
|
||||||
editing: false,
|
editing: false,
|
||||||
tab: 'access',
|
tab: 'access',
|
||||||
|
|
||||||
primaryResource: Ember.computed.alias('project'),
|
|
||||||
sortableContent: Ember.computed.alias('project.projectMembers'),
|
|
||||||
sortBy: 'name',
|
sortBy: 'name',
|
||||||
sorts: {
|
headers: [
|
||||||
name: ['name', 'externalId'],
|
{
|
||||||
type: ['externalIdType','externalId'],
|
name: 'name',
|
||||||
role: ['role','externalId'],
|
sort: ['name', 'externalId'],
|
||||||
},
|
translationKey: 'generic.name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'type',
|
||||||
|
sort: ['externalIdType','externalId'],
|
||||||
|
translationKey: 'generic.type',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'role',
|
||||||
|
sort: ['role','externalId'],
|
||||||
|
translationKey: 'generic.role',
|
||||||
|
width: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
sort: [],
|
||||||
|
translationKey: '',
|
||||||
|
width: '40',
|
||||||
|
},
|
||||||
|
],
|
||||||
stacks: null,
|
stacks: null,
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
|
|
|
||||||
|
|
@ -64,59 +64,56 @@
|
||||||
<hr/>
|
<hr/>
|
||||||
<div class="well">
|
<div class="well">
|
||||||
{{#if (and accessEnabled showEdit)}}
|
{{#if (and accessEnabled showEdit)}}
|
||||||
<div class="inline-form">
|
<div class="inline-form mb-20">
|
||||||
{{input-identity action="checkMember" onError="error"}}
|
{{input-identity action="checkMember" onError="error"}}
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if accessEnabled}}
|
{{#if accessEnabled}}
|
||||||
<table class="grid fixed" style="margin-bottom: 0;">
|
{{#sortable-table
|
||||||
<thead>
|
classNames="grid fixed mb-0 sortable-table"
|
||||||
<tr>
|
bulkActions=false
|
||||||
{{sortable-th sortable=this action="changeSort" name="name" label="generic.name"}}
|
paging=false
|
||||||
{{sortable-th sortable=this action="changeSort" name="type" label="generic.type"}}
|
search=false
|
||||||
{{sortable-th sortable=this action="changeSort" name="role" label="generic.role"}}
|
sortBy=sortBy
|
||||||
{{#if showEdit}}<th width="40"> </th>{{/if}}
|
headers=headers
|
||||||
</tr>
|
body=project.projectMembers
|
||||||
</thead>
|
as |sortable kind member|
|
||||||
<tbody>
|
}}
|
||||||
{{#each arranged as |member|}}
|
{{#if (eq kind "row")}}
|
||||||
<tr>
|
<td>
|
||||||
|
{{identity-block identity=member}}
|
||||||
|
</td>
|
||||||
|
<td>{{member.displayType}}</td>
|
||||||
|
<td>
|
||||||
|
{{#if showEdit}}
|
||||||
|
<select class="form-control input-sm" onchange={{action (mut member.role) value="target.value"}}>
|
||||||
|
{{#each roleOptions as |choice|}}
|
||||||
|
<option value={{choice.value}} selected={{eq member.role choice.value}}>{{t choice.label}}</option>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
{{else}}
|
||||||
|
{{uc-first member.role}}
|
||||||
|
{{/if}}
|
||||||
|
</td>
|
||||||
|
{{#if showEdit}}
|
||||||
<td>
|
<td>
|
||||||
{{identity-block identity=member}}
|
{{#if accessEnabled}}
|
||||||
</td>
|
<button class="btn bg-primary btn-sm pull-right gh-action" {{action "removeMember" member}}><i class="icon icon-minus"/></button>
|
||||||
<td>{{member.displayType}}</td>
|
|
||||||
<td>
|
|
||||||
{{#if showEdit}}
|
|
||||||
<select class="form-control input-sm" onchange={{action (mut member.role) value="target.value"}}>
|
|
||||||
{{#each roleOptions as |choice|}}
|
|
||||||
<option value={{choice.value}} selected={{eq member.role choice.value}}>{{t choice.label}}</option>
|
|
||||||
{{/each}}
|
|
||||||
</select>
|
|
||||||
{{else}}
|
{{else}}
|
||||||
{{uc-first member.role}}
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</td>
|
</td>
|
||||||
{{#if showEdit}}
|
{{/if}}
|
||||||
<td>
|
{{else if (eq kind "norows")}}
|
||||||
{{#if accessEnabled}}
|
<tr>
|
||||||
<button class="btn bg-primary btn-sm pull-right gh-action" {{action "removeMember" member}}><i class="icon icon-minus"/></button>
|
<td colspan="{{headers.length}}" class="text-center text-muted">
|
||||||
{{else}}
|
{{t 'viewEditProject.showEdit.noMembers'}}
|
||||||
|
</td>
|
||||||
{{/if}}
|
</tr>
|
||||||
</td>
|
{{/if}}
|
||||||
{{/if}}
|
{{/sortable-table}}
|
||||||
</tr>
|
<hr />
|
||||||
{{else}}
|
|
||||||
<tr>
|
|
||||||
<td colspan="3" class="text-center text-muted">
|
|
||||||
{{t 'viewEditProject.showEdit.noMembers'}}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{{/each}}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<hr class="m-0" />
|
|
||||||
{{else}}
|
{{else}}
|
||||||
<p class="text-info text-center">
|
<p class="text-info text-center">
|
||||||
{{format-html-message 'viewEditProject.helpBlock'}}
|
{{format-html-message 'viewEditProject.helpBlock'}}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue