etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui: add tooltips for actions in tab (#4842) 

Adds tooltips for buttons in tabs

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
This commit is contained in:
Abhishek Kumar 2021-05-07 16:28:16 +05:30 committed by GitHub
parent f5e665cd63
commit 1eea9c5939
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 561 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/components/view/DetailSettings.vue
View File

@ -52,18 +52,8 @@
:dataSource="detailOptions[newKey]"
:placeholder="$t('label.value')"
@change="e => onAddInputChange(e, 'newValue')" />
<a-tooltip arrowPointAtCenter placement="topRight">
<template slot="title">
{{ $t('label.add.setting') }}
</template>
<a-button icon="check" @click="addDetail" class="detail-button"></a-button>
</a-tooltip>
<a-tooltip arrowPointAtCenter placement="topRight">
<template slot="title">
{{ $t('label.cancel') }}
</template>
<a-button icon="close" @click="closeDetail" class="detail-button"></a-button>
</a-tooltip>
<tooltip-button :tooltip="$t('label.add.setting')" icon="check" @click="addDetail" buttonClass="detail-button" />
<tooltip-button :tooltip="$t('label.cancel')" icon="close" @click="closeDetail" buttonClass="detail-button" />
</a-input-group>
<p v-if="error" style="color: red"> {{ $t(error) }} </p>
</div>
@ -90,14 +80,10 @@
slot="actions"
v-if="!disableSettings && 'updateTemplate' in $store.getters.apis &&
'updateVirtualMachine' in $store.getters.apis && isAdminOrOwner() && allowEditOfDetail(item.name)">
<a-button shape="circle" size="default" @click="updateDetail(index)" v-if="item.edit">
<a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
</a-button>
<a-button shape="circle" size="default" @click="hideEditDetail(index)" v-if="item.edit">
<a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
</a-button>
<a-button
shape="circle"
<tootip-button :tooltip="$t('label.cancel')" @click="hideEditDetail(index)" v-if="item.edit" iconType="close-circle" iconTwoToneColor="#f5222d" />
<tootip-button :tooltip="$t('label.ok')" @click="updateDetail(index)" v-if="item.edit" iconType="check-circle" iconTwoToneColor="#52c41a" />
<tooltip-button
:tooltip="$t('label.edit')"
icon="edit"
v-if="!item.edit"
@click="showEditDetail(index)" />
@ -113,7 +99,7 @@
:cancelText="$t('label.no')"
placement="left"
>
<a-button shape="circle" type="danger" icon="delete" />
<tooltip-button :tooltip="$t('label.delete')" type="danger" icon="delete" />
</a-popconfirm>
</div>
</a-list-item>
@ -123,8 +109,10 @@
<script>
import { api } from '@/api'
import TooltipButton from './TooltipButton.vue'
export default {
components: { TooltipButton },
name: 'DetailSettings',
props: {
resource: {

66
ui/src/components/view/InfoCard.vue
View File

@ -106,19 +106,15 @@
<div class="resource-detail-item" v-if="resource.id">
<div class="resource-detail-item__label">{{ $t('label.id') }}</div>
<div class="resource-detail-item__details">
<a-tooltip placement="right" >
<template slot="title">
<span>{{ $t('label.copyid') }}</span>
</template>
<a-button
style="margin-left: -5px"
shape="circle"
icon="barcode"
type="dashed"
size="small"
@click="$message.success($t('label.copied.clipboard'))"
v-clipboard:copy="resource.id" />
</a-tooltip>
<tooltip-button
tooltipPlacement="right"
:tooltip="$t('label.copyid')"
style="margin-left: -5px"
icon="barcode"
type="dashed"
size="small"
@click="$message.success($t('label.copied.clipboard'))"
v-clipboard:copy="resource.id" />
<span style="margin-left: 10px;">{{ resource.id }}</span>
</div>
</div>
@ -573,14 +569,14 @@
<a-icon type="key" />
<strong>
{{ $t('label.apikey') }}
<a-tooltip placement="right" >
<template slot="title">
<span>{{ $t('label.copy') + ' ' + $t('label.apikey') }}</span>
</template>
<a-button shape="circle" type="dashed" size="small" @click="$message.success($t('label.copied.clipboard'))" v-clipboard:copy="resource.apikey">
<a-icon type="copy"/>
</a-button>
</a-tooltip>
<tooltip-button
tooltipPlacement="right"
:tooltip="$t('label.copy') + ' ' + $t('label.apikey')"
icon="copy"
type="dashed"
size="small"
@click="$message.success($t('label.copied.clipboard'))"
v-clipboard:copy="resource.apikey" />
</strong>
<div>
{{ resource.apikey.substring(0, 20) }}...
@ -590,14 +586,14 @@
<a-icon type="lock" />
<strong>
{{ $t('label.secretkey') }}
<a-tooltip placement="right" >
<template slot="title">
<span>{{ $t('label.copy') + ' ' + $t('label.secretkey') }}</span>
</template>
<a-button shape="circle" type="dashed" size="small" @click="$message.success($t('label.copied.clipboard'))" v-clipboard:copy="resource.secretkey">
<a-icon type="copy"/>
</a-button>
</a-tooltip>
<tooltip-button
tooltipPlacement="right"
:tooltip="$t('label.copy') + ' ' + $t('label.secretkey')"
icon="copy"
type="dashed"
size="small"
@click="$message.success($t('label.copied.clipboard'))"
v-clipboard:copy="resource.secretkey" />
</strong>
<div>
{{ resource.secretkey.substring(0, 20) }}...
@ -626,12 +622,8 @@
<a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" :placeholder="$t('label.key')" />
<a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<a-button shape="circle" size="small" @click="handleInputConfirm">
<a-icon type="check"/>
</a-button>
<a-button shape="circle" size="small" @click="inputVisible=false">
<a-icon type="close"/>
</a-button>
<tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
<tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
</a-input-group>
</div>
<a-tag @click="showInput" style="background: #fff; borderStyle: dashed;" v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
@ -701,13 +693,15 @@ import { api } from '@/api'
import Console from '@/components/widgets/Console'
import OsLogo from '@/components/widgets/OsLogo'
import Status from '@/components/widgets/Status'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'InfoCard',
components: {
Console,
OsLogo,
Status
Status,
TooltipButton
},
props: {
resource: {

37
ui/src/components/view/ListView.vue
View File

@ -70,7 +70,7 @@
:enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'name' "
@exec-action="$parent.execAction"/>
<span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
<a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" />
<tooltip-button type="dashed" size="small" icon="login" @click="changeProject(record)" />
</span>
<os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" />
@ -287,30 +287,29 @@
</div>
</template>
<template slot="actions" slot-scope="text, record">
<a-button
shape="circle"
<tooltip-button
:tooltip="$t('label.edit')"
:disabled="!('updateConfiguration' in $store.getters.apis)"
v-if="editableValueKey !== record.key"
icon="edit"
@click="editValue(record)" />
<a-button
shape="circle"
<tooltip-button
:tooltip="$t('label.cancel')"
@click="editableValueKey = null"
v-if="editableValueKey === record.key"
iconType="close-circle"
iconTwoToneColor="#f5222d" />
<tooltip-button
:tooltip="$t('label.ok')"
: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>
v-if="editableValueKey === record.key"
iconType="check-circle"
iconTwoToneColor="#52c41a" />
</template>
<template slot="tariffActions" slot-scope="text, record">
<a-button
shape="circle"
<tooltip-button
:tooltip="$t('label.edit')"
v-if="editableValueKey !== record.key"
:disabled="!('quotaTariffUpdate' in $store.getters.apis)"
icon="edit"
@ -327,6 +326,7 @@ import OsLogo from '@/components/widgets/OsLogo'
import Status from '@/components/widgets/Status'
import InfoCard from '@/components/view/InfoCard'
import QuickView from '@/components/view/QuickView'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'ListView',
@ -335,7 +335,8 @@ export default {
OsLogo,
Status,
InfoCard,
QuickView
QuickView,
TooltipButton
},
props: {
columns: {

4
ui/src/components/view/SearchView.vue
View File

@ -76,9 +76,7 @@
<a-input ref="input" :value="inputKey" @change="e => inputKey = e.target.value" style="width: 50px; text-align: center" :placeholder="$t('label.key')" />
<a-input style=" width: 20px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 50px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<a-button shape="circle" size="small" @click="inputKey = inputValue = ''">
<a-icon type="close"/>
</a-button>
<tooltip-button icon="close" size="small" @click="inputKey = inputValue = ''" />
</a-input-group>
</div>
</div>

29
ui/src/components/view/SettingsTab.vue
View File

@ -46,25 +46,24 @@
</div>
<div slot="actions" class="action">
<a-button
shape="circle"
<tooltip-button
:tooltip="$t('label.edit')"
:disabled="!('updateConfiguration' in $store.getters.apis)"
v-if="editableValueKey !== index"
icon="edit"
@click="setEditableSetting(item, index)" />
<a-button
shape="circle"
size="default"
<tooltip-button
:tooltip="$t('label.cancel')"
@click="editableValueKey = null"
v-if="editableValueKey === index" >
<a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
</a-button>
<a-button
shape="circle"
v-if="editableValueKey === index"
iconType="close-circle"
iconTwoToneColor="#f5222d" />
<tooltip-button
:tooltip="$t('label.ok')"
@click="updateData(item)"
v-if="editableValueKey === index" >
<a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
</a-button>
v-if="editableValueKey === index"
iconType="check-circle"
iconTwoToneColor="#52c41a" />
</div>
</a-list-item>
</a-list>
@ -73,8 +72,12 @@
<script>
import { api } from '@/api'
import TooltipButton from './TooltipButton.vue'
export default {
components: {
TooltipButton
},
name: 'SettingsTab',
props: {
resource: {

100
ui/src/components/view/TooltipButton.vue Normal file
View File

@ -0,0 +1,100 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.
<template>
<a-tooltip arrowPointAtCenter :placement="tooltipPlacement">
<template slot="title" v-if="tooltip">
{{ tooltip }}
</template>
<a-button
shape="circle"
:size="size"
:type="type"
:disabled="disabled"
:icon="icon"
:class="buttonClass"
:loading="loading"
@click="handleClicked()" >
<a-icon
v-if="iconType && iconTwoToneColor"
:type="iconType"
theme="twoTone"
:twoToneColor="iconTwoToneColor" />
</a-button>
</a-tooltip>
</template>
<script>
export default {
name: 'TooltipButton',
props: {
tooltip: {
type: String,
default: null
},
tooltipPlacement: {
type: String,
default: 'bottomRight'
},
disabled: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: 'default'
},
icon: {
type: String,
default: null
},
iconType: {
type: String,
default: null
},
iconTwoToneColor: {
type: String,
default: null
},
buttonClass: {
type: String,
default: ''
},
loading: {
type: Boolean,
default: false
}
},
data () {
return {
}
},
methods: {
handleClicked () {
this.$emit('click')
}
}
}
</script>
<style scoped lang="scss">
</style>

105
ui/src/views/compute/InstanceTab.vue
View File

@ -67,61 +67,47 @@
</a-button>
<NicsTable :resource="vm" :loading="loading">
<span slot="actions" slot-scope="record">
<a-tooltip placement="bottom">
<template slot="title">
{{ $t('label.set.default.nic') }}
</template>
<a-popconfirm
:title="$t('label.set.default.nic')"
@confirm="setAsDefault(record.nic)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
v-if="!record.nic.isdefault"
>
<a-button
:disabled="!('updateDefaultNicForVirtualMachine' in $store.getters.apis)"
icon="check-square"
shape="circle" />
</a-popconfirm>
</a-tooltip>
<a-tooltip placement="bottom" v-if="record.nic.type !== 'L2'">
<template slot="title">
{{ $t('label.change.ip.addess') }}
</template>
<a-button
icon="swap"
shape="circle"
:disabled="!('updateVmNicIp' in $store.getters.apis)"
@click="onChangeIPAddress(record)" />
</a-tooltip>
<a-tooltip placement="bottom" v-if="record.nic.type !== 'L2'">
<template slot="title">
{{ $t('label.edit.secondary.ips') }}
</template>
<a-button
icon="environment"
shape="circle"
:disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
@click="onAcquireSecondaryIPAddress(record)" />
</a-tooltip>
<a-tooltip placement="bottom">
<template slot="title">
{{ $t('label.action.delete.nic') }}
</template>
<a-popconfirm
:title="$t('message.network.removenic')"
@confirm="removeNIC(record.nic)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
v-if="!record.nic.isdefault"
>
<a-button
:disabled="!('removeNicFromVirtualMachine' in $store.getters.apis)"
type="danger"
icon="delete"
shape="circle" />
</a-popconfirm>
</a-tooltip>
<a-popconfirm
:title="$t('label.set.default.nic')"
@confirm="setAsDefault(record.nic)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
v-if="!record.nic.isdefault"
>
<tooltip-button
tooltipPlacement="bottom"
:tooltip="$t('label.set.default.nic')"
:disabled="!('updateDefaultNicForVirtualMachine' in $store.getters.apis)"
icon="check-square" />
</a-popconfirm>
<tooltip-button
v-if="record.nic.type !== 'L2'"
tooltipPlacement="bottom"
:tooltip="$t('label.change.ip.addess')"
icon="swap"
:disabled="!('updateVmNicIp' in $store.getters.apis)"
@click="onChangeIPAddress(record)" />
<tooltip-button
v-if="record.nic.type !== 'L2'"
tooltipPlacement="bottom"
:tooltip="$t('label.edit.secondary.ips')"
icon="environment"
:disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
@click="onAcquireSecondaryIPAddress(record)" />
<a-popconfirm
:title="$t('message.network.removenic')"
@confirm="removeNIC(record.nic)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
v-if="!record.nic.isdefault"
>
<tooltip-button
tooltipPlacement="bottom"
:tooltip="$t('label.action.delete.nic')"
:disabled="!('removeNicFromVirtualMachine' in $store.getters.apis)"
type="danger"
icon="delete" />
</a-popconfirm>
</span>
</NicsTable>
</a-tab-pane>
@ -251,9 +237,10 @@
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
>
<a-button
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.action.release.ip')"
type="danger"
shape="circle"
icon="delete" />
{{ ip.ipaddress }}
</a-popconfirm>
@ -274,6 +261,7 @@ import DetailsTab from '@/components/view/DetailsTab'
import DetailSettings from '@/components/view/DetailSettings'
import NicsTable from '@/views/network/NicsTable'
import ListResourceTable from '@/components/view/ListResourceTable'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'InstanceTab',
@ -283,7 +271,8 @@ export default {
DetailSettings,
NicsTable,
Status,
ListResourceTable
ListResourceTable,
TooltipButton
},
mixins: [mixinDevice],
props: {

24
ui/src/views/compute/backup/BackupSchedule.vue
View File

@ -58,18 +58,14 @@
<label>{{ getTimeZone(record.timezone) }}</label>
</div>
<div slot="action" class="account-button-action" slot-scope="text, record">
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.delete') }}
</template>
<a-button
type="danger"
shape="circle"
icon="close"
size="small"
:loading="actionLoading"
@click="handleClickDelete(record)"/>
</a-tooltip>
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.delete')"
type="danger"
icon="close"
size="small"
:loading="actionLoading"
@click="handleClickDelete(record)"/>
</div>
</a-table>
</div>
@ -78,9 +74,13 @@
<script>
import { api } from '@/api'
import { timeZoneName } from '@/utils/timezone'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'BackupSchedule',
components: {
TooltipButton
},
props: {
loading: {
type: Boolean,

25
ui/src/views/iam/RolePermissionTab.vue
View File

@ -51,20 +51,13 @@
<a-input v-model="newRuleDescription" :placeholder="$t('label.description')"></a-input>
</div>
<div class="rules-table__col rules-table__col--actions">
<a-tooltip
placement="bottom">
<template slot="title">
{{ $t('label.save.new.rule') }}
</template>
<a-button
:disabled="!('createRolePermission' in $store.getters.apis)"
icon="plus"
type="primary"
shape="circle"
@click="onRuleSave"
>
</a-button>
</a-tooltip>
<tooltip-button
tooltipPlacement="bottom"
:tooltip="$t('label.save.new.rule')"
:disabled="!('createRolePermission' in $store.getters.apis)"
icon="plus"
type="primary"
@click="onRuleSave" />
</div>
</div>
@ -117,13 +110,15 @@ import { api } from '@/api'
import draggable from 'vuedraggable'
import PermissionEditable from './PermissionEditable'
import RuleDelete from './RuleDelete'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'RolePermissionTab',
components: {
RuleDelete,
PermissionEditable,
draggable
draggable,
TooltipButton
},
props: {
resource: {

24
ui/src/views/iam/RuleDelete.vue
View File

@ -16,24 +16,22 @@
// under the License.
<template>
<a-tooltip placement="bottom">
<template slot="title">
{{ $t('label.delete.rule') }}
</template>
<a-popconfirm
:title="`${$t('label.delete.rule')}?`"
@confirm="handleDelete"
:disabled="disabled">
<a-button type="danger" shape="circle" :disabled="disabled">
<a-icon type="delete" />
</a-button>
</a-popconfirm>
</a-tooltip>
<a-popconfirm
:title="`${$t('label.delete.rule')}?`"
@confirm="handleDelete"
:disabled="disabled">
<tooltip-button :tooltip="$t('label.delete.rule')" tooltipPlacement="bottom" type="danger" icon="delete" :disabled="disabled" />
</a-popconfirm>
</template>
<script>
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'RuleDelete',
components: {
TooltipButton
},
props: {
record: {
type: Object,

37
ui/src/views/iam/SSLCertificateTab.vue
View File

@ -29,24 +29,21 @@
v-if="!quickview"
>
<span slot="action" slot-scope="text, record" class="cert-button-action">
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.quickview') }}
</template>
<a-button type="primary" shape="circle" icon="eye" size="small" @click="onQuickView(record.id)" />
</a-tooltip>
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.delete.sslcertificate') }}
</template>
<a-button
:disabled="!('deleteSslCert' in $store.getters.apis)"
type="danger"
shape="circle"
icon="delete"
size="small"
@click="onShowConfirm(record)"/>
</a-tooltip>
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.quickview')"
type="primary"
icon="eye"
size="small"
@click="onQuickView(record.id)" />
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.delete.sslcertificate')"
:disabled="!('deleteSslCert' in $store.getters.apis)"
type="danger"
icon="delete"
size="small"
@click="onShowConfirm(record)" />
</span>
</a-table>
@ -71,9 +68,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'SSLCertificate',
components: {
TooltipButton
},
data () {
return {
columns: [],

14
ui/src/views/image/IsoZones.vue
View File

@ -31,10 +31,10 @@
</div>
<template slot="action" slot-scope="text, record">
<span style="margin-right: 5px">
<a-button
<tooltip-button
:tooltip="$t('label.action.copy.iso')"
:disabled="!('copyIso' in $store.getters.apis && record.isready)"
icon="copy"
shape="circle"
:loading="copyLoading"
@click="showCopyIso(record)" />
</span>
@ -48,10 +48,10 @@
:loading="deleteLoading"
@confirm="deleteIso(record)"
>
<a-button
<tooltip-button
:tooltip="$t('label.action.delete.iso')"
type="danger"
icon="delete"
shape="circle" />
icon="delete" />
</a-popconfirm>
</span>
</template>
@ -123,9 +123,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'IsoZones',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

34
ui/src/views/image/TemplateZones.vue
View File

@ -30,22 +30,20 @@
<span v-else>{{ $t('label.no') }}</span>
</div>
<template slot="action" slot-scope="text, record">
<span style="margin-right: 5px">
<a-button
:disabled="!('copyTemplate' in $store.getters.apis && record.isready)"
icon="copy"
shape="circle"
:loading="copyLoading"
@click="showCopyTemplate(record)" />
</span>
<span style="margin-right: 5px">
<a-button
:disabled="!('deleteTemplate' in $store.getters.apis)"
type="danger"
icon="delete"
shape="circle"
@click="onShowDeleteModal(record)"/>
</span>
<tooltip-button
style="margin-right: 5px"
:disabled="!('copyTemplate' in $store.getters.apis && record.isready)"
:title="$t('label.action.copy.template')"
icon="copy"
:loading="copyLoading"
@click="showCopyTemplate(record)" />
<tooltip-button
style="margin-right: 5px"
:disabled="!('deleteTemplate' in $store.getters.apis)"
:title="$t('label.action.delete.template')"
type="danger"
icon="delete"
@click="onShowDeleteModal(record)"/>
</template>
</a-table>
<a-pagination
@ -134,9 +132,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'TemplateZones',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

6
ui/src/views/infra/network/DedicatedVLANTab.vue
View File

@ -39,7 +39,7 @@
:cancelText="$t('label.no')"
placement="top"
>
<a-button :disabled="!('releaseDedicatedGuestVlanRange' in $store.getters.apis)" icon="delete" type="danger" shape="circle"></a-button>
<tooltip-button :tooltip="$t('label.delete')" :disabled="!('releaseDedicatedGuestVlanRange' in $store.getters.apis)" icon="delete" type="danger" />
</a-popconfirm>
</template>
</a-table>
@ -134,9 +134,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'DedicatedVLANTab',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

20
ui/src/views/infra/network/IpRangesTabManagement.vue
View File

@ -39,15 +39,13 @@
</template>
<template slot="actions" slot-scope="record">
<div class="actions">
<a-popover placement="bottom">
<template slot="content">{{ $t('label.remove.ip.range') }}</template>
<a-button
:disabled="!('deleteManagementNetworkIpRange' in $store.getters.apis)"
icon="delete"
shape="circle"
type="danger"
@click="handleDeleteIpRange(record)"></a-button>
</a-popover>
<tooltip-button
tooltipPlacement="bottom"
:tooltip="$t('label.remove.ip.range')"
:disabled="!('deleteManagementNetworkIpRange' in $store.getters.apis)"
icon="delete"
type="danger"
@click="handleDeleteIpRange(record)" />
</div>
</template>
</a-table>
@ -125,9 +123,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'IpRangesTabManagement',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

52
ui/src/views/infra/network/IpRangesTabPublic.vue
View File

@ -39,34 +39,28 @@
</template>
<template slot="actions" slot-scope="record">
<div class="actions">
<a-popover v-if="record.account === 'system'" placement="bottom">
<template slot="content">{{ $t('label.add.account') }}</template>
<a-button
icon="user-add"
shape="circle"
@click="() => handleOpenAddAccountModal(record)"
:disabled="!('dedicatePublicIpRange' in $store.getters.apis)"></a-button>
</a-popover>
<a-popover
<tooltip-button
v-if="record.account === 'system'"
tooltipPlacement="bottom"
:tooltip="$t('label.add.account')"
icon="user-add"
@click="() => handleOpenAddAccountModal(record)"
:disabled="!('dedicatePublicIpRange' in $store.getters.apis)" />
<tooltip-button
v-else
placement="bottom">
<template slot="content">{{ $t('label.release.account') }}</template>
<a-button
icon="user-delete"
shape="circle"
type="danger"
@click="() => handleRemoveAccount(record.id)"
:disabled="!('releasePublicIpRange' in $store.getters.apis)"></a-button>
</a-popover>
<a-popover placement="bottom">
<template slot="content">{{ $t('label.remove.ip.range') }}</template>
<a-button
icon="delete"
shape="circle"
type="danger"
@click="handleDeleteIpRange(record.id)"
:disabled="!('deleteVlanIpRange' in $store.getters.apis)"></a-button>
</a-popover>
tooltipPlacement="bottom"
:tooltip="$t('label.release.account')"
icon="user-delete"
type="danger"
@click="() => handleRemoveAccount(record.id)"
:disabled="!('releasePublicIpRange' in $store.getters.apis)" />
<tooltip-button
tooltipPlacement="bottom"
:tooltip="$t('label.remove.ip.range')"
icon="delete"
type="danger"
@click="handleDeleteIpRange(record.id)"
:disabled="!('deleteVlanIpRange' in $store.getters.apis)" />
</div>
</template>
</a-table>
@ -201,9 +195,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'IpRangesTabPublic',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

19
ui/src/views/infra/network/IpRangesTabStorage.vue
View File

@ -38,15 +38,12 @@
<div>{{ returnPodName(record.podid) }}</div>
</template>
<template slot="actions" slot-scope="record">
<a-popover placement="bottom">
<template slot="content">{{ $t('label.remove.ip.range') }}</template>
<a-button
:disabled="!('deleteStorageNetworkIpRange' in $store.getters.apis)"
icon="delete"
shape="circle"
type="danger"
@click="handleDeleteIpRange(record.id)"></a-button>
</a-popover>
<tooltip-button
:tooltip="$t('label.remove.ip.range')"
:disabled="!('deleteStorageNetworkIpRange' in $store.getters.apis)"
icon="delete"
type="danger"
@click="handleDeleteIpRange(record.id)" />
</template>
</a-table>
<a-pagination
@ -120,9 +117,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'IpRangesTabStorage',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

12
ui/src/views/infra/network/providers/ProviderListView.vue
View File

@ -67,18 +67,17 @@
{{ $t('label.delete.ciscoasa1000v') }}
</span>
</template>
<a-button
<tooltip-button
v-if="resource.name==='Ovs'"
type="default"
shape="circle"
:tooltip="$t('label.configure')"
icon="setting"
size="small"
:loading="actionLoading"
@click="onConfigureOvs(record)"/>
<a-button
<tooltip-button
v-else
:tooltip="$t('label.delete')"
type="danger"
shape="circle"
icon="close"
size="small"
:loading="actionLoading"
@ -117,10 +116,11 @@
<script>
import { api } from '@/api'
import Status from '@/components/widgets/Status'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'ProviderListView',
components: { Status },
components: { Status, TooltipButton },
props: {
title: {
type: String,

7
ui/src/views/infra/zone/IpAddressRangeForm.vue
View File

@ -30,7 +30,7 @@
:pagination="false"
style="margin-bottom: 24px; width: 100%" >
<template slot="actions" slot-scope="text, record">
<a-button type="danger" shape="circle" icon="delete" @click="onDelete(record.key)" />
<tooltip-button :tooltip="$t('label.delete')" type="danger" icon="delete" @click="onDelete(record.key)" />
</template>
<template slot="footer">
<a-form
@ -141,9 +141,14 @@
</div>
</template>
<script>
import TooltipButton from '@/components/view/TooltipButton'
import { mixinDevice } from '@/utils/mixin.js'
export default {
components: {
TooltipButton
},
mixins: [mixinDevice],
props: {
traffic: {

19
ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
View File

@ -76,16 +76,16 @@
{{ traffic.toUpperCase() }}
</a-select-option>
</a-select>
<a-button
class="icon-button"
shape="circle"
<tooltip-button
:tooltip="$t('label.add')"
buttonClass="icon-button"
icon="plus"
size="small"
@click="trafficAdded" />
<a-button
class="icon-button"
<tooltip-button
:tooltip="$t('label.cancel')"
buttonClass="icon-button"
type="danger"
shape="circle"
icon="close"
size="small"
@click="() => { addingTrafficForKey = null }" />
@ -102,7 +102,7 @@
</div>
</template>
<template slot="actions" slot-scope="text, record">
<a-button v-if="physicalNetworks.indexOf(record) > 0" type="danger" shape="circle" icon="delete" @click="onDelete(record)" />
<tooltip-button :tooltip="$t('label.delete')" v-if="physicalNetworks.indexOf(record) > 0" type="danger" icon="delete" @click="onDelete(record)" />
</template>
<template slot="footer" v-if="isAdvancedZone">
<a-button
@ -166,7 +166,12 @@
</template>
<script>
import TooltipButton from '@/components/view/TooltipButton'
export default {
components: {
TooltipButton
},
props: {
prefillContent: {
type: Object,

10
ui/src/views/network/AclListRulesTab.vue
View File

@ -87,9 +87,9 @@
</div>
</div>
<div class="list__actions">
<a-button shape="circle" icon="tag" @click="() => openTagsModal(acl)"></a-button>
<a-button shape="circle" icon="edit" @click="() => openEditRuleModal(acl)"></a-button>
<a-button shape="circle" icon="delete" type="danger" :disabled="!('deleteNetworkACL' in $store.getters.apis)" @click="() => handleDeleteRule(acl.id)"></a-button>
<tooltip-button :tooltip="$t('label.tags')" icon="tag" @click="() => openTagsModal(acl)" />
<tooltip-button :tooltip="$t('label.edit')" icon="edit" @click="() => openEditRuleModal(acl)" />
<tooltip-button :tooltip="$t('label.delete')" icon="delete" type="danger" :disabled="!('deleteNetworkACL' in $store.getters.apis)" @click="() => handleDeleteRule(acl.id)" />
</div>
</div>
</transition-group>
@ -198,11 +198,13 @@
<script>
import { api } from '@/api'
import draggable from 'vuedraggable'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'AclListRulesTab',
components: {
draggable
draggable,
TooltipButton
},
props: {
resource: {

6
ui/src/views/network/EgressRulesTab.vue
View File

@ -78,7 +78,7 @@
{{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : 'All' }}
</template>
<template slot="actions" slot-scope="record">
<a-button :disabled="!('deleteEgressFirewallRule' in $store.getters.apis)" shape="circle" type="danger" icon="delete" @click="deleteRule(record)" />
<tooltip-button :tooltip="$t('label.delete')" :disabled="!('deleteEgressFirewallRule' in $store.getters.apis)" type="danger" icon="delete" @click="deleteRule(record)" />
</template>
</a-table>
<a-pagination
@ -102,9 +102,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'EgressRulesTab',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

12
ui/src/views/network/FirewallRules.vue
View File

@ -74,12 +74,12 @@
</template>
<template slot="actions" slot-scope="record">
<div class="actions">
<a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record.id)" />
<a-button
shape="circle"
<tooltip-button :tooltip="$t('label.edit.tags')" icon="tag" buttonClass="rule-action" @click="() => openTagsModal(record.id)" />
<tooltip-button
:tooltip="$t('label.delete')"
type="danger"
icon="delete"
class="rule-action"
buttonClass="rule-action"
:disabled="!('deleteFirewallRule' in $store.getters.apis)"
@click="deleteRule(record)" />
</div>
@ -137,8 +137,12 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
components: {
TooltipButton
},
props: {
resource: {
type: Object,

30
ui/src/views/network/GuestIpRanges.vue
View File

@ -37,21 +37,17 @@
:pagination="false" >
<template slot="action" slot-scope="text, record">
<a-tooltip placement="bottom">
<template slot="title">
{{ $t('label.action.delete.ip.range') }}
</template>
<a-popconfirm
:title="$t('message.confirm.remove.ip.range')"
@confirm="removeIpRange(record.id)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')" >
<a-button
type="danger"
icon="delete"
shape="circle" />
</a-popconfirm>
</a-tooltip>
<a-popconfirm
:title="$t('message.confirm.remove.ip.range')"
@confirm="removeIpRange(record.id)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')" >
<tooltip-button
tooltipPlacement="bottom"
:tooltip="$t('label.action.delete.ip.range')"
type="danger"
icon="delete" />
</a-popconfirm>
</template>
</a-table>
@ -92,10 +88,12 @@
<script>
import { api } from '@/api'
import CreateVlanIpRange from '@/views/network/CreateVlanIpRange'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'GuestIpRanges',
components: {
CreateVlanIpRange
CreateVlanIpRange,
TooltipButton
},
props: {
resource: {

13
ui/src/views/network/IngressEgressRuleConfigure.vue
View File

@ -106,14 +106,19 @@
<div v-else>{{ text }}</div>
</template>
<template slot="actions" slot-scope="record">
<a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record)" />
<tooltip-button :tooltip="$t('label.edit.tags')" icon="tag" buttonClass="rule-action" @click="() => openTagsModal(record)" />
<a-popconfirm
:title="$t('label.delete') + '?'"
@confirm="handleDeleteRule(record)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
>
<a-button :disabled="!('revokeSecurityGroupIngress' in $store.getters.apis) && !('revokeSecurityGroupEgress' in $store.getters.apis)" shape="circle" type="danger" icon="delete" class="rule-action" />
<tooltip-button
:disabled="!('revokeSecurityGroupIngress' in $store.getters.apis) && !('revokeSecurityGroupEgress' in $store.getters.apis)"
:tooltip="$t('label.delete')"
type="danger"
icon="delete"
buttonClass="rule-action" />
</a-popconfirm>
</template>
</a-table>
@ -165,8 +170,12 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
components: {
TooltipButton
},
props: {
resource: {
type: Object,

8
ui/src/views/network/InternalLBAssignedVmTab.vue
View File

@ -36,10 +36,10 @@
</span>
</template>
<template slot="remove" slot-scope="text, record">
<a-button
<tooltip-button
:tooltip="$t('label.remove.vm.from.lb')"
type="danger"
icon="delete"
shape="circle"
@click="removeVmFromLB(record)" />
</template>
<a-divider />
@ -63,9 +63,13 @@
</template>
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'InternalLBAssignedVmTab',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

8
ui/src/views/network/IpAddressesTab.vue
View File

@ -72,11 +72,11 @@
</template>
<template slot="action" slot-scope="text, record">
<a-button
<tooltip-button
v-if="record.issourcenat !== true && record.forvirtualnetwork === true"
:tooltip="$t('label.action.release.ip')"
type="danger"
icon="delete"
shape="circle"
:disabled="!('disassociateIpAddress' in $store.getters.apis)"
@click="releaseIpAddress(record)" />
</template>
@ -129,11 +129,13 @@
<script>
import { api } from '@/api'
import Status from '@/components/widgets/Status'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'IpAddressesTab',
components: {
Status
Status,
TooltipButton
},
props: {
resource: {

14
ui/src/views/network/LoadBalancing.vue
View File

@ -99,8 +99,8 @@
</router-link>
</div>
<div>{{ ip }}</div>
<a-button
shape="circle"
<tooltip-button
:tooltip="$t('label.action.delete.load.balancer')"
type="danger"
icon="delete"
@click="() => handleDeleteInstanceFromRule(instance, record, ip)" />
@ -110,15 +110,15 @@
</template>
<template slot="actions" slot-scope="record">
<div class="actions">
<a-button shape="circle" icon="edit" @click="() => openEditRuleModal(record)"></a-button>
<a-button :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" shape="circle" icon="tag" @click="() => openTagsModal(record.id)" />
<tooltip-button :tooltip="$t('label.edit')" icon="edit" @click="() => openEditRuleModal(record)" />
<tooltip-button :tooltip="$t('label.edit.tags')" :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" icon="tag" @click="() => openTagsModal(record.id)" />
<a-popconfirm
:title="$t('label.delete') + '?'"
@confirm="handleDeleteRule(record)"
:okText="$t('label.yes')"
:cancelText="$t('label.no')"
>
<a-button :disabled="!('deleteLoadBalancerRule' in $store.getters.apis)" shape="circle" type="danger" icon="delete" />
<tooltip-button :tooltip="$t('label.delete')" :disabled="!('deleteLoadBalancerRule' in $store.getters.apis)" type="danger" icon="delete" />
</a-popconfirm>
</div>
</template>
@ -384,11 +384,13 @@
<script>
import { api } from '@/api'
import Status from '@/components/widgets/Status'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'LoadBalancing',
components: {
Status
Status,
TooltipButton
},
props: {
resource: {

12
ui/src/views/network/PortForwarding.vue
View File

@ -97,12 +97,12 @@
</template>
<template slot="actions" slot-scope="record">
<div class="actions">
<a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record.id)" />
<a-button
shape="circle"
<tooltip-button :tooltip="$t('label.tags')" icon="tag" buttonClass="rule-action" @click="() => openTagsModal(record.id)" />
<tooltip-button
:tooltip="$t('label.remove.rule')"
type="danger"
icon="delete"
class="rule-action"
buttonClass="rule-action"
:disabled="!('deletePortForwardingRule' in $store.getters.apis)"
@click="deleteRule(record)" />
</div>
@ -252,10 +252,12 @@
<script>
import { api } from '@/api'
import Status from '@/components/widgets/Status'
import TooltipButton from '@/components/view/TooltipButton'
export default {
components: {
Status
Status,
TooltipButton
},
props: {
resource: {

8
ui/src/views/network/StaticRoutesTab.vue
View File

@ -29,8 +29,8 @@
<div>{{ route.cidr }}</div>
</div>
<div class="actions">
<a-button shape="circle" icon="tag" @click="() => openTagsModal(route)"></a-button>
<a-button :disabled="!('deleteStaticRoute' in $store.getters.apis)" shape="circle" icon="delete" type="danger" @click="() => handleDelete(route)"></a-button>
<tooltip-button :tooltip="$t('label.edit.tags')" icon="tag" @click="() => openTagsModal(route)" />
<tooltip-button :tooltip="$t('label.delete')" :disabled="!('deleteStaticRoute' in $store.getters.apis)" icon="delete" type="danger" @click="() => handleDelete(route)" />
</div>
</div>
</div>
@ -76,9 +76,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'StaticRoutesTab',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

65
ui/src/views/project/AccountsTab.vue
View File

@ -33,43 +33,30 @@
{{ getProjectRole(record) }}
</span>
<span v-if="imProjectAdmin && dataSource.length > 1" slot="action" slot-scope="text, record" class="account-button-action">
<a-tooltip
slot="title"
placement="top"
:title="record.userid ? $t('label.make.user.project.owner') : $t('label.make.project.owner')">
<a-button
v-if="record.role !== owner"
type="default"
shape="circle"
icon="arrow-up"
size="small"
@click="promoteAccount(record)" />
</a-tooltip>
<a-tooltip
slot="title"
placement="top"
:title="record.userid ? $t('label.demote.project.owner.user') : $t('label.demote.project.owner')"
v-if="updateProjectApi.params.filter(x => x.name === 'swapowner').length > 0">
<a-button
v-if="record.role === owner"
type="default"
shape="circle"
icon="arrow-down"
size="small"
@click="demoteAccount(record)" />
</a-tooltip>
<a-tooltip
slot="title"
placement="top"
:title="record.userid ? $t('label.remove.project.user') : $t('label.remove.project.account')">
<a-button
type="danger"
shape="circle"
icon="delete"
size="small"
:disabled="!('deleteAccountFromProject' in $store.getters.apis)"
@click="onShowConfirmDelete(record)"/>
</a-tooltip>
<tooltip-button
tooltipPlacement="top"
:tooltip="record.userid ? $t('label.make.user.project.owner') : $t('label.make.project.owner')"
v-if="record.role !== owner"
type="default"
icon="arrow-up"
size="small"
@click="promoteAccount(record)" />
<tooltip-button
tooltipPlacement="top"
:tooltip="record.userid ? $t('label.demote.project.owner.user') : $t('label.demote.project.owner')"
v-if="updateProjectApi.params.filter(x => x.name === 'swapowner').length > 0 && record.role === owner"
type="default"
icon="arrow-down"
size="small"
@click="demoteAccount(record)" />
<tooltip-button
tooltipPlacement="top"
:tooltip="record.userid ? $t('label.remove.project.user') : $t('label.remove.project.account')"
type="danger"
icon="delete"
size="small"
:disabled="!('deleteAccountFromProject' in $store.getters.apis)"
@click="onShowConfirmDelete(record)" />
</span>
</a-table>
<a-pagination
@ -94,9 +81,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'AccountsTab',
components: {
TooltipButton
},
props: {
resource: {
type: Object,

40
ui/src/views/project/InvitationsTemplate.vue
View File

@ -40,28 +40,20 @@
<status :text="text ? text : ''" displayText />
</template>
<span slot="action" v-if="record.state===stateAllow" slot-scope="text, record" class="account-button-action">
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.accept.project.invitation') }}
</template>
<a-button
type="success"
shape="circle"
icon="check"
size="small"
@click="onShowConfirmAcceptInvitation(record)"/>
</a-tooltip>
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.decline.invitation') }}
</template>
<a-button
type="danger"
shape="circle"
icon="close"
size="small"
@click="onShowConfirmRevokeInvitation(record)"/>
</a-tooltip>
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.accept.project.invitation')"
type="success"
icon="check"
size="small"
@click="onShowConfirmAcceptInvitation(record)"/>
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.decline.invitation')"
type="danger"
icon="close"
size="small"
@click="onShowConfirmRevokeInvitation(record)"/>
</span>
</a-table>
<a-pagination
@ -87,11 +79,13 @@
<script>
import { api } from '@/api'
import Status from '@/components/widgets/Status'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'InvitationsTemplate',
components: {
Status
Status,
TooltipButton
},
data () {
return {

23
ui/src/views/project/iam/ProjectRolePermissionTab.vue
View File

@ -46,19 +46,12 @@
<a-input v-model="newRuleDescription" placeholder="Description"></a-input>
</div>
<div class="rules-table__col rules-table__col--actions">
<a-tooltip
placement="bottom">
<template slot="title">
Save new Rule
</template>
<a-button
icon="plus"
type="primary"
shape="circle"
@click="onRuleSave"
>
</a-button>
</a-tooltip>
<tooltip-button
tooltipPlacement="bottom"
:tooltip="$t('label.save.new.rule')"
icon="plus"
type="primary"
@click="onRuleSave" />
</div>
</div>
@ -109,13 +102,15 @@ import { api } from '@/api'
import draggable from 'vuedraggable'
import PermissionEditable from '@/views/iam/PermissionEditable'
import RuleDelete from '@/views/iam/RuleDelete'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'ProjectRolePermissionTab',
components: {
RuleDelete,
PermissionEditable,
draggable
draggable,
TooltipButton
},
props: {
resource: {

78
ui/src/views/project/iam/ProjectRoleTab.vue
View File

@ -36,29 +36,20 @@
{{ record }}
</template>
<span slot="action" slot-scope="text, record">
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.update.project.role') }}
</template>
<a-button
type="default"
shape="circle"
icon="edit"
size="small"
style="margin:10px"
@click="openUpdateModal(record)" />
</a-tooltip>
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.remove.project.role') }}
</template>
<a-button
type="danger"
shape="circle"
icon="delete"
size="small"
@click="deleteProjectRole(record)"/>
</a-tooltip>
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.update.project.role')"
icon="edit"
size="small"
style="margin:10px"
@click="openUpdateModal(record)" />
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.remove.project.role')"
type="danger"
icon="delete"
size="small"
@click="deleteProjectRole(record)" />
</span>
</a-table>
<a-modal
@ -82,29 +73,20 @@
<a-button type="primary" @click="updateProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
</div>
<span slot="action" slot-scope="text, record">
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.update.project.role') }}
</template>
<a-button
type="default"
shape="circle"
icon="edit"
size="small"
style="margin:10px"
@click="openUpdateModal(record)" />
</a-tooltip>
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.remove.project.role') }}
</template>
<a-button
type="danger"
shape="circle"
icon="delete"
size="small"
@click="deleteProjectRole(record)"/>
</a-tooltip>
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.update.project.role')"
icon="edit"
size="small"
style="margin:10px"
@click="openUpdateModal(record)" />
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.remove.project.role')"
type="danger"
icon="edit"
size="small"
@click="deleteProjectRole(record)" />
</span>
</a-form>
</a-modal>
@ -139,6 +121,7 @@
<script>
import { api } from '@/api'
import ProjectRolePermissionTab from '@/views/project/iam/ProjectRolePermissionTab'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'ProjectRoleTab',
props: {
@ -148,7 +131,8 @@ export default {
}
},
components: {
ProjectRolePermissionTab
ProjectRolePermissionTab,
TooltipButton
},
data () {
return {

12
ui/src/views/storage/FormSchedule.vue
View File

@ -163,12 +163,8 @@
<a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
<a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<a-button shape="circle" size="small" @click="handleInputConfirm">
<a-icon type="check"/>
</a-button>
<a-button shape="circle" size="small" @click="inputVisible=false">
<a-icon type="close"/>
</a-button>
<tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
<tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
</a-input-group>
</div>
<a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
@ -197,11 +193,15 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
import { timeZone } from '@/utils/timezone'
import debounce from 'lodash/debounce'
export default {
name: 'FormSchedule',
components: {
TooltipButton
},
props: {
loading: {
type: Boolean,

24
ui/src/views/storage/ScheduledSnapshots.vue
View File

@ -61,18 +61,14 @@
<a-tag v-for="(tag, index) in record.tags" :key="index">{{ tag.key + '=' + tag.value }}</a-tag>
</div>
<div slot="action" class="account-button-action" slot-scope="text, record">
<a-tooltip placement="top">
<template slot="title">
{{ $t('label.delete') }}
</template>
<a-button
type="danger"
shape="circle"
icon="close"
size="small"
:loading="actionLoading"
@click="handleClickDelete(record)"/>
</a-tooltip>
<tooltip-button
tooltipPlacement="top"
:tooltip="$t('label.delete')"
type="danger"
icon="close"
size="small"
:loading="actionLoading"
@click="handleClickDelete(record)" />
</div>
</a-table>
</div>
@ -80,10 +76,14 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
import { timeZoneName } from '@/utils/timezone'
export default {
name: 'ScheduledSnapshots',
components: {
TooltipButton
},
props: {
loading: {
type: Boolean,

12
ui/src/views/storage/TakeSnapshot.vue
View File

@ -64,12 +64,8 @@
<a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
<a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
<a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
<a-button shape="circle" size="small" @click="handleInputConfirm">
<a-icon type="check"/>
</a-button>
<a-button shape="circle" size="small" @click="inputVisible=false">
<a-icon type="close"/>
</a-button>
<tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
<tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
</a-input-group>
</div>
<a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
@ -97,9 +93,13 @@
<script>
import { api } from '@/api'
import TooltipButton from '@/components/view/TooltipButton'
export default {
name: 'TakeSnapshot',
components: {
TooltipButton
},
props: {
loading: {
type: Boolean,