This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 906353bbaf feat: dynamic-dag-sidebar-change (#14244)
906353bbaf is described below
commit 906353bbaf47b9a76ffa77940474d04b8bf77b26
Author: pppppjcc <[email protected]>
AuthorDate: Mon Jun 19 14:28:53 2023 +0800
feat: dynamic-dag-sidebar-change (#14244)
---
.../task/components/node/fields/use-k8s.ts | 19 ++-
.../components/node/fields/use-node-selectors.ts | 174 ++++++++++-----------
.../components/dynamic-dag/dag-sidebar.module.scss | 41 ++++-
.../components/dynamic-dag/dag-sidebar.tsx | 38 ++++-
4 files changed, 172 insertions(+), 100 deletions(-)
diff --git
a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts
b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts
index 9f5d9eb2ae..dd0a4a3d8d 100644
---
a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts
+++
b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-k8s.ts
@@ -14,7 +14,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { useCustomParams, useNamespace, useCustomLabels, useNodeSelectors }
from '.'
+import {
+ useCustomParams,
+ useNamespace,
+ useCustomLabels,
+ useNodeSelectors
+} from '.'
import type { IJsonItem } from '../types'
import { useI18n } from 'vue-i18n'
@@ -75,8 +80,16 @@ export function useK8s(model: { [field: string]: any }):
IJsonItem[] {
placeholder: t('project.node.args_tips')
}
},
- ...useCustomLabels({ model, field: 'customizedLabels', name:
'custom_labels' }),
- ...useNodeSelectors( { model, field: 'nodeSelectors', name:
'node_selectors' }),
+ ...useCustomLabels({
+ model,
+ field: 'customizedLabels',
+ name: 'custom_labels'
+ }),
+ ...useNodeSelectors({
+ model,
+ field: 'nodeSelectors',
+ name: 'node_selectors'
+ }),
...useCustomParams({ model, field: 'localParams', isSimple: true })
]
}
diff --git
a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts
b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts
index fc79310d89..48ca120127 100644
---
a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts
+++
b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-node-selectors.ts
@@ -19,99 +19,99 @@ import { useI18n } from 'vue-i18n'
import type { IJsonItem } from '../types'
export function useNodeSelectors({
- model,
- field,
- name,
- span = 24
- }: {
- model: { [field: string]: any }
- field: string
- name?: string
- span?: Ref | number
+ model,
+ field,
+ name,
+ span = 24
+}: {
+ model: { [field: string]: any }
+ field: string
+ name?: string
+ span?: Ref | number
}): IJsonItem[] {
- const { t } = useI18n()
+ const { t } = useI18n()
- return [
+ return [
+ {
+ type: 'custom-parameters',
+ field: field,
+ name: t(`project.node.${name}`),
+ class: 'btn-custom-parameters',
+ span,
+ children: [
{
- type: 'custom-parameters',
- field: field,
- name: t(`project.node.${name}`),
- class: 'btn-custom-parameters',
- span,
- children: [
- {
- type: 'input',
- field: 'key',
- span: 8,
- class: 'node-selector-label-name',
- props: {
- placeholder: t('project.node.expression_name_tips'),
- maxLength: 256
- },
- validate: {
- trigger: ['input', 'blur'],
- required: true,
- validator(validate: any, value: string) {
- if (!value) {
- return new
Error(t('project.node.expression_name_tips'))
- }
+ type: 'input',
+ field: 'key',
+ span: 8,
+ class: 'node-selector-label-name',
+ props: {
+ placeholder: t('project.node.expression_name_tips'),
+ maxLength: 256
+ },
+ validate: {
+ trigger: ['input', 'blur'],
+ required: true,
+ validator(validate: any, value: string) {
+ if (!value) {
+ return new Error(t('project.node.expression_name_tips'))
+ }
- const sameItems = model[field].filter(
- (item: { label: string }) => item.label ===
value
- )
+ const sameItems = model[field].filter(
+ (item: { label: string }) => item.label === value
+ )
- if (sameItems.length > 1) {
- return new
Error(t('project.node.label_repeat'))
- }
- }
- }
- },
- {
- type: 'select',
- field: 'operator',
- span: 4,
- options: OPERATOR_LIST,
- value: 'In',
- },
- {
- type: 'input',
- field: 'values',
- span: 10,
- class: 'node-selector-label-value',
- props: {
- placeholder: t('project.node.expression_value_tips'),
- maxLength: 256,
- disabled: false
- }
- }
- ]
+ if (sameItems.length > 1) {
+ return new Error(t('project.node.label_repeat'))
+ }
+ }
+ }
+ },
+ {
+ type: 'select',
+ field: 'operator',
+ span: 4,
+ options: OPERATOR_LIST,
+ value: 'In'
+ },
+ {
+ type: 'input',
+ field: 'values',
+ span: 10,
+ class: 'node-selector-label-value',
+ props: {
+ placeholder: t('project.node.expression_value_tips'),
+ maxLength: 256,
+ disabled: false
+ }
}
- ]
+ ]
+ }
+ ]
}
export const OPERATOR_LIST = [
- {
- value: 'In',
- label: 'In'
- },
- {
- value: 'NotIn',
- label: 'NotIn'
- },
- {
- value: 'Exists',
- label: 'Exists'
- },
- {
- value: 'DoesNotExist',
- label: 'DoesNotExist'
- },
- {
- value: 'Gt',
- label: 'Gt'
- },
- {
- value: 'Lt',
- label: 'Lt'
- }
-]
\ No newline at end of file
+ {
+ value: 'In',
+ label: 'In'
+ },
+ {
+ value: 'NotIn',
+ label: 'NotIn'
+ },
+ {
+ value: 'Exists',
+ label: 'Exists'
+ },
+ {
+ value: 'DoesNotExist',
+ label: 'DoesNotExist'
+ },
+ {
+ value: 'Gt',
+ label: 'Gt'
+ },
+ {
+ value: 'Lt',
+ label: 'Lt'
+ }
+]
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
index 7ada37d22e..4c27d34b86 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
+++
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
@@ -15,9 +15,38 @@
* limitations under the License.
*/
-.task-item {
- cursor: pointer;
- height: 20px;
- width: 100px;
- border: 1px solid #1890ff;
-}
\ No newline at end of file
+.sidebar {
+}
+
+.draggable {
+ color: #000;
+ border: 1px solid #00000040;
+ display: flex;
+ align-items: center;
+ width: 130px;
+ justify-content: space-around;
+ border-radius: 5px;
+ height: 30px;
+ margin-bottom: 10px;
+ margin-right: 20px;
+}
+.fav {
+ width: 18px;
+ height: 18px;
+}
+
+.draggable {
+ &:hover {
+ color: blue;
+ border: 1px dashed blue;
+ background-color: #fff;
+ }
+}
+
+.sidebar-icon {
+ display: block;
+ width: 18px;
+ height: 18px;
+ background-size: 100% 100%;
+ background-color: #fafafa;
+}
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
index 4cd3176044..75be348344 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
+++
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
@@ -18,6 +18,8 @@
import { defineComponent, onMounted, toRefs } from 'vue'
import { useSidebar } from './use-sidebar'
import styles from './dag-sidebar.module.scss'
+import { NEllipsis, NIcon } from 'naive-ui'
+import { StarFilled, StarOutlined } from '@vicons/antd'
const DagSidebar = defineComponent({
name: 'DagSidebar',
@@ -29,26 +31,54 @@ const DagSidebar = defineComponent({
context.emit('Dragstart', task)
}
+ const handleCollection = () => {}
+
onMounted(() => {
getTaskList()
})
return {
...toRefs(variables),
- handleDragstart
+ handleDragstart,
+ handleCollection
}
},
render() {
return (
- <div>
+ <div class={styles.sidebar}>
{this.taskList.map((task: any) => {
return (
<div
- class={styles['task-item']}
+ class={styles['draggable']}
draggable='true'
onDragstart={() => this.handleDragstart(task)}
>
- {task.name}
+ <em
+ class={styles['sidebar-icon']}
+ style={{ backgroundImage: task.icon }}
+ ></em>
+ <NEllipsis style={{ width: '60px' }}>{task.name}</NEllipsis>
+ <div
+ class={styles.stars}
+ onMouseenter={() => {
+ task.starHover = true
+ }}
+ onMouseleave={() => {
+ task.starHover = false
+ }}
+ onClick={() => this.handleCollection()}
+ >
+ <div class={styles.fav}>
+ <NIcon
+ size='18'
+ color={
+ task.collection || task.starHover ? '#288FFF' : '#ccc'
+ }
+ >
+ {task.collection ? <StarFilled /> : <StarOutlined />}
+ </NIcon>
+ </div>
+ </div>
</div>
)
})}
