From 6563d0f435c207672585f049916ca182eff7b65a Mon Sep 17 00:00:00 2001 From: Sayan Mondal Date: Mon, 24 May 2021 15:49:48 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Making=20Graph=20Visualization?= =?UTF-8?q?=20Green=20+=20Fixing=20Editor=20UI=20(#2833)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Sayan Mondal --- .../src/components/YamlEditor/Editor.tsx | 224 +++++++++--------- .../src/components/YamlEditor/styles.ts | 34 +-- .../ChooseAWorkflowAgent/index.tsx | 6 +- .../TuneWorkflow/WorkflowPreview/index.tsx | 12 +- .../TuneWorkflow/WorkflowPreview/styles.ts | 16 +- .../CreateWorkflow/TuneWorkflow/index.tsx | 4 +- .../CreateWorkflow/TuneWorkflow/styles.ts | 5 + 7 files changed, 138 insertions(+), 163 deletions(-) diff --git a/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx b/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx index 485eab335..4b555b6fe 100644 --- a/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx +++ b/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx @@ -13,7 +13,11 @@ import SelectAllTwoToneIcon from '@material-ui/icons/SelectAllTwoTone'; import UndoTwoToneIcon from '@material-ui/icons/UndoTwoTone'; import UnfoldLessTwoToneIcon from '@material-ui/icons/UnfoldLessTwoTone'; import UnfoldMoreTwoToneIcon from '@material-ui/icons/UnfoldMoreTwoTone'; +import React, { useEffect, useState } from 'react'; import AceEditor from 'react-ace'; +import { useTranslation } from 'react-i18next'; +import useStyles from './styles'; +import { AceValidations, parseYamlValidations } from './Validations'; import 'ace-builds/src-min-noconflict/ext-beautify'; import 'ace-builds/src-min-noconflict/ext-code_lens'; import 'ace-builds/src-min-noconflict/ext-elastic_tabstops_lite'; @@ -36,10 +40,6 @@ import 'ace-builds/src-min-noconflict/ext-themelist'; import 'ace-builds/src-min-noconflict/ext-whitespace'; import 'brace/mode/yaml'; import 'brace/theme/cobalt'; -import React, { useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import useStyles from './styles'; -import { AceValidations, parseYamlValidations } from './Validations'; interface YamlEditorProps { content: string; @@ -47,6 +47,7 @@ interface YamlEditorProps { readOnly: boolean; setButtonState?: (btnState: boolean) => void; saveWorkflowChange?: (updatedManifest: string) => void; + className?: Object; } const YamlEditor: React.FC = ({ @@ -55,6 +56,7 @@ const YamlEditor: React.FC = ({ readOnly, setButtonState, saveWorkflowChange, + className, }) => { const classes = useStyles(); const { palette } = useTheme(); @@ -232,7 +234,7 @@ const YamlEditor: React.FC = ({ return (
@@ -439,121 +441,111 @@ const YamlEditor: React.FC = ({
)} -
- - + { + editor.setReadOnly(readOnly); + editor.setOptions({ + fontFamily: 'monospace', + highlightGutterLine: false, + autoScrollEditorIntoView: true, + tooltipFollowsMouse: true, + displayIndentGuides: false, + }); + editor.focus(); + editor.setHighlightSelectedWord(true); + editor.session.setFoldStyle('markbeginend'); + editor.setShowFoldWidgets(true); + editor.setAnimatedScroll(true); + editor.setShowInvisibles(false); + editor.setFontSize('0.98rem'); + editor.container.style.background = palette.common.black; + editor.container.style.lineHeight = '160%'; + const nodeStyle = (document.getElementsByClassName( + 'ace_gutter' + )[0] as any).style; + nodeStyle.color = palette.secondary.contrastText; + nodeStyle.borderRight = 0; + nodeStyle.background = palette.common.black; + }} + onCursorChange={(selection) => { + (YamlAce.current!.editor as any).setOptions({ + autoScrollEditorIntoView: true, + tooltipFollowsMouse: true, + }); + + const nodeStyleActiveList = document.getElementsByClassName( + 'ace_gutter-cell' + ); + for (let i = 0; i < nodeStyleActiveList.length; i += 1) { + (nodeStyleActiveList[i] as any).style.backgroundColor = + palette.common.black; + (nodeStyleActiveList[i] as any).style.color = + palette.secondary.contrastText; + } + + if ( + document.getElementsByClassName('ace_gutter-cell')[ + selection.cursor.row + ] as any + ) { + const nodeStyleActive = (document.getElementsByClassName( + 'ace_gutter-cell' + )[selection.cursor.row] as any).style; + nodeStyleActive.backgroundColor = palette.primary.main; + nodeStyleActive.color = palette.secondary.contrastText; + } + }} + annotations={editorState.annotations} + markers={editorState.markers} + /> + + - { - editor.setReadOnly(readOnly); - editor.setOptions({ - fontFamily: 'monospace', - highlightGutterLine: false, - autoScrollEditorIntoView: true, - tooltipFollowsMouse: true, - displayIndentGuides: false, - }); - editor.focus(); - editor.setHighlightSelectedWord(true); - editor.session.setFoldStyle('markbeginend'); - editor.setShowFoldWidgets(true); - editor.setAnimatedScroll(true); - editor.setShowInvisibles(false); - editor.setFontSize('0.98rem'); - editor.container.style.background = palette.common.black; - editor.container.style.lineHeight = '160%'; - const nodeStyle = (document.getElementsByClassName( - 'ace_gutter' - )[0] as any).style; - nodeStyle.color = palette.secondary.contrastText; - nodeStyle.borderRight = 0; - nodeStyle.background = palette.common.black; - }} - onCursorChange={(selection) => { - (YamlAce.current!.editor as any).setOptions({ - autoScrollEditorIntoView: true, - tooltipFollowsMouse: true, - }); - - const nodeStyleActiveList = document.getElementsByClassName( - 'ace_gutter-cell' - ); - for (let i = 0; i < nodeStyleActiveList.length; i += 1) { - (nodeStyleActiveList[i] as any).style.backgroundColor = - palette.common.black; - (nodeStyleActiveList[i] as any).style.color = - palette.secondary.contrastText; - } - - if ( - document.getElementsByClassName('ace_gutter-cell')[ - selection.cursor.row - ] as any - ) { - const nodeStyleActive = (document.getElementsByClassName( - 'ace_gutter-cell' - )[selection.cursor.row] as any).style; - nodeStyleActive.backgroundColor = palette.primary.main; - nodeStyleActive.color = palette.secondary.contrastText; - } - }} - annotations={editorState.annotations} - markers={editorState.markers} +
-
); }; diff --git a/litmus-portal/frontend/src/components/YamlEditor/styles.ts b/litmus-portal/frontend/src/components/YamlEditor/styles.ts index 21c1cdc7d..235b0f2b0 100644 --- a/litmus-portal/frontend/src/components/YamlEditor/styles.ts +++ b/litmus-portal/frontend/src/components/YamlEditor/styles.ts @@ -52,14 +52,11 @@ const useStyles = makeStyles((theme: Theme) => ({ justifyContent: 'space-between', }, - editorContainer: { - marginTop: theme.spacing(4), - }, + editor: { + overflowY: 'auto', + margin: theme.spacing(2, 0), + height: '40vh', - editorGrid: { - overflow: 'auto', - height: '50vh', - width: '100%', '&::-webkit-scrollbar': { width: '0.2em', }, @@ -69,28 +66,6 @@ const useStyles = makeStyles((theme: Theme) => ({ '&::-webkit-scrollbar-thumb': { backgroundColor: theme.palette.primary.main, }, - [theme.breakpoints.down('xl')]: { - height: '84vh', - }, - [theme.breakpoints.down('lg')]: { - height: '56vh', - }, - [theme.breakpoints.down('md')]: { - height: '49vh', - }, - - [theme.breakpoints.down('sm')]: { - height: '40vh', - }, - [theme.breakpoints.down('xs')]: { - height: '30vh', - }, - }, - - extraSpace: { - backgroundColor: theme.palette.common.black, - height: '2rem', - width: '100%', }, editorButtons: { @@ -257,6 +232,7 @@ const useStyles = makeStyles((theme: Theme) => ({ fullWidth: { width: '100%', + height: '100%', }, fullScreenIcon: { diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx index ce090d4ce..9ed54e5d0 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx +++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx @@ -9,20 +9,20 @@ import React, { } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; +import { constants } from '../../../constants'; import { GET_CLUSTER, GET_IMAGE_REGISTRY, LIST_IMAGE_REGISTRY, } from '../../../graphql'; +import { ImageRegistryInfo } from '../../../models/redux/image_registry'; import useActions from '../../../redux/actions'; import * as AlertActions from '../../../redux/actions/alert'; -import * as WorkflowActions from '../../../redux/actions/workflow'; import * as ImageRegistryActions from '../../../redux/actions/image_registry'; +import * as WorkflowActions from '../../../redux/actions/workflow'; import { RootState } from '../../../redux/reducers'; import { getProjectID, getProjectRole } from '../../../utils/getSearchParams'; import useStyles from './styles'; -import { ImageRegistryInfo } from '../../../models/redux/image_registry'; -import { constants } from '../../../constants'; interface Cluster { cluster_name: string; diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/index.tsx index ea07304d4..7eb15b47d 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/index.tsx +++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/index.tsx @@ -100,11 +100,11 @@ const WorkflowPreview: React.FC = ({ for (let j = 0; j < updatedSteps[i].length; j++) { data.nodes.push({ id: k.toString(), - class: `${'pending'} ${'steps'}`, + class: `${'succeeded'} ${'steps'}`, label: createLabel({ label: updatedSteps[i][j].name, tooltip: updatedSteps[i][j].name, - phase: 'pending', + phase: 'succeeded', horizontal, }), labelType: @@ -120,7 +120,7 @@ const WorkflowPreview: React.FC = ({ label: createLabel({ label: updatedSteps[i][0].name, tooltip: updatedSteps[i][0].name, - phase: 'pending', + phase: 'succeeded', horizontal, }), labelType: @@ -148,7 +148,7 @@ const WorkflowPreview: React.FC = ({ data.links.push({ source: nodeID.toString(), target: (nodeID + j + 1).toString(), - class: 'pending', + class: 'succeeded', config: { arrowhead: updatedSteps[i][0].name !== 'StepGroup' @@ -170,7 +170,7 @@ const WorkflowPreview: React.FC = ({ data.links.push({ source: (nodeID + j + 1).toString(), target: (nodeID + updatedSteps[i].length + 1).toString(), - class: 'pending', + class: 'succeeded', config: { arrowhead: updatedSteps[i][0].name !== 'StepGroup' @@ -191,7 +191,7 @@ const WorkflowPreview: React.FC = ({ data.links.push({ source: nodeID.toString(), target: (nodeID + 1).toString(), - class: 'pending', + class: 'succeeded', config: { arrowhead: updatedSteps[i][0].name !== 'StepGroup' ? 'undirected' : 'vee', diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/styles.ts index 2968bbae4..ae7b30ede 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/styles.ts +++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/styles.ts @@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({ cursor: 'pointer', fill: 'none', '& circle': { - fill: theme.palette.status.pending.text, + fill: theme.palette.status.completed.text, }, '& g.label g': { transform: (props: StyleProps) => @@ -31,20 +31,20 @@ const useStyles = makeStyles((theme: Theme) => ({ fill: theme.palette.text.primary, }, }, - '& path.pendingIcon': { + '& path.succeededIcon': { transform: (props: StyleProps) => - `scale(1.8) translate(-5px, ${props.horizontal ? -3.6 : -2.5}px)`, + `scale(1.8) translate(-5px, ${props.horizontal ? -3.6 : -1}px)`, }, - '& g.StepGroup.Pending': { - fill: theme.palette.status.pending.text, + '& g.StepGroup.Succeeded': { + fill: theme.palette.status.completed.text, }, }, // Styles for edges '& g g.edgePaths': { - '& g.pending': { - fill: theme.palette.status.pending.text, - stroke: theme.palette.status.pending.text, + '& g.succeeded': { + fill: theme.palette.status.completed.text, + stroke: theme.palette.status.completed.text, }, }, }, diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx index 2cdfcbf4d..798312533 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx +++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx @@ -593,7 +593,8 @@ const TuneWorkflow = forwardRef((_, ref) => { onClose={() => { setYAMLModal(false); }} - width="60%" + width="90%" + height="90%" modalActions={ { @@ -643,6 +644,7 @@ const TuneWorkflow = forwardRef((_, ref) => { { setYamlValid(btnState); diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts index 1665716c9..9a9d15716 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts +++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts @@ -151,6 +151,11 @@ const useStyles = makeStyles((theme) => ({ margin: theme.spacing(8, 5, 5, 5), }, + // Editor + editor: { + height: '100%', + }, + // Confirmation Modal confirmDiv: { margin: 'auto',