perf: 优化应用树,统一 dropdown

This commit is contained in:
ibuler
2022-03-15 20:00:13 +08:00
committed by 老广
parent 897e691522
commit 1282b465f1
8 changed files with 223 additions and 244 deletions

View File

@@ -64,7 +64,6 @@ export default {
}
},
computed: {
},
watch: {
config: {
@@ -211,7 +210,7 @@ export default {
},
generateTotalColumns() {
const config = _.cloneDeep(this.config)
const columns = []
let columns = []
for (let col of config.columns) {
if (typeof col === 'object') {
columns.push(col)
@@ -220,6 +219,15 @@ export default {
columns.push(col)
}
}
columns = columns.filter(item => {
let has = item.has
if (has === undefined) {
has = true
} else if (typeof has === 'function') {
has = has()
}
return has
})
// 第一次初始化时记录 totalColumns
this.totalColumns = columns
config.columns = columns

View File

@@ -33,7 +33,12 @@ export default {
showOverflowTooltip: true,
formatter: function(row, column, cellValue, index) {
const route = { to: { name: 'AssetDetail', params: { id: cellValue }}}
return <router-link{...{ attrs: route }} >{ row.attrs.asset_info.hostname }</router-link>
const hostname = row.attrs['asset_info'].hostname
if (vm.$hasPerm('assets.view_asset')) {
return <router-link{...{ attrs: route }} >{ hostname }</router-link>
} else {
return hostname
}
}
},
actions: {

View File

@@ -0,0 +1,161 @@
import i18n from '@/i18n/i18n'
import store from '@/store'
export const CHROME = 'chrome'
export const MYSQL_WORKBENCH = 'mysql_workbench'
export const VMWARE_CLIENT = 'vmware_client'
export const CUSTOM = 'custom'
export const REMOTEAPP_CATEGORY = 'remote_app'
function hasLicence() {
return store.getters.hasValidLicense
}
export const REMOTE_APP = [
{
name: CHROME,
title: i18n.t(`applications.applicationsType.${CHROME}`),
type: 'primary',
group: i18n.t('applications.RemoteApp'),
category: REMOTEAPP_CATEGORY,
has: hasLicence
},
{
name: MYSQL_WORKBENCH,
title: i18n.t(`applications.applicationsType.${MYSQL_WORKBENCH}`),
type: 'primary',
category: REMOTEAPP_CATEGORY,
has: hasLicence
},
{
name: VMWARE_CLIENT,
title: i18n.t(`applications.applicationsType.${VMWARE_CLIENT}`),
type: 'primary',
category: REMOTEAPP_CATEGORY,
has: hasLicence
},
{
name: CUSTOM,
title: i18n.t(`applications.applicationsType.${CUSTOM}`),
type: 'primary',
category: REMOTEAPP_CATEGORY,
has: hasLicence
}
]
export const MYSQL = 'mysql'
export const ORACLE = 'oracle'
export const POSTGRESQL = 'postgresql'
export const MARIADB = 'mariadb'
export const DATABASE_CATEGORY = 'db'
export const SQLSERVER = 'sqlserver'
export const REDIS = 'redis'
export const MONGODB = 'mongodb'
export const DATABASE = [
{
name: MYSQL,
title: i18n.t(`applications.applicationsType.${MYSQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true,
group: i18n.t('applications.RDBProtocol')
},
{
name: MARIADB,
title: i18n.t(`applications.applicationsType.${MARIADB}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true
},
{
name: ORACLE,
title: i18n.t(`applications.applicationsType.${ORACLE}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: POSTGRESQL,
title: i18n.t(`applications.applicationsType.${POSTGRESQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: SQLSERVER,
title: i18n.t(`applications.applicationsType.${SQLSERVER}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: REDIS,
title: i18n.t(`applications.applicationsType.${REDIS}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true,
group: i18n.t('applications.NoSQLProtocol')
},
{
name: MONGODB,
title: i18n.t(`applications.applicationsType.${MONGODB}`),
type: 'primary',
category: DATABASE_CATEGORY
}
]
export const AppPlanDatabase = [
{
name: MYSQL,
title: i18n.t(`applications.applicationsType.${MYSQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true,
group: i18n.t('applications.RDBProtocol')
},
{
name: ORACLE,
title: i18n.t(`applications.applicationsType.${ORACLE}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: POSTGRESQL,
title: i18n.t(`applications.applicationsType.${POSTGRESQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: MARIADB,
title: i18n.t(`applications.applicationsType.${MARIADB}`),
type: 'primary',
category: DATABASE_CATEGORY
},
{
name: SQLSERVER,
title: i18n.t(`applications.applicationsType.${SQLSERVER}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
}
]
export const KUBERNETES = 'k8s'
export const CLOUD_CATEGORY = 'cloud'
export const CLOUD = [
{
name: KUBERNETES,
title: i18n.t(`applications.applicationsType.${KUBERNETES}`),
group: i18n.t('applications.Cloud'),
type: 'primary',
category: CLOUD_CATEGORY,
has: true
}
]
export const ApplicationTypes = [
...REMOTE_APP, ...DATABASE, ...CLOUD
]

View File

@@ -9,6 +9,8 @@
<script>
import { GenericListTable } from '@/layout/components'
import { ApplicationTypes } from '@/views/applications/const'
import { AssetProtocols } from '@/views/assets/const'
export default {
components: {
@@ -75,81 +77,8 @@ export default {
vm.$router.push({ name: 'SystemUserCreate', query: { protocol: option.title.toLowerCase() }})
},
dropdown: [
{
title: 'SSH',
name: 'SSH',
type: 'primary',
group: this.$t('assets.HostProtocol'),
has: true
},
{
title: 'RDP',
name: 'RDP',
type: 'primary',
has: true
},
{
title: 'VNC',
name: 'VNC',
type: 'primary',
has: true
},
{
title: 'Telnet',
name: 'Telnet',
type: 'primary',
has: true
},
{
name: 'MySQL',
title: 'MySQL',
type: 'primary',
has: true,
group: this.$t('assets.RDBProtocol')
},
{
name: 'MariaDB',
title: 'MariaDB',
type: 'primary',
has: true
},
{
name: 'PostgreSQL',
title: 'PostgreSQL',
type: 'primary',
has: this.$store.getters.hasValidLicense
},
{
name: 'Oracle',
title: 'Oracle',
type: 'primary',
has: this.$store.getters.hasValidLicense
},
{
name: 'SQLServer',
title: 'SQLServer',
type: 'primary',
has: this.$store.getters.hasValidLicense
},
{
name: 'Redis',
title: 'Redis',
type: 'primary',
has: true,
group: this.$t('assets.NoSQLProtocol')
},
{
name: 'MongoDB',
title: 'MongoDB',
type: 'primary',
has: this.$store.getters.hasValidLicense
},
{
name: 'K8S',
title: 'K8S',
type: 'primary',
group: this.$t('assets.OtherProtocol')
}
...AssetProtocols,
...ApplicationTypes
]
}
},

30
src/views/assets/const.js Normal file
View File

@@ -0,0 +1,30 @@
import i18n from '@/i18n/i18n'
export const AssetProtocols = [
{
title: 'SSH',
name: 'SSH',
type: 'primary',
group: i18n.t('assets.HostProtocol'),
has: true
},
{
title: 'RDP',
name: 'RDP',
type: 'primary',
has: true
},
{
title: 'VNC',
name: 'VNC',
type: 'primary',
has: true
},
{
title: 'Telnet',
name: 'Telnet',
type: 'primary',
has: true
}
]

View File

@@ -1,12 +1,17 @@
<template>
<GenericTreeListPage ref="TreeTablePage" :tree-setting="treeSetting" :header-actions="headerActions" :table-config="tableConfig" />
<GenericTreeListPage
ref="TreeTablePage"
:tree-setting="treeSetting"
:header-actions="headerActions"
:table-config="tableConfig"
/>
</template>
<script>
import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
import { setUrlParam } from '@/utils/common'
import { DetailFormatter } from '@/components/TableFormatters'
import { ApplicationTypes } from '@/views/perms/const'
import { ApplicationTypes } from '@/views/applications/const'
export default {
name: 'AssetAccountList',

View File

@@ -1,163 +0,0 @@
import i18n from '@/i18n/i18n'
import store from '@/store'
export const CHROME = 'chrome'
export const MYSQL_WORKBENCH = 'mysql_workbench'
export const VMWARE_CLIENT = 'vmware_client'
export const CUSTOM = 'custom'
export const REMOTEAPP_CATEGORY = 'remote_app'
function hasLicence() {
return store.getters.hasValidLicense
}
export const REMOTE_APP = [
{
name: CHROME,
title: i18n.t(`applications.applicationsType.${CHROME}`),
type: 'primary',
group: i18n.t('applications.RemoteApp'),
category: REMOTEAPP_CATEGORY,
has: hasLicence
},
{
name: MYSQL_WORKBENCH,
title: i18n.t(`applications.applicationsType.${MYSQL_WORKBENCH}`),
type: 'primary',
category: REMOTEAPP_CATEGORY,
has: hasLicence
},
{
name: VMWARE_CLIENT,
title: i18n.t(`applications.applicationsType.${VMWARE_CLIENT}`),
type: 'primary',
category: REMOTEAPP_CATEGORY,
has: hasLicence
},
{
name: CUSTOM,
title: i18n.t(`applications.applicationsType.${CUSTOM}`),
type: 'primary',
category: REMOTEAPP_CATEGORY,
has: hasLicence
}
]
export const MYSQL = 'mysql'
export const ORACLE = 'oracle'
export const POSTGRESQL = 'postgresql'
export const MARIADB = 'mariadb'
export const DATABASE_CATEGORY = 'db'
export const SQLSERVER = 'sqlserver'
export const REDIS = 'redis'
export const MONGODB = 'mongodb'
export const DATABASE = [
{
name: MYSQL,
title: i18n.t(`applications.applicationsType.${MYSQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true,
group: i18n.t('applications.RDBProtocol')
},
{
name: MARIADB,
title: i18n.t(`applications.applicationsType.${MARIADB}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true
},
{
name: ORACLE,
title: i18n.t(`applications.applicationsType.${ORACLE}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: POSTGRESQL,
title: i18n.t(`applications.applicationsType.${POSTGRESQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: SQLSERVER,
title: i18n.t(`applications.applicationsType.${SQLSERVER}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: REDIS,
title: i18n.t(`applications.applicationsType.${REDIS}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true,
group: i18n.t('applications.NoSQLProtocol')
},
{
name: MONGODB,
title: i18n.t(`applications.applicationsType.${MONGODB}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
}
]
export const AppPlanDatabase = [
{
name: MYSQL,
title: i18n.t(`applications.applicationsType.${MYSQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: true,
group: i18n.t('applications.RDBProtocol')
},
{
name: ORACLE,
title: i18n.t(`applications.applicationsType.${ORACLE}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: POSTGRESQL,
title: i18n.t(`applications.applicationsType.${POSTGRESQL}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: MARIADB,
title: i18n.t(`applications.applicationsType.${MARIADB}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
},
{
name: SQLSERVER,
title: i18n.t(`applications.applicationsType.${SQLSERVER}`),
type: 'primary',
category: DATABASE_CATEGORY,
has: hasLicence
}
]
export const KUBERNETES = 'k8s'
export const CLOUD_CATEGORY = 'cloud'
export const CLOUD = [
{
name: KUBERNETES,
title: i18n.t(`applications.applicationsType.${KUBERNETES}`),
group: i18n.t('applications.Cloud'),
type: 'primary',
category: CLOUD_CATEGORY,
has: true
}
]
export const ApplicationTypes = [
...REMOTE_APP, ...DATABASE, ...CLOUD
]

View File

@@ -87,7 +87,10 @@ export default {
return row['org_roles_display']
},
filters: [],
columnKey: 'org_roles'
columnKey: 'org_roles',
has: () => {
return this.$store.getters.hasValidLicense
}
},
mfa_enabled: {
label: 'MFA',
@@ -127,6 +130,7 @@ export default {
},
headerActions: {
hasBulkDelete: hasDelete,
canCreate: this.$hasPerm('users.add_user'),
extraActions: [
{
name: this.$t('users.InviteUser'),