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 08d4d51c4 [Fix]: app table resize tool (#4017)
08d4d51c4 is described below
commit 08d4d51c4030937b7a06eada9c07bd7386630aa9
Author: Kriszu <[email protected]>
AuthorDate: Sun Sep 1 21:15:17 2024 +0800
[Fix]: app table resize tool (#4017)
---
.../src/views/flink/app/View.vue | 102 ++++++++++-
.../src/views/flink/app/components/AppResize.vue | 5 +-
.../src/views/flink/app/hooks/useAppTableAction.ts | 3 +-
.../src/views/setting/FlinkHome/index.vue | 201 +++++++++------------
4 files changed, 189 insertions(+), 122 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 aa80de585..c0862bdfe 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
@@ -15,12 +15,24 @@
limitations under the License.
-->
<script lang="ts" setup name="AppView">
+ import { PlusOutlined } from '@ant-design/icons-vue';
import { nextTick, ref, onUnmounted, onMounted } from 'vue';
import { useAppTableAction } from './hooks/useAppTableAction';
import { useI18n } from '/@/hooks/web/useI18n';
import { JobTypeEnum, OptionStateEnum, ReleaseStateEnum } from
'/@/enums/flinkEnum';
- import { useTimeoutFn } from '@vueuse/core';
- import { Tooltip, Badge, Tag, Popover } from 'ant-design-vue';
+ import { useDebounceFn, useTimeoutFn } from '@vueuse/core';
+ import {
+ Form,
+ Button,
+ Select,
+ Input,
+ Tooltip,
+ Badge,
+ Tag,
+ Popover,
+ Row,
+ Col,
+ } from 'ant-design-vue';
import { fetchAppRecord } from '/@/api/flink/app/app';
import { useTable } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
@@ -45,10 +57,17 @@
import { useSavepoint } from './hooks/useSavepoint';
import { useAppTableColumns } from './hooks/useAppTableColumns';
import AppTableResize from './components/AppResize.vue';
+ import { useRouter } from 'vue-router';
+
defineOptions({
name: 'AppView',
});
const { t } = useI18n();
+ const searchRef = ref<Recordable>({
+ tags: undefined,
+ owner: undefined,
+ jobType: undefined,
+ });
const optionApps = {
starting: new Map(),
stopping: new Map(),
@@ -66,6 +85,7 @@
const noData = ref<boolean>();
const currentTablePage = ref(1);
+ const router = useRouter();
const { onTableColumnResize, tableColumnWidth, getAppColumns } =
useAppTableColumns();
const { openSavepoint } = useSavepoint(handleOptionApp);
const [registerStartModal, { openModal: openStartModal }] = useModal();
@@ -172,7 +192,7 @@
canResize: false,
showIndexColumn: false,
showTableSetting: true,
- useSearchForm: true,
+ useSearchForm: false,
tableSetting: { fullScreen: true, redo: false },
actionColumn: {
dataIndex: 'operation',
@@ -181,7 +201,7 @@
},
});
- const { getTableActions, formConfig } = useAppTableAction(
+ const { getTableActions, tagsOptions, users } = useAppTableAction(
openStartModal,
openStopModal,
openSavepoint,
@@ -213,6 +233,14 @@
reload({ polling });
});
}
+
+ const handleResetReload = useDebounceFn(() => {
+ setPagination({
+ current: 1,
+ });
+ reload();
+ }, 500);
+
const { start, stop } = useTimeoutFn(() => {
if (!getLoading()) {
handlePageDataReload(true);
@@ -243,8 +271,72 @@
:columns="getAppColumns"
@resize-column="onTableColumnResize"
class="app_list !px-0 table-searchbar flex-1 pt-20px !px-0 flex flex-col"
- :formConfig="formConfig"
>
+ <template #tableTitle>
+ <div class="flex justify-between" style="width: calc(100% - 130px)">
+ <Form name="appTableForm" :model="searchRef" layout="inline"
class="flex-1">
+ <Row :gutter="10" class="w-full">
+ <Col :span="5">
+ <Form.Item :label="t('flink.app.tags')">
+ <Select
+ :placeholder="t('flink.app.tags')"
+ show-search
+ v-model:value="searchRef.tags"
+ @change="() => handleResetReload()"
+ :options="(tagsOptions || []).map((t: Recordable) => ({
label: t, value: t }))"
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="5">
+ <Form.Item :label="t('flink.app.owner')">
+ <Select
+ :placeholder="t('flink.app.owner')"
+ show-search
+ v-model:value="searchRef.userId"
+ @change="() => handleResetReload()"
+ :options="
+ (users || []).map((u: Recordable) => ({
+ label: u.nickName || u.username,
+ value: u.userId,
+ }))
+ "
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="5">
+ <Form.Item :label="t('flink.app.jobType')">
+ <Select
+ :placeholder="t('flink.app.jobType')"
+ show-search
+ v-model:value="searchRef.jobType"
+ @change="() => handleResetReload()"
+ :options="[
+ { label: 'JAR', value: JobTypeEnum.JAR },
+ { label: 'SQL', value: JobTypeEnum.SQL },
+ ]"
+ />
+ </Form.Item>
+ </Col>
+ <Col :span="7">
+ <Form.Item :label="t('flink.app.searchName')">
+ <Input
+ :placeholder="t('flink.app.searchName')"
+ v-model:value="searchRef.jobName"
+ @change="() => handleResetReload()"
+ @search="() => handleResetReload()"
+ />
+ </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>
+ </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>
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 2aa8d43cc..a519460b9 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: '50px',
+ top: '20px',
};
});
const isMove = ref(false);
@@ -118,8 +118,7 @@
&.app-vertical {
width: 7px;
- height: calc(100% - 95px);
- border-left: 1px solid var(--resize-border-color);
+ height: 100px;
cursor: col-resize;
}
}
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts
b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts
index 2caa96703..81f0171b7 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts
+++
b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableAction.ts
@@ -264,6 +264,7 @@ export const useAppTableAction = (
const formConfig = computed((): Partial<FormProps> => {
const tableFormConfig: FormProps = {
+ name: 'appTableForm',
baseColProps: { span: 4, style: { paddingRight: '30px' } },
actionColOptions: { style: { paddingRight: '0px' } },
showSubmitButton: false,
@@ -356,5 +357,5 @@ export const useAppTableAction = (
onMounted(() => {
handleInitTagsOptions();
});
- return { getTableActions, formConfig };
+ return { getTableActions, formConfig, tagsOptions, users };
};
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
index 7708f783b..7c87a21ff 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
@@ -15,18 +15,12 @@
limitations under the License.
-->
<script lang="ts" setup name="FlinkEnvSetting">
- import { onMounted, ref } from 'vue';
+ import { ref } from 'vue';
import { useModal } from '/@/components/Modal';
import { useI18n } from '/@/hooks/web/useI18n';
- import { Icon, SvgIcon } from '/@/components/Icon';
- import { List, Switch, Popconfirm, Tooltip } from 'ant-design-vue';
- import {
- CheckOutlined,
- CloseOutlined,
- DeleteOutlined,
- EyeOutlined,
- PlusOutlined,
- } from '@ant-design/icons-vue';
+ import { SvgIcon } from '/@/components/Icon';
+ import { Switch } from 'ant-design-vue';
+ import { CheckOutlined, CloseOutlined, PlusOutlined } from
'@ant-design/icons-vue';
import { FlinkEnvModal, FlinkEnvDrawer } from './components';
import {
fetchValidity,
@@ -39,19 +33,38 @@
import { useMessage } from '/@/hooks/web/useMessage';
import { useDrawer } from '/@/components/Drawer';
import { PageWrapper } from '/@/components/Page';
- import { BasicTitle } from '/@/components/Basic';
+ import { BasicTable, TableAction, useTable } from '/@/components/Table';
defineOptions({
name: 'FlinkEnvSetting',
});
- const ListItem = List.Item;
- const ListItemMeta = ListItem.Meta;
const { t } = useI18n();
const versionId = ref<string | null>(null);
const { Swal, createMessage } = useMessage();
- const flinks = ref<FlinkEnv[]>([]);
const [registerModal, { openModal: openFlinkModal }] = useModal();
const [registerFlinkDraw, { openDrawer: openEnvDrawer }] = useDrawer();
+ const [registerTable, { reload, getDataSource }] = useTable({
+ title: t('setting.flinkHome.title'),
+ api: fetchFlinkEnv,
+ columns: [
+ { dataIndex: 'flinkName', title: t('setting.flinkHome.flinkName') },
+ { dataIndex: 'flinkHome', title: t('setting.flinkHome.flinkHome') },
+ { dataIndex: 'default', title: 'Default' },
+ { dataIndex: 'description', title: t('setting.flinkHome.description') },
+ ],
+ useSearchForm: false,
+ striped: false,
+ canResize: false,
+ bordered: false,
+ showIndexColumn: false,
+ pagination: false,
+ actionColumn: {
+ width: 200,
+ title: t('component.table.operation'),
+ dataIndex: 'action',
+ },
+ });
+
/* Edit button */
async function handleEditFlink(item: FlinkEnv) {
const resp = await fetchValidity(item.id);
@@ -76,7 +89,7 @@
async function handleDelete(item: FlinkEnv) {
const resp = await fetchFlinkEnvRemove(item.id);
if (resp.data.code == 200) {
- await getFlinkSetting();
+ reload();
createMessage.success('The current flink home is removed.');
}
}
@@ -91,111 +104,73 @@
showConfirmButton: false,
timer: 2000,
});
- getFlinkSetting();
+ reload();
}
}
-
- /* Get flink environment data */
- async function getFlinkSetting() {
- flinks.value = await fetchFlinkEnv();
- }
-
- onMounted(() => {
- getFlinkSetting();
- });
</script>
<template>
<PageWrapper contentFullHeight fixed-height content-class="flex flex-col">
- <div class="bg-white py-16px px-24px">
- <BasicTitle class="!inline-block" style="margin: 0 !important; height:
initial">
- {{ t('setting.flinkHome.title') }}
- </BasicTitle>
- <div v-auth="'project:create'">
- <a-button type="dashed" class="w-full mt-10px"
@click="openFlinkModal(true, {})">
- <PlusOutlined />
- {{ t('common.add') }}
- </a-button>
- </div>
- </div>
- <div class="flex-1">
- <List class="home-card-list !mt-10px">
- <ListItem v-for="(item, index) in flinks" :key="index">
- <ListItemMeta style="width: 60%" :title="item.flinkName"
:description="item.description">
- <template #avatar>
- <SvgIcon class="avatar p-15px" name="flink" size="60" />
+ <BasicTable @register="registerTable" class="flex flex-col">
+ <template #toolbar>
+ <div v-auth="'project:create'">
+ <a-button type="primary" class="w-full mt-10px"
@click="openFlinkModal(true, {})">
+ <PlusOutlined />
+ {{ t('common.add') }}
+ </a-button>
+ </div>
+ </template>
+ <template #bodyCell="{ column, record }">
+ <template v-if="column.dataIndex === 'flinkName'">
+ <svg-icon class="avatar" name="flink" :size="20" />
+ {{ record.flinkName }}
+ </template>
+ <template v-if="column.dataIndex === 'default'">
+ <Switch
+ :disabled="record.isDefault"
+ @click="handleSetDefault(record)"
+ v-model:checked="record.isDefault"
+ >
+ <template #checkedChildren>
+ <CheckOutlined />
</template>
- </ListItemMeta>
-
- <div class="list-content flex" style="width: 40%">
- <div class="list-content-item" style="width: 60%">
- <span>Flink Home</span>
- <p style="margin-top: 10px">
- {{ item.flinkHome }}
- </p>
- </div>
- <div class="list-content-item">
- <span>Default</span>
- <p style="margin-top: 10px">
- <Switch
- :disabled="item.isDefault"
- @click="handleSetDefault(item)"
- v-model:checked="item.isDefault"
- >
- <template #checkedChildren>
- <CheckOutlined />
- </template>
- <template #unCheckedChildren>
- <CloseOutlined />
- </template>
- </Switch>
- </p>
- </div>
- </div>
-
- <template #actions>
- <Tooltip :title="t('setting.flinkHome.edit')">
- <a-button
- @click="handleEditFlink(item)"
- shape="circle"
- size="large"
- class="control-button"
- >
- <Icon icon="clarity:note-edit-line" />
- </a-button>
- </Tooltip>
- <Tooltip :title="t('setting.flinkHome.conf')">
- <a-button
- shape="circle"
- @click="handleFlinkConf(item)"
- target="_blank"
- size="large"
- class="control-button"
- >
- <EyeOutlined />
- </a-button>
- </Tooltip>
- <Popconfirm
- :title="t('setting.flinkHome.delete')"
- :cancel-text="t('common.no')"
- :ok-text="t('common.yes')"
- @confirm="handleDelete(item)"
- >
- <a-button
- :disabled="item.isDefault && flinks.length > 1"
- type="danger"
- shape="circle"
- size="large"
- class="control-button"
- >
- <DeleteOutlined />
- </a-button>
- </Popconfirm>
- </template>
- </ListItem>
- </List>
- </div>
+ <template #unCheckedChildren>
+ <CloseOutlined />
+ </template>
+ </Switch>
+ </template>
+ <template v-if="column.dataIndex === 'action'">
+ <TableAction
+ :actions="[
+ {
+ icon: 'clarity:note-edit-line',
+ auth: 'project:build',
+ tooltip: t('setting.flinkHome.edit'),
+ onClick: handleEditFlink.bind(null, record),
+ },
+ {
+ icon: 'ant-design:eye-outlined',
+ auth: 'project:build',
+ tooltip: t('setting.flinkHome.conf'),
+ onClick: handleFlinkConf.bind(null, record),
+ },
+ {
+ icon: 'ant-design:delete-outlined',
+ color: 'error',
+ tooltip: t('common.delText'),
+ disabled: record.isDefault && getDataSource()?.length > 1,
+ popConfirm: {
+ title: t('setting.flinkHome.delete'),
+ placement: 'left',
+ confirm: handleDelete.bind(null, record),
+ },
+ },
+ ]"
+ />
+ </template>
+ </template>
+ </BasicTable>
- <FlinkEnvModal @register="registerModal" @reload="getFlinkSetting" />
+ <FlinkEnvModal @register="registerModal" @reload="reload" />
<FlinkEnvDrawer @register="registerFlinkDraw" width="60%" />
</PageWrapper>
</template>
