Skip to content

Commit

Permalink
feat(frontend): 集群列表展示优化 #6834
Browse files Browse the repository at this point in the history
# Reviewed, transaction id: 18071
  • Loading branch information
JustaCattt authored and jinquantianxia committed Sep 11, 2024
1 parent da28a1d commit c63bdbb
Show file tree
Hide file tree
Showing 14 changed files with 41 additions and 81 deletions.
46 changes: 17 additions & 29 deletions dbm-ui/frontend/src/components/cluster-entry-config/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,9 @@
</BkDialog>
</template>

<script
setup
lang="tsx"
generic="
T extends
| ResourceItem
| ResourceRedisItem
| SpiderModel
| EsModel
| HdfsModel
| KafkaModel
| PulsarModel
| SqlServerHaClusterDetailModel
| SqlServerSingleClusterDetailModel
">
<script setup lang="tsx">
import { useI18n } from 'vue-i18n';

import EsModel from '@services/model/es/es';
import HdfsModel from '@services/model/hdfs/hdfs';
import KafkaModel from '@services/model/kafka/kafka';
import PulsarModel from '@services/model/pulsar/pulsar';
import SpiderModel from '@services/model/spider/spider';
import SqlServerHaClusterDetailModel from '@services/model/sqlserver/sqlserver-ha-cluster-detail';
import SqlServerSingleClusterDetailModel from '@services/model/sqlserver/sqlserver-single-cluster-detail';
import type { ResourceItem, ResourceRedisItem } from '@services/types';

import type { DBTypes } from '@common/const';

import RenderBindIps from './RenderBindIps.vue';
Expand All @@ -79,7 +56,17 @@
dbConsole: string;
resource: DBTypes;
permission: boolean;
getDetailInfo: (params: any) => Promise<T>
getDetailInfo: (params: any) => Promise<{
cluster_entry_details: {
cluster_entry_type: string,
entry: string,
role: string,
target_details: {
ip: string,
port: number
}[]
}[]
}>
}

const props = withDefaults(defineProps<Props>(), {
Expand All @@ -105,7 +92,7 @@
field: 'entry',
width: 263,
showOverflowTooltip: true,
render: ({ data }: {data: RowData}) => {
render: ({ data }: { data: RowData }) => {
if (data.role === 'master_entry') {
return (
<>
Expand All @@ -124,7 +111,7 @@
label: 'Bind IP',
field: 'ips',
width: 263,
render: ({ data }: {data: RowData}) => (
render: ({ data }: { data: RowData }) => (
<RenderBindIps
v-model={props.id}
data={data}
Expand All @@ -149,7 +136,7 @@
props.getDetailInfo({
id: props.id,
})
.then((res: T) => {
.then((res) => {
tableData.value = res.cluster_entry_details.map(item => ({
type: item.cluster_entry_type,
entry: item.entry,
Expand All @@ -166,7 +153,7 @@
});
};

const generateCellClass = (cell: { field: string}) => (cell.field === 'ips' ? 'entry-config-ips-column' : '');
const generateCellClass = (cell: { field: string }) => (cell.field === 'ips' ? 'entry-config-ips-column' : '');

const handleClose = () => {
isShow.value = false;
Expand All @@ -189,6 +176,7 @@
line-height: normal !important;
}
}

.entry-config-dialog {
.bk-modal-footer {
display: none;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,31 +130,21 @@
</template>
<script lang="tsx">
interface InstanceListData {
instance_address: string;
role: string;
status: string;
create_at: string;
}

interface InstanceData {
bk_instance_id: number;
create_at: string;
instance_address: string;
ip: string;
name: string;
port: number;
role: string;
status: string;
[key: string]: any;
}

interface DialogState {
isShow: boolean;
keyword: string;
data: Array<InstanceListData>;
}

interface Props {
title: string;
role: string;
data: Array<InstanceData>;
data: InstanceListData[];
clusterId: number;
dataSource: (params: Record<string, any>) => Promise<ListBase<T[]>>;
highlightIps?: string[];
Expand Down Expand Up @@ -213,10 +203,10 @@
const renderData = computed(() => props.data.slice(0, 10));
const hasMore = computed(() => props.data.length > 10);

const dialogState = reactive<DialogState>({
const dialogState = reactive({
isShow: false,
keyword: '',
data: [],
data: [] as InstanceListData[],
});

const columns = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@
)}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@
)}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,7 @@
)}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,7 @@
} />
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down Expand Up @@ -557,7 +557,7 @@
} />
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,7 @@
} />
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@
)}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down
26 changes: 4 additions & 22 deletions dbm-ui/frontend/src/views/redis/list-ha/components/list/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -465,17 +465,10 @@
]
} />
)}
<auth-button
v-db-console="redis.haClusterManage.modifyEntryConfiguration"
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
action-id="access_entry_edit"
resource="redis"
permission={data.permission.access_entry_edit}
text
theme="primary"
onClick={() => handleOpenEntryConfig(data)}>
<db-icon type="bk-dbm-icon db-icon-visible1" />
</auth-button>
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
}}
Expand Down Expand Up @@ -639,20 +632,9 @@
]
} />
)}
<auth-button
v-db-console="redis.haClusterManage.modifyEntryConfiguration"
v-bk-tooltips={t('查看域名/IP对应关系')}
action-id="access_entry_edit"
resource="redis"
permission={data.permission.access_entry_edit}
text
theme="primary"
onClick={() => handleOpenEntryConfig(data)}>
<db-icon type="bk-dbm-icon db-icon-visible1" />
</auth-button>
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -547,7 +547,7 @@
)}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,7 @@
)}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down Expand Up @@ -560,7 +560,7 @@
}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</div>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,7 @@
}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down Expand Up @@ -536,7 +536,7 @@
} />
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@
}
<db-icon
v-bk-tooltips={t('查看域名/IP对应关系')}
type="bk-dbm-icon db-icon-visible1"
type="visible1"
onClick={() => handleOpenEntryConfig(data)} />
</>
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
@click="handleShowPassword">
<DbIcon
v-if="!isShowPassword"
type="bk-dbm-icon db-icon-visible1" />
type="visible1" />
<DbIcon
v-else
type="bk-dbm-icon db-icon-invisible1" />
Expand Down

0 comments on commit c63bdbb

Please sign in to comment.