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 3bea62086 [Improve] put icon before resource type option (#2724)
3bea62086 is described below
commit 3bea6208648260640bde4d8fb3feb13ec32c3549
Author: zhoulii <[email protected]>
AuthorDate: Fri May 5 14:02:54 2023 +0800
[Improve] put icon before resource type option (#2724)
* [Improve] put icon before resource type option
* [Improve] make label more readable
---------
Co-authored-by: zhoulii <[email protected]>
---
.../src/assets/icons/connector.svg | 1 +
.../src/assets/icons/fx.svg | 1 +
.../src/assets/icons/jar.svg | 1 +
.../src/locales/lang/en/flink/resource.ts | 1 +
.../src/locales/lang/zh-CN/flink/resource.ts | 1 +
.../flink/resource/components/ResourceDrawer.vue | 11 +---
.../src/views/flink/resource/useResourceRender.tsx | 72 ++++++++++++++++++++++
7 files changed, 80 insertions(+), 8 deletions(-)
diff --git
a/streampark-console/streampark-console-webapp/src/assets/icons/connector.svg
b/streampark-console/streampark-console-webapp/src/assets/icons/connector.svg
new file mode 100644
index 000000000..eb7de2a0f
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/assets/icons/connector.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg
t="1683216927308" class="icon" viewBox="0 0 1025 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg"; p-id="35715"
xmlns:xlink="http://www.w3.org/1999/xlink"; width="200.1953125"
height="200"><path d="M391.518603 331.339211l301.143903 301.101315
150.635835-150.550657a212.942938 212.942938 0 0
0-301.186492-301.186492L391.518603 331.339211zM692.705095 [...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-webapp/src/assets/icons/fx.svg
b/streampark-console/streampark-console-webapp/src/assets/icons/fx.svg
new file mode 100644
index 000000000..b0cf1d03d
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/src/assets/icons/fx.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg
t="1683216867173" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg"; p-id="31664"
xmlns:xlink="http://www.w3.org/1999/xlink"; width="200" height="200"><path
d="M649.984 133.461333a54.101333 54.101333 0 0 1-11.776 35.157334 36.949333
36.949333 0 0 1-29.610667 14.933333c-12.202667
0-21.077333-4.266667-26.624-12.8a171.3 [...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-webapp/src/assets/icons/jar.svg
b/streampark-console/streampark-console-webapp/src/assets/icons/jar.svg
new file mode 100644
index 000000000..a6347b507
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/src/assets/icons/jar.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";><svg
t="1683216755143" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg"; p-id="23492"
xmlns:xlink="http://www.w3.org/1999/xlink"; width="200" height="200"><path
d="M558.08 472.064c48.128 53.248-13.312 103.424-13.312 103.424s119.808-61.44
65.536-139.264c-51.2-71.68-91.136-107.52 122.88-232.448 0 1.024-335.872
86.016-175.1 [...]
\ No newline at end of file
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts
index fc8262254..03f1e5086 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts
@@ -41,6 +41,7 @@ export default {
descriptionMessage: 'exceeds maximum length limit of 100 characters',
engineTypeIsRequiredMessage: 'compute engine type is required',
resourceTypeIsRequiredMessage: 'resource type is required',
+ resourceTypePlaceholder: 'Please select resource type',
exists: 'Sorry, the Resource already exists',
empty: 'Resource cannot be empty',
},
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts
index 827d4e369..3eca6dacc 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts
@@ -41,6 +41,7 @@ export default {
descriptionMessage: '超过 100 个字符的最大长度限制',
engineTypeIsRequiredMessage: '计算引擎类型必选',
resourceTypeIsRequiredMessage: '资源类型必选',
+ resourceTypePlaceholder: '请选择资源类型',
exists: '资源已存在',
empty: '资源不能为空',
},
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue
b/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue
index af1b39610..930b1a926 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue
+++
b/streampark-console/streampark-console-webapp/src/views/flink/resource/components/ResourceDrawer.vue
@@ -60,6 +60,7 @@
import { fetchUpload } from "/@/api/flink/app/app";
import { fetchAddResource, fetchUpdateResource } from
"/@/api/flink/resource";
import { EngineTypeEnum, ResourceTypeEnum } from
"/@/views/flink/resource/resource.data";
+ import {renderResourceType} from "/@/views/flink/resource/useResourceRender";
const emit = defineEmits(['success', 'register']);
@@ -76,14 +77,8 @@
field: 'resourceType',
label: t('flink.resource.resourceType'),
component: 'Select',
- componentProps: {
- options: [
- { label: 'FLINK_APP', value: ResourceTypeEnum.FLINK_APP },
- { label: 'CONNECTOR', value: ResourceTypeEnum.CONNECTOR },
- { label: 'UDXF', value: ResourceTypeEnum.UDXF },
- { label: 'NORMAL_JAR', value: ResourceTypeEnum.NORMAL_JAR },
- ],
- },
+ render: ({ model }) =>
+ renderResourceType( { model, }, ),
rules: [{ required: true, message:
t('flink.resource.form.resourceTypeIsRequiredMessage') }],
},
{
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/resource/useResourceRender.tsx
b/streampark-console/streampark-console-webapp/src/views/flink/resource/useResourceRender.tsx
new file mode 100644
index 000000000..14c0205b5
--- /dev/null
+++
b/streampark-console/streampark-console-webapp/src/views/flink/resource/useResourceRender.tsx
@@ -0,0 +1,72 @@
+/*
+ * 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 { Select } from 'ant-design-vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { ResourceTypeEnum } from "/@/views/flink/resource/resource.data";
+import flinkAppSvg from '/@/assets/icons/flink2.svg';
+import connectorSvg from '/@/assets/icons/connector.svg';
+import udxfSvg from '/@/assets/icons/fx.svg';
+import normalJarSvg from '/@/assets/icons/jar.svg';
+
+const { t } = useI18n();
+
+/* render resource type label */
+export const renderResourceType = ({ model },) => {
+
+ const renderOptions = () => {
+ const options = [
+ { label: 'Flink App', value: ResourceTypeEnum.FLINK_APP, src:
flinkAppSvg },
+ { label: 'Connector', value: ResourceTypeEnum.CONNECTOR, src:
connectorSvg },
+ { label: 'UDXF', value: ResourceTypeEnum.UDXF, src: udxfSvg },
+ { label: 'Normal Jar', value: ResourceTypeEnum.NORMAL_JAR, src:
normalJarSvg },
+ ];
+ return options
+ .map(( {label,value, src} ) => {
+ return (
+ <Select.Option
+ key={ value }
+ label={ label }
+ >
+ <div>
+ <img
+ src={ src }
+ style="display: inline-block; width: 20px; height: 20px"
+ ></img>
+ <span
+ style="vertical-align: middle; margin-left: 5px;"
+ >
+ { label }
+ </span>
+ </div>
+ </Select.Option>
+ );
+ });
+ };
+
+ return (
+ <div>
+ <Select
+ allow-clear
+ placeholder={t('flink.resource.form.resourceTypePlaceholder')}
+ style="width: calc(100% - 60px)"
+ onChange={(value) => (model.resourceType = value)}
+ >
+ {renderOptions()}
+ </Select>
+ </div>
+ );
+};
