This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev by this push:
new eac956161 [Fix]: spark app page bug (#4041)
eac956161 is described below
commit eac956161385f5648cdc15d70b244bf3de8b7ac3
Author: Kriszu <[email protected]>
AuthorDate: Mon Sep 9 15:24:40 2024 +0800
[Fix]: spark app page bug (#4041)
* [Fix]: spark app page bug
* fix: remove console
* fix: flink app search tool
* fix: spark field
* fix: spark sql check error
* fix: e2e test
* Update View.vue
* fix: e2e btn
* Update ApplicationsPage.java
* Update View.vue
* Update ApplicationsPage.java
* Update ApplicationsPage.java
* fix: spark state component import error
* fix: flink app table action
* [Fix]: Restore flink app page
---------
Co-authored-by: benjobs <[email protected]>
---
.../src/components/Page/src/PageWrapper.vue | 7 +-
.../src/components/Table/src/types/tableAction.ts | 4 +-
.../src/layouts/default/footer/index.vue | 52 +++++++++---
.../src/layouts/default/menu/index.vue | 2 +-
.../src/layouts/default/sider/LayoutSider.vue | 31 ++++++-
.../src/locales/lang/en/spark/app.ts | 4 +-
.../src/locales/lang/zh-CN/menu.ts | 2 +-
.../src/locales/lang/zh-CN/spark/app.ts | 4 +-
.../src/views/flink/app/View.vue | 10 +--
.../src/views/flink/app/components/AppResize.vue | 1 +
.../src/views/flink/app/hooks/useAppTableAction.ts | 2 +-
.../src/views/spark/app/components/AppForm.vue | 3 +
.../src/views/spark/app/components/AppLog.vue | 2 +-
.../src/views/spark/app/components/SparkSql.vue | 63 +++++++-------
.../src/views/spark/app/create.vue | 17 ++--
.../src/views/spark/app/data/detail.data.ts | 7 +-
.../src/views/spark/app/edit.vue | 4 +-
.../src/views/spark/app/hooks/useAppFormSchema.tsx | 10 +--
.../src/views/spark/app/hooks/useSparkAction.tsx | 2 +-
.../src/views/spark/app/hooks/useSparkColumns.ts | 49 +++++------
.../views/spark/app/hooks/useSparkTableAction.ts | 2 +-
.../src/views/spark/app/index.vue | 95 +++++++++++-----------
22 files changed, 219 insertions(+), 154 deletions(-)
diff --git
a/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue
b/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue
index 0a941cf2d..eef2e5fd0 100644
---
a/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue
+++
b/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue
@@ -76,7 +76,7 @@
);
const getIsContentFullHeight = computed(() => {
- return !!props.contentFullHeight;
+ return props.contentFullHeight!;
});
const getUpwardSpace = computed(() => props.upwardSpace);
@@ -167,9 +167,10 @@
.@{prefix-cls} {
position: relative;
-
+ padding: 16px;
+ padding-bottom: 0;
.@{prefix-cls}-content {
- margin: 16px;
+ // margin: 16px;
border-radius: @border-radius-base;
}
diff --git
a/streampark-console/streampark-console-webapp/src/components/Table/src/types/tableAction.ts
b/streampark-console/streampark-console-webapp/src/components/Table/src/types/tableAction.ts
index 23dc32201..8ede45f94 100644
---
a/streampark-console/streampark-console-webapp/src/components/Table/src/types/tableAction.ts
+++
b/streampark-console/streampark-console-webapp/src/components/Table/src/types/tableAction.ts
@@ -16,8 +16,6 @@ export interface ActionItem extends ButtonProps {
// Whether business controls are displayed
ifShow?: boolean | ((action: ActionItem) => boolean);
tooltip?: string | TooltipProps;
- okButtonProps?: ButtonProps & { class: string };
- cancelButtonProps?: ButtonProps & { class: string };
}
export interface PopConfirm {
@@ -42,4 +40,6 @@ export interface PopConfirm {
| 'rightBottom'
| 'bottomLeft'
| 'bottomRight';
+ okButtonProps?: ButtonProps & { class: string };
+ cancelButtonProps?: ButtonProps & { class: string };
}
diff --git
a/streampark-console/streampark-console-webapp/src/layouts/default/footer/index.vue
b/streampark-console/streampark-console-webapp/src/layouts/default/footer/index.vue
index 5887e01db..f2df7b69b 100644
---
a/streampark-console/streampark-console-webapp/src/layouts/default/footer/index.vue
+++
b/streampark-console/streampark-console-webapp/src/layouts/default/footer/index.vue
@@ -16,13 +16,6 @@
-->
<template>
<Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
- <div :class="`${prefixCls}__links`">
- <a @click="openWindow(SITE_URL)">{{ t('layout.footer.website') }}</a>
-
- <GithubFilled :class="`${prefixCls}__github`" />
-
- <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument')
}}</a>
- </div>
<div :class="`${prefixCls}__copyright`"
@click="openWindow('https://incubator.apache.org/')">
Copyright ©{{ new Date().getFullYear() }} The Apache Software
Foundation. Apache
StreamPark, StreamPark, and its feather logo are trademarks of The
Apache Software Foundation
@@ -34,8 +27,6 @@
import { computed, defineComponent, unref, ref } from 'vue';
import { Layout } from 'ant-design-vue';
- import { GithubFilled } from '@ant-design/icons-vue';
-
import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
import { openWindow } from '/@/utils';
@@ -47,7 +38,7 @@
export default defineComponent({
name: 'LayoutFooter',
- components: { Footer: Layout.Footer, GithubFilled },
+ components: { Footer: Layout.Footer },
setup() {
const { t } = useI18n();
const { getShowFooter } = useRootSetting();
@@ -83,12 +74,12 @@
@prefix-cls: ~'@{namespace}-layout-footer';
@normal-link-color: rgba(0, 0, 0, 0.45);
-
@hover-color: rgba(0, 0, 0, 0.85);
.@{prefix-cls} {
color: @normal-link-color;
text-align: center;
+ padding: 10px 50px;
&__links {
margin-bottom: 8px;
@@ -120,4 +111,43 @@
}
}
}
+
+ [data-theme='dark'] {
+ @normal-link-color: rgba(255, 255, 255, 0.45);
+ @hover-color: rgba(255, 255, 255, 0.85);
+ .@{prefix-cls} {
+ color: @normal-link-color;
+ text-align: center;
+ padding: 10px 50px;
+
+ &__links {
+ margin-bottom: 8px;
+
+ a {
+ color: @normal-link-color;
+
+ &:hover {
+ color: @hover-color;
+ cursor: pointer;
+ }
+ }
+ }
+
+ &__github {
+ margin: 0 30px;
+ &:hover {
+ color: @hover-color;
+ }
+ }
+
+ &__copyright {
+ color: @normal-link-color;
+
+ &:hover {
+ cursor: pointer;
+ color: @hover-color;
+ }
+ }
+ }
+ }
</style>
diff --git
a/streampark-console/streampark-console-webapp/src/layouts/default/menu/index.vue
b/streampark-console/streampark-console-webapp/src/layouts/default/menu/index.vue
index 4c94b2356..38f874553 100644
---
a/streampark-console/streampark-console-webapp/src/layouts/default/menu/index.vue
+++
b/streampark-console/streampark-console-webapp/src/layouts/default/menu/index.vue
@@ -78,7 +78,7 @@
const getWrapperStyle = computed((): CSSProperties => {
return {
- height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`,
+ height: `calc(100% - ${unref(getIsShowLogo) ? '100px' : '50px'})`,
};
});
diff --git
a/streampark-console/streampark-console-webapp/src/layouts/default/sider/LayoutSider.vue
b/streampark-console/streampark-console-webapp/src/layouts/default/sider/LayoutSider.vue
index 9fd435594..266db614b 100644
---
a/streampark-console/streampark-console-webapp/src/layouts/default/sider/LayoutSider.vue
+++
b/streampark-console/streampark-console-webapp/src/layouts/default/sider/LayoutSider.vue
@@ -23,6 +23,23 @@
</template>
<LayoutMenu :theme="getMenuTheme" :menuMode="getMode"
:splitType="getSplitType" />
<DragBar ref="dragBarRef" />
+ <div
+ class="flex justify-between items-center border-t-1 border-[#c0c0c01a]
h-50px px-4"
+ v-if="!getCollapsed"
+ >
+ <a @click="openWindow(SITE_URL)" class="text-gray-400 hover:text-white">
+ {{ t('layout.footer.website') }}
+ </a>
+
+ <GithubFilled
+ class="text-14px !text-gray-400 !hover:text-white cursor-pointer"
+ @click="openWindow(GITHUB_URL)"
+ />
+
+ <a @click="openWindow(DOC_URL)" class="text-gray-400 hover:text-white">
+ {{ t('layout.footer.onlineDocument') }}
+ </a>
+ </div>
</Sider>
</template>
<script lang="ts">
@@ -31,6 +48,7 @@
import { Layout } from 'ant-design-vue';
import LayoutMenu from '../menu/index.vue';
import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
+ import { version } from '../../../../package.json';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
@@ -38,14 +56,19 @@
import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
+ import { openWindow } from '/@/utils';
+ import { useI18n } from '/@/hooks/web/useI18n';
+ import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
+ import { GithubFilled } from '@ant-design/icons-vue';
import DragBar from './DragBar.vue';
export default defineComponent({
name: 'LayoutSideBar',
- components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
+ components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger,
GithubFilled },
setup() {
const dragBarRef = ref<ElRef>(null);
const sideRef = ref<ElRef>(null);
+ const { t } = useI18n();
const {
getCollapsed,
@@ -108,6 +131,8 @@
const getTrigger = h(LayoutTrigger);
return {
+ t,
+ version,
prefixCls,
sideRef,
dragBarRef,
@@ -127,6 +152,10 @@
getSplitType,
getShowTrigger,
toggleCollapsed,
+ openWindow,
+ DOC_URL,
+ GITHUB_URL,
+ SITE_URL,
};
},
});
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
index 762d9d0f2..612747b3e 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/en/spark/app.ts
@@ -97,7 +97,7 @@ export default {
hadoopConfigTitle: 'System Hadoop',
dragUploadTitle: 'Click or Drag jar or py to this area to upload',
dragUploadTip: 'Supports single upload. You can upload local jar here to
support the current job',
- dependencyError: 'Please check the Flink version first.',
+ dependencyError: 'Please check the Spark version first.',
status: 'Run Status',
startTime: 'Start Time',
endTime: 'End Time',
@@ -248,7 +248,7 @@ export default {
appTypeIsRequiredMessage: 'Job type is required',
programJarIsRequiredMessage: 'Program jar file is required',
useSysHadoopConf: 'Use system Hadoop configuration',
- flinkVersionIsRequiredMessage: 'Flink version is required',
+ sparkVersionIsRequiredMessage: 'Spark version is required',
appNamePlaceholder: 'Please enter job name',
appNameIsRequiredMessage: 'Job name is required',
appNameNotUniqueMessage: 'Job name must be unique; the entered job name
already exists',
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/menu.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/menu.ts
index 50e933e5f..c5d3464ec 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/menu.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/menu.ts
@@ -36,7 +36,7 @@ export default {
},
spark: {
application: '作业管理',
- flinkHome: 'Spark 版本',
+ sparkHome: 'Spark 版本',
createApplication: '创建应用',
updateApplication: '更新应用',
applicationDetail: '应用详情',
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
index 6d69f8176..86301812c 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/spark/app.ts
@@ -97,7 +97,7 @@ export default {
hadoopConfigTitle: '系统 Hadoop',
dragUploadTitle: '单击或拖动 jar或py 到此区域以上传',
dragUploadTip: '支持单次上传。您可以在此处上传本地 jar 以支持当前作业',
- dependencyError: '请先检查flink 版本.',
+ dependencyError: '请先检查Spark版本.',
status: '运行状态',
startTime: '启动时间',
endTime: '结束时间',
@@ -246,7 +246,7 @@ export default {
appTypeIsRequiredMessage: '作业类型必填',
programJarIsRequiredMessage: '程序jar文件必填',
useSysHadoopConf: '使用系统hadoop配置',
- flinkVersionIsRequiredMessage: 'Flink版本必填',
+ sparkVersionIsRequiredMessage: 'Spark版本必填',
appNamePlaceholder: '请输入作业名称',
appNameIsRequiredMessage: '作业名称必填',
appNameNotUniqueMessage: '作业名称必须唯一, 输入的作业名称已经存在',
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 bd9b9fc16..9ed2d225a 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
@@ -14,13 +14,8 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<script lang="ts">
- export default defineComponent({
- name: 'AppView',
- });
-</script>
<script lang="ts" setup name="AppView">
- import { defineComponent, nextTick, ref, unref, onUnmounted, onMounted }
from 'vue';
+ import { nextTick, ref, unref, onUnmounted, onMounted } from 'vue';
import { useAppTableAction } from './hooks/useAppTableAction';
import { useI18n } from '/@/hooks/web/useI18n';
import { AppStateEnum, JobTypeEnum, OptionStateEnum, ReleaseStateEnum } from
'/@/enums/flinkEnum';
@@ -62,6 +57,7 @@
const yarn = ref<Nullable<string>>(null);
const currentTablePage = ref(1);
+ const noData = ref<boolean>();
const { onTableColumnResize, tableColumnWidth, getAppColumns } =
useAppTableColumns();
const { openSavepoint } = useSavepoint(handleOptionApp);
const [registerStartModal, { openModal: openStartModal }] = useModal();
@@ -90,6 +86,7 @@
},
afterFetch: (dataSource) => {
const timestamp = new Date().getTime();
+ noData.value = dataSource.length == 0;
dataSource.forEach((x) => {
x.expanded = [
{
@@ -338,6 +335,7 @@
</template>
<template #insertTable="{ tableContainer }">
<AppTableResize
+ v-if="!noData"
:table-container="tableContainer"
:resize-min="100"
v-model:left="tableColumnWidth.jobName"
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..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
@@ -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;
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 88662a3a6..9aa58202e 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
@@ -357,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/spark/app/components/AppForm.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppForm.vue
index a8af51c75..fa598b933 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppForm.vue
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppForm.vue
@@ -62,6 +62,9 @@
showActionButtonGroup: false,
});
+ defineExpose({
+ sparkSql,
+ });
const [registerReviewDrawer, { openDrawer: openReviewDrawer }] = useDrawer();
/* Initialize the form */
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppLog.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppLog.vue
index df698fb5c..901e0198a 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppLog.vue
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/AppLog.vue
@@ -104,7 +104,7 @@
>
<template #title>
<Icon icon="ant-design:code-outlined" style="color: #477de9" />
- <span> {{ t('spark.app.view.logTitle', [app.jobName]) }}</span>
+ <span> {{ t('spark.app.view.logTitle', [app.appName]) }}</span>
</template>
<div ref="logRef" class="h-full min-h-500px"></div>
<template #footer>
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/SparkSql.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/SparkSql.vue
index f3a5c97e9..8d6f2c6d0 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/components/SparkSql.vue
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/components/SparkSql.vue
@@ -24,7 +24,6 @@
import { useMonaco } from '/@/hooks/web/useMonaco';
import { Button } from 'ant-design-vue';
import { isEmpty } from '/@/utils/is';
- import { useMessage } from '/@/hooks/web/useMessage';
import { format } from '/@/views/flink/app/FlinkSqlFormatter';
import { useI18n } from '/@/hooks/web/useI18n';
import { useFullContent } from '/@/hooks/event/useFullscreen';
@@ -45,7 +44,6 @@
const { toggle, fullContentClass, fullEditorClass, fullScreenStatus } =
useFullContent();
const emit = defineEmits(['update:value', 'preview']);
- const { createMessage } = useMessage();
const props = defineProps({
value: {
@@ -72,42 +70,37 @@
return false;
}
- if (!props.versionId) {
- createMessage.error(t('spark.app.dependencyError'));
- return false;
- } else {
- try {
- const { data } = await fetchSparkSqlVerify({
- sql: props.value,
- versionId: props.versionId,
- });
- const success = data.data === true || data.data === 'true';
- if (success) {
- verifyRes.verified = true;
- verifyRes.errorMsg = '';
- syntaxError();
- return true;
- } else {
- verifyRes.errorStart = parseInt(data.start);
- verifyRes.errorEnd = parseInt(data.end);
- switch (data.type) {
- case 4:
- verifyRes.errorMsg = 'Unsupported sql';
- break;
- case 5:
- verifyRes.errorMsg = "SQL is not endWith ';'";
- break;
- default:
- verifyRes.errorMsg = data.message;
- break;
- }
- syntaxError();
- return false;
+ try {
+ const res = await fetchSparkSqlVerify({
+ sql: props.value,
+ versionId: props.versionId,
+ });
+ const success = res.data === true || res.data === 'true';
+ if (success) {
+ verifyRes.verified = true;
+ verifyRes.errorMsg = '';
+ syntaxError();
+ return true;
+ } else {
+ verifyRes.errorStart = parseInt(res.start);
+ verifyRes.errorEnd = parseInt(res.end);
+ switch (res.type) {
+ case 4:
+ verifyRes.errorMsg = 'Unsupported sql';
+ break;
+ case 5:
+ verifyRes.errorMsg = "SQL is not endWith ';'";
+ break;
+ default:
+ verifyRes.errorMsg = res.message;
+ break;
}
- } catch (error) {
- console.error(error);
+ syntaxError();
return false;
}
+ } catch (error) {
+ console.error(error);
+ return false;
}
}
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
index 06f3d2b61..b45d19ed5 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/create.vue
@@ -35,7 +35,9 @@
name: 'SparkApplicationAction',
});
const go = useGo();
- const sparkSql = ref();
+ const appFormRef = ref<{
+ sparkSql: any;
+ } | null>(null);
const submitLoading = ref(false);
const { t } = useI18n();
@@ -63,7 +65,7 @@
sparkSql: null,
jar: values.teamResource,
mainClass: values.mainClass,
- appName: values.jobName,
+ appName: values.appName,
tags: values.tags,
yarnQueue: values.yarnQueue,
resourceFrom: ResourceFromEnum.UPLOAD,
@@ -91,7 +93,7 @@
sparkSql: values.sparkSql,
jar: null,
mainClass: null,
- appName: values.jobName,
+ appName: values.appName,
tags: values.tags,
yarnQueue: values.yarnQueue,
resourceFrom: ResourceFromEnum.UPLOAD,
@@ -108,7 +110,7 @@
if (formValue.sparkSql == null || formValue.sparkSql.trim() === '') {
createMessage.warning(t('spark.app.addAppTips.sparkSqlIsRequiredMessage'));
} else {
- const access = await sparkSql?.value?.handleVerifySql();
+ const access = await appFormRef?.value?.sparkSql?.handleVerifySql();
if (!access) {
createMessage.warning(t('spark.app.addAppTips.sqlCheck'));
throw new Error(access);
@@ -145,6 +147,11 @@
<template>
<PageWrapper contentFullHeight contentBackground contentClass="p-26px
app_controller">
- <AppForm :initFormFn="handleAppFieldValue" :submit="handleAppSubmit"
:spark-envs="sparkEnvs" />
+ <AppForm
+ ref="appFormRef"
+ :initFormFn="handleAppFieldValue"
+ :submit="handleAppSubmit"
+ :spark-envs="sparkEnvs"
+ />
</PageWrapper>
</template>
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
b/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
index d6874e540..c7921cd14 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/data/detail.data.ts
@@ -118,9 +118,8 @@ export const getBackupColumns = (): BasicColumn[] => [
];
export const getOptionLogColumns = (): BasicColumn[] => [
- { title: 'Operation Name', dataIndex: 'optionName', width: 150 },
+ { title: 'Operation Name', dataIndex: 'optionName' },
{ title: 'Cluster Id', dataIndex: 'yarnAppId' },
- { title: 'JobManager URL', dataIndex: 'jobManagerUrl' },
- { title: 'Start Status', dataIndex: 'success', width: 120 },
- { title: 'Option Time', dataIndex: 'optionTime', width: 200 },
+ { title: 'Start Status', dataIndex: 'success' },
+ { title: 'Option Time', dataIndex: 'optionTime' },
];
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
index 334af6151..743a8ae92 100644
--- a/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
+++ b/streampark-console/streampark-console-webapp/src/views/spark/app/edit.vue
@@ -63,7 +63,7 @@
sparkSql: null,
jar: values.teamResource,
mainClass: values.mainClass,
- appName: values.jobName,
+ appName: values.appName,
tags: values.tags,
yarnQueue: values.yarnQueue,
resourceFrom: ResourceFromEnum.UPLOAD,
@@ -91,7 +91,7 @@
sparkSql: values.sparkSql,
jar: null,
mainClass: null,
- appName: values.jobName,
+ appName: values.appName,
tags: values.tags,
yarnQueue: values.yarnQueue,
resourceFrom: ResourceFromEnum.UPLOAD,
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
index 3141a66d0..5a707b41a 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useAppFormSchema.tsx
@@ -64,21 +64,21 @@ export function useSparkSchema(sparkEnvs: Ref<SparkEnv[]>) {
{
label: h('div', {}, [
h(SvgIcon, { name: 'code', color: '#108ee9' }, ''),
- h('span', { class: 'pl-10px' }, 'Custom Code'),
+ h('span', { class: 'pl-10px' }, 'Spark Jar'),
]),
value: String(JobTypeEnum.JAR),
},
{
label: h('div', {}, [
h(SvgIcon, { name: 'fql', color: '#108ee9' }, ''),
- h('span', { class: 'pl-10px' }, 'Flink SQL'),
+ h('span', { class: 'pl-10px' }, 'Spark SQL'),
]),
value: String(JobTypeEnum.SQL),
},
{
label: h('div', {}, [
h(SvgIcon, { name: 'py', color: '#108ee9' }, ''),
- h('span', { class: 'pl-10px' }, 'Python Flink'),
+ h('span', { class: 'pl-10px' }, 'PySpark'),
]),
value: String(JobTypeEnum.PYSPARK),
},
@@ -150,7 +150,7 @@ export function useSparkSchema(sparkEnvs: Ref<SparkEnv[]>) {
component: 'Input',
slot: 'sparkSql',
ifShow: ({ values }) => values?.jobType == JobTypeEnum.SQL,
- rules: [{ required: true, message:
t('spark.app.addAppTips.flinkSqlIsRequiredMessage') }],
+ rules: [{ required: true, message:
t('spark.app.addAppTips.sparkSqlIsRequiredMessage') }],
},
{
field: 'teamResource',
@@ -168,7 +168,7 @@ export function useSparkSchema(sparkEnvs: Ref<SparkEnv[]>) {
rules: [{ required: true, message:
t('spark.app.addAppTips.mainClassIsRequiredMessage') }],
},
{
- field: 'jobName',
+ field: 'appName',
label: t('spark.app.appName'),
component: 'Input',
componentProps: { placeholder:
t('spark.app.addAppTips.appNamePlaceholder') },
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkAction.tsx
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkAction.tsx
index a2c22fc87..f0a9cb9c9 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkAction.tsx
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkAction.tsx
@@ -353,7 +353,7 @@ export const useSparkAction = (optionApps: Recordable) => {
v-model:model={formValue}
>
<Form.Item label="Application Name">
- <Alert message={app.jobName} type="info" />
+ <Alert message={app.appName} type="info" />
</Form.Item>
{[ExecModeEnum.YARN_CLIENT,
ExecModeEnum.YARN_CLUSTER].includes(app.executionMode) && (
<Form.Item
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
index 31f9709e7..97739fcd3 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkColumns.ts
@@ -26,10 +26,10 @@ export const useSparkColumns = () => {
// app table column width
const tableColumnWidth = ref({
appName: 250,
- sparkVersion: 110,
+ sparkVersion: 150,
tags: 150,
- state: 120,
- release: 190,
+ state: 130,
+ release: 120,
duration: 150,
modifyTime: 165,
nickName: 100,
@@ -55,7 +55,7 @@ export const useSparkColumns = () => {
},
{
title: t('spark.app.sparkVersion'),
- dataIndex: 'sparkVersion',
+ dataIndex: 'sparkVersion ',
width: unref(tableColumnWidth).sparkVersion,
},
{
@@ -64,6 +64,27 @@ export const useSparkColumns = () => {
dataIndex: 'tags',
width: unref(tableColumnWidth).tags,
},
+
+ {
+ title: t('spark.app.duration'),
+ dataIndex: 'duration',
+ sorter: true,
+ width: unref(tableColumnWidth).duration,
+ customRender: ({ value }) => dateToDuration(value),
+ },
+ {
+ title: t('spark.app.modifiedTime'),
+ dataIndex: 'modifyTime',
+ sorter: true,
+ width: unref(tableColumnWidth).modifyTime,
+ },
+ { title: t('spark.app.owner'), dataIndex: 'nickName', width:
unref(tableColumnWidth).nickName },
+ {
+ title: t('spark.app.releaseBuild'),
+ dataIndex: 'release',
+ width: unref(tableColumnWidth).release,
+ fixed: 'right',
+ },
{
title: t('spark.app.runStatus'),
dataIndex: 'state',
@@ -85,26 +106,6 @@ export const useSparkColumns = () => {
},
],
},
- {
- title: t('spark.app.releaseBuild'),
- dataIndex: 'release',
- width: unref(tableColumnWidth).release,
- fixed: 'right',
- },
- {
- title: t('spark.app.duration'),
- dataIndex: 'duration',
- sorter: true,
- width: unref(tableColumnWidth).duration,
- customRender: ({ value }) => dateToDuration(value),
- },
- {
- title: t('spark.app.modifiedTime'),
- dataIndex: 'modifyTime',
- sorter: true,
- width: unref(tableColumnWidth).modifyTime,
- },
- { title: t('spark.app.owner'), dataIndex: 'nickName', width:
unref(tableColumnWidth).nickName },
]);
return { getAppColumns, onTableColumnResize, tableColumnWidth };
};
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
index 19a487531..912936b59 100644
---
a/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
+++
b/streampark-console/streampark-console-webapp/src/views/spark/app/hooks/useSparkTableAction.ts
@@ -297,7 +297,7 @@ export const useSparkTableAction = (handlePageDataReload:
Fn, optionApps: Record
},
{
label: t('spark.app.searchName'),
- field: 'jobName',
+ field: 'appName',
component: 'Input',
componentProps: {
placeholder: t('spark.app.searchName'),
diff --git
a/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
b/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
index 1987fac0d..e56021a49 100644
--- a/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
+++ b/streampark-console/streampark-console-webapp/src/views/spark/app/index.vue
@@ -15,6 +15,7 @@
limitations under the License.
-->
<script lang="ts" setup>
+ import { PlusOutlined } from '@ant-design/icons-vue';
import { nextTick, ref, onUnmounted, onMounted, unref } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { JobTypeEnum, AppStateEnum, OptionStateEnum } from
'/@/enums/sparkEnum';
@@ -45,7 +46,7 @@
optionStateMap,
releaseStateMap,
stateMap,
- } from '/@/views/flink/app/components/State';
+ } from './components/State';
import { useSparkColumns } from './hooks/useSparkColumns';
import AppTableResize from '/@/views/flink/app/components/AppResize.vue';
import { fetchSparkAppRecord } from '/@/api/spark/app';
@@ -89,6 +90,7 @@
}
delete params.state;
}
+ Object.assign(params, searchRef.value);
currentTablePage.value = params.pageNum;
// sessionStorage.setItem('appPageNo', params.pageNum);
const res = await fetchSparkAppRecord(params);
@@ -164,10 +166,7 @@
);
Object.assign(titleLenRef.value, stateLenMap);
- return {
- list: res.records,
- total: res.total,
- };
+ return res.records;
} catch (error) {
errorCount.value += 1;
console.error(error);
@@ -177,12 +176,9 @@
rowKey: 'id',
api: getSparkAppList,
immediate: true,
- isCanResizeParent: true,
- canResize: true,
+ canResize: false,
showIndexColumn: false,
- showTableSetting: true,
- useSearchForm: true,
- tableSetting: { fullScreen: true, redo: false },
+ showTableSetting: false,
actionColumn: {
dataIndex: 'operation',
title: t('component.table.operation'),
@@ -266,65 +262,68 @@
class="app_list table-searchbar flex-1 pt-20px !px-0 flex flex-col"
>
<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">
+ <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 :label="t('flink.app.tags')">
- <Select
- :placeholder="t('flink.app.tags')"
- show-search
- v-model:value="searchRef.tags"
+ <Form.Item>
+ <Input
+ :placeholder="t('spark.app.searchName')"
+ allow-clear
+ v-model:value="searchRef.appName"
@change="() => handleResetReload()"
- :options="(tagsOptions || []).map((t: Recordable) => ({
label: t, value: t }))"
+ @search="() => handleResetReload()"
/>
</Form.Item>
</Col>
- <Col :span="5">
- <Form.Item :label="t('flink.app.owner')">
+ <Col :span="4">
+ <Form.Item>
<Select
- :placeholder="t('flink.app.owner')"
+ :placeholder="t('spark.app.tags')"
show-search
- v-model:value="searchRef.userId"
+ allow-clear
+ v-model:value="searchRef.tags"
@change="() => handleResetReload()"
- :options="
- (users || []).map((u: Recordable) => ({
- label: u.nickName || u.username,
- value: u.userId,
- }))
- "
+ :options="(tagsOptions || []).map((t: Recordable) => ({
label: t, value: t }))"
/>
</Form.Item>
</Col>
- <Col :span="5">
- <Form.Item :label="t('flink.app.jobType')">
+ <Col :span="4">
+ <Form.Item>
<Select
- :placeholder="t('flink.app.jobType')"
+ :placeholder="t('spark.app.jobType')"
show-search
+ allow-clear
v-model:value="searchRef.jobType"
@change="() => handleResetReload()"
:options="[
{ label: 'JAR', value: JobTypeEnum.JAR },
{ label: 'SQL', value: JobTypeEnum.SQL },
- { label: 'PySPARK', value: JobTypeEnum.PYSPARK },
]"
/>
</Form.Item>
</Col>
- <Col :span="5">
- <Form.Item :label="t('flink.app.searchName')">
- <Input
- :placeholder="t('flink.app.searchName')"
- v-model:value="searchRef.appName"
+ <Col :span="4">
+ <Form.Item>
+ <Select
+ :placeholder="t('spark.app.owner')"
+ show-search
+ allow-clear
+ v-model:value="searchRef.userId"
@change="() => handleResetReload()"
- @search="() => 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:
'/spark/app/add' })">
+ <Button type="primary" @click="() => router.push({ path:
'/spark/app/create' })">
<PlusOutlined />
{{ t('common.add') }}
</Button>
@@ -333,8 +332,12 @@
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'appName'">
- <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="app_type app_jar" v-if="record['jobType'] ==
JobTypeEnum.JAR">
+ Spark JAR
+ </span>
+ <span class="app_type app_sql" v-if="record['jobType'] ==
JobTypeEnum.SQL">
+ Spark SQL
+ </span>
<span class="app_type app_py" v-if="record['jobType'] ==
JobTypeEnum.PYSPARK">
PySpark
</span>
@@ -349,13 +352,13 @@
<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 class="max-w-300px break-words">{{ record.appName
}}</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>
+ <span v-if="record['jobType'] == JobTypeEnum.JAR"> Spark
JAR </span>
+ <span v-if="record['jobType'] == JobTypeEnum.SQL"> Spark
SQL </span>
<span v-if="record['jobType'] == JobTypeEnum.PYSPARK">
PySpark </span>
</Tag>
</div>
@@ -364,7 +367,7 @@
<div class="max-w-300px break-words">{{ record.description
}}</div>
</div>
</template>
- {{ record.jobName }}
+ {{ record.appName }}
</Popover>
</span>
