You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@cloudstack.apache.org by GitBox <gi...@apache.org> on 2020/06/24 06:11:33 UTC
[GitHub] [cloudstack-primate] rhtyd commented on a change in pull request #298: Quota UI
rhtyd commented on a change in pull request #298:
URL: https://github.com/apache/cloudstack-primate/pull/298#discussion_r444665581
##########
File path: src/components/view/ListView.vue
##########
@@ -16,220 +16,272 @@
// under the License.
<template>
- <a-table
- size="small"
- :loading="loading"
- :columns="columns"
- :dataSource="items"
- :rowKey="record => record.id || record.name"
- :pagination="false"
- :rowSelection="['vm-tbd', 'event-tbd', 'alert-tbd'].includes($route.name) ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
- :rowClassName="getRowClassName"
- style="overflow-y: auto"
- >
- <template slot="footer">
- <span v-if="hasSelected">
- {{ `Selected ${selectedRowKeys.length} items` }}
- </span>
- </template>
-
- <!--
- <div slot="expandedRowRender" slot-scope="resource">
- <info-card :resource="resource" style="margin-left: 0px; width: 50%">
- <div slot="actions" style="padding-top: 12px">
- <a-tooltip
- v-for="(action, actionIndex) in $route.meta.actions"
- :key="actionIndex"
- placement="bottom">
- <template slot="title">
- {{ $t(action.label) }}
- </template>
- <a-button
- v-if="action.api in $store.getters.apis && action.dataView &&
- ('show' in action ? action.show(resource, $store.getters.userInfo) : true)"
- :icon="action.icon"
- :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
- shape="circle"
- style="margin-right: 5px; margin-top: 12px"
- @click="$parent.execAction(action)"
- >
- </a-button>
- </a-tooltip>
- </div>
- </info-card>
- </div>
- -->
-
- <span slot="name" slot-scope="text, record">
- <div style="min-width: 120px">
- <span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
- <a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" />
+ <div>
+ <a-table
+ size="small"
+ :loading="loading"
+ :columns="columns"
+ :dataSource="items"
+ :rowKey="record => record.id || record.name || record.usageType"
+ :pagination="false"
+ :rowSelection="['vm-tbd', 'event-tbd', 'alert-tbd'].includes($route.name) ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
+ :rowClassName="getRowClassName"
+ style="overflow-y: auto"
+ >
+ <template slot="footer">
+ <span v-if="hasSelected">
+ {{ `Selected ${selectedRowKeys.length} items` }}
</span>
- <os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" />
- <console :resource="record" size="small" style="margin-right: 5px" />
+ </template>
- <span v-if="$route.path.startsWith('/globalsetting')">{{ text }}</span>
- <span v-else>
- <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
- <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
- </span>
+ <!--
+ <div slot="expandedRowRender" slot-scope="resource">
+ <info-card :resource="resource" style="margin-left: 0px; width: 50%">
+ <div slot="actions" style="padding-top: 12px">
+ <a-tooltip
+ v-for="(action, actionIndex) in $route.meta.actions"
+ :key="actionIndex"
+ placement="bottom">
+ <template slot="title">
+ {{ $t(action.label) }}
+ </template>
+ <a-button
+ v-if="action.api in $store.getters.apis && action.dataView &&
+ ('show' in action ? action.show(resource, $store.getters.userInfo) : true)"
+ :icon="action.icon"
+ :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
+ shape="circle"
+ style="margin-right: 5px; margin-top: 12px"
+ @click="$parent.execAction(action)"
+ >
+ </a-button>
+ </a-tooltip>
+ </div>
+ </info-card>
</div>
- </span>
- <a slot="displayname" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
- </a>
- <a slot="username" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
- </a>
- <a slot="ipaddress" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
- <span v-if="record.issourcenat">
-
- <a-tag>source-nat</a-tag>
+ -->
+
+ <span slot="name" slot-scope="text, record">
+ <div style="min-width: 120px">
+ <span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
+ <a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" />
+ </span>
+ <os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" />
+ <console :resource="record" size="small" style="margin-right: 5px" />
+
+ <span v-if="$route.path.startsWith('/globalsetting')">{{ text }}</span>
+ <span v-else>
+ <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
+ <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
+ </span>
+ </div>
</span>
- </a>
- <a slot="publicip" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
- </a>
- <a slot="traffictype" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: $route.path + '/' + record.id + '?physicalnetworkid=' + record.physicalnetworkid }">{{ text }}</router-link>
- </a>
- <a slot="vmname" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
- </a>
- <span slot="hypervisor" slot-scope="text, record">
- <span v-if="$route.name === 'hypervisorcapability'">
+ <a slot="templatetype" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: $route.path + '/' + record.templatetype }">{{ text }}</router-link>
+ </a>
+ <a slot="displayname" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+ </a>
+ <a slot="username" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+ </a>
+ <a slot="ipaddress" slot-scope="text, record" href="javascript:;">
<router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+ <span v-if="record.issourcenat">
+
+ <a-tag>source-nat</a-tag>
+ </span>
+ </a>
+ <a slot="publicip" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+ </a>
+ <a slot="traffictype" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: $route.path + '/' + record.id + '?physicalnetworkid=' + record.physicalnetworkid }">{{ text }}</router-link>
+ </a>
+ <a slot="vmname" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
+ </a>
+ <span slot="hypervisor" slot-scope="text, record">
+ <span v-if="$route.name === 'hypervisorcapability'">
+ <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+ </span>
+ <span v-else>{{ text }}</span>
+ </span>
+ <template slot="state" slot-scope="text">
+ <status :text="text ? text : ''" displayText />
+ </template>
+ <template slot="allocationstate" slot-scope="text">
+ <status :text="text ? text : ''" displayText />
+ </template>
+ <template slot="resourcestate" slot-scope="text">
+ <status :text="text ? text : ''" displayText />
+ </template>
+ <template slot="powerstate" slot-scope="text">
+ <status :text="text ? text : ''" displayText />
+ </template>
+ <template slot="agentstate" slot-scope="text">
+ <status :text="text ? text : ''" displayText />
+ </template>
+ <a slot="guestnetworkname" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
+ </a>
+ <a slot="vpcname" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text }}</router-link>
+ </a>
+ <a slot="hostname" slot-scope="text, record" href="javascript:;">
+ <router-link v-if="record.hostid" :to="{ path: '/host/' + record.hostid }">{{ text }}</router-link>
+ <router-link v-else-if="record.hostname" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
+ <span v-else>{{ text }}</span>
+ </a>
+ <a slot="storage" slot-scope="text, record" href="javascript:;">
+ <router-link v-if="record.storageid" :to="{ path: '/storagepool/' + record.storageid }">{{ text }}</router-link>
+ <span v-else>{{ text }}</span>
+ </a>
+
+ <a slot="clustername" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link>
+ </a>
+ <a slot="podname" slot-scope="text, record" href="javascript:;">
+ <router-link :to="{ path: '/pod/' + record.podid }">{{ text }}</router-link>
+ </a>
+ <a slot="account" slot-scope="text, record" href="javascript:;">
+ <router-link
+ :to="{ path: `${$route.path}/${record.account}`, query: { account: record.account, domainid: record.domainid, quota: true } }"
+ v-if="record.accountid && 'quota' in record">{{ text }}</router-link>
+ <router-link :to="{ path: '/account/' + record.accountid }" v-else-if="record.accountid">{{ text }}</router-link>
+ <router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid } }" v-else>{{ text }}</router-link>
+ </a>
+ <span slot="domain" slot-scope="text, record" href="javascript:;">
+ <router-link v-if="record.domainid && !record.domainid.toString().includes(',') && $router.resolve('/domain/' + record.domainid).route.name !== '404'" :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>
+ <span v-else>{{ text }}</span>
+ </span>
+ <span slot="domainpath" slot-scope="text, record" href="javascript:;">
+ <router-link v-if="record.domainid && !record.domainid.includes(',') && $router.resolve('/domain/' + record.domainid).route.name !== '404'" :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>
+ <span v-else>{{ text }}</span>
+ </span>
+ <a slot="zone" slot-scope="text, record" href="javascript:;">
+ <router-link v-if="record.zoneid && !record.zoneid.includes(',') && $router.resolve('/zone/' + record.zoneid).route.name !== '404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
+ <span v-else>{{ text }}</span>
+ </a>
+ <span slot="zonename" slot-scope="text, record">
+ <router-link v-if="$router.resolve('/zone/' + record.zoneid).route.name !== '404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
+ <span v-else>{{ text }}</span>
</span>
- <span v-else>{{ text }}</span>
- </span>
- <template slot="state" slot-scope="text">
- <status :text="text ? text : ''" displayText />
- </template>
- <template slot="allocationstate" slot-scope="text">
- <status :text="text ? text : ''" displayText />
- </template>
- <template slot="resourcestate" slot-scope="text">
- <status :text="text ? text : ''" displayText />
- </template>
- <template slot="powerstate" slot-scope="text">
- <status :text="text ? text : ''" displayText />
- </template>
- <template slot="agentstate" slot-scope="text">
- <status :text="text ? text : ''" displayText />
- </template>
- <a slot="guestnetworkname" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
- </a>
- <a slot="vpcname" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text }}</router-link>
- </a>
- <a slot="hostname" slot-scope="text, record" href="javascript:;">
- <router-link v-if="record.hostid" :to="{ path: '/host/' + record.hostid }">{{ text }}</router-link>
- <router-link v-else-if="record.hostname" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
- <span v-else>{{ text }}</span>
- </a>
- <a slot="storage" slot-scope="text, record" href="javascript:;">
- <router-link v-if="record.storageid" :to="{ path: '/storagepool/' + record.storageid }">{{ text }}</router-link>
- <span v-else>{{ text }}</span>
- </a>
- <a slot="clustername" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link>
- </a>
- <a slot="podname" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: '/pod/' + record.podid }">{{ text }}</router-link>
- </a>
- <a slot="account" slot-scope="text, record" href="javascript:;">
- <router-link :to="{ path: '/account/' + record.accountid }" v-if="record.accountid">{{ text }}</router-link>
- <router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid } }" v-else>{{ text }}</router-link>
- </a>
- <span slot="domain" slot-scope="text, record" href="javascript:;">
- <router-link v-if="record.domainid && !record.domainid.includes(',') && $router.resolve('/domain/' + record.domainid).route.name !== '404'" :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>
- <span v-else>{{ text }}</span>
- </span>
- <span slot="domainpath" slot-scope="text, record" href="javascript:;">
- <router-link v-if="record.domainid && !record.domainid.includes(',') && $router.resolve('/domain/' + record.domainid).route.name !== '404'" :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>
- <span v-else>{{ text }}</span>
- </span>
- <a slot="zone" slot-scope="text, record" href="javascript:;">
- <router-link v-if="record.zoneid && !record.zoneid.includes(',') && $router.resolve('/zone/' + record.zoneid).route.name !== '404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
- <span v-else>{{ text }}</span>
- </a>
- <span slot="zonename" slot-scope="text, record">
- <router-link v-if="$router.resolve('/zone/' + record.zoneid).route.name !== '404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
- <span v-else>{{ text }}</span>
- </span>
+ <div slot="order" slot-scope="text, record" class="shift-btns">
+ <a-tooltip placement="top">
+ <template slot="title">Move to top</template>
+ <a-button
+ shape="round"
+ @click="moveItemTop(record)"
+ class="shift-btn">
+ <a-icon type="double-left" class="shift-btn shift-btn--rotated" />
+ </a-button>
+ </a-tooltip>
+ <a-tooltip placement="top">
+ <template slot="title">Move to bottom</template>
+ <a-button
+ shape="round"
+ @click="moveItemBottom(record)"
+ class="shift-btn">
+ <a-icon type="double-right" class="shift-btn shift-btn--rotated" />
+ </a-button>
+ </a-tooltip>
+ <a-tooltip placement="top">
+ <template slot="title">Move up one row</template>
+ <a-button shape="round" @click="moveItemUp(record)" class="shift-btn">
+ <a-icon type="caret-up" class="shift-btn" />
+ </a-button>
+ </a-tooltip>
+ <a-tooltip placement="top">
+ <template slot="title">Move down one row</template>
+ <a-button shape="round" @click="moveItemDown(record)" class="shift-btn">
+ <a-icon type="caret-down" class="shift-btn" />
+ </a-button>
+ </a-tooltip>
+ </div>
- <div slot="order" slot-scope="text, record" class="shift-btns">
- <a-tooltip placement="top">
- <template slot="title">Move to top</template>
+ <template slot="value" slot-scope="text, record">
+ <a-input
+ v-if="editableValueKey === record.key"
+ :defaultValue="record.value"
+ :disabled="!('updateConfiguration' in $store.getters.apis)"
+ v-model="editableValue"
+ @keydown.esc="editableValueKey = null"
+ @pressEnter="saveValue(record)">
+ </a-input>
+ <div v-else style="width: 200px; word-break: break-all">
+ {{ text }}
+ </div>
+ </template>
+ <template slot="actions" slot-scope="text, record">
<a-button
- shape="round"
- @click="moveItemTop(record)"
- class="shift-btn">
- <a-icon type="double-left" class="shift-btn shift-btn--rotated" />
- </a-button>
- </a-tooltip>
- <a-tooltip placement="top">
- <template slot="title">Move to bottom</template>
+ shape="circle"
+ :disabled="!('updateConfiguration' in $store.getters.apis)"
+ v-if="editableValueKey !== record.key"
+ icon="edit"
+ @click="editValue(record)" />
<a-button
- shape="round"
- @click="moveItemBottom(record)"
- class="shift-btn">
- <a-icon type="double-right" class="shift-btn shift-btn--rotated" />
+ shape="circle"
+ :disabled="!('updateConfiguration' in $store.getters.apis)"
+ @click="saveValue(record)"
+ v-if="editableValueKey === record.key" >
+ <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
</a-button>
- </a-tooltip>
- <a-tooltip placement="top">
- <template slot="title">Move up one row</template>
- <a-button shape="round" @click="moveItemUp(record)" class="shift-btn">
- <a-icon type="caret-up" class="shift-btn" />
- </a-button>
- </a-tooltip>
- <a-tooltip placement="top">
- <template slot="title">Move down one row</template>
- <a-button shape="round" @click="moveItemDown(record)" class="shift-btn">
- <a-icon type="caret-down" class="shift-btn" />
+ <a-button
+ shape="circle"
+ size="default"
+ @click="editableValueKey = null"
+ v-if="editableValueKey === record.key" >
+ <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
</a-button>
- </a-tooltip>
- </div>
-
- <template slot="value" slot-scope="text, record">
- <a-input
- v-if="editableValueKey === record.key"
- :defaultValue="record.value"
- :disabled="!('updateConfiguration' in $store.getters.apis)"
- v-model="editableValue"
- @keydown.esc="editableValueKey = null"
- @pressEnter="saveValue(record)">
- </a-input>
- <div v-else style="width: 200px; word-break: break-all">
- {{ text }}
- </div>
- </template>
- <template slot="actions" slot-scope="text, record">
- <a-button
- shape="circle"
- :disabled="!('updateConfiguration' in $store.getters.apis)"
- v-if="editableValueKey !== record.key"
- icon="edit"
- @click="editValue(record)" />
- <a-button
- shape="circle"
- :disabled="!('updateConfiguration' in $store.getters.apis)"
- @click="saveValue(record)"
- v-if="editableValueKey === record.key" >
- <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
- </a-button>
- <a-button
- shape="circle"
- size="default"
- @click="editableValueKey = null"
- v-if="editableValueKey === record.key" >
- <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
- </a-button>
- </template>
- </a-table>
+ </template>
+ <template slot="tariffActions" slot-scope="text, record">
+ <a-button
+ shape="circle"
+ v-if="editableValueKey !== record.key"
+ icon="edit"
+ @click="editTariffValue(record)" />
+ </template>
+ </a-table>
+ <a-modal
+ :visible="showTariffAction"
+ :closable="true"
+ :title="$t('label.quota.configuration')"
+ :confirmLoading="actionLoading"
+ style="top: 20px;"
+ @ok="submitTariff"
+ @cancel="() => { this.showTariffAction = false }"
+ centered
+ >
+ <a-form
Review comment:
@utchoang can you undo changes in this component; instead any additional things could to pushed into it using slots (see other examples using `<slot ...`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org