Skip to content

Commit

Permalink
perf(frontend): mongodb工具箱重构 TencentBlueKing#8498
Browse files Browse the repository at this point in the history
  • Loading branch information
@3octaves
3octaves committed Jan 3, 2025
1 parent 8bfb7ca commit 94dd80a
Show file tree
Hide file tree
Showing 24 changed files with 458 additions and 430 deletions.
13 changes: 9 additions & 4 deletions ...n/toolbox-field/edit-table-name/Index.vue → ...field/edit-db-table-name-column/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,12 @@
:title="label"
type="taginput"
@change="handleBatchEditChange">
<BkButton
<span
v-bk-tooltips="t('统一设置：将该列统一设置为相同的值')"
text
theme="primary"
class="batch-select-button"
@click="handleBatchEditShow">
<DbIcon type="bulk-edit" />
</BkButton>
</span>
</BatchEditColumn>
</template>
<div
Expand Down Expand Up @@ -144,6 +143,12 @@
</script>

<style lang="less" scoped>
.batch-select-button {
font-size: 14px;
color: #3a84ff;
cursor: pointer;
}
.edit-table-name-content {
width: 100%;
}
Expand Down
0 .../common/toolbox-field/edit-spec/Index.vue → .../toolbox-field/edit-spec-column/Index.vue
View file
File renamed without changes.
33 changes: 18 additions & 15 deletions ...-field/edit-spec/components/SpecPanel.vue → ...edit-spec-column/components/SpecPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
<slot name="hover" />
<template #content>
<div class="mongo-spec-panel">
<div class="title">{{ data.name }} {{ t('规格') }}</div>
<div class="item">
<div class="mongo-spec-panel-title">{{ data.name }} {{ t('规格') }}</div>
<div class="mongo-spec-panel-item">
<div class="item-title">CPU：</div>
<div class="item-content">
{{
Expand All @@ -32,17 +32,17 @@
}}
</div>
</div>
<div class="item">
<div class="mongo-spec-panel-item">
<div class="item-title">{{ t('内存') }}：</div>
<div class="item-content">
{{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
</div>
</div>
<div class="item">
<div class="mongo-spec-panel-item">
<div class="item-title">{{ t('磁盘') }}：</div>
<div class="item-content">
<div class="table">
<div class="head">
<div class="mount-point-table">
<div class="mount-point-table-head">
<div class="head-one">
{{ t('挂载点') }}
</div>
Expand All @@ -53,15 +53,18 @@
{{ t('磁盘类别') }}
</div>
</div>
<div class="row">
<div
v-for="(storageSpecItem, storageSpecIndex) in data.storage_spec"
:key="storageSpecIndex"
class="table-row">
<div class="row-one">
{{ data.storage_spec[0].mount_point }}
{{ storageSpecItem.mount_point }}
</div>
<div class="row-two">
{{ data.storage_spec[0].size }}
{{ storageSpecItem.size }}
</div>
<div class="row-three">
{{ data.storage_spec[0].type }}
{{ storageSpecItem.type }}
</div>
</div>
</div>
Expand Down Expand Up @@ -136,7 +139,7 @@
box-sizing: border-box;
flex-direction: column;

.title {
.mongo-spec-panel-title {
height: 20px;
margin-bottom: 12px;
font-size: 12px;
Expand All @@ -145,7 +148,7 @@
color: #63656e;
}

.item {
.mongo-spec-panel-item {
display: flex;
width: 100%;
height: 32px;
Expand All @@ -164,7 +167,7 @@
letter-spacing: 0;
color: #313238;

.table {
.mount-point-table {
display: flex;
width: 100%;
flex-direction: column;
Expand All @@ -178,7 +181,7 @@
border-bottom: 1px solid #dcdee5;
}

.head {
.mount-point-table-head {
display: flex;
width: 100%;
background: #f0f1f5;
Expand Down Expand Up @@ -206,7 +209,7 @@
}
}

.row {
.table-row {
display: flex;
width: 100%;
border-top: none;
Expand Down
106 changes: 52 additions & 54 deletions .../frontend/src/views/db-manage/common/toolbox-field/spec-block-column/components/Panel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,66 +22,64 @@
<template #content>
<div class="spec-diaplay-panel">
<div class="spec-diaplay-panel-title">{{ data.name }} {{ t('规格') }}</div>
<div class="items">
<div class="item">
<div class="item-title">CPU：</div>
<div class="item-content">
{{
data.cpu.min === data.cpu.max
? t('n核', { n: data.cpu.min })
: t('((n-m))核', { n: data.cpu.min, m: data.cpu.max })
}}
</div>
<div class="spec-diaplay-panel-item">
<div class="item-title">CPU：</div>
<div class="item-content">
{{
data.cpu.min === data.cpu.max
? t('n核', { n: data.cpu.min })
: t('((n-m))核', { n: data.cpu.min, m: data.cpu.max })
}}
</div>
<div class="item">
<div class="item-title">{{ t('内存') }}：</div>
<div class="item-content">
{{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
</div>
</div>
<div class="spec-diaplay-panel-item">
<div class="item-title">{{ t('内存') }}：</div>
<div class="item-content">
{{ data.mem.min === data.mem.max ? data.mem.min : `(${data.mem.min}~${data.mem.max})` }} G
</div>
<div
class="item"
style="align-items: flex-start">
<div class="item-title">{{ t('磁盘') }}：</div>
<div class="item-content">
<div class="disk-table">
<div class="table-head">
<div class="head-one">
{{ t('挂载点') }}
</div>
<div class="head-two">
{{ t('最小容量(G)') }}
</div>
<div class="head-three">
{{ t('磁盘类别') }}
</div>
</div>
<div
class="spec-diaplay-panel-item"
style="align-items: flex-start">
<div class="item-title">{{ t('磁盘') }}：</div>
<div class="item-content">
<div class="disk-table">
<div class="table-head">
<div class="head-one">
{{ t('挂载点') }}
</div>
<div
v-for="(storageSpecItem, storageSpecIndex) in data.storage_spec"
:key="storageSpecIndex"
class="table-row">
<div class="row-one">
{{ storageSpecItem.mount_point }}
</div>
<div class="row-two">
{{ storageSpecItem.size }}
</div>
<div class="row-three">
{{ storageSpecItem.type }}
</div>
<div class="head-two">
{{ t('最小容量(G)') }}
</div>
<div class="head-three">
{{ t('磁盘类别') }}
</div>
</div>
<div
v-for="(storageSpecItem, storageSpecIndex) in data.storage_spec"
:key="storageSpecIndex"
class="table-row">
<div class="row-one">
{{ storageSpecItem.mount_point }}
</div>
<div class="row-two">
{{ storageSpecItem.size }}
</div>
<div class="row-three">
{{ storageSpecItem.type }}
</div>
</div>
</div>
</div>
<div
v-if="!hideQps"
class="item">
<div class="item-title">
{{ t('单机 QPS') }}
</div>
<div class="item-content">
{{ data.qps.min === data.qps.max ? `${data.qps.min}/s` : `${data.qps.min}/s~${data.qps.max}/s` }}
</div>
</div>
<div
v-if="!hideQps"
class="spec-diaplay-panel-item">
<div class="item-title">
{{ t('单机 QPS') }}
</div>
<div class="item-content">
{{ data.qps.min === data.qps.max ? `${data.qps.min}/s` : `${data.qps.min}/s~${data.qps.max}/s` }}
</div>
</div>
</div>
Expand Down Expand Up @@ -144,7 +142,7 @@
color: #63656e;
}

.item {
.spec-diaplay-panel-item {
display: flex;
width: 100%;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_MONGOS/pages/page1/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,9 @@
} from '@components/editable-table/Index.vue';

import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
import EditSpecColumn from '@views/db-manage/common/toolbox-field/edit-spec/Index.vue';
import EditSpecColumn from '@views/db-manage/common/toolbox-field/edit-spec-column/Index.vue';
import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';

export interface IDataRow {
cluster: {
Expand Down
24 changes: 15 additions & 9 deletions dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_ADD_SHARD_NODES/pages/page1/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@

import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
import EditClusterWithRelatedClustersColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters/Index.vue';
import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
import EditClusterWithRelatedClustersColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-related-clusters-column/Index.vue';

import TargetNumberColumn from './components/TargetNumberColumn.vue';

Expand Down Expand Up @@ -185,13 +185,7 @@
{
validator: (value: string) => {
if (value) {
const domainList = tableData.value
.flatMap((tableRow) => [
tableRow.cluster.master_domain || '',
...(tableRow.cluster.related_clusters || []).map((relatedItem) => relatedItem.domain),
])
.filter((domainItem) => domainItem);
return domainList.filter((domain) => domain === value).length === 1;
return domainList.value.filter((domain) => domain === value).length === 1;
}
return true;
},
Expand Down Expand Up @@ -231,6 +225,18 @@
),
);

const domainList = computed(() =>
tableData.value.flatMap((tableRow) => {
if (tableRow.cluster.master_domain) {
return [
tableRow.cluster.master_domain || '',
...(tableRow.cluster.related_clusters || []).map((relatedItem) => relatedItem.domain),
];
}
return [];
}),
);

const handleClusterBatchEdit = (clusterList: MongodbModel[]) => {
const newList: IDataRow[] = [];
clusterList.forEach((item) => {
Expand Down
8 changes: 4 additions & 4 deletions dbm-ui/frontend/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,10 @@

import TicketRemark from '@views/db-manage/common/TicketRemark.vue';
import OperationColumn from '@views/db-manage/common/toolbox-field/operation-column/Index.vue';
import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster/Index.vue';
import EditClusterWithSelectorColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector/Index.vue';
import EditDbNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-name/Index.vue';
import EditTableNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-table/Index.vue';
import EditClusterColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-column/Index.vue';
import EditClusterWithSelectorColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-cluster-with-selector-column/Index.vue';
import EditDbNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-db-name-column/Index.vue';
import EditTableNameColumn from '@views/db-manage/mongodb/common/toolbox-field/edit-table-name-column/Index.vue';

import EditTargetHostColumn from './components/TargetHostColumn.vue';

Expand Down
32 changes: 25 additions & 7 deletions ...nd/src/views/db-manage/mongodb/MONGODB_BACKUP/pages/page1/components/TargetHostColumn.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@
:disabled="disabled"
:placeholder="t('请输入或选择主机')">
<template #append>
<span v-bk-tooltips="t('选择主机')">
<BkButton
class="host-selector-btn"
<span
v-bk-tooltips="{
content: t('选择主机'),
disabled: disabled,
}">
<div
class="host-selector-button"
:class="{ 'host-selector-button-disabled': disabled }"
:disabled="disabled"
size="small"
@click="handleShowSelector">
<DbIcon type="host-select" />
</BkButton>
</div>
</span>
</template>
</EditInput>
Expand Down Expand Up @@ -107,6 +111,9 @@
});
const handleShowSelector = () => {
if (props.disabled) {
return;
}
isShowSelector.value = true;
};
Expand All @@ -117,15 +124,26 @@
</script>

<style lang="less" scoped>
.host-selector-btn {
.host-selector-button {
width: 24px;
font-size: 16px;
border: none;
border-radius: 2px;
text-align: center;
cursor: pointer;
&:hover {
color: #3a84ff;
background: #f0f1f5;
}
}
.host-selector-button-disabled {
color: #dcdee5;
cursor: not-allowed;
&:hover {
color: #dcdee5;
background: #f0f1f5;
}
}
</style>
Loading

0 comments on commit 94dd80a

Please sign in to comment.