You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by zh...@apache.org on 2022/04/18 06:33:51 UTC
[dolphinscheduler] branch dev updated: [Fix][UI Next][V1.0.0-Beta] Fix the color matching problem of the relationship diagram. (#9546)
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 e190ef9d0d [Fix][UI Next][V1.0.0-Beta] Fix the color matching problem of the relationship diagram. (#9546)
e190ef9d0d is described below
commit e190ef9d0dee03e1a915062f7787489e5040e13f
Author: songjianet <17...@qq.com>
AuthorDate: Mon Apr 18 14:33:45 2022 +0800
[Fix][UI Next][V1.0.0-Beta] Fix the color matching problem of the relationship diagram. (#9546)
---
.../workflow/relation/components/Graph.tsx | 47 +++++--
.../security/alarm-instance-manage/detail.tsx | 156 ++++++++++-----------
2 files changed, 112 insertions(+), 91 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
index 40f1079045..64e150c568 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
@@ -47,9 +47,9 @@ const GraphChart = defineComponent({
const { t } = useI18n()
const legendData = [
- { name: t('project.workflow.online') },
- { name: t('project.workflow.workflow_offline') },
- { name: t('project.workflow.schedule_offline') }
+ { color: '#2D8DF0', name: t('project.workflow.online') },
+ { color: '#f37373', name: t('project.workflow.workflow_offline') },
+ { color: '#ba3e3e', name: t('project.workflow.schedule_offline') }
]
const getCategory = (schedulerStatus: number, workflowStatus: number) => {
@@ -100,11 +100,16 @@ const GraphChart = defineComponent({
`
}
},
- legend: [
- {
- data: legendData?.map((item) => item.name)
- }
- ],
+ legend: {
+ data: legendData?.map((item) => {
+ return {
+ name: item.name,
+ itemStyle: {
+ color: item.color
+ }
+ }
+ })
+ },
series: [
{
type: 'graph',
@@ -132,13 +137,26 @@ const GraphChart = defineComponent({
}
},
data: props.seriesData.map((item) => {
+ const category = getCategory(
+ Number(item.schedulePublishStatus),
+ Number(item.workFlowPublishStatus)
+ )
+ const itemStyle = {
+ color: ''
+ }
+
+ if (category === 1) {
+ itemStyle.color = '#f37373'
+ } else if (category === 2) {
+ itemStyle.color = '#ba3e3e'
+ } else if (category === 0) {
+ itemStyle.color = '#2D8DF0'
+ }
+
return {
name: item.name,
id: item.id,
- category: getCategory(
- Number(item.schedulePublishStatus),
- Number(item.workFlowPublishStatus)
- ),
+ category,
workFlowPublishStatus:
Number(item.workFlowPublishStatus) === 0
? t('project.workflow.offline')
@@ -151,7 +169,10 @@ const GraphChart = defineComponent({
scheduleStartTime: item.scheduleStartTime
? item.scheduleStartTime
: '-',
- scheduleEndTime: item.scheduleEndTime ? item.scheduleEndTime : '-'
+ scheduleEndTime: item.scheduleEndTime
+ ? item.scheduleEndTime
+ : '-',
+ itemStyle
}
}),
categories: legendData
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx
index 0b723d160b..30ec47b4fc 100644
--- a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx
@@ -81,26 +81,26 @@ const DetailModal = defineComponent({
const onChangePlugin = changePlugin
watch(
- () => props.show,
- async () => {
- props.show && props.currentRecord && setDetail(props.currentRecord)
- }
+ () => props.show,
+ async () => {
+ props.show && props.currentRecord && setDetail(props.currentRecord)
+ }
)
watch(
- () => state.json,
- () => {
- if (!state.json?.length) return
- state.json.forEach((item) => {
- const mergedItem = isFunction(item) ? item() : item
- mergedItem.name = t(
- 'security.alarm_instance' + '.' + mergedItem.field
- )
- })
- const { rules: fieldsRules, elements: fieldsElements } =
- getElementByJson(state.json, state.detailForm)
- rules.value = fieldsRules
- elements.value = fieldsElements
- }
+ () => state.json,
+ () => {
+ if (!state.json?.length) return
+ state.json.forEach((item) => {
+ const mergedItem = isFunction(item) ? item() : item
+ mergedItem.name = t(
+ 'security.alarm_instance' + '.' + mergedItem.field
+ )
+ })
+ const { rules: fieldsRules, elements: fieldsElements } =
+ getElementByJson(state.json, state.detailForm)
+ rules.value = fieldsRules
+ elements.value = fieldsElements
+ }
)
onMounted(() => {
@@ -137,66 +137,66 @@ const DetailModal = defineComponent({
} = this
const { currentRecord } = props
return (
- <Modal
- show={show}
- title={t(
- currentRecord?.id
- ? 'security.alarm_instance.edit_alarm_instance'
- : 'security.alarm_instance.create_alarm_instance'
- )}
- onConfirm={onSubmit}
- confirmLoading={saving || loading}
- onCancel={onCancel}
- >
- {{
- default: () => (
- <Form
- ref='detailFormRef'
- loading={loading || pluginsLoading}
- meta={{
- ...meta,
- rules: {
- ...meta.rules,
- ...rules
- },
- elements: [
- {
- path: 'instanceName',
- label: t('security.alarm_instance.alarm_instance_name'),
- widget: (
- <NInput
- v-model={[detailForm.instanceName, 'value']}
- placeholder={t(
- 'security.alarm_instance.alarm_instance_name_tips'
- )}
- />
- )
- },
- {
- path: 'pluginDefineId',
- label: t('security.alarm_instance.select_plugin'),
- widget: (
- <NSelect
- v-model={[detailForm.pluginDefineId, 'value']}
- options={uiPlugins}
- disabled={!!currentRecord?.id}
- placeholder={t(
- 'security.alarm_instance.select_plugin_tips'
- )}
- on-update:value={onChangePlugin}
- />
- )
- },
- ...elements
- ]
- }}
- layout={{
- cols: 24
- }}
- />
- )
- }}
- </Modal>
+ <Modal
+ show={show}
+ title={t(
+ currentRecord?.id
+ ? 'security.alarm_instance.edit_alarm_instance'
+ : 'security.alarm_instance.create_alarm_instance'
+ )}
+ onConfirm={onSubmit}
+ confirmLoading={saving || loading}
+ onCancel={onCancel}
+ >
+ {{
+ default: () => (
+ <Form
+ ref='detailFormRef'
+ loading={loading || pluginsLoading}
+ meta={{
+ ...meta,
+ rules: {
+ ...meta.rules,
+ ...rules
+ },
+ elements: [
+ {
+ path: 'instanceName',
+ label: t('security.alarm_instance.alarm_instance_name'),
+ widget: (
+ <NInput
+ v-model={[detailForm.instanceName, 'value']}
+ placeholder={t(
+ 'security.alarm_instance.alarm_instance_name_tips'
+ )}
+ />
+ )
+ },
+ {
+ path: 'pluginDefineId',
+ label: t('security.alarm_instance.select_plugin'),
+ widget: (
+ <NSelect
+ v-model={[detailForm.pluginDefineId, 'value']}
+ options={uiPlugins}
+ disabled={!!currentRecord?.id}
+ placeholder={t(
+ 'security.alarm_instance.select_plugin_tips'
+ )}
+ on-update:value={onChangePlugin}
+ />
+ )
+ },
+ ...elements
+ ]
+ }}
+ layout={{
+ cols: 24
+ }}
+ />
+ )
+ }}
+ </Modal>
)
}
})