Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS and other bug fixes for 2.0 beta 1 #2535

Merged
merged 12 commits into from
Mar 13, 2021
Merged

CSS and other bug fixes for 2.0 beta 1 #2535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fdd200a
bug fixes for beta 1
ishangupta-ds Mar 12, 2021
07eefa8
modal bug fixes for beta 1
ishangupta-ds Mar 12, 2021
67ea470
Merge remote-tracking branch 'upstream/master' into beta-fix
ishangupta-ds Mar 12, 2021
d8c9b14
Reverting changed in lock file.
ishangupta-ds Mar 12, 2021
996da2f
Changes after review.
ishangupta-ds Mar 12, 2021
2a2f1d7
Minor fix
ishangupta-ds Mar 12, 2021
80ad3f4
Merge remote-tracking branch 'upstream/master' into beta-fix
ishangupta-ds Mar 12, 2021
91a3a32
Minor fix
ishangupta-ds Mar 12, 2021
4c3da95
Minor fix
ishangupta-ds Mar 13, 2021
f19fa39
Merge branch 'master' into beta-fix
imrajdas Mar 13, 2021
f9557d6
Minor fix
ishangupta-ds Mar 13, 2021
900b4f6
Merge branch 'beta-fix' of https://github.com/ishangupta-ds/litmus in…
ishangupta-ds Mar 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...portal/frontend/public/icons/addAgent.svg → ...al/frontend/public/icons/addDashboard.svg
View file
Open in desktop
File renamed without changes
5 changes: 3 additions & 2 deletions litmus-portal/frontend/public/locales/en/translation.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ quickActionCard:
quickSurvey: Take a quick survey
readDocs: Read the Litmus docs
readAPIDocs: Read the Litmus Portal API docs
addDashboard: Add a Dashboard
addDataSource: Add a Data Source
addAgent: Add an agent
connectNewAgent: Connect a new agent
Expand Down Expand Up @@ -207,7 +208,7 @@ analyticsDashboard:
overviewTabdataSourceTable: Connected Data Sources
applicationDashboard: Application Dashboards
connectedDataSources: Connected Data Sources
datasource: Data source
dataSource: Data sources
dataSourceTable:
tableHead1: Status
tableHead2: Data Source Name
Expand Down Expand Up @@ -845,4 +846,4 @@ customWorkflow:
viewYAML:
view: View the YAML here
backBtn:
back: Back
back: Back
2 changes: 1 addition & 1 deletion litmus-portal/frontend/src/components/BreadCrumbs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const CustomBreadcrumbs: React.FC<CustomBreadcrumbsProps> = ({ location }) => {
const classes = useStyles();

return (
<Breadcrumbs aria-label="breadcrumb">
<Breadcrumbs aria-label="breadcrumb" className={classes.marker}>
{pathname.map((path) => {
if (path) {
intermediateRoutes += path;
Expand Down
3 changes: 3 additions & 0 deletions litmus-portal/frontend/src/components/BreadCrumbs/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ const useStyles = makeStyles((theme: Theme) => ({
textDecoration: 'none',
color: theme.palette.text.primary,
},
marker: {
color: theme.palette.text.disabled,
},
}));

export default useStyles;
4 changes: 2 additions & 2 deletions litmus-portal/frontend/src/components/Button/BinarySwitch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const AntSwitch = withStyles((theme: Theme) =>
color: theme.palette.common.white,
'& + $track': {
opacity: 1,
backgroundColor: theme.palette.secondary.dark,
borderColor: theme.palette.secondary.dark,
backgroundColor: theme.palette.primary.main,
borderColor: theme.palette.primary.main,
},
},
},
Expand Down
9 changes: 9 additions & 0 deletions litmus-portal/frontend/src/components/CheckBox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Checkbox, withStyles } from '@material-ui/core';

const CheckBox = withStyles((theme) => ({
root: {
color: theme.palette.text.hint,
},
}))(Checkbox);

export default CheckBox;
4 changes: 2 additions & 2 deletions litmus-portal/frontend/src/components/InfoFilled/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@ const InfoFilledWrap: React.FC = () => {
statType: 'Total Experiments',
},
{
color: theme.palette.primary.dark,
color: theme.palette.secondary.main,
value: parseInt(communityData.google.operatorInstalls, 10),
statType: 'Operator Installed',
plus: true,
},
{
color: theme.palette.primary.light,
color: theme.palette.primary.main,
value: parseInt(communityData.google.totalRuns, 10),
statType: 'Total Experiment Runs',
plus: true,
Expand Down
2 changes: 1 addition & 1 deletion litmus-portal/frontend/src/components/InfoFilled/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const useStyles = makeStyles((theme) => ({
marginRight: theme.spacing(3),
borderRadius: 3,
[theme.breakpoints.down('sm')]: {
width: theme.spacing(40),
width: '15rem',
},
},
infoFilledWrap: {
Expand Down
14 changes: 7 additions & 7 deletions litmus-portal/frontend/src/components/WorkflowCard/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,16 @@ const useStyles = makeStyles((theme) => ({
margin: theme.spacing(1),
textAlign: 'center',
cursor: 'pointer',
border: `1px solid ${theme.palette.text.hint}`,
Copy link
Member

@whitetiger1399 whitetiger1399 Mar 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we replace px with some other relative unit at this place and other places also

Copy link
Member Author

@ishangupta-ds ishangupta-ds Mar 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes @whitetiger1399 , I have just fixed the colours as these components are being removed as part of the v2 redesign so increasing the number of changes with this, won't be of much use here. We may refactor the code while redesigning which is already in progress on a separate branch.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For border px is fine...you can change but it's fine...too small a thing... you won't notice it being responsive.

border: `1px solid ${theme.palette.border.main}`,
boxSizing: 'border-box',
'&:hover': {
border: `1px solid ${theme.palette.secondary.dark}`,
border: `1px solid ${theme.palette.primary.main}`,
boxShadow: `0px 4px 4px ${theme.palette.primary.light}`,
},
},

cardFocused: {
border: `1px solid ${theme.palette.secondary.dark}`,
border: `1px solid ${theme.palette.primary.main}`,
boxShadow: `0px 4px 4px ${theme.palette.primary.light}`,
},

Expand All @@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({
margin: '0 auto',
textAlign: 'center',
cursor: 'pointer',
border: `1px solid ${theme.palette.secondary.dark}`,
border: `1px solid ${theme.palette.primary.main}`,
boxSizing: 'border-box',
},

Expand Down Expand Up @@ -134,7 +134,7 @@ const useStyles = makeStyles((theme) => ({
},

totalRunsSelected: {
color: theme.palette.secondary.dark,
color: theme.palette.primary.main,
fontSize: '0.875rem',
fontWeight: 500,
marginTop: theme.spacing(0.375),
Expand All @@ -155,7 +155,7 @@ const useStyles = makeStyles((theme) => ({
},

expCountSelected: {
backgroundColor: theme.palette.secondary.dark,
backgroundColor: theme.palette.primary.main,
color: theme.palette.secondary.contrastText,
borderRadius: 3,
paddingTop: theme.spacing(0.275),
Expand All @@ -173,7 +173,7 @@ const useStyles = makeStyles((theme) => ({
},

moreDetails: {
color: theme.palette.primary.dark,
color: theme.palette.primary.main,
},

horizontalLine: {
Expand Down
2 changes: 2 additions & 0 deletions litmus-portal/frontend/src/components/WorkflowStepper/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
stepper: {
marginTop: theme.spacing(5),
paddingTop: theme.spacing(10),
},
backButton: {
marginRight: theme.spacing(1),
Expand All @@ -16,6 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({
flexDirection: 'row',
gap: '1rem',
marginLeft: '9%',
paddingBottom: theme.spacing(3),
},
yamlError: {
marginTop: theme.spacing(1.5),
Expand Down
55 changes: 28 additions & 27 deletions litmus-portal/frontend/src/components/YamlEditor/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
/* eslint-disable no-param-reassign */
import React, { useEffect, useState } from 'react';
import { Typography, Button, Box } from '@material-ui/core';
import { Box, Button, Typography, useTheme } from '@material-ui/core';
import Divider from '@material-ui/core/Divider';
import GetAppTwoToneIcon from '@material-ui/icons/GetAppTwoTone';
import Fade from '@material-ui/core/Fade';
import Tooltip from '@material-ui/core/Tooltip';
import ErrorTwoToneIcon from '@material-ui/icons/ErrorTwoTone';
import FileCopyTwoToneIcon from '@material-ui/icons/FileCopyTwoTone';
import FindInPageTwoToneIcon from '@material-ui/icons/FindInPageTwoTone';
import FindReplaceTwoToneIcon from '@material-ui/icons/FindReplaceTwoTone';
import UndoTwoToneIcon from '@material-ui/icons/UndoTwoTone';
import GetAppTwoToneIcon from '@material-ui/icons/GetAppTwoTone';
import RedoTwoToneIcon from '@material-ui/icons/RedoTwoTone';
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 SelectAllTwoToneIcon from '@material-ui/icons/SelectAllTwoTone';
import ErrorTwoToneIcon from '@material-ui/icons/ErrorTwoTone';
import Tooltip from '@material-ui/core/Tooltip';
import Fade from '@material-ui/core/Fade';
import AceEditor from 'react-ace';
import 'brace/mode/yaml';
import 'brace/theme/cobalt';
import 'ace-builds/src-min-noconflict/ext-searchbox';
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';
Expand All @@ -30,18 +26,22 @@ import 'ace-builds/src-min-noconflict/ext-modelist';
import 'ace-builds/src-min-noconflict/ext-options';
import 'ace-builds/src-min-noconflict/ext-prompt';
import 'ace-builds/src-min-noconflict/ext-rtl';
import 'ace-builds/src-min-noconflict/ext-searchbox';
import 'ace-builds/src-min-noconflict/ext-spellcheck';
import 'ace-builds/src-min-noconflict/ext-split';
import 'ace-builds/src-min-noconflict/ext-static_highlight';
import 'ace-builds/src-min-noconflict/ext-statusbar';
import 'ace-builds/src-min-noconflict/ext-textarea';
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 YAML from 'yaml';
import { AceValidations, parseYamlValidations } from './Validations';
import useStyles from './styles';
import useActions from '../../redux/actions';
import * as WorkflowActions from '../../redux/actions/workflow';
import useStyles from './styles';
import { AceValidations, parseYamlValidations } from './Validations';

interface YamlEditorProps {
id: string;
Expand All @@ -61,6 +61,7 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
readOnly,
}) => {
const classes = useStyles();
const { palette } = useTheme();

const workflow = useActions(WorkflowActions);

Expand Down Expand Up @@ -105,7 +106,7 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
'ace_gutter-cell'
)[stateObject.annotations[0].row - 1] as any).style;
nodeStyleError.background = 'red';
nodeStyleError.color = '#FFFFFF';
nodeStyleError.color = palette.secondary.contrastText;
} else {
setIsValid(true);
setErrors({
Expand All @@ -118,8 +119,10 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
'ace_gutter-cell'
);
for (let i = 0; i < nodeStyleErrorList.length; i += 1) {
(nodeStyleErrorList[i] as any).style.backgroundColor = '#1C1C1C';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kindly import colors from theme file if possible instead of hardcoded colors

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes will be with v2 redesigning.

Copy link
Member

@whitetiger1399 whitetiger1399 Mar 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we are making any change in the Hex then it can be from litmus theme itself now also as hard coded colors do not look good.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are two different colours in the editor right now, latest code is available on v2 branch

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change makes the colour uniform as was in the design before some breaking changes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use useTheme() to take the colors rom theme file

(nodeStyleErrorList[i] as any).style.color = 'rgba(255, 255, 255, 0.4)';
(nodeStyleErrorList[i] as any).style.backgroundColor =
palette.common.black;
(nodeStyleErrorList[i] as any).style.color =
palette.secondary.contrastText;
}
}
setModifiedYaml(value);
Expand Down Expand Up @@ -496,14 +499,14 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
editor.setAnimatedScroll(true);
editor.setShowInvisibles(false);
editor.setFontSize('0.98rem');
editor.container.style.background = '#1C1C1C';
editor.container.style.background = palette.common.black;
editor.container.style.lineHeight = '160%';
const nodeStyle = (document.getElementsByClassName(
'ace_gutter'
)[0] as any).style;
nodeStyle.color = 'rgba(255, 255, 255, 0.4)';
nodeStyle.color = palette.secondary.contrastText;
nodeStyle.borderRight = 0;
nodeStyle.background = '#1C1C1C';
nodeStyle.background = palette.common.black;
}}
onCursorChange={(selection) => {
(YamlAce.current!.editor as any).setOptions({
Expand All @@ -516,9 +519,9 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
);
for (let i = 0; i < nodeStyleActiveList.length; i += 1) {
(nodeStyleActiveList[i] as any).style.backgroundColor =
'#1C1C1C';
palette.common.black;
(nodeStyleActiveList[i] as any).style.color =
'rgba(255, 255, 255, 0.4)';
palette.secondary.contrastText;
}

if (
Expand All @@ -529,8 +532,8 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
const nodeStyleActive = (document.getElementsByClassName(
'ace_gutter-cell'
)[selection.cursor.row] as any).style;
nodeStyleActive.backgroundColor = '#5B44BA';
nodeStyleActive.color = '#FFFFFF';
nodeStyleActive.backgroundColor = palette.primary.main;
nodeStyleActive.color = palette.secondary.contrastText;
}
}}
annotations={editorState.annotations}
Expand All @@ -553,10 +556,8 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
<img
src="/icons/fullscreen.svg"
alt="Full Screen"
color="#FFFFFF"
width="25px"
height="25px"
margin-right="25px"
color={palette.secondary.contrastText}
className={classes.fullScreenIcon}
/>
}
/>
Expand Down
10 changes: 8 additions & 2 deletions litmus-portal/frontend/src/components/YamlEditor/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const useStyles = makeStyles((theme: Theme) => ({
webkitBoxShadow: `inset 0 0 6px ${theme.palette.common.black}`,
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.palette.secondary.dark,
backgroundColor: theme.palette.primary.main,
},
[theme.breakpoints.down('xl')]: {
height: '84vh',
Expand Down Expand Up @@ -259,11 +259,17 @@ const useStyles = makeStyles((theme: Theme) => ({
width: '100%',
},

fullScreenIcon: {
width: '1.5625rem',
height: '1.5625rem',
marginRight: '1.5625rem',
},

// Validations

validationError: {
position: 'absolute',
background: 'rgba(202, 44, 44, 0.2)',
background: theme.palette.error.light,
},
}));

Expand Down
1 change: 0 additions & 1 deletion litmus-portal/frontend/src/containers/app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,6 @@ const Routes: React.FC<RoutesProps> = ({ isOwner, isProjectAvailable }) => {
<Redirect exact path="/login" to="/" />
<Redirect exact path="/workflows/schedule" to="/workflows" />
<Redirect exact path="/workflows/template" to="/workflows" />
<Redirect exact path="/workflows/analytics" to="/workflows" />

<Redirect exact path="/analytics/overview" to="/analytics" />
<Redirect exact path="/analytics/litmusdashboard" to="/analytics" />
Expand Down
6 changes: 3 additions & 3 deletions litmus-portal/frontend/src/models/dashboardsData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export interface DashboardDetails {
panelGroups?: PanelGroupResponse[];
}

export interface ChaosEngineNamesAndNamespacesMap {
engineName: string;
engineNamespace: string;
export interface ChaosResultNamesAndNamespacesMap {
resultName: string;
resultNamespace: string;
workflowName: string;
}
10 changes: 7 additions & 3 deletions litmus-portal/frontend/src/pages/AnalyticsDashboards/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ const AnalyticsDashboard = () => {
label={t('analyticsDashboard.applicationDashboard')}
data-cy="kubernetesDashboard"
/>
<StyledTab
label={t('analyticsDashboard.dataSource')}
data-cy="data source"
/>
</Tabs>
</AppBar>

Expand All @@ -73,9 +77,9 @@ const AnalyticsDashboard = () => {
</TabPanel>
<TabPanel value={analyticsTabValue} index={2}>
<DashboardTable />
<div className={classes.dataSourceTable}>
<DataSourceTable />
</div>
</TabPanel>
<TabPanel value={analyticsTabValue} index={3}>
<DataSourceTable />
</TabPanel>
</Scaffold>
);
Expand Down
3 changes: 0 additions & 3 deletions litmus-portal/frontend/src/pages/AnalyticsDashboards/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@ const useStyles = makeStyles((theme) => ({
boxShadow: 'none',
paddingLeft: theme.spacing(1.5),
},
dataSourceTable: {
marginTop: theme.spacing(10),
},
}));

export default useStyles;
Loading