[Improve] project page minor improvement (#4015)

apache · Sep 1, 2024 · a2f9a69 · a2f9a69
1 parent b3e43d2
commit a2f9a69
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 59 deletions.
diff --git a/...console-service/src/main/java/org/apache/streampark/console/core/enums/FlinkAppState.java b/...console-service/src/main/java/org/apache/streampark/console/core/enums/FlinkAppState.java
@@ -131,6 +131,7 @@ public static boolean isEndState(Integer appState) {
     return FlinkAppState.CANCELED == flinkAppState
         || FlinkAppState.FAILED == flinkAppState
         || FlinkAppState.KILLED == flinkAppState
+        || FlinkAppState.ADDED == flinkAppState
         || FlinkAppState.FINISHED == flinkAppState
         || FlinkAppState.SUCCEEDED == flinkAppState
         || FlinkAppState.LOST == flinkAppState

diff --git a/...src/main/java/org/apache/streampark/console/core/service/impl/ApplicationServiceImpl.java b/...src/main/java/org/apache/streampark/console/core/service/impl/ApplicationServiceImpl.java
@@ -1267,9 +1267,7 @@ private AppControl buildAppControl(Application app) {
         .setAllowStart(
             !app.shouldBeTrack() && PipelineStatus.success.getCode().equals(app.getBuildStatus()))
         .setAllowStop(app.isRunning())
-        .setAllowView(
-            (!FlinkAppState.isEndState(app.getState()))
-                || OptionState.SAVEPOINTING.getValue() == app.getOptionState());
+        .setAllowView(app.shouldBeTrack());
   }
 
   @Override

diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/project.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/project.ts
@@ -52,7 +52,7 @@ export default {
     buildArgsPlaceholder: '构建参数, 比如: -Pprod',
     description: '描述',
     descriptionPlaceholder: '请输入对该项目的描述信息',
-    lastBuild: '最近一次构建',
+    lastBuild: '最后构建',
     buildState: '构建状态',
   },
   operationTips: {

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/Detail.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/Detail.vue
@@ -15,7 +15,7 @@
   limitations under the License.
 -->
 <script setup lang="ts" name="ApplicationDetail">
-  import { AppStateEnum, ExecModeEnum } from '/@/enums/flinkEnum';
+  import { ExecModeEnum } from '/@/enums/flinkEnum';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { fetchAppExternalLink } from '/@/api/flink/setting/externalLink';
   import { ExternalLink } from '/@/api/flink/setting/types/externalLink.type';
@@ -25,7 +25,7 @@
   import { Icon } from '/@/components/Icon';
   import { useRoute, useRouter } from 'vue-router';
   import { fetchGet, fetchOptionLog, fetchYarn } from '/@/api/flink/app/app';
-  import { onUnmounted, reactive, h, ref, onMounted, computed } from 'vue';
+  import { onUnmounted, reactive, h, ref, onMounted } from 'vue';
   import { useIntervalFn } from '@vueuse/core';
   import { AppListRecord } from '/@/api/flink/app/app.type';
   import { Tooltip, Divider, Space } from 'ant-design-vue';
@@ -49,6 +49,8 @@
 
   const { t } = useI18n();
 
+  const appNotRunning = ref(false);
+
   const yarn = ref('');
   const externalLinks = ref<ExternalLink[]>([]);
   const app = reactive<Partial<AppListRecord>>({});
@@ -106,8 +108,9 @@
       },
     ],
     data: app,
-    layout: 'vertical',
-    column: 3,
+    layout: 'horizontal',
+    column: 2,
+    size: 'small',
   });
 
   const [registerConfDrawer] = useDrawer();
@@ -145,6 +148,7 @@
       await handleDetailTabs();
     }
     Object.assign(app, res);
