This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev-2.1.5
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev-2.1.5 by this push:
new d5e9f6e03 [Improve]: app table resize tool & fix resize bug when menu
collapsed (#4032)
d5e9f6e03 is described below
commit d5e9f6e038c4732e317070b78ce0f9a0aa68ac97
Author: Kriszu <[email protected]>
AuthorDate: Thu Sep 5 10:24:11 2024 +0800
[Improve]: app table resize tool & fix resize bug when menu collapsed
(#4032)
---
.../src/views/flink/app/View.vue | 298 +++++++++++----------
.../src/views/flink/app/components/AppResize.vue | 6 +-
.../views/flink/app/hooks/useAppTableColumns.ts | 13 +-
3 files changed, 164 insertions(+), 153 deletions(-)
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue
b/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue
index 8b2fc548f..d8772c3be 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue
@@ -267,167 +267,169 @@
<template>
<PageWrapper contentFullHeight content-class="flex flex-col">
<AppDashboard ref="appDashboardRef" />
- <BasicTable
- @register="registerTable"
- :columns="getAppColumns"
- @resize-column="onTableColumnResize"
- class="app_list !px-0 table-searchbar flex-1 pt-15px !px-0 flex flex-col"
- >
- <template #tableTitle>
- <div class="flex justify-between" style="width: 100%">
- <Form name="appTableForm" :model="searchRef" layout="inline"
class="flex-1 search-bar">
- <Row :gutter="4" class="w-full">
- <Col :span="5">
- <Form.Item>
- <Input
- :placeholder="t('flink.app.searchName')"
- allow-clear
- v-model:value="searchRef.jobName"
- @change="() => handleResetReload()"
- @search="() => handleResetReload()"
- />
- </Form.Item>
- </Col>
- <Col :span="4">
- <Form.Item>
- <Select
- :placeholder="t('flink.app.tags')"
- show-search
- allow-clear
- v-model:value="searchRef.tags"
- @change="() => handleResetReload()"
- :options="(tagsOptions || []).map((t: Recordable) => ({
label: t, value: t }))"
- />
- </Form.Item>
- </Col>
- <Col :span="4">
- <Form.Item>
- <Select
- :placeholder="t('flink.app.jobType')"
- show-search
- allow-clear
- v-model:value="searchRef.jobType"
- @change="() => handleResetReload()"
- :options="[
- { label: 'JAR', value: JobTypeEnum.JAR },
- { label: 'SQL', value: JobTypeEnum.SQL },
- ]"
- />
- </Form.Item>
- </Col>
- <Col :span="4">
- <Form.Item>
- <Select
- :placeholder="t('flink.app.owner')"
- show-search
- allow-clear
- v-model:value="searchRef.userId"
- @change="() => handleResetReload()"
- :options="
+ <div class="flex-1 bg-white mt-15px">
+ <BasicTable
+ @register="registerTable"
+ :columns="getAppColumns"
+ @resize-column="onTableColumnResize"
+ class="app_list !px-0 table-searchbar flex-1 !px-0"
+ >
+ <template #tableTitle>
+ <div class="flex justify-between" style="width: 100%">
+ <Form name="appTableForm" :model="searchRef" layout="inline"
class="flex-1 search-bar">
+ <Row :gutter="4" class="w-full">
+ <Col :span="5">
+ <Form.Item>
+ <Input
+ :placeholder="t('flink.app.searchName')"
+ allow-clear
+ v-model:value="searchRef.jobName"
+ @change="() => handleResetReload()"
+ @search="() => handleResetReload()"
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="4">
+ <Form.Item>
+ <Select
+ :placeholder="t('flink.app.tags')"
+ show-search
+ allow-clear
+ v-model:value="searchRef.tags"
+ @change="() => handleResetReload()"
+ :options="(tagsOptions || []).map((t: Recordable) => ({
label: t, value: t }))"
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="4">
+ <Form.Item>
+ <Select
+ :placeholder="t('flink.app.jobType')"
+ show-search
+ allow-clear
+ v-model:value="searchRef.jobType"
+ @change="() => handleResetReload()"
+ :options="[
+ { label: 'JAR', value: JobTypeEnum.JAR },
+ { label: 'SQL', value: JobTypeEnum.SQL },
+ ]"
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="4">
+ <Form.Item>
+ <Select
+ :placeholder="t('flink.app.owner')"
+ show-search
+ allow-clear
+ v-model:value="searchRef.userId"
+ @change="() => handleResetReload()"
+ :options="
(users || []).map((u: Recordable) => ({
label: u.nickName || u.username,
value: u.userId,
}))
"
- />
- </Form.Item>
- </Col>
- </Row>
- </Form>
- <div v-auth="'app:create'">
- <Button type="primary" @click="() => router.push({ path:
'/flink/app/add' })">
- <PlusOutlined />
- {{ t('common.add') }}
- </Button>
+ />
+ </Form.Item>
+ </Col>
+ </Row>
+ </Form>
+ <div v-auth="'app:create'">
+ <Button type="primary" @click="() => router.push({ path:
'/flink/app/add' })">
+ <PlusOutlined />
+ {{ t('common.add') }}
+ </Button>
+ </div>
</div>
- </div>
- </template>
- <template #bodyCell="{ column, record }">
- <template v-if="column.dataIndex === 'jobName'">
- <span class="app_type app_jar" v-if="record['jobType'] ===
JobTypeEnum.JAR"> JAR </span>
- <span class="app_type app_sql" v-if="record['jobType'] ===
JobTypeEnum.SQL"> SQL </span>
- <span
- class="link"
- :class="{
- 'cursor-pointer': record['appControl']['allowView'] === true,
- }"
- @click="handleJobView(record)"
- >
- <Popover :title="t('common.detailText')">
- <template #content>
- <div class="flex">
- <span class="pr-6px font-bold">{{ t('flink.app.appName')
}}:</span>
- <div class="max-w-300px break-words">{{ record.jobName
}}</div>
- </div>
- <div class="pt-2px">
- <span class="pr-6px font-bold">{{ t('flink.app.jobType')
}}:</span>
- <Tag color="blue">
- <span v-if="record['jobType'] == JobTypeEnum.JAR"> JAR
</span>
- <span v-if="record['jobType'] == JobTypeEnum.SQL"> SQL
</span>
- </Tag>
- </div>
- <div class="pt-2px flex">
- <span class="pr-6px font-bold">{{ t('common.description')
}}:</span>
- <div class="max-w-300px break-words">{{ record.description
}}</div>
- </div>
- </template>
- {{ record.jobName }}
- </Popover>
- </span>
-
- <template v-if="record['jobType'] === JobTypeEnum.JAR">
- <Badge
- v-if="record.release === ReleaseStateEnum.NEED_CHECK"
- class="build-badge"
- count="NEW"
- :title="t('flink.app.view.recheck')"
- />
- <Badge
- v-else-if="record.release >= ReleaseStateEnum.RELEASING"
- class="build-badge"
- count="NEW"
- :title="t('flink.app.view.changed')"
- />
- </template>
</template>
- <template v-if="column.dataIndex === 'tags'">
- <Tooltip v-if="record.tags" :title="record.tags">
+ <template #bodyCell="{ column, record }">
+ <template v-if="column.dataIndex === 'jobName'">
+ <span class="app_type app_jar" v-if="record['jobType'] ===
JobTypeEnum.JAR"> JAR </span>
+ <span class="app_type app_sql" v-if="record['jobType'] ===
JobTypeEnum.SQL"> SQL </span>
<span
- v-for="(tag, index) in record.tags.split(',')"
- :key="'tag-'.concat(index.toString())"
- class="pl-4px"
+ class="link"
+ :class="{
+ 'cursor-pointer': record['appControl']['allowView'] === true,
+ }"
+ @click="handleJobView(record)"
>
- <Tag color="blue">{{ tag }}</Tag>
+ <Popover :title="t('common.detailText')">
+ <template #content>
+ <div class="flex">
+ <span class="pr-6px font-bold">{{ t('flink.app.appName')
}}:</span>
+ <div class="max-w-300px break-words">{{ record.jobName
}}</div>
+ </div>
+ <div class="pt-2px">
+ <span class="pr-6px font-bold">{{ t('flink.app.jobType')
}}:</span>
+ <Tag color="blue">
+ <span v-if="record['jobType'] == JobTypeEnum.JAR"> JAR
</span>
+ <span v-if="record['jobType'] == JobTypeEnum.SQL"> SQL
</span>
+ </Tag>
+ </div>
+ <div class="pt-2px flex">
+ <span class="pr-6px font-bold">{{ t('common.description')
}}:</span>
+ <div class="max-w-300px break-words">{{ record.description
}}</div>
+ </div>
+ </template>
+ {{ record.jobName }}
+ </Popover>
</span>
- </Tooltip>
- </template>
- <template v-if="column.dataIndex === 'task'">
- <State option="task" :data="record" />
- </template>
- <template v-if="column.dataIndex === 'state'">
- <State option="state" :data="record"
:maxTitle="titleLenRef.maxState" />
+
+ <template v-if="record['jobType'] === JobTypeEnum.JAR">
+ <Badge
+ v-if="record.release === ReleaseStateEnum.NEED_CHECK"
+ class="build-badge"
+ count="NEW"
+ :title="t('flink.app.view.recheck')"
+ />
+ <Badge
+ v-else-if="record.release >= ReleaseStateEnum.RELEASING"
+ class="build-badge"
+ count="NEW"
+ :title="t('flink.app.view.changed')"
+ />
+ </template>
+ </template>
+ <template v-if="column.dataIndex === 'tags'">
+ <Tooltip v-if="record.tags" :title="record.tags">
+ <span
+ v-for="(tag, index) in record.tags.split(',')"
+ :key="'tag-'.concat(index.toString())"
+ class="pl-4px"
+ >
+ <Tag color="blue">{{ tag }}</Tag>
+ </span>
+ </Tooltip>
+ </template>
+ <template v-if="column.dataIndex === 'task'">
+ <State option="task" :data="record" />
+ </template>
+ <template v-if="column.dataIndex === 'state'">
+ <State option="state" :data="record"
:maxTitle="titleLenRef.maxState" />
+ </template>
+ <template v-if="column.dataIndex === 'release'">
+ <State
+ option="release"
+ :maxTitle="titleLenRef.maxRelease"
+ :title="releaseTitleMap[record.release] || ''"
+ :data="record"
+ />
+ </template>
+ <template v-if="column.dataIndex === 'operation'">
+ <TableAction v-bind="getTableActions(record, currentTablePage)" />
+ </template>
</template>
- <template v-if="column.dataIndex === 'release'">
- <State
- option="release"
- :maxTitle="titleLenRef.maxRelease"
- :title="releaseTitleMap[record.release] || ''"
- :data="record"
+ <template #insertTable="{ tableContainer }">
+ <AppTableResize
+ v-if="!noData"
+ :table-container="tableContainer"
+ :resize-min="200"
+ v-model:left="tableColumnWidth.jobName"
/>
</template>
- <template v-if="column.dataIndex === 'operation'">
- <TableAction v-bind="getTableActions(record, currentTablePage)" />
- </template>
- </template>
- <template #insertTable="{ tableContainer }">
- <AppTableResize
- v-if="!noData"
- :table-container="tableContainer"
- :resize-min="200"
- v-model:left="tableColumnWidth.jobName"
- />
- </template>
- </BasicTable>
+ </BasicTable>
+ </div>
<StartApplicationModal @register="registerStartModal"
@update-option="handleOptionApp" />
<StopApplicationModal @register="registerStopModal"
@update-option="handleOptionApp" />
<LogModal @register="registerLogModal" />
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppResize.vue
b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppResize.vue
index a519460b9..183ee3704 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppResize.vue
+++
b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppResize.vue
@@ -34,7 +34,7 @@
const getStyle = computed(() => {
return {
left: `${props.left + 10}px`,
- top: '20px',
+ top: '50px',
};
});
const isMove = ref(false);
@@ -50,6 +50,7 @@
};
const offsetLeft = getOffsetLeft(props.tableContainer);
+ console.log('offsetLeft', offsetLeft);
const maxResize = props.tableContainer!.getBoundingClientRect().width -
510;
let newLeft = e.pageX - offsetLeft;
if (newLeft > maxResize) newLeft = maxResize;
@@ -118,7 +119,8 @@
&.app-vertical {
width: 7px;
- height: 100px;
+ height: calc(100% - 95px);
+ border-left: 1px solid var(--resize-border-color);
cursor: col-resize;
}
}
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableColumns.ts
b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableColumns.ts
index bab251f3e..dd3f5fcfd 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableColumns.ts
+++
b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableColumns.ts
@@ -20,13 +20,15 @@ import { computed, ref, unref } from 'vue';
import { BasicColumn } from '/@/components/Table';
import { AppStateEnum } from '/@/enums/flinkEnum';
import { dateToDuration } from '/@/utils/dateUtil';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
const { t } = useI18n();
export const useAppTableColumns = () => {
+ const { getCollapsed } = useMenuSetting();
// app table column width
const tableColumnWidth = ref({
jobName: 250,
- flinkVersion: 110,
+ flinkVersion: 150,
tags: 150,
state: 130,
release: 120,
@@ -34,7 +36,6 @@ export const useAppTableColumns = () => {
modifyTime: 165,
nickName: 100,
});
-
function onTableColumnResize(width: number, columns: ColumnType) {
if (!columns?.dataIndex) return;
const dataIndexStr = columns?.dataIndex.toString() ?? '';
@@ -62,7 +63,13 @@ export const useAppTableColumns = () => {
title: t('flink.app.tags'),
ellipsis: true,
dataIndex: 'tags',
- width: unref(tableColumnWidth).tags,
+ ...(getCollapsed.value
+ ? {
+ minWidth: unref(tableColumnWidth).tags,
+ }
+ : {
+ width: unref(tableColumnWidth).tags,
+ }),
},
{ title: t('flink.app.owner'), dataIndex: 'nickName', width:
unref(tableColumnWidth).nickName },
{
