You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by kr...@apache.org on 2023/04/05 03:53:18 UTC
[incubator-streampark] branch dev updated: [Improve] antd-tag style improvement (#2569)
This is an automated email from the ASF dual-hosted git repository.
kriszu 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 bf29a9905 [Improve] antd-tag style improvement (#2569)
bf29a9905 is described below
commit bf29a990576ace653320a1eae3fc08bcee22e14f
Author: benjobs <be...@apache.org>
AuthorDate: Wed Apr 5 11:53:12 2023 +0800
[Improve] antd-tag style improvement (#2569)
---
.../src/design/ant/index.less | 4 +-
.../src/locales/lang/en/flink/app.ts | 2 +-
.../src/locales/lang/zh-CN/flink/app.ts | 2 +-
.../flink/app/components/AppDetail/DetailTab.vue | 72 ++++++++++++++--------
.../components/AppView/StopApplicationModal.vue | 2 +-
.../src/views/flink/app/components/State.less | 14 -----
.../src/views/flink/app/components/State.tsx | 10 +--
.../src/views/flink/app/data/detail.data.ts | 2 +-
.../src/views/system/user/user.data.ts | 1 -
9 files changed, 56 insertions(+), 53 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
index b6b95a0b6..0aa24f4c0 100644
--- a/streampark-console/streampark-console-webapp/src/design/ant/index.less
+++ b/streampark-console/streampark-console-webapp/src/design/ant/index.less
@@ -83,9 +83,9 @@ span.anticon:not(.app-iconify) {
}
}
-.ant-tag {
+.bold-tag, .bold-tag > .ant-tag {
border-radius: 0 !important;
- font-weight: 700;
+ font-weight: 500;
padding: 0 4px !important;
cursor: default;
}
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 6bd312470..7e1a6abd2 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
@@ -165,7 +165,7 @@ export default {
start: 'Start Application',
cancel: 'Cancel Application',
savepoint: 'Trigger Savepoint',
- detail: 'View Application Detail',
+ detail: 'View Detail',
startLog: 'See Flink Start log',
force: 'Forced Stop Application',
copy: 'Copy Application',
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 caa921d06..88ed7fe2d 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
@@ -163,7 +163,7 @@ export default {
start: '启动作业',
cancel: '取消作业',
savepoint: '触发 Savepoint',
- detail: '查看作业详情',
+ detail: '作业详情',
startLog: '查看 Flink 启动日志',
force: '强制停止作业',
copy: '复制作业',
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppDetail/DetailTab.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppDetail/DetailTab.vue
index b0d15b5c1..864ca189f 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppDetail/DetailTab.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppDetail/DetailTab.vue
@@ -388,8 +388,14 @@
<BasicTable @register="registerConfigTable">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'format'">
- <Tag color="#2db7f5" v-if="record.format === ConfigTypeEnum.YAML"> yaml </Tag>
- <Tag color="#108ee9" v-if="record.format === ConfigTypeEnum.PROPERTIES">
+ <Tag class="bold-tag" color="#2db7f5" v-if="record.format === ConfigTypeEnum.YAML">
+ yaml
+ </Tag>
+ <Tag
+ class="bold-tag"
+ color="#108ee9"
+ v-if="record.format === ConfigTypeEnum.PROPERTIES"
+ >
properties
</Tag>
</template>
@@ -420,9 +426,25 @@
<BasicTable @register="registerFlinkSqlTable">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'candidate'">
- <Tag color="#52c41a" v-if="record.candidate === CandidateTypeEnum.NONE"> None </Tag>
- <Tag color="#2db7f5" v-if="record.candidate === CandidateTypeEnum.NEW"> New </Tag>
- <Tag color="#108ee9" v-if="record.candidate === CandidateTypeEnum.HISTORY">
+ <Tag
+ class="bold-tag"
+ color="#52c41a"
+ v-if="record.candidate === CandidateTypeEnum.NONE"
+ >
+ None
+ </Tag>
+ <Tag
+ class="bold-tag"
+ color="#2db7f5"
+ v-if="record.candidate === CandidateTypeEnum.NEW"
+ >
+ New
+ </Tag>
+ <Tag
+ class="bold-tag"
+ color="#108ee9"
+ v-if="record.candidate === CandidateTypeEnum.HISTORY"
+ >
History
</Tag>
</template>
@@ -455,19 +477,17 @@
<Icon icon="ant-design:clock-circle-outlined" />
{{ record.triggerTime }}
</template>
- <template v-if="column.dataIndex == 'type'">
- <div class="app_state">
- <Tag color="#0C7EF2" v-if="record['type'] === SavePointEnum.CHECK_POINT">
- {{ t('flink.app.detail.detailTab.check') }}
- </Tag>
- <Tag color="#52c41a" v-if="record['type'] === SavePointEnum.SAVE_POINT">
- {{ t('flink.app.detail.detailTab.save') }}
- </Tag>
- </div>
- </template>
- <template v-if="column.dataIndex == 'latest'">
+ <div v-if="column.dataIndex == 'type'">
+ <Tag color="blue" v-if="record['type'] === SavePointEnum.CHECK_POINT">
+ {{ t('flink.app.detail.detailTab.check') }}
+ </Tag>
+ <Tag color="cyan" v-if="record['type'] === SavePointEnum.SAVE_POINT">
+ {{ t('flink.app.detail.detailTab.save') }}
+ </Tag>
+ </div>
+ <div v-if="column.dataIndex == 'latest'">
<Tag color="green" v-if="record.latest"> Latest </Tag>
- </template>
+ </div>
<template v-if="column.dataIndex == 'operation'">
<TableAction :actions="getSavePointAction(record)" />
</template>
@@ -500,14 +520,12 @@
<BasicTable @register="registerLogsTable">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'optionName'">
- <Tag color="#52c41a" v-if="record.optionName === OperationEnum.RELEASE">
- Release
- </Tag>
- <Tag color="#2db7f5" v-if="record.optionName === OperationEnum.START"> Start </Tag>
- <Tag color="#108ee9" v-if="record.optionName === OperationEnum.SAVEPOINT">
+ <Tag color="blue" v-if="record.optionName === OperationEnum.RELEASE"> Release </Tag>
+ <Tag color="green" v-if="record.optionName === OperationEnum.START"> Start </Tag>
+ <Tag color="cyan" v-if="record.optionName === OperationEnum.SAVEPOINT">
Savepoint
</Tag>
- <Tag color="#0C7EF2" v-if="record.optionName === OperationEnum.CANCEL"> Cancel </Tag>
+ <Tag color="orange" v-if="record.optionName === OperationEnum.CANCEL"> Cancel </Tag>
</template>
<template v-if="column.dataIndex == 'yarnAppId'">
<a-button type="link" @click="handleView(app as any, '')">
@@ -515,17 +533,17 @@
</a-button>
</template>
<template v-if="column.dataIndex == 'jobManagerUrl'">
- <a-button type="link" :href="record.jobManagerUrl" target="_blank">
+ <a type="link" :href="record.jobManagerUrl" target="_blank">
{{ record.jobManagerUrl }}
- </a-button>
+ </a>
</template>
<template v-if="column.dataIndex == 'optionTime'">
<Icon icon="ant-design:clock-circle-outlined" />
{{ record.optionTime }}
</template>
<template v-if="column.dataIndex == 'success'">
- <Tag class="start-state" color="#52c41a" v-if="record.success"> SUCCESS </Tag>
- <Tag class="start-state" color="#f5222d" v-else> FAILED </Tag>
+ <Tag class="bold-tag" color="#52c41a" v-if="record.success"> SUCCESS </Tag>
+ <Tag class="bold-tag" color="#f5222d" v-else> FAILED </Tag>
</template>
<template v-if="column.dataIndex == 'operation'">
<TableAction :actions="getOperationLogAction(record)" />
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StopApplicationModal.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StopApplicationModal.vue
index d54cb4019..59bcb1224 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StopApplicationModal.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/AppView/StopApplicationModal.vue
@@ -71,7 +71,7 @@
},
{
field: 'savePointTimeout',
- label: 'SavePoint Timeout',
+ label: 'Savepoint Timeout',
component: 'Select',
afterItem: () => h('span', { class: 'conf-switch' }, 'savepoint timeout, Unit: second'),
slot: 'savePointTimeout',
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 f55847b44..1ba9175bb 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
@@ -14,20 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-.app_state,
-.task-tag {
- width: 80px;
-
- .ant-tag {
- border-radius: 0;
- font-weight: 700;
- text-align: center;
- padding: 0 4px;
- margin-right: 0;
- cursor: default;
- border: unset;
- }
-}
.status-processing-deploying {
animation: deploying-color 800ms ease-out infinite alternate;
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 202c7986b..2ae6769db 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
@@ -155,9 +155,9 @@ export default defineComponent({
const renderState = () => {
if (unref(data).optionState === OptionStateEnum.NONE) {
- return <div class="app_state">{renderTag(stateMap, unref(data).state)}</div>;
+ return <div class="bold-tag">{renderTag(stateMap, unref(data).state)}</div>;
} else {
- return <div class="app_state">{renderTag(optionStateMap, unref(data).optionState)}</div>;
+ return <div class="bold-tag">{renderTag(optionStateMap, unref(data).optionState)}</div>;
}
};
function renderOverview() {
@@ -184,7 +184,7 @@ export default defineComponent({
)
) {
return (
- <div class="task-tag">
+ <div class="bold-tag">
{unref(data).totalTask && (
<Tooltip title="TOTAL">
<Tag color="#102541">{unref(data)?.totalTask}</Tag>
@@ -203,11 +203,11 @@ export default defineComponent({
}
if (unref(option) === 'release') {
- return <span class="app_state">{renderTag(releaseStateMap, unref(data).release)}</span>;
+ return <span class="bold-tag">{renderTag(releaseStateMap, unref(data).release)}</span>;
}
if (unref(option) === 'build') {
- return <span class="app_state">{renderTag(buildStatusMap, unref(data).buildStatus)}</span>;
+ return <span class="bold-tag">{renderTag(buildStatusMap, unref(data).buildStatus)}</span>;
}
return <span>{renderOtherOption()}</span>;
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
index 17af2a939..4c19b3225 100644
--- 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
@@ -40,7 +40,7 @@ export const getDescSchema = (): DescItem[] => {
render: (curVal) =>
h(
'div',
- { class: 'app_state' },
+ { class: 'bold-tag' },
h(Tag, { color: curVal === 1 ? '#545454' : '#0C7EF2', class: 'mr-8px' }, () =>
curVal === 1 ? 'Custom Code' : 'Flink SQL',
),
diff --git a/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts b/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts
index eb588b195..c62eb8b70 100644
--- a/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts
+++ b/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts
@@ -20,7 +20,6 @@ import { Tag } from 'ant-design-vue';
import { checkUserName, fetchUserTypes } from '/@/api/system/user';
import { FormTypeEnum } from '/@/enums/formEnum';
import { useI18n } from '/@/hooks/web/useI18n';
-import { LoginTypeEnum } from '/@/views/base/login/useLogin';
const { t } = useI18n();
// user status enum
export const enum StatusEnum {