+    appNotRunning.value = !app.appControl.allowView;
   }
 
   async function handleDetailTabs() {
@@ -180,10 +184,6 @@
   onUnmounted(() => {
     pause();
   });
-
-  const appNotRunning = computed(
-    () => app['appControl']['allowView'] === false || (yarn.value === null && app.flinkRestUrl === null),
-  );
 </script>
 <template>
   <PageWrapper content-full-height content-background contentClass="p-24px">

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/data/detail.data.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/data/detail.data.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { BasicColumn } from '/@/components/Table/src/types/table';
-import { Tag, TypographyParagraph } from 'ant-design-vue';
+import { Tag } from 'ant-design-vue';
 import { DescItem } from '/@/components/Description';
 import { h } from 'vue';
 import State from '../components/State';
@@ -30,45 +30,13 @@ export const getDescSchema = (): DescItem[] => {
     {
       field: 'id',
       label: t('flink.app.id'),
-      render: (curVal) =>
-        h(TypographyParagraph, { copyable: true, style: { color: '#477de9' } }, () => curVal),
-    },
-    { field: 'jobName', label: t('flink.app.appName') },
-    {
-      field: 'jobType',
-      label: t('flink.app.developmentMode'),
-      render: (curVal) =>
-        h(
-          'div',
-          { class: 'bold-tag' },
-          h(Tag, { color: curVal === 1 ? '#545454' : '#0C7EF2', class: 'mr-8px' }, () =>
-            curVal === 1 ? 'Custom Code' : 'Flink SQL',
-          ),
-        ),
-    },
-    {
-      field: 'module',
-      label: t('flink.app.module'),
-      show: (data) => data.jobType != JobTypeEnum.SQL,
-    },
-    {
-      field: 'projectName',
-      label: t('flink.app.project'),
-      show: (data) => data.jobType != JobTypeEnum.SQL,
-    },
-    {
-      field: 'appType',
-      label: t('flink.app.appType'),
-      render: (curVal) =>
-        h(Tag, { color: curVal == AppTypeEnum.STREAMPARK_FLINK ? 'cyan' : 'blue' }, () =>
-          curVal == AppTypeEnum.STREAMPARK_FLINK ? 'StreamPark Flink' : 'Apache Flink',
-        ),
     },
     {
       field: 'state',
       label: t('flink.app.status'),
       render: (_curVal, data) => h(State, { option: 'state', data }),
     },
+    { field: 'jobName', label: t('flink.app.appName') },
     {
       field: 'startTime',
       label: t('flink.app.startTime'),
@@ -81,6 +49,18 @@ export const getDescSchema = (): DescItem[] => {
             : '-',
         ),
     },
+    {
+      field: 'jobType',
+      label: t('flink.app.developmentMode'),
+      render: (curVal) =>
+        h(
+          'div',
+          { class: 'bold-tag' },
+          h(Tag, { color: curVal === 1 ? '#545454' : '#0C7EF2' }, () =>
+            curVal === 1 ? 'Custom Code' : 'Flink SQL',
+          ),
+        ),
+    },
     {
       field: 'endTime',
       label: t('flink.app.endTime'),
@@ -93,6 +73,28 @@ export const getDescSchema = (): DescItem[] => {
             : '-',
         ),
     },
+    {
+      field: 'module',
+      label: t('flink.app.module'),
+      show: (data) => data.jobType != JobTypeEnum.SQL,
+    },
+    {
+      field: 'appType',
+      label: t('flink.app.appType'),
+      render: (curVal) =>
+        h(
+          'div',
+          { class: 'bold-tag' },
+          h(Tag, { color: '#108ee9' }, () =>
+            curVal == AppTypeEnum.STREAMPARK_FLINK ? 'StreamPark Flink' : 'Apache Flink',
+          ),
+        ),
+    },
+    {
+      field: 'projectName',
+      label: t('flink.app.project'),
+      show: (data) => data.jobType != JobTypeEnum.SQL,
+    },
     {
       field: 'duration',
       label: t('flink.app.duration'),

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue b/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
@@ -102,7 +102,7 @@
                 onClick: handleBuild.bind(null, record),
               },
               {
-                icon: 'ant-design:edit-outlined',
+                icon: 'clarity:note-edit-line',
                 ifShow: record.buildState !== BuildStateEnum.BUILDING,
                 auth: 'project:update',
                 tooltip: t('common.edit'),
@@ -247,7 +247,7 @@
         }
       }
       const handleEdit = function (record: ProjectRecord) {
-        router.push({ path: '/project/edit', query: { id: record.id } });
+        router.push({ path: '/flink/project/edit', query: { id: record.id } });
       };
       async function handleDelete(record: ProjectRecord) {
         try {

diff --git a/streampark-console/streampark-console-webapp/src/views/setting/ExternalLink/index.vue b/streampark-console/streampark-console-webapp/src/views/setting/ExternalLink/index.vue
@@ -19,14 +19,15 @@
   import { ExternalLink } from '/@/api/flink/setting/types/externalLink.type';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { onMounted, ref } from 'vue';
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
   import { ColumnsType } from 'ant-design-vue/lib/table';
   import { useModal } from '/@/components/Modal';
   import { ExternalLinkModal, ExternalLinkBadge } from './components';
   import { PageWrapper } from '/@/components/Page';
   import { Table, Popconfirm } from 'ant-design-vue';
   import { fetchExternalLink, fetchExternalLinkDelete } from '/@/api/flink/setting/externalLink';
   import { BasicTitle } from '/@/components/Basic';
+  import { Icon } from '/@/components/Icon';
   defineOptions({
     name: 'ExternalLinkSetting',
   });
@@ -114,16 +115,17 @@
                 v-auth="'externalLink:update'"
                 type="link"
                 @click="handleEditExternalLink(record)"
-                >{{ t('common.edit') }}</a-button
               >
+                <Icon icon="clarity:note-edit-line" />
+              </a-button>
               <a-popconfirm
                 :title="t('setting.externalLink.confDeleteTitle')"
                 @confirm="handleDeleteExternalLink(record.id)"
                 placement="topRight"
               >
-                <a-button v-auth="'externalLink:delete'" danger type="text">{{
-                  t('common.delText')
-                }}</a-button>
+                <a-button v-auth="'externalLink:delete'" danger type="text">
+                  <DeleteOutlined />
+                </a-button>
               </a-popconfirm>
             </span>
           </template>

diff --git a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
@@ -18,15 +18,14 @@
   import { onUnmounted } from 'vue';
   import { useTimeoutFn } from '@vueuse/core';
   import { onMounted, ref } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
+  import { Icon, SvgIcon } from '/@/components/Icon';
   import { List, Popconfirm, Tooltip, Tag } from 'ant-design-vue';
   import { ClusterStateEnum, ExecModeEnum } from '/@/enums/flinkEnum';
   import {
     PauseCircleOutlined,
     EyeOutlined,
     PlusOutlined,
     PlayCircleOutlined,
-    EditOutlined,
     DeleteOutlined,
   } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -196,7 +195,7 @@
                 size="large"
                 class="control-button"
               >
-                <EditOutlined />
+                <Icon icon="clarity:note-edit-line" />
               </a-button>
             </Tooltip>
             <template v-if="handleIsStart(item)">

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
@@ -18,14 +18,13 @@
   import { onMounted, ref } from 'vue';
   import { useModal } from '/@/components/Modal';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { SvgIcon } from '/@/components/Icon';
+  import { Icon, SvgIcon } from '/@/components/Icon';
   import { List, Switch, Popconfirm, Tooltip } from 'ant-design-vue';
   import {
     CheckOutlined,
     CloseOutlined,
     DeleteOutlined,
     EyeOutlined,
-    EditOutlined,
     PlusOutlined,
   } from '@ant-design/icons-vue';
   import { FlinkEnvModal, FlinkEnvDrawer } from './components';
@@ -161,7 +160,7 @@
                 size="large"
                 class="control-button"
               >
-                <EditOutlined />
+                <Icon icon="clarity:note-edit-line" />
               </a-button>
             </Tooltip>
             <Tooltip :title="t('setting.flinkHome.conf')">