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 2022/11/07 05:20:11 UTC
[incubator-streampark] branch dev updated: [Fix] Deleting Duplicate Files and Fix async component loader (#1977)
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 c2f30ba45 [Fix] Deleting Duplicate Files and Fix async component loader (#1977)
c2f30ba45 is described below
commit c2f30ba4569c29ee181a4ba00ff525235257fcfb
Author: Sizhu Wang <12...@qq.com>
AuthorDate: Mon Nov 7 13:20:06 2022 +0800
[Fix] Deleting Duplicate Files and Fix async component loader (#1977)
* [Fix] Deleting Duplicate Files
* [fix]: Fix component loading error issues
---
.../src/views/flink/app/Add.vue | 11 +-
.../flink/app/components/AppView/statisticCard.vue | 60 ------
.../src/views/flink/app/components/customForm.tsx | 117 -----------
.../src/views/flink/app/components/flinkSql.vue | 223 ---------------------
.../views/flink/app/components/flinkSqlHistory.vue | 60 ------
5 files changed, 2 insertions(+), 469 deletions(-)
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue b/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue
index c49525752..4b04f088b 100644
--- a/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue
+++ b/streampark-console/streampark-console-newui/src/views/flink/app/Add.vue
@@ -42,6 +42,8 @@
import { buildUUID } from '/@/utils/uuid';
import { useI18n } from '/@/hooks/web/useI18n';
import VariableReview from './components/VariableReview.vue';
+ import PomTemplateTab from './components/PodTemplate/PomTemplateTab.vue';
+ import UseSysHadoopConf from './components/UseSysHadoopConf.vue';
import { CreateParams } from '/@/api/flink/app/app.type';
import { decodeByBase64, encryptByBase64 } from '/@/utils/cipher';
@@ -51,15 +53,6 @@
const Dependency = createAsyncComponent(() => import('./components/Dependency.vue'), {
loading: true,
});
- const PomTemplateTab = createAsyncComponent(
- () => import('./components/PodTemplate/PomTemplateTab.vue'),
- {
- loading: true,
- },
- );
- const UseSysHadoopConf = createAsyncComponent(() => import('./components/UseSysHadoopConf.vue'), {
- loading: true,
- });
const go = useGo();
const flinkSql = ref();
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/statisticCard.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/statisticCard.vue
deleted file mode 100644
index acb79ba28..000000000
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/AppView/statisticCard.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-<script lang="ts">
- import { defineComponent } from 'vue';
- export default defineComponent({
- name: 'StatisticCard',
- });
-</script>
-<script setup lang="ts" name="StatisticCard">
- import { Card, Statistic, Divider, Skeleton } from 'ant-design-vue';
- defineProps({
- loading: { type: Boolean, default: false },
- statisticProps: {
- type: Object as PropType<Recordable>,
- default: () => ({ title: '', value: 0 }),
- },
- footerList: {
- type: Array as PropType<Array<{ title: string; value: string | number }>>,
- default: () => [],
- },
- });
-</script>
-<template>
- <div class="gutter-box">
- <Skeleton :loading="loading" active>
- <Card :bordered="false" class="dash-statistic">
- <Statistic
- v-bind="statisticProps"
- :value-style="{
- color: '#3f8600',
- fontSize: '45px',
- fontWeight: 500,
- textShadow: '1px 1px 0 rgba(0,0,0,0.2)',
- }"
- />
- </Card>
- <Divider class="def-margin-bottom" />
- <template v-for="(item, index) in footerList" :key="item.field">
- <span> {{ item.title }} </span>
- <strong class="pl-10px">{{ item.value }}</strong>
- <Divider type="vertical" v-if="index !== footerList.length - 1" />
- </template>
- </Skeleton>
- </div>
-</template>
-<style scoped></style>
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/customForm.tsx b/streampark-console/streampark-console-newui/src/views/flink/app/components/customForm.tsx
deleted file mode 100644
index 480b5b7f5..000000000
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/customForm.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/*
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import { Button, Form, Input, InputNumber, Tag, Select } from 'ant-design-vue';
-import Icon from '/@/components/Icon';
-export interface CheckPointFailure {
- cpMaxFailureInterval: number;
- cpFailureRateInterval: number;
- cpFailureAction: string;
-}
-import { cpTriggerAction } from '../data';
-export default defineComponent({
- props: {
- value: {
- type: Object as PropType<CheckPointFailure>,
- required: true,
- },
- },
- emits: ['updateValue'],
- setup(props, { emit }) {
- const formItemContext = Form.useInjectFormItemContext();
- const triggerChange = (changedValue: Partial<CheckPointFailure>) => {
- emit('updateValue', { ...props.value, ...changedValue });
- formItemContext.onFieldChange();
- };
- const handleCpFailureRateIntervalChange = (value: any) => {
- triggerChange({ cpFailureRateInterval: value });
- };
- const handleCpMaxFailureIntervalChange = (value: any) => {
- // const newNumber = (e.target as any).value;
- triggerChange({ cpMaxFailureInterval: value });
- };
- const handleFailureActionChange = (value: any) => {
- triggerChange({ cpFailureAction: value });
- };
- return () => {
- return (
- <div>
- <Input.Group compact class="!flex">
- <InputNumber
- min={1}
- step={1}
- name="cpMaxFailureInterval"
- placeholder="checkpoint failure rate interval"
- allow-clear
- class="!w-260px mr-10px"
- value={props.value?.cpMaxFailureInterval}
- onChange={(value: any) => handleCpMaxFailureIntervalChange(value)}
- />
- <Button style="width: 70px"> minute </Button>
- <InputNumber
- style="margin-left: 1%"
- name="cpFailureRateInterval"
- min={1}
- step={1}
- placeholder="max failures per interval"
- class="!mb-0 !w-200px"
- value={props.value?.cpFailureRateInterval}
- onChange={(value: any) => handleCpFailureRateIntervalChange(value)}
- />
-
- <Button style="width: 70px"> count </Button>
- <Select
- name="cpFailureAction"
- style="margin-left: 1%"
- placeholder="trigger action"
- allow-clear
- class="!mb-0 flex-1"
- value={props.value?.cpFailureAction}
- onChange={(e: any) => handleFailureActionChange(e)}
- >
- {cpTriggerAction.map((o) => {
- return (
- <Select.Option key={o.value}>
- <Icon
- icon={
- o.value === 1 ? 'ant-design:alert-outlined' : 'ant-design:sync-outlined'
- }
- />
- {o.label}
- </Select.Option>
- );
- })}
- </Select>
- </Input.Group>
- <p class="conf-desc mt-10px">
- <span class="note-info">
- <Tag color="#2db7f5" class="tag-note">
- Note
- </Tag>
- Operation after checkpoint failure, e.g:
- <br />
- Within <span class="note-elem">5 minutes</span>(checkpoint failure rate interval), if
- the number of checkpoint failures reaches <span class="note-elem">10</span> (max
- failures per interval),action will be triggered(alert or restart job)
- </span>
- </p>
- </div>
- );
- };
- },
-});
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
deleted file mode 100644
index 5b11877fc..000000000
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSql.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-<script lang="ts">
- export default {
- name: 'FlinkSql',
- };
-</script>
-
-<script setup lang="ts" name="FlinkSql">
- import { computed, reactive, ref, unref, watchEffect } from 'vue';
- import { getMonacoOptions } from '../data';
- import { Icon } from '/@/components/Icon';
- import { useMonaco } from '/@/hooks/web/useMonaco';
- import { Button } from 'ant-design-vue';
- import { isEmpty } from '/@/utils/is';
- import { useMessage } from '/@/hooks/web/useMessage';
- import { fetchFlinkSqlVerify } from '/@/api/flink/app/flinkSql';
- import { format } from '../FlinkSqlFormatter';
- import { useFullscreen } from '@vueuse/core';
- import { useI18n } from '/@/hooks/web/useI18n';
- const ButtonGroup = Button.Group;
- const { t } = useI18n();
- const vertifyRes = reactive({
- errorMsg: '',
- verified: false,
- errorStart: 0,
- errorEnd: 0,
- });
- const flinkSql = ref();
- const flinkScreen = ref();
- const { isFullscreen, toggle } = useFullscreen(flinkScreen);
- const emit = defineEmits(['update:value', 'preview']);
- const { createMessage } = useMessage();
-
- const props = defineProps({
- value: {
- type: String,
- default: '',
- },
- versionId: {
- type: String as PropType<Nullable<string>>,
- },
- suggestions: {
- type: Array as PropType<Array<{ text: string; description: string }>>,
- default: () => [],
- },
- });
- const defaultValue = '';
-
- /* verify */
- async function handleVerifySql() {
- if (isEmpty(props.value)) {
- vertifyRes.errorMsg = 'empty sql';
- return false;
- }
-
- if (!props.versionId) {
- createMessage.error(t('flink.app.dependencyError'));
- return false;
- } else {
- try {
- const { data } = await fetchFlinkSqlVerify({
- sql: props.value,
- versionId: props.versionId,
- });
- const success = data.data === true || data.data === 'true';
- if (success) {
- vertifyRes.verified = true;
- vertifyRes.errorMsg = '';
- syntaxError();
- return true;
- } else {
- vertifyRes.errorStart = parseInt(data.start);
- vertifyRes.errorEnd = parseInt(data.end);
- switch (data.type) {
- case 4:
- vertifyRes.errorMsg = 'Unsupported sql';
- break;
- case 5:
- vertifyRes.errorMsg = "SQL is not endWith ';'";
- break;
- default:
- vertifyRes.errorMsg = data.message;
- break;
- }
- syntaxError();
- return false;
- }
- } catch (error) {
- console.error(error);
- return false;
- }
- }
- }
-
- async function syntaxError() {
- const editor = await getInstance();
- if (editor) {
- const model = editor.getModel();
- const monaco = await getMonacoInstance();
- if (vertifyRes.errorMsg) {
- try {
- monaco.editor.setModelMarkers(model, 'sql', [
- {
- startLineNumber: 1,
- endLineNumber: 4,
- severity: monaco.MarkerSeverity.Error,
- message: 'dsadfs',
- },
- ]);
- } catch (e) {
- console.log(e);
- }
- } else {
- monaco.editor.setModelMarkers(model, 'sql', []);
- }
- }
- }
- /* format */
- function handleFormatSql() {
- if (isEmpty(props.value)) return;
- const formatSql = format(props.value);
- setContent(formatSql);
- }
- /* full screen */
- function handleBigScreen() {
- toggle();
- unref(flinkSql).style.width = '0';
- setTimeout(() => {
- unref(flinkSql).style.width = '100%';
- unref(flinkSql).style.height = isFullscreen.value ? '100vh' : '550px';
- }, 100);
- }
- const { onChange, setContent, getInstance, getMonacoInstance, setMonacoSuggest } = useMonaco(
- flinkSql,
- {
- language: 'sql',
- code: props.value || defaultValue,
- options: {
- minimap: { enabled: true },
- ...(getMonacoOptions(false) as any),
- autoClosingBrackets: 'never',
- },
- },
- );
-
- watchEffect(() => {
- if (props.suggestions.length > 0) {
- setMonacoSuggest(props.suggestions);
- }
- });
- const canPreview = computed(() => {
- return /\${.+}/.test(props.value);
- });
-
- onChange((data) => {
- emit('update:value', data);
- });
-
- defineExpose({ handleVerifySql, setContent });
-</script>
-
-<template>
- <div>
- <div ref="flinkScreen">
- <div
- class="sql-box"
- ref="flinkSql"
- :class="'syntax-' + (vertifyRes.errorMsg ? 'false' : 'true')"
- ></div>
- <ButtonGroup class="flinksql-tool">
- <a-button
- class="flinksql-tool-item"
- size="small"
- v-if="canPreview"
- @click="emit('preview', value)"
- >
- <Icon icon="ant-design:eye-outlined" />
- preview
- </a-button>
- <a-button size="small" class="flinksql-tool-item" type="primary" @click="handleVerifySql">
- <Icon icon="ant-design:check-outlined" />
- {{ t('flink.app.flinkSql.verify') }}
- </a-button>
- <a-button class="flinksql-tool-item" size="small" type="default" @click="handleFormatSql">
- <Icon icon="ant-design:thunderbolt-outlined" />
- {{ t('flink.app.flinkSql.format') }}
- </a-button>
- <a-button class="flinksql-tool-item" size="small" type="default" @click="handleBigScreen">
- <Icon
- :icon="
- isFullscreen
- ? 'ant-design:fullscreen-exit-outlined'
- : 'ant-design:fullscreen-outlined'
- "
- />
- {{ isFullscreen ? t('flink.app.flinkSql.exit') : '' }}
- {{ t('flink.app.flinkSql.fullScreen') }}
- </a-button>
- </ButtonGroup>
- <p class="conf-desc mt-10px">
- <span class="text-red-600" v-if="vertifyRes.errorMsg"> {{ vertifyRes.errorMsg }} </span>
- <span v-else class="text-green-700">
- <span v-if="vertifyRes.verified"> {{ t('flink.app.flinkSql.successful') }} </span>
- </span>
- </p>
- </div>
- </div>
-</template>
diff --git a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSqlHistory.vue b/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSqlHistory.vue
deleted file mode 100644
index d3cd8eed3..000000000
--- a/streampark-console/streampark-console-newui/src/views/flink/app/components/flinkSqlHistory.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-<script lang="ts">
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- name: 'FlinkSqlHistory',
- });
-</script>
-<script setup lang="ts" name="FlinkSqlHistory">
- import { BasicModal, useModalInner } from '/@/components/Modal';
- import { BasicForm, useForm } from '/@/components/Form';
- import { useI18n } from '/@/hooks/web/useI18n';
- const { t } = useI18n();
- const [registerModalInner] = useModalInner();
- const [registerForm] = useForm({
- labelWidth: 120,
- colon: true,
- schemas: [
- {
- field: 'compare_sql',
- label: 'Version',
- component: 'Select',
- componentProps: {
- placeholder: 'Please select the sql version to compare',
- mode: 'multiple',
- maxTagCount: 2,
- },
- },
- ],
- baseColProps: { span: 24 },
- labelCol: { lg: { span: 5, offset: 0 }, sm: { span: 7, offset: 0 } },
- wrapperCol: { lg: { span: 16, offset: 0 }, sm: { span: 17, offset: 0 } },
- showActionButtonGroup: false,
- });
-</script>
-<template>
- <BasicModal @register="registerModalInner">
- <template #title>
- <Icon icon="ant-design:swap-outlined" style="color: #4a9ff5" />
- {{ t('flink.app.flinkSql.compareFlinkSQL') }}
- </template>
- <BasicForm @register="registerForm" />
- </BasicModal>
-</template>
-<style scoped></style>