Skip to content

Commit c0165dc

Browse files
BlankllBlankll
authored
feat: implement sort for index table (#198)
feat: sort functionalities in manage tables Refs: #183 --------- Signed-off-by: seven <[email protected]>
1 parent 35c542b commit c0165dc

File tree

3 files changed

+71
-52
lines changed

3 files changed

+71
-52
lines changed

‎src/views/manage/components/index-manage.vue‎

Lines changed: 69 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
<n-tabs type="segment" animated @update:value="refresh">
44
<n-tab-pane name="indices" tab="INDICES">
55
<n-data-table
6-
:columns="indexTable.columns"
6+
:columns="indexTable.columns as any"
77
:data="indexTable.data"
88
:bordered="false"
99
max-height="400"
1010
/>
1111
</n-tab-pane>
1212
<n-tab-pane name="templates" tab="TEMPLATES">
1313
<n-data-table
14-
:columns="templateTable.columns"
14+
:columns="templateTable.columns as any"
1515
:data="templateTable.data"
1616
:bordered="false"
1717
max-height="400"
@@ -99,7 +99,7 @@ const aliasDialogRef = ref();
9999
const templateDialogRef = ref();
100100
const switchAliasDialogRef = ref();
101101
102-
const filtersRef = ref<{ [key: string]: string }>({
102+
const filterState = ref<{ [key: string]: string }>({
103103
index: '',
104104
uuid: '',
105105
health: '',
@@ -109,14 +109,14 @@ const filtersRef = ref<{ [key: string]: string }>({
109109
});
110110
111111
const handleFilter = (key: string, value: string) => {
112-
filtersRef.value[key] = value;
112+
filterState.value[key] = value;
113113
};
114114
115115
const filterProps = (key: string) => ({
116116
filter: true,
117117
renderFilterMenu(_: { hide: () => void }) {
118118
return h(NInput, {
119-
value: filtersRef.value[key],
119+
value: filterState.value[key],
120120
placeholder: `type to filter ${key}`,
121121
clearable: true,
122122
size: 'small',
@@ -125,7 +125,11 @@ const filterProps = (key: string) => ({
125125
});
126126
},
127127
renderFilterIcon() {
128-
return h(NIcon, {}, { default: () => h(Search) });
128+
return h(
129+
NIcon,
130+
{ color: filterState.value[key] ? 'var(--theme-color)' : 'var(--n-text-color)' },
131+
{ default: () => h(Search) },
132+
);
129133
},
130134
});
131135
@@ -136,21 +140,54 @@ const indexTable = computed(() => {
136140
dataIndex: 'index',
137141
key: 'index',
138142
...filterProps('index'),
143+
sorter: 'default',
139144
},
140-
{ title: 'UUID', dataIndex: 'uuid', key: 'uuid', ...filterProps('uuid') },
145+
{ title: 'UUID', dataIndex: 'uuid', key: 'uuid', ...filterProps('uuid'), sorter: 'default' },
141146
{
142147
title: 'health',
143148
dataIndex: 'health',
144149
key: 'health',
145150
...filterProps('health'),
151+
sorter: 'default',
146152
render({ health }: { health: IndexHealth }) {
147153
return (
148154
(health === IndexHealth.GREEN ? '🟢' : health === IndexHealth.YELLOW ? '🟡' : '🔴') +
149155
` ${health}`
150156
);
151157
},
152158
},
153-
{ title: 'status', dataIndex: 'status', key: 'status', ...filterProps('status') },
159+
{
160+
title: 'status',
161+
dataIndex: 'status',
162+
key: 'status',
163+
...filterProps('status'),
164+
sorter: 'default',
165+
},
166+
{
167+
title: 'Docs',
168+
dataIndex: 'docs',
169+
key: 'docs',
170+
sorter: (a: ClusterIndex, b: ClusterIndex) => (a.docs?.count ?? 0) - (b.docs?.count ?? 0),
171+
render({ docs }: ClusterIndex) {
172+
return docs.count;
173+
},
174+
},
175+
{ title: 'Storage', dataIndex: 'storage', key: 'storage', sorter: 'default' },
176+
{
177+
title: 'shards',
178+
dataIndex: 'shards',
179+
key: 'shards',
180+
render({ shards }: ClusterIndex) {
181+
if (!shards || !Array.isArray(shards)) {
182+
return '0p/0r';
183+
}
184+
185+
const primaryCount = shards.filter(shard => shard.prirep === 'p').length;
186+
const replicaCount = shards.filter(shard => shard.prirep === 'r').length;
187+
188+
return `${primaryCount}p/${replicaCount}r`;
189+
},
190+
},
154191
{
155192
title: 'Aliases',
156193
dataIndex: 'aliases',
@@ -195,30 +232,6 @@ const indexTable = computed(() => {
195232
),
196233
),
197234
},
198-
{
199-
title: 'Docs',
200-
dataIndex: 'docs',
201-
key: 'docs',
202-
render({ docs }: ClusterIndex) {
203-
return docs.count;
204-
},
205-
},
206-
{
207-
title: 'shards',
208-
dataIndex: 'shards',
209-
key: 'shards',
210-
render({ shards }: ClusterIndex) {
211-
if (!shards || !Array.isArray(shards)) {
212-
return '0p/0r';
213-
}
214-
215-
const primaryCount = shards.filter(shard => shard.prirep === 'p').length;
216-
const replicaCount = shards.filter(shard => shard.prirep === 'r').length;
217-
218-
return `${primaryCount}p/${replicaCount}r`;
219-
},
220-
},
221-
{ title: 'Storage', dataIndex: 'storage', key: 'storage' },
222235
{
223236
title: 'Actions',
224237
dataIndex: 'actions',
@@ -260,23 +273,23 @@ const indexTable = computed(() => {
260273
261274
const data = indexWithAliases.value
262275
.filter(item =>
263-
filtersRef.value.uuid
264-
? get(item, 'uuid', '').toLowerCase().includes(filtersRef.value.uuid.toLowerCase())
276+
filterState.value.uuid
277+
? get(item, 'uuid', '').toLowerCase().includes(filterState.value.uuid.toLowerCase())
265278
: true,
266279
)
267280
.filter(item =>
268-
filtersRef.value.index
269-
? get(item, 'index', '').toLowerCase().includes(filtersRef.value.index.toLowerCase())
281+
filterState.value.index
282+
? get(item, 'index', '').toLowerCase().includes(filterState.value.index.toLowerCase())
270283
: true,
271284
)
272285
.filter(item =>
273-
filtersRef.value.health
274-
? get(item, 'health', '').toLowerCase().includes(filtersRef.value.health.toLowerCase())
286+
filterState.value.health
287+
? get(item, 'health', '').toLowerCase().includes(filterState.value.health.toLowerCase())
275288
: true,
276289
)
277290
.filter(item =>
278-
filtersRef.value.status
279-
? get(item, 'status', '').toLowerCase().includes(filtersRef.value.status.toLowerCase())
291+
filterState.value.status
292+
? get(item, 'status', '').toLowerCase().includes(filterState.value.status.toLowerCase())
280293
: true,
281294
);
282295
@@ -285,12 +298,18 @@ const indexTable = computed(() => {
285298
286299
const templateTable = computed(() => {
287300
const columns = [
288-
{ title: 'Template Name', dataIndex: 'name', key: 'name', ...filterProps('name') },
289-
{ title: 'Type', dataIndex: 'type', key: 'type', ...filterProps('type') },
290-
{ title: 'Order', dataIndex: 'order', key: 'order' },
291-
{ title: 'Version', dataIndex: 'version', key: 'version' },
292-
{ title: 'Mappings', dataIndex: 'mapping_count', key: 'mapping_count' },
293-
{ title: 'Settings', dataIndex: 'settings_count', key: 'settings_count' },
301+
{
302+
title: 'Template Name',
303+
dataIndex: 'name',
304+
key: 'name',
305+
...filterProps('name'),
306+
sorter: 'default',
307+
},
308+
{ title: 'Type', dataIndex: 'type', key: 'type', ...filterProps('type'), sorter: 'default' },
309+
{ title: 'Order', dataIndex: 'order', key: 'order', sorter: 'default' },
310+
{ title: 'Version', dataIndex: 'version', key: 'version', sorter: 'default' },
311+
{ title: 'Mappings', dataIndex: 'mapping_count', key: 'mapping_count', sorter: 'default' },
312+
{ title: 'Settings', dataIndex: 'settings_count', key: 'settings_count', sorter: 'default' },
294313
{ title: 'Aliases', dataIndex: 'alias_count', key: 'alias_count' },
295314
{ title: 'Metadata', dataIndex: 'metadata', key: 'metadata' },
296315
{
@@ -318,13 +337,13 @@ const templateTable = computed(() => {
318337
319338
const data = templates.value
320339
.filter(item =>
321-
filtersRef.value.name
322-
? get(item, 'name', '').toLowerCase().includes(filtersRef.value.name.toLowerCase())
340+
filterState.value.name
341+
? get(item, 'name', '').toLowerCase().includes(filterState.value.name.toLowerCase())
323342
: true,
324343
)
325344
.filter(item =>
326-
filtersRef.value.type
327-
? get(item, 'type', '').toLowerCase().includes(filtersRef.value.type.toLowerCase())
345+
filterState.value.type
346+
? get(item, 'type', '').toLowerCase().includes(filterState.value.type.toLowerCase())
328347
: true,
329348
);
330349

‎src/views/manage/components/shared-manage.vue‎ renamed to ‎src/views/manage/components/shard-manage.vue‎

File renamed without changes.

‎src/views/manage/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
v-if="activeTab === $t('manage.cluster')"
99
/>
1010
<node-state class="state-container" v-if="activeTab === $t('manage.nodes')" />
11-
<shared-manage class="state-container" v-if="activeTab === $t('manage.shards')" />
11+
<shard-manage class="state-container" v-if="activeTab === $t('manage.shards')" />
1212
<index-manage class="state-container" v-if="activeTab === $t('manage.indices')" />
1313
</template>
1414
<div v-else-if="connection" class="empty-state">
@@ -26,7 +26,7 @@ import ClusterState from './components/cluster-state.vue';
2626
import { useClusterManageStore, DatabaseType, useTabStore } from '../../store';
2727
import { storeToRefs } from 'pinia';
2828
import NodeState from './components/node-state.vue';
29-
import SharedManage from './components/shared-manage.vue';
29+
import ShardManage from './components/shard-manage.vue';
3030
import { useLang } from '../../lang';
3131
import IndexManage from './components/index-manage.vue';
3232
import { CustomError } from '../../common';

0 commit comments

Comments
 (0)