Skip to content

Commit

Permalink
fix: table cell responsive issue
Browse files Browse the repository at this point in the history
  • Loading branch information
tikazyq committed Dec 11, 2024
1 parent 4891929 commit c045aea
Showing 18 changed files with 28 additions and 74 deletions.
1 change: 0 additions & 1 deletion src/components/core/metric/CurrentMetrics.vue
Original file line number Diff line number Diff line change
@@ -33,7 +33,6 @@ const t = translate;
const getTagType = (percent?: number) => {
if (percent === undefined) return 'default';
if (percent < 30) return 'success';
if (percent < 70) return 'primary';
if (percent < 90) return 'warning';
return 'danger';
};
32 changes: 11 additions & 21 deletions src/components/core/node/NodeRunners.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<script setup lang="ts">
import { computed } from 'vue';
import { translate } from '@/utils';
import { TagProps } from '@/components/ui/tag/types';
const props = withDefaults(
defineProps<{
available?: number;
current?: number;
max?: number;
size?: BasicSize;
}>(),
{
current: 0,
max: 0,
size: 'default',
}
);
@@ -19,38 +22,25 @@ const emit = defineEmits<{
const t = translate;
const running = computed<number>(() => {
const { available, max } = props;
if (
available === undefined ||
max === undefined ||
isNaN(available) ||
isNaN(max)
) {
return 0;
}
return (max - available) as number;
});
const label = computed<string>(() => {
const { max } = props;
return `${running.value} / ${max}`;
const { current, max } = props;
return `${current} / ${max}`;
});
const data = computed<TagProps>(() => {
const max = props.max as number;
if (running.value === max) {
const { current, max } = props;
if (current === max) {
return {
label: label.value,
tooltip: t('components.node.nodeRunners.tooltip.unavailable'),
type: 'danger',
icon: ['fa', 'ban'],
};
} else if (running.value > 0) {
} else if (current > 0) {
return {
label: label.value,
tooltip: t('components.node.nodeRunners.tooltip.running', {
running: running.value,
tooltip: t('components.node.nodeRunners.tooltip.running', undefined, {
running: current,
max,
}),
type: 'warning',
3 changes: 2 additions & 1 deletion src/components/ui/table/Table.vue
Original file line number Diff line number Diff line change
@@ -198,7 +198,7 @@ defineOptions({ name: 'ClTable' });
/>
<el-table-column
v-for="c in selectedColumns"
:key="c.key"
:prop="c.key"
:column-key="c.key"
:align="c.align"
:fixed="c.fixed ? c.fixed : false"
@@ -222,6 +222,7 @@ defineOptions({ name: 'ClTable' });
</template>
<template #default="scope">
<cl-table-cell
:key="scope.row[c.key]"
:column="c"
:row="scope.row"
:row-index="scope.$index"
13 changes: 8 additions & 5 deletions src/components/ui/table/TableCell.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="tsx">
import { h } from 'vue';
import { computed, h } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { ClButtonGroup, ClFaIconButton } from '@/components';
@@ -10,7 +10,7 @@ import type { ContextMenuItem } from '@/components/ui/context-menu/types';
const props = withDefaults(
defineProps<{
column: TableColumn;
row: TableData;
row: Record;
rowIndex: number;
}>(),
{
@@ -24,7 +24,7 @@ const route = useRoute();
// store
const store = useStore();
const getChildren = () => {
const rootComponent = () => {
const { row, column, rowIndex } = props;
const { value, buttons, buttonsType, buttonGroupType, buttonGroupSize } =
column;
@@ -158,11 +158,14 @@ const getButtonsGroup = (
);
};
const root = <div>{getChildren()}</div>;
const componentKey = computed(() => {
const { row, column } = props;
return row[column.key!];
});
defineOptions({ name: 'ClTableCell' });
</script>

<template>
<root />
<root-component :key="componentKey" />
</template>
4 changes: 2 additions & 2 deletions src/i18n/lang/en/components/notification.ts
Original file line number Diff line number Diff line change
@@ -193,7 +193,7 @@ const notification: LComponentsNotification = {
- Node Enabled: \${node:enabled}
- Node Active: \${node:active}
- Node Active At: \${node:active_at}
- Node Available Runners: \${node:available_runners}
- Node Current Runners: \${node:current_runners}
- Node Max Runners: \${node:max_runners}`,
},
node_offline: {
@@ -212,7 +212,7 @@ const notification: LComponentsNotification = {
- Node Enabled: \${node:enabled}
- Node Active: \${node:active}
- Node Active At: \${node:active_at}
- Node Available Runners: \${node:available_runners}
- Node Current Runners: \${node:current_runners}
- Node Max Runners: \${node:max_runners}`,
},
alert_cpu_critical: {
4 changes: 2 additions & 2 deletions src/i18n/lang/zh/components/notification.ts
Original file line number Diff line number Diff line change
@@ -193,7 +193,7 @@ const notification: LComponentsNotification = {
- 节点是否启用: \${node:enabled}
- 节点是否活跃: \${node:active}
- 节点活跃时间: \${node:active_at}
- 节点可用运行器数: \${node:available_runners}
- 节点可用运行器数: \${node:current_runners}
- 节点最大运行器数: \${node:max_runners}`,
},
node_offline: {
@@ -212,7 +212,7 @@ const notification: LComponentsNotification = {
- 节点是否启用: \${node:enabled}
- 节点是否活跃: \${node:active}
- 节点活跃时间: \${node:active_at}
- 节点可用运行器数: \${node:available_runners}
- 节点可用运行器数: \${node:current_runners}
- 节点最大运行器数: \${node:max_runners}`,
},
alert_cpu_critical: {
2 changes: 1 addition & 1 deletion src/interfaces/models/node.d.ts
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ export declare global {
status?: string;
enabled?: boolean;
active?: boolean;
available_runners?: number;
current_runners?: number;
max_runners?: number;
}
}
1 change: 0 additions & 1 deletion src/views/database/list/DatabaseList.vue
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@ defineOptions({ name: 'ClDatabaseList' });
<template>
<cl-list-layout
class="database-list"
:row-key="({ _id, status }: Database) => [_id, status].join('_')"
:action-functions="actionFunctions"
:nav-actions="navActions"
:pagination="tablePagination"
2 changes: 0 additions & 2 deletions src/views/dependency/list/DependencyList.vue
Original file line number Diff line number Diff line change
@@ -21,7 +21,6 @@ const {
repoTabName,
repoTabItems,
onClickTableEmptySearch,
rowKey,
} = useDependencyList();
const onTabSelect = (key: string) => {
@@ -34,7 +33,6 @@ defineOptions({ name: 'ClDependencyList' });
<template>
<cl-list-layout
class="dependency-list"
:row-key="rowKey"
:action-functions="actionFunctions"
:nav-actions="navActions"
:table-loading="tableLoading"
4 changes: 0 additions & 4 deletions src/views/dependency/list/useDependencyList.tsx
Original file line number Diff line number Diff line change
@@ -487,9 +487,6 @@ const useDependencyList = () => {
elVNodeCtx?.exposed?.focus?.();
};

// row key
const rowKey = (repo: DependencyRepo) => JSON.stringify(repo);

// options
const opts = {
navActions,
@@ -513,7 +510,6 @@ const useDependencyList = () => {
repoTabName,
repoTabItems,
onClickTableEmptySearch,
rowKey,
};
};

9 changes: 0 additions & 9 deletions src/views/node/list/NodeList.vue
Original file line number Diff line number Diff line change
@@ -15,21 +15,12 @@ const {
selectableFunction,
} = useNodeList();
const getCurrentMetrics = (row: CNode) => {
if (!row._id) return;
return state.nodeMetricsMap[row._id];
};
defineOptions({ name: 'ClNodeList' });
</script>

<template>
<cl-list-layout
class="node-list"
:row-key="
(row: CNode) =>
[row._id, row.status, JSON.stringify(getCurrentMetrics(row))].join('_')
"
:action-functions="actionFunctions"
:nav-actions="navActions"
:table-pagination="tablePagination"
4 changes: 2 additions & 2 deletions src/views/node/list/useNodeList.tsx
Original file line number Diff line number Diff line change
@@ -218,7 +218,7 @@ const useNodeList = () => {
],
},
{
key: 'status', // status
key: 'status',
className: 'status',
label: t('views.nodes.table.columns.status'),
icon: ['fa', 'heartbeat'],
@@ -254,7 +254,7 @@ const useNodeList = () => {
return;
return (
<ClNodeRunners
available={row.available_runners}
current={row.current_runners}
max={row.max_runners}
/>
);
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ const {
tableTotal,
tablePagination,
actionFunctions,
rowKeyFunction,
} = useNotificationChannelList();
defineOptions({ name: 'ClNotificationChannelList' });
@@ -17,7 +16,6 @@ defineOptions({ name: 'ClNotificationChannelList' });
<template>
<cl-list-layout
class="notification-channel-list"
:row-key="rowKeyFunction"
:action-functions="actionFunctions"
:nav-actions="navActions"
:table-pagination="tablePagination"
Original file line number Diff line number Diff line change
@@ -237,15 +237,8 @@ const useNotificationChannelList = () => {
tableColumns,
} as UseListOptions<NotificationChannel>;

const rowKeyFunction = (row: NotificationChannel) =>
JSON.stringify([
row._id,
btnLoadingMap.value.get(`${row._id}:${ACTION_SEND_TEST_MESSAGE}`),
]);

return {
...useList<NotificationChannel>(ns, store, opts),
rowKeyFunction,
};
};

Original file line number Diff line number Diff line change
@@ -30,7 +30,6 @@ defineOptions({ name: 'ClNotificationRequestList' });
<template>
<cl-list-layout
class="notification-request-list"
:row-key="(row: NotificationRequest) => [row._id, row.status].join('_')"
:action-functions="actionFunctions"
:nav-actions="navActions"
:table-pagination="tablePagination"
6 changes: 0 additions & 6 deletions src/views/spider/list/SpiderList.vue
Original file line number Diff line number Diff line change
@@ -15,7 +15,6 @@ const {
tableListFilter,
tableListSort,
actionFunctions,
tableActionsPrefix,
} = useSpiderList();
defineOptions({ name: 'ClSpiderList' });
@@ -24,10 +23,6 @@ defineOptions({ name: 'ClSpiderList' });
<template>
<cl-list-layout
class="spider-list"
:row-key="
({ _id, last_task, stat }: Spider) =>
[_id, last_task?.status, JSON.stringify(stat)].join('_')
"
:action-functions="actionFunctions"
:nav-actions="navActions"
:table-pagination="tablePagination"
@@ -36,7 +31,6 @@ defineOptions({ name: 'ClSpiderList' });
:table-total="tableTotal"
:table-filter="tableListFilter"
:table-sort="tableListSort"
:table-actions-prefix="tableActionsPrefix"
:no-actions="noActions"
:embedded="embedded"
>
4 changes: 0 additions & 4 deletions src/views/task/list/TaskList.vue
Original file line number Diff line number Diff line change
@@ -21,10 +21,6 @@ defineOptions({ name: 'ClTaskList' });
<template>
<cl-list-layout
class="task-list"
:row-key="
({ _id, status, stat }: Task) =>
[_id, status, JSON.stringify(stat)].join('_')
"
:action-functions="actionFunctions"
:nav-actions="navActions"
:table-pagination="tablePagination"
3 changes: 0 additions & 3 deletions src/views/token/list/TokenList.vue
Original file line number Diff line number Diff line change
@@ -20,7 +20,6 @@ defineOptions({ name: 'ClTokenList' });
<template>
<cl-list-layout
class="token-list"
:row-key="(row: Token) => [row._id, row._visible].join('_')"
:action-functions="actionFunctions"
:nav-actions="navActions"
:table-pagination="tablePagination"
@@ -36,5 +35,3 @@ defineOptions({ name: 'ClTokenList' });
</template>
</cl-list-layout>
</template>


0 comments on commit c045aea

Please sign in to comment.