style: app style

apache · Jan 17, 2024 · fdb4a28 · fdb4a28
1 parent 4dd2f5e
commit fdb4a28
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 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,7 +25,7 @@
   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';
@@ -167,6 +167,7 @@
         },
       );
       Object.assign(titleLenRef.value, stateLenMap);
+      console.log('dataSource', dataSource);
       return dataSource;
     },
     fetchSetting: { listField: 'records' },
@@ -273,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">

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
@@ -157,6 +157,7 @@ export default defineComponent({
       // 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.textContent = props.maxTitle;
       document.body.appendChild(dom);
       const width = dom.clientWidth;

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableColumns.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useAppTableColumns.ts
@@ -58,6 +58,7 @@ export const useAppTableColumns = () => {
     {
       title: t('flink.app.runStatus'),
       dataIndex: 'state',
+      fixed: 'right',
       width: unref(tableColumnWidth).state,
       filters: [
         { text: t('flink.app.runStatusOptions.added'), value: String(AppStateEnum.ADDED) },
@@ -75,7 +76,12 @@ export const useAppTableColumns = () => {
         },
       ],
     },
-    { title: t('flink.app.releaseBuild'), dataIndex: 'release', width: 220 },
+    {
+      title: t('flink.app.releaseBuild'),
+      dataIndex: 'release',
+      width: unref(tableColumnWidth).release,
+      fixed: 'right',
+    },
     {
       title: t('flink.app.duration'),
       dataIndex: 'duration',