You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by be...@apache.org on 2024/03/13 09:41:36 UTC
(incubator-streampark) branch sync_2.1.3 updated (dce81abc2 -> 5316bbabb)
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a change to branch sync_2.1.3
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
from dce81abc2 [Improve] method name improvements
new 1d6049973 [Improve] job state style improvements
new 5316bbabb [Improve] job state improvements
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/locales/lang/en/flink/app.ts | 52 ++++++++++++--
.../src/locales/lang/zh-CN/flink/app.ts | 39 +++++++++--
.../src/views/flink/app/View.vue | 9 +--
.../components/AppView/StartApplicationModal.vue | 80 +++++++++++-----------
.../src/views/flink/app/components/State.less | 4 --
.../src/views/flink/app/components/State.tsx | 63 +++++++++--------
6 files changed, 156 insertions(+), 91 deletions(-)
(incubator-streampark) 01/02: [Improve] job state style improvements
Posted by be...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch sync_2.1.3
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
commit 1d6049973cdd0c6d3be823888d3d18c3d76ab86b
Author: benjobs <be...@gmail.com>
AuthorDate: Wed Mar 13 17:39:59 2024 +0800
[Improve] job state style improvements
---
.../src/locales/lang/en/flink/app.ts | 52 ++++++++++++--
.../src/locales/lang/zh-CN/flink/app.ts | 39 +++++++++--
.../src/views/flink/app/View.vue | 2 +-
.../components/AppView/StartApplicationModal.vue | 80 +++++++++++-----------
.../src/views/flink/app/components/State.less | 4 --
.../src/views/flink/app/components/State.tsx | 63 +++++++++--------
6 files changed, 156 insertions(+), 84 deletions(-)
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts
index e9b778af3..ff03d2723 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/app.ts
@@ -78,6 +78,38 @@ export default {
releaseFail: 'release application failed,',
releasing: 'Current Application is releasing',
},
+ runState: {
+ added: 'ADDED',
+ initializing: 'INITIALIZING',
+ created: 'CREATED',
+ starting: 'STARTING',
+ restarting: 'RESTARTING',
+ running: 'RUNNING',
+ failing: 'FAILING',
+ failed: 'FAILED',
+ lost: 'LOST',
+ cancelling: 'CANCELLING',
+ canceled: 'CANCELED',
+ finished: 'FINISHED',
+ suspended: 'SUSPENDED',
+ reconciling: 'RECONCILING',
+ mapping: 'MAPPING',
+ silent: 'SILENT',
+ terminated: 'TERMINATED',
+ },
+ releaseState: {
+ failed: 'FAILED',
+ success: 'SUCCESS',
+ waiting: 'WAITING',
+ releasing: 'RELEASING',
+ pending: 'PENDING',
+ },
+ clusterState: {
+ created: 'CREATED',
+ started: 'STARTED',
+ canceled: 'SHUTDOWN',
+ lost: 'LOST',
+ },
detail: {
detailTitle: 'Application Info',
flinkWebUi: 'Flink Web UI',
@@ -126,19 +158,27 @@ export default {
},
},
view: {
- buildTitle: 'Application releasing Progress',
+ buildTitle: 'Job releasing Progress',
stepTitle: 'Steps Detail',
errorLog: 'Error Log',
errorSummary: 'Error Summary',
errorStack: 'Error Stack',
- logTitle: 'Start Log : Application Name [ {0} ]',
+ logTitle: 'Start Log : Job Name [ {0} ]',
refreshTime: 'last refresh time',
refresh: 'refresh',
- start: 'Start Application',
- stop: 'Stop application',
+ start: 'Start Job',
+ stop: 'Stop Job',
savepoint: 'Trigger Savepoint',
- recheck: 'the associated project has changed and this job need to be rechecked',
- changed: 'the application has changed.',
+ fromSavepoint: 'From savepoint',
+ savepointTip: 'Restore the job from savepoint or latest checkpoint',
+ savepointInput: 'Specify the savepoint/checkpoint path',
+ savepointSwitch:
+ 'Specify the savepoint/checkpoint path (Double-click to switch between "input" and "select")',
+ ignoreRestored: 'Ignore failed',
+ ignoreRestoredTip:
+ 'ignore savepoint then cannot be restored, Same as：-allowNonRestoredState(-n)',
+ recheck: 'the associated project has changed and this job need to be release',
+ changed: 'the job has been updated',
},
pod: {
choice: 'Choice',
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts
index 17652ec3e..6ffa0806e 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/app.ts
@@ -76,6 +76,31 @@ export default {
releaseFail: '发布作业失败',
releasing: '当前作业正在发布中',
},
+ runState: {
+ added: '新增作业',
+ initializing: '初始化',
+ created: '创建中',
+ starting: '启动中',
+ restarting: '重启中',
+ running: '运行中',
+ failing: '失败中',
+ failed: '作业失败',
+ lost: '作业失联',
+ cancelling: '取消中',
+ canceled: '已取消',
+ finished: '已完成',
+ suspended: '已暂停',
+ reconciling: '调整中',
+ mapping: '映射中',
+ silent: '沉默',
+ terminated: '终止',
+ },
+ clusterState: {
+ created: '新增',
+ started: '运行中',
+ canceled: '停止',
+ lost: '失联',
+ },
detail: {
detailTitle: '作业详情',
flinkWebUi: 'Flink Web UI',
@@ -123,7 +148,7 @@ export default {
},
},
view: {
- buildTitle: '应用程序启动进度',
+ buildTitle: '作业启动进度',
stepTitle: '步骤详情',
errorLog: '错误日志',
errorSummary: '错误摘要',
@@ -131,11 +156,17 @@ export default {
logTitle: '启动日志 : 应用名称 [ {0} ]',
refreshTime: '上次刷新时间',
refresh: '刷新',
- start: '开启应用',
+ start: '启动作业',
stop: '停止应用',
savepoint: '触发 Savepoint',
- recheck: '关联的项目已更改，需要重新检查此作业',
- changed: '应用程序已更改。',
+ recheck: '关联的项目已更新，需要重新发布此作业',
+ changed: '作业已更新',
+ fromSavepoint: 'Savepoint 恢复',
+ savepointTip: '作业从 savepoint 或 checkpoint 恢复状态',
+ savepointInput: '指定 savepoint/checkpoint 路径',
+ savepointSwitch: '指定 savepoint/checkpoint 路径 (双击切换"下拉框选择"或"手动输入")',
+ ignoreRestored: '忽略失败',
+ ignoreRestoredTip: '当状态恢复失败时跳过错误，作业继续运行, 同参数：-allowNonRestoredState(-n)',
},
pod: {
choice: '选择',
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 9b4a4e8e8..f0795c8a9 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
@@ -207,7 +207,7 @@
app['optionState'] === OptionStateEnum.SAVEPOINTING
) {
// yarn-per-job|yarn-session|yarn-application
- handleView(app, unref(yarn));
+ await handleView(app, unref(yarn));
}
}
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StartApplicationModal.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StartApplicationModal.vue
index 98a0f0188..a78699829 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StartApplicationModal.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StartApplicationModal.vue
@@ -24,7 +24,7 @@
});
</script>
<script setup lang="ts" name="StartApplicationModal">
- import { h } from 'vue';
+ import { h, ref } from 'vue';
import { Select, Input, Tag } from 'ant-design-vue';
import { BasicForm, useForm } from '/@/components/Form';
import { SvgIcon, Icon } from '/@/components/Icon';
@@ -32,16 +32,15 @@
import { useMessage } from '/@/hooks/web/useMessage';
import { useRouter } from 'vue-router';
import { fetchCheckStart, fetchForcedStop, fetchStart } from '/@/api/flink/app';
-
- import { AppExistsEnum, RestoreModeEnum } from '/@/enums/flinkEnum';
- import { fetchFlinkEnv } from '/@/api/flink/flinkEnv';
- import { renderFlinkAppRestoreMode } from '/@/views/flink/app/hooks/useFlinkRender';
+ import { AppExistsEnum } from '/@/enums/flinkEnum';
const SelectOption = Select.Option;
const { t } = useI18n();
const { Swal } = useMessage();
const router = useRouter();
+ const selectInput = ref<boolean>(false);
+ const selectValue = ref<string>(null);
const emits = defineEmits(['register', 'updateOption']);
const receiveData = reactive<Recordable>({});
@@ -56,61 +55,50 @@
}
});
+ function handleSavePointTip(list) {
+ if (list != null && list.length > 0) {
+ return t('flink.app.view.savepointSwitch');
+ }
+ return t('flink.app.view.savepointInput');
+ }
+
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
name: 'startApplicationModal',
labelWidth: 120,
schemas: [
{
field: 'startSavePointed',
- label: 'from savepoint',
+ label: t('flink.app.view.fromSavepoint'),
component: 'Switch',
componentProps: {
checkedChildren: 'ON',
unCheckedChildren: 'OFF',
},
defaultValue: true,
- afterItem: () =>
- h(
- 'span',
- { class: 'tip-info' },
- 'restore the application from savepoint or latest checkpoint',
- ),
+ afterItem: () => h('span', { class: 'conf-switch' }, t('flink.app.view.savepointTip')),
},
{
field: 'startSavePoint',
- label: 'savepoint',
+ label: 'Savepoint',
component:
receiveData.historySavePoint && receiveData.historySavePoint.length > 0
? 'Select'
: 'Input',
afterItem: () =>
- h(
- 'span',
- { class: 'tip-info' },
- 'restore the application from savepoint or latest checkpoint',
- ),
+ h('span', { class: 'conf-switch' }, handleSavePointTip(receiveData.historySavePoint)),
slot: 'savepoint',
ifShow: ({ values }) => values.startSavePointed,
required: true,
},
- {
- field: 'restoreMode',
- label: 'restore mode',
- component: 'Select',
- defaultValue: RestoreModeEnum.NO_CLAIM,
- render: (renderCallbackParams) => renderFlinkAppRestoreMode(renderCallbackParams),
- ifShow: ({ values }) => values.startSavePointed && checkFlinkVersion(),
- },
{
field: 'allowNonRestoredState',
- label: 'ignore restored',
+ label: t('flink.app.view.ignoreRestored'),
component: 'Switch',
componentProps: {
checkedChildren: 'ON',
unCheckedChildren: 'OFF',
},
- afterItem: () =>
- h('span', { class: 'tip-info' }, 'ignore savepoint then cannot be restored'),
+ afterItem: () => h('span', { class: 'conf-switch' }, t('flink.app.view.ignoreRestoredTip')),
defaultValue: false,
ifShow: ({ values }) => values.startSavePointed,
},
@@ -135,16 +123,20 @@
await handleDoSubmit();
}
+ async function handleReset() {
+ selectInput.value = false;
+ selectValue.value = null;
+ }
+
/* submit */
async function handleDoSubmit() {
try {
const formValue = (await validate()) as Recordable;
const savePointed = formValue.startSavePointed;
const savePointPath = savePointed ? formValue['startSavePoint'] : null;
- const restoreMode = savePointed ? formValue['restoreMode'] : null;
+ handleReset();
const { data } = await fetchStart({
id: receiveData.application.id,
- restoreMode,
savePointed,
savePoint: savePointPath,
allowNonRestored: formValue.allowNonRestoredState || false,
@@ -152,7 +144,7 @@
if (data.data) {
Swal.fire({
icon: 'success',
- title: 'The current job is starting',
+ title: t('flink.app.operation.starting'),
showConfirmButton: false,
timer: 2000,
});
@@ -190,10 +182,14 @@
}
}
- async function checkFlinkVersion() {
- const versionId = receiveData.application.versionId;
- const flinkVersion = await fetchFlinkEnv(versionId);
- return parseInt(flinkVersion.versionOfMiddle) >= 15;
+ function handleSavepoint(model, field, input) {
+ selectInput.value = input;
+ if (input) {
+ selectValue.value = model[field];
+ model[field] = null;
+ } else {
+ model[field] = selectValue.value;
+ }
}
</script>
<template>
@@ -201,6 +197,7 @@
@register="registerModal"
:minHeight="100"
@ok="handleSubmit"
+ @cancel="handleReset"
:okText="t('common.apply')"
:cancelText="t('common.cancelText')"
>
@@ -211,8 +208,12 @@
<BasicForm @register="registerForm" class="!pt-40px">
<template #savepoint="{ model, field }">
- <template v-if="receiveData.historySavePoint && receiveData.historySavePoint.length > 0">
- <Select allow-clear v-model:value="model[field]">
+ <template
+ v-if="
+ !selectInput && receiveData.historySavePoint && receiveData.historySavePoint.length > 0
+ "
+ >
+ <Select v-model:value="model[field]" @dblclick="handleSavepoint(model, field, true)">
<SelectOption v-for="(k, i) in receiveData.historySavePoint" :key="i" :value="k.path">
<span style="color: darkgrey">
<Icon icon="ant-design:clock-circle-outlined" />
@@ -232,8 +233,9 @@
</template>
<Input
v-else
+ @dblclick="handleSavepoint(model, field, false)"
type="text"
- placeholder="Please enter savepoint manually"
+ :placeholder="$t('flink.app.view.savepointInput')"
v-model:value="model[field]"
/>
</template>
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.less b/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.less
index 74c6995d3..895a612a0 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.less
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.less
@@ -47,10 +47,6 @@
animation: reconciling-color 800ms ease-out infinite alternate;
}
-.status-processing-probing {
- animation: probing-color 800ms ease-out infinite alternate;
-}
-
@keyframes deploying-color {
0% {
border-color: #1abbdc;
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx b/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx
index d9b1e26fd..564b32d01 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/State.tsx
@@ -19,63 +19,60 @@ import { computed, defineComponent, toRefs, unref } from 'vue';
import { Tag, Tooltip } from 'ant-design-vue';
import './State.less';
import { AppStateEnum, ReleaseStateEnum, OptionStateEnum } from '/@/enums/flinkEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
/* state map*/
export const stateMap = {
- [AppStateEnum.ADDED]: { color: '#2f54eb', title: 'ADDED' },
+ [AppStateEnum.ADDED]: { color: '#2f54eb', title: t('flink.app.runState.added') },
[AppStateEnum.INITIALIZING]: {
color: '#738df8',
- title: 'INITIALIZING',
+ title: t('flink.app.runState.initializing'),
class: 'status-processing-initializing',
},
- [AppStateEnum.CREATED]: { color: '#2f54eb', title: 'CREATED' },
+ [AppStateEnum.CREATED]: { color: '#2f54eb', title: t('flink.app.runState.created') },
[AppStateEnum.STARTING]: {
color: '#1AB58E',
- title: 'STARTING',
+ title: t('flink.app.runState.starting'),
class: 'status-processing-starting',
},
[AppStateEnum.RESTARTING]: {
color: '#13c2c2',
- title: 'RESTARTING',
+ title: t('flink.app.runState.restarting'),
class: 'status-processing-restarting',
},
[AppStateEnum.RUNNING]: {
color: '#52c41a',
- title: 'RUNNING',
+ title: t('flink.app.runState.running'),
class: 'status-processing-running',
},
[AppStateEnum.FAILING]: {
color: '#fa541c',
- title: 'FAILING',
+ title: t('flink.app.runState.failing'),
class: 'status-processing-failing',
},
- [AppStateEnum.FAILED]: { color: '#f5222d', title: 'FAILED' },
- [AppStateEnum.CANCELLING]: { color: '#faad14', title: 'CANCELLING' },
- [AppStateEnum.CANCELED]: { color: '#fa8c16', title: 'CANCELED' },
- [AppStateEnum.FINISHED]: { color: '#1677ff', title: 'FINISHED' },
- [AppStateEnum.SUSPENDED]: { color: '#722ed1', title: 'SUSPENDED' },
+ [AppStateEnum.FAILED]: { color: '#f5222d', title: t('flink.app.runState.failed') },
+ [AppStateEnum.CANCELLING]: { color: '#faad14', title: t('flink.app.runState.cancelling') },
+ [AppStateEnum.CANCELED]: { color: '#fa8c16', title: t('flink.app.runState.canceled') },
+ [AppStateEnum.FINISHED]: { color: '#1890ff', title: t('flink.app.runState.finished') },
+ [AppStateEnum.SUSPENDED]: { color: '#722ed1', title: t('flink.app.runState.suspended') },
[AppStateEnum.RECONCILING]: {
color: '#eb2f96',
- title: 'RECONCILING',
+ title: t('flink.app.runState.reconciling'),
class: 'status-processing-reconciling',
},
- [AppStateEnum.LOST]: { color: '#000000', title: 'LOST' },
+ [AppStateEnum.LOST]: { color: '#333333', title: t('flink.app.runState.lost') },
[AppStateEnum.MAPPING]: {
color: '#13c2c2',
- title: 'MAPPING',
+ title: t('flink.app.runState.mapping'),
class: 'status-processing-restarting',
},
[AppStateEnum.SILENT]: {
color: '#738df8',
- title: 'SILENT',
+ title: t('flink.app.runState.silent'),
class: 'status-processing-initializing',
},
- [AppStateEnum.TERMINATED]: { color: '#8E50FF', title: 'TERMINATED' },
- [AppStateEnum.PROBING]: {
- color: '#2febc9',
- title: 'PROBING',
- class: 'status-processing-probing',
- },
+ [AppStateEnum.TERMINATED]: { color: '#8E50FF', title: t('flink.app.runState.terminated') },
};
/* option state map*/
export const optionStateMap = {
@@ -103,16 +100,19 @@ export const optionStateMap = {
/* release state map*/
export const releaseStateMap = {
- [ReleaseStateEnum.FAILED]: { color: '#f5222d', title: 'FAILED' },
- [ReleaseStateEnum.DONE]: { color: '#52c41a', title: 'DONE' },
- [ReleaseStateEnum.NEED_RELEASE]: { color: '#fa8c16', title: 'WAITING' },
+ [ReleaseStateEnum.FAILED]: { color: '#f5222d', title: t('flink.app.releaseState.failed') },
+ [ReleaseStateEnum.DONE]: { color: '#52c41a', title: t('flink.app.releaseState.success') },
+ [ReleaseStateEnum.NEED_RELEASE]: { color: '#fa8c16', title: t('flink.app.releaseState.waiting') },
[ReleaseStateEnum.RELEASING]: {
color: '#52c41a',
- title: 'RELEASING',
+ title: t('flink.app.releaseState.releasing'),
class: 'status-processing-deploying',
},
- [ReleaseStateEnum.NEED_RESTART]: { color: '#fa8c16', title: 'PENDING' },
- [ReleaseStateEnum.NEED_ROLLBACK]: { color: '#fa8c16', title: 'WAITING' },
+ [ReleaseStateEnum.NEED_RESTART]: { color: '#fa8c16', title: t('flink.app.releaseState.pending') },
+ [ReleaseStateEnum.NEED_ROLLBACK]: {
+ color: '#fa8c16',
+ title: t('flink.app.releaseState.waiting'),
+ },
};
/* build state map*/
@@ -127,6 +127,7 @@ export const buildStatusMap = {
3: { color: '#2ECC71', title: 'SUCCESS' },
4: { color: '#E74C3C', title: 'FAILURE' },
};
+
const overviewMap = {
running: { color: '#52c41a', title: 'RUNNING' },
canceled: { color: '#fa8c16', title: 'CANCELED' },
@@ -152,14 +153,15 @@ export default defineComponent({
},
setup(props) {
const { data, option } = toRefs(props);
+
const tagWidth = computed(() => {
if (props.maxTitle === undefined) return 0;
// create a dom to calculate the width of the tag
const dom = document.createElement('span');
dom.style.display = 'inline-block';
dom.style.fontSize = '10px';
- dom.style.padding = '0 3px';
- dom.style.borderRadius = '1px';
+ dom.style.padding = '0 2px';
+ dom.style.borderRadius = '2px';
dom.textContent = props.maxTitle;
document.body.appendChild(dom);
const width = dom.clientWidth + 2;
@@ -177,6 +179,7 @@ export default defineComponent({
</Tag>
);
};
+
const getStyle = computed(() => {
if (tagWidth.value > 0) {
return { width: `${tagWidth.value}px`, textAlign: 'center' };
(incubator-streampark) 02/02: [Improve] job state improvements
Posted by be...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch sync_2.1.3
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
commit 5316bbabb0796fe4d8eb3be7077832b9b5bebae3
Author: benjobs <be...@gmail.com>
AuthorDate: Wed Mar 13 17:41:25 2024 +0800
[Improve] job state improvements
---
.../streampark-console-webapp/src/views/flink/app/View.vue | 7 -------
1 file changed, 7 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 f0795c8a9..d56de3343 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
@@ -336,13 +336,6 @@
:title="releaseTitleMap[record.release] || ''"
:data="record"
/>
- <Divider type="vertical" style="margin: 0 4px" v-if="record.buildStatus" />
- <State
- option="build"
- :maxTitle="titleLenRef.maxBuild"
- :click="openBuildProgressDetailDrawer.bind(null, record)"
- :data="record"
- />
</template>
<template v-if="column.dataIndex === 'operation'">
<TableAction v-bind="getTableActions(record, currentTablePage)" />