[Improve]: App view table column add drag and drop, tag width adaptive (

#3497) * [Improve]: app form add name drag and drop, tag width adaptive * style: app style * fix: table column width * fix: dom calc error
apache · Jan 17, 2024 · 38d86d1 · 38d86d1
1 parent 6b9214f
commit 38d86d1
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 71 deletions.
diff --git a/streampark-console/streampark-console-webapp/src/design/ant/index.less b/streampark-console/streampark-console-webapp/src/design/ant/index.less
@@ -69,10 +69,11 @@ span.anticon:not(.app-iconify) {
 
 .bold-tag,
 .bold-tag>.ant-tag {
-  border-radius: 0 !important;
-  font-weight: 600;
-  padding: 0 4px !important;
+  border-radius: 1px !important;
+  padding: 0 3px !important;
   cursor: default;
+  font-size: 10px;
+  line-height: 16px;
 }
 
 .app-bar,

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
@@ -25,13 +25,13 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { AppStateEnum, JobTypeEnum, OptionStateEnum, ReleaseStateEnum } from '/@/enums/flinkEnum';
   import { useTimeoutFn } from '@vueuse/core';
-  import { Tooltip, Badge, Divider, Tag } from 'ant-design-vue';
+  import { Tooltip, Badge, Divider, Tag, Popover } from 'ant-design-vue';
   import { fetchAppRecord } from '/@/api/flink/app';
   import { useTable } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, TableAction } from '/@/components/Table';
   import { AppListRecord } from '/@/api/flink/app.type';
-  import { getAppColumns, releaseTitleMap } from './data';
+  import { releaseTitleMap } from './data';
   import { handleView } from './utils';
   import { useDrawer } from '/@/components/Drawer';
   import { useModal } from '/@/components/Modal';
@@ -41,8 +41,14 @@
   import LogModal from './components/AppView/LogModal.vue';
   import BuildDrawer from './components/AppView/BuildDrawer.vue';
   import AppDashboard from './components/AppView/AppDashboard.vue';
-  import State from './components/State';
+  import State, {
+    buildStatusMap,
+    optionStateMap,
+    releaseStateMap,
+    stateMap,
+  } from './components/State';
   import { useSavepoint } from './hooks/useSavepoint';
+  import { useAppTableColumns } from './hooks/useAppTableColumns';
 
   const { t } = useI18n();
   const optionApps = {
@@ -56,11 +62,17 @@
 
   const yarn = ref<Nullable<string>>(null);
   const currentTablePage = ref(1);
+  const { onTableColumnResize, getAppColumns } = useAppTableColumns();
   const { openSavepoint } = useSavepoint(handleOptionApp);
   const [registerStartModal, { openModal: openStartModal }] = useModal();
   const [registerStopModal, { openModal: openStopModal }] = useModal();
   const [registerLogModal, { openModal: openLogModal }] = useModal();
   const [registerBuildDrawer, { openDrawer: openBuildDrawer }] = useDrawer();
+  const titleLenRef = ref({
+    maxState: '',
+    maxRelease: '',
+    maxBuild: '',
+  });
 
   const [registerTable, { reload, getLoading, setPagination }] = useTable({
     rowKey: 'id',
@@ -112,12 +124,55 @@
           }
         }
       });
+      const stateLenMap = dataSource.reduce(
+        (
+          prev: {
+            maxState: string;
+            maxRelease: string;
+            maxBuild: string;
+          },
+          cur: any,
+        ) => {
+          const { state, optionState, release, buildStatus } = cur;
+          // state title len
+          if (optionState === OptionStateEnum.NONE) {
+            const stateStr = stateMap[state]?.title;
+            if (stateStr && stateStr.length > prev.maxState.length) {
+              prev.maxState = stateStr;
+            }
+          } else {
+            const stateStr = optionStateMap[optionState]?.title;
+            if (stateStr && stateStr.length > prev.maxState.length) {
+              prev.maxState = stateStr;
+            }
+          }
+
+          //release title len
+          const releaseStr = releaseStateMap[release]?.title;
+          if (releaseStr && releaseStr.length > prev.maxRelease.length) {
+            prev.maxRelease = releaseStr;
+          }
+
+          //build title len
+          const buildStr = buildStatusMap[buildStatus]?.title;
+          if (buildStr && buildStr.length > prev.maxBuild.length) {
+            prev.maxBuild = buildStr;
+          }
+          return prev;
+        },
+        {
+          maxState: '',
+          maxRelease: '',
+          maxBuild: '',
+        },
+      );
+      Object.assign(titleLenRef.value, stateLenMap);
+
       return dataSource;
     },
     fetchSetting: { listField: 'records' },
     immediate: true,
     canResize: false,
-    columns: getAppColumns(),
     showIndexColumn: false,
     showTableSetting: true,
     useSearchForm: true,
@@ -196,7 +251,13 @@
 <template>
   <PageWrapper contentFullHeight>
     <AppDashboard ref="appDashboardRef" />
-    <BasicTable @register="registerTable" class="app_list !px-0 pt-20px" :formConfig="formConfig">
+    <BasicTable
+      @register="registerTable"
+      :columns="getAppColumns"
+      @resize-column="onTableColumnResize"
+      class="app_list !px-0 pt-20px"
+      :formConfig="formConfig"
+    >
       <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'jobName'">
           <span class="app_type app_jar" v-if="record['jobType'] == JobTypeEnum.JAR"> JAR </span>
@@ -213,7 +274,27 @@
             }"
             @click="handleJobView(record)"
           >
-            <Tooltip :title="record.description"> {{ record.jobName }} </Tooltip>
+            <Popover :title="t('common.detailText')">
+              <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>
+                <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.PYFLINK"> PyFlink </span>
+                  </Tag>
+                </div>
+                <div class="pt-2px flex">
+                  <span class="pr-6px font-bold">{{ t('common.description') }}:</span>
+                  <div class="max-w-300px break-words">{{ record.description }}</div>
+                </div>
+              </template>
+              {{ record.jobName }}
+            </Popover>
           </span>
 
           <template v-if="record['jobType'] == JobTypeEnum.JAR">
@@ -246,13 +327,19 @@
           <State option="task" :data="record" />
         </template>
         <template v-if="column.dataIndex === 'state'">
-          <State option="state" :data="record" />
+          <State option="state" :data="record" :maxTitle="titleLenRef.maxState" />
         </template>
         <template v-if="column.dataIndex === 'release'">
-          <State option="release" :title="releaseTitleMap[record.release] || ''" :data="record" />
+          <State
+            option="release"
+            :maxTitle="titleLenRef.maxRelease"
+            :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"
           />

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
@@ -1,4 +1,4 @@
-/* 
+/*
   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.
@@ -12,16 +12,16 @@
   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. 
+  limitations under the License.
 */
 
-import { defineComponent, toRefs, unref } from 'vue';
+import { computed, defineComponent, toRefs, unref } from 'vue';
 import { Tag, Tooltip } from 'ant-design-vue';
 import './State.less';
 import { AppStateEnum, ReleaseStateEnum, OptionStateEnum } from '/@/enums/flinkEnum';
 
 /*  state map*/
-const stateMap = {
+export const stateMap = {
   [AppStateEnum.ADDED]: { color: '#2f54eb', title: 'ADDED' },
   [AppStateEnum.INITIALIZING]: {
     color: '#738df8',
@@ -78,7 +78,7 @@ const stateMap = {
   },
 };
 /*  option state map*/
-const optionStateMap = {
+export const optionStateMap = {
   [OptionStateEnum.RELEASING]: {
     color: '#1ABBDC',
     title: 'RELEASING',
@@ -102,7 +102,8 @@ const optionStateMap = {
 };
 
 /* release state map*/
-const releaseStateMap = {
+export const releaseStateMap = {
+  [ReleaseStateEnum.FAILED]: { color: '#f5222d', title: 'FAILED' },
   [ReleaseStateEnum.DONE]: { color: '#52c41a', title: 'DONE' },
   [ReleaseStateEnum.NEED_RELEASE]: { color: '#fa8c16', title: 'WAITING' },
   [ReleaseStateEnum.RELEASING]: {
@@ -113,10 +114,9 @@ const releaseStateMap = {
   [ReleaseStateEnum.NEED_RESTART]: { color: '#fa8c16', title: 'PENDING' },
   [ReleaseStateEnum.NEED_ROLLBACK]: { color: '#fa8c16', title: 'WAITING' },
 };
-releaseStateMap[-1] = { color: '#f5222d', title: 'FAILED' };
 
 /* build state map*/
-const buildStatusMap = {
+export const buildStatusMap = {
   0: { color: '#99A3A4', title: 'UNKNOWN' },
   1: { color: '#F5B041', title: 'PENDING' },
   2: {
@@ -148,16 +148,41 @@ export default defineComponent({
       type: Object as PropType<Recordable>,
       default: () => ({}),
     },
+    maxTitle: String,
   },
   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.textContent = props.maxTitle;
+      document.body.appendChild(dom);
+      const width = dom.clientWidth + 2;
+      document.body.removeChild(dom);
+      return width;
+    });
+
     const renderTag = (map: Recordable, key: number) => {
       if (!Reflect.has(map, key)) {
         return;
       }
-      return <Tag {...map[key]}>{map[key].title}</Tag>;
+      return (
+        <Tag {...map[key]} style={getStyle.value}>
+          {map[key].title}
+        </Tag>
+      );
     };
-
+    const getStyle = computed(() => {
+      if (tagWidth.value > 0) {
+        return { width: `${tagWidth.value}px`, textAlign: 'center' };
+      }
+      return {};
+    });
     const renderState = () => {
       if (unref(data).optionState === OptionStateEnum.NONE) {
         return <div class="bold-tag">{renderTag(stateMap, unref(data).state)}</div>;

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/data/index.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/data/index.ts
@@ -14,56 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { dateToDuration } from '/@/utils/dateUtil';
-import { BasicColumn } from '/@/components/Table';
-import {
-  AppStateEnum,
-  ExecModeEnum,
-  FailoverStrategyEnum,
-  ReleaseStateEnum,
-} from '/@/enums/flinkEnum';
-import { useI18n } from '/@/hooks/web/useI18n';
-const { t } = useI18n();
-
-/* app */
-export const getAppColumns = (): BasicColumn[] => [
-  {
-    title: t('flink.app.appName'),
-    dataIndex: 'jobName',
-    align: 'left',
-    fixed: 'left',
-    width: 250,
-  },
-  { title: t('flink.app.flinkVersion'), dataIndex: 'flinkVersion', width: 110 },
-  { title: t('flink.app.tags'), ellipsis: true, dataIndex: 'tags', width: 150 },
-  {
-    title: t('flink.app.runStatus'),
-    dataIndex: 'state',
-    width: 120,
-    filters: [
-      { text: t('flink.app.runStatusOptions.added'), value: String(AppStateEnum.ADDED) },
-      { text: t('flink.app.runStatusOptions.starting'), value: String(AppStateEnum.STARTING) },
-      { text: t('flink.app.runStatusOptions.running'), value: String(AppStateEnum.RUNNING) },
-      { text: t('flink.app.runStatusOptions.failed'), value: String(AppStateEnum.FAILED) },
-      { text: t('flink.app.runStatusOptions.canceled'), value: String(AppStateEnum.CANCELED) },
-      { text: t('flink.app.runStatusOptions.finished'), value: String(AppStateEnum.FINISHED) },
-      { text: t('flink.app.runStatusOptions.suspended'), value: String(AppStateEnum.SUSPENDED) },
-      { text: t('flink.app.runStatusOptions.lost'), value: String(AppStateEnum.LOST) },
-      { text: t('flink.app.runStatusOptions.silent'), value: String(AppStateEnum.SILENT) },
-      { text: t('flink.app.runStatusOptions.terminated'), value: String(AppStateEnum.TERMINATED) },
-    ],
-  },
-  { title: t('flink.app.releaseBuild'), dataIndex: 'release', width: 220 },
-  {
-    title: t('flink.app.duration'),
-    dataIndex: 'duration',
-    sorter: true,
-    width: 150,
-    customRender: ({ value }) => dateToDuration(value),
-  },
-  { title: t('flink.app.modifiedTime'), dataIndex: 'modifyTime', sorter: true, width: 165 },
-  { title: t('flink.app.owner'), dataIndex: 'nickName', width: 100 },
-];
+import { ExecModeEnum, FailoverStrategyEnum, ReleaseStateEnum } from '/@/enums/flinkEnum';
 
 /* Get diff editor configuration */
 export const getMonacoOptions = (readOnly: boolean) => {