From db8227f89fc1bb52c6fbca22474c9fc224c4ffc8 Mon Sep 17 00:00:00 2001 From: Rahul Jain Date: Thu, 7 Apr 2022 18:03:32 +0530 Subject: [PATCH] Layout Fixes (#1280) * message changed * seq hor tooltip implement * Fixed * Fixed * Fixed --- src/hoc/charts/d3/sunburst/Sunburst.js | 9 +-- .../{ => legend}/SequenceHorizontal.js | 24 +++---- src/hoc/charts/d3/sunburst/legend/style.css | 8 +++ src/hoc/charts/d3/sunburst/style.css | 8 +++ .../charts/d3/sunburst/sunburst-styling.js | 18 ------ src/hoc/datagrid/MexFilterBar.js | 37 +++++++---- src/hoc/filter/SearchFilter.js | 6 +- src/hoc/mexui/IconButton.js | 5 +- src/hoc/mexui/Picker.js | 17 +++-- src/hoc/mexui/select/Select.js | 25 ++++---- src/hoc/mexui/select/style.css | 8 --- src/hoc/selectMenu/SelectMenu.js | 15 +++-- src/hoc/selectMenu/style.css | 8 --- src/pages/main/dashboard/control/ShowMore.js | 2 +- .../main/dashboard/control/styles/style.css | 2 +- src/pages/main/events/auditLog/LeftView.js | 4 +- .../main/events/auditLog/ServerFilter.js | 20 ++---- .../main/events/helper/toolbar/Toolbar.js | 64 +++++++++---------- .../main/events/helper/toolbar/style.css | 5 +- src/pages/main/monitoring/dme/DMEToolbar.js | 62 +++++++----------- src/pages/main/reporter/Generator.js | 33 +++------- src/pages/main/reporter/Reporter.js | 2 +- .../main/userSetting/preferences/LogsPref.js | 1 - 23 files changed, 160 insertions(+), 223 deletions(-) rename src/hoc/charts/d3/sunburst/{ => legend}/SequenceHorizontal.js (76%) create mode 100644 src/hoc/charts/d3/sunburst/legend/style.css create mode 100644 src/hoc/charts/d3/sunburst/style.css delete mode 100644 src/hoc/charts/d3/sunburst/sunburst-styling.js delete mode 100644 src/hoc/mexui/select/style.css delete mode 100644 src/hoc/selectMenu/style.css diff --git a/src/hoc/charts/d3/sunburst/Sunburst.js b/src/hoc/charts/d3/sunburst/Sunburst.js index 8c5c672886..d45dc631ef 100644 --- a/src/hoc/charts/d3/sunburst/Sunburst.js +++ b/src/hoc/charts/d3/sunburst/Sunburst.js @@ -1,7 +1,8 @@ import React, { useEffect, useRef, useState } from 'react'; import * as d3 from 'd3'; -import SequenceHorizontal from './SequenceHorizontal' +import SequenceHorizontal from './legend/SequenceHorizontal' import { uniqueId } from '../../../../helper/constant/shared'; +import './style.css' const width = 732; const radius = width / 6.5 @@ -269,9 +270,9 @@ const Sunburst = (props) => { } return ( -
-
-
+
+
+
diff --git a/src/hoc/charts/d3/sunburst/SequenceHorizontal.js b/src/hoc/charts/d3/sunburst/legend/SequenceHorizontal.js similarity index 76% rename from src/hoc/charts/d3/sunburst/SequenceHorizontal.js rename to src/hoc/charts/d3/sunburst/legend/SequenceHorizontal.js index 6c470e792f..72db2afbad 100644 --- a/src/hoc/charts/d3/sunburst/SequenceHorizontal.js +++ b/src/hoc/charts/d3/sunburst/legend/SequenceHorizontal.js @@ -1,5 +1,6 @@ import React from 'react'; import * as d3 from 'd3'; +import './style.css' const b = { w: 115, h: 30, s: 3, t: 10 }; @@ -33,20 +34,15 @@ class SequenceHorizontal extends React.Component { draw = (data) => { const { colors, onClick } = this.props + var svg = d3.select(this.shRef.current) .append('svg') .attr("width", data.length * 135) .attr("height", 50) - var tooltip = d3.select(this.shRef.current) + var tooltip = d3.select('body') .append("div") - .style("position", "absolute") - .style("visibility", "hidden") - .style("background-color", "white") - .style("border", "solid") - .style("border-width", "1px") - .style("border-radius", "5px") - .style("padding", "10px") + .attr('class', 'sequence-horizontal-tooltip') var g = svg .selectAll("g") @@ -72,19 +68,17 @@ class SequenceHorizontal extends React.Component { entering.attr("transform", function (d, i) { return "translate(" + i * (b.w + b.s) + ", 0)"; }); - + entering.on("mouseover", (e, d) => { tooltip.html(() => { let g = '
' g = g + `

${d?.data?.name}

` g = g + '
' return g - }); - - tooltip.style("visibility", "visible"); + }).style("opacity", 1); }) - .on("mousemove", (e, d) => { return tooltip.style("top", (e.pageY - 870) + "px").style("left", (e.pageX - 250) + "px"); }) - .on("mouseout", (e, d) => { return tooltip.style("visibility", "hidden"); }); + .on("mousemove", (e, d) => { return tooltip.style("top", `${e.clientY + 10}px`).style("left", `${e.clientX + 10}px`) }) + .on("mouseout", (e, d) => { return tooltip.style("opacity", 0); }); if (onClick) { entering.style("cursor", "pointer").on('click', onClick) @@ -96,7 +90,7 @@ class SequenceHorizontal extends React.Component { render() { return ( -
+
); } diff --git a/src/hoc/charts/d3/sunburst/legend/style.css b/src/hoc/charts/d3/sunburst/legend/style.css new file mode 100644 index 0000000000..9b4d693907 --- /dev/null +++ b/src/hoc/charts/d3/sunburst/legend/style.css @@ -0,0 +1,8 @@ +.sequence-horizontal-tooltip { + position: absolute; + background-color: white; + border: 1px solid white; + padding: 10px; + border-radius: 5px; + opacity: 0; +} \ No newline at end of file diff --git a/src/hoc/charts/d3/sunburst/style.css b/src/hoc/charts/d3/sunburst/style.css new file mode 100644 index 0000000000..8aaf5e5562 --- /dev/null +++ b/src/hoc/charts/d3/sunburst/style.css @@ -0,0 +1,8 @@ +.sunburst .main .chart { + position: relative; + width: 95%; +} + +.sunburst .main .sequence { + padding: 0px 10px 0px 20px; +} \ No newline at end of file diff --git a/src/hoc/charts/d3/sunburst/sunburst-styling.js b/src/hoc/charts/d3/sunburst/sunburst-styling.js deleted file mode 100644 index 1317f28294..0000000000 --- a/src/hoc/charts/d3/sunburst/sunburst-styling.js +++ /dev/null @@ -1,18 +0,0 @@ -import { makeStyles } from "@material-ui/core"; - -export const useStyles = makeStyles({ - action: { - position: 'absolute', - left: '50%', - top: '57%', - transform: 'translate(-50%, -30%)' - }, - tooltipBtn: { - textTransform: 'none', - color: 'white', - visibility: props => props.btnVisibility ? 'visible' : 'hidden', - '&:hover': { - backgroundColor: "#6E6F73" - } - } -}); \ No newline at end of file diff --git a/src/hoc/datagrid/MexFilterBar.js b/src/hoc/datagrid/MexFilterBar.js index 0158880f22..ca012fe29f 100644 --- a/src/hoc/datagrid/MexFilterBar.js +++ b/src/hoc/datagrid/MexFilterBar.js @@ -4,19 +4,22 @@ import cloneDeep from 'lodash/cloneDeep'; import clsx from 'clsx'; import React from 'react' import { Icon } from '../mexui'; -import { ICON_COLOR } from '../../helper/constant/colors'; const useStyles = makeStyles((theme) => ({ root: { - display: 'inline-flex', + display: 'flex', alignItems: 'center', - justifyContent:'center', marginLeft: 15, + marginTop:5, + gap: 10 + }, + content: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', cursor: 'pointer', - textAlign: 'center', padding: 5, borderRadius: 5, - marginTop: 5, '&:hover': { backgroundColor: 'rgba(56, 142, 60, 0.2)', } @@ -24,8 +27,12 @@ const useStyles = makeStyles((theme) => ({ clicked: { backgroundColor: 'rgba(56, 142, 60, 0.2)', }, - text:{ - marginLeft: 6 + text: { + marginLeft: 6, + lineHeight:2 + }, + empty:{ + height:35 } })); @@ -41,13 +48,15 @@ const IconBar = (props) => { } return ( - keys ? keys.map((key, i) => { - const isSVG = key.icon.includes('.svg') - return (
{ onChange(i, key) }}> - {isSVG ? : {key.icon}} - {`${key.label}: ${key.count}`} -
) - }) : null +
+ {keys ? keys.map((key, i) => { + const isSVG = key.icon.includes('.svg') + return (key?.count ?
{ onChange(i, key) }}> + {isSVG ? : {key.icon}} + {`${key.label}: ${key.count}`} +
:
) + }) : null} +
) } export default IconBar \ No newline at end of file diff --git a/src/hoc/filter/SearchFilter.js b/src/hoc/filter/SearchFilter.js index 8dd8a56be3..d4d0c980e0 100644 --- a/src/hoc/filter/SearchFilter.js +++ b/src/hoc/filter/SearchFilter.js @@ -61,13 +61,11 @@ class SearchFilter extends React.Component { render() { const { focused } = this.state - const { classes, compact, style, clear } = this.props; - const inputStyle = focused ? { ...style, marginTop: 0 } : style + const { classes, compact, clear } = this.props; return ( { this.setState({ focused: true }) diff --git a/src/hoc/mexui/IconButton.js b/src/hoc/mexui/IconButton.js index 5f22d9920e..9417ae8564 100644 --- a/src/hoc/mexui/IconButton.js +++ b/src/hoc/mexui/IconButton.js @@ -28,14 +28,15 @@ const useStyles = makeStyles((theme) => ({ export default function IconButton(props) { const classes = useStyles(); - const { id, tooltip, disabled, style, loading, onClick, children, inline, className, onMouseOver, onMouseOut } = props + const { id, size, tooltip, disabled, style, loading, onClick, children, inline, className, onMouseOver, onMouseOut } = props return (
- {tooltip} : ''}> + {tooltip} : ''} arrow> { return ( - {rangeLabel(value, relativeRange)}} arrow> - - + {rangeLabel(value, relativeRange)}} onClick={handleClick} style={{ backgroundColor: 'transparent', border: `1px solid ${color ?? 'rgba(118, 255, 3, 0.7)'}`, borderRadius: 5, padding: 3 }}> +
+ access_time + {relativeRange.label} + keyboard_arrow_down +
+ ({ - formControl: props => ({ - width: props.width ? props.width : 100, - }), selectEmpty: { marginTop: theme.spacing(1), }, @@ -45,6 +41,7 @@ const useStyles = makeStyles((theme) => ({ export default function Select(props) { const classes = useStyles(props); + const { title } = props const [anchorEl, setAnchorEl] = React.useState(null) const [value, setValue] = React.useState(props.value ? props.value : ''); const [list, setList] = React.useState(props.list) @@ -65,7 +62,7 @@ export default function Select(props) { } const toUpper = (value) => { - return props.upper ? toFirstUpperCase(value) : value + return title ? toFirstUpperCase(value) : value } const renderRow = (virtualProps) => { @@ -78,11 +75,10 @@ export default function Select(props) { const selectLabel = () => { const { placeholder } = props - return value ? toUpper(value) : placeholder ? placeholder : '' + return value ? toUpper(value) : placeholder ?? '' } const color = { color: props.color ? props.color : '#CECECE' } - const border = { border: props.border ? `1px solid ${color.color}` : 'none', borderRadius: 5, paddingLeft: 5, paddingRight: 5, height: 25 } return (
@@ -90,13 +86,14 @@ export default function Select(props) { {props.label ? {props.label} : null} -
{ setAnchorEl(e.currentTarget) }}> - +
{ setAnchorEl(e.currentTarget) }}> +
- {props.border ? {selectLabel()} : {selectLabel()}} + {{selectLabel()}} - - + keyboard_arrow_down +
+
{ const { labelKey, dataList } = props @@ -19,11 +18,15 @@ const SelectMenu = (props) => { const { tip, icon, placeholder, header, color, labelWidth, clear } = props return ( icon ? icon : -
+
{header ? {header}: : null} - {value ? value : placeholder} - - {clear ? : null } + + {value ? value : placeholder} + +
+ keyboard_arrow_down + {clear ? clear : null} +
) diff --git a/src/hoc/selectMenu/style.css b/src/hoc/selectMenu/style.css deleted file mode 100644 index e7cae4c02a..0000000000 --- a/src/hoc/selectMenu/style.css +++ /dev/null @@ -1,8 +0,0 @@ -.select-menu-label { - color: #FFF; - font-size: 12px; -} - -.select-menu-label-icon { - color: #FFF; -} \ No newline at end of file diff --git a/src/pages/main/dashboard/control/ShowMore.js b/src/pages/main/dashboard/control/ShowMore.js index a02bce0d8c..590087dd3c 100644 --- a/src/pages/main/dashboard/control/ShowMore.js +++ b/src/pages/main/dashboard/control/ShowMore.js @@ -78,7 +78,7 @@ const ShowMore = (props) => { {resources ?
-
: +
: } diff --git a/src/pages/main/dashboard/control/styles/style.css b/src/pages/main/dashboard/control/styles/style.css index a50ec0453f..b924b26cca 100644 --- a/src/pages/main/dashboard/control/styles/style.css +++ b/src/pages/main/dashboard/control/styles/style.css @@ -1,6 +1,6 @@ .dashboard { --marginBottom:2px; - min-width: 900px; + min-width: 1200px; min-height: 560px; overflow: hidden; box-sizing: border-box; diff --git a/src/pages/main/events/auditLog/LeftView.js b/src/pages/main/events/auditLog/LeftView.js index f1bac0d5cf..abbae2b972 100644 --- a/src/pages/main/events/auditLog/LeftView.js +++ b/src/pages/main/events/auditLog/LeftView.js @@ -235,9 +235,7 @@ class AuditLogView extends Component { return ( - - - +
{dataList.length > 0 ? diff --git a/src/pages/main/events/auditLog/ServerFilter.js b/src/pages/main/events/auditLog/ServerFilter.js index 9e32bd9f7b..27a2660d36 100644 --- a/src/pages/main/events/auditLog/ServerFilter.js +++ b/src/pages/main/events/auditLog/ServerFilter.js @@ -11,7 +11,6 @@ import { redux_org } from '../../../../helper/reduxData'; import { localFields } from '../../../../services/fields'; import SelectMenu from '../../../../hoc/selectMenu/SelectMenu'; import { fetchObject, storeObject } from '../../../../helper/ls'; -import { filterData } from '../../../../constant'; import { alertInfo } from '../../../../actions'; import { useDispatch } from 'react-redux'; import { uniqueId } from '../../../../helper/constant/shared'; @@ -135,18 +134,9 @@ const Filter = (props) => { setState(false) } - // const renderTooltip=()=>{ - // return ( - //
- //

{time(FORMAT_FULL_DATE_TIME, range.from)} to {time(FORMAT_FULL_DATE_TIME, range.to)}

- //

Limit: {limit}

- //
- // ) - // } - return ( - filter_list + filter_list
@@ -167,9 +157,9 @@ const Filter = (props) => { Limit +
-
@@ -184,9 +174,9 @@ const Filter = (props) => {
{ redux_org.isAdmin(orgInfo) && props.orgList ? -
- -
: null +
+ +
: null }
diff --git a/src/pages/main/events/helper/toolbar/Toolbar.js b/src/pages/main/events/helper/toolbar/Toolbar.js index f3112999b3..0aa14eb67b 100644 --- a/src/pages/main/events/helper/toolbar/Toolbar.js +++ b/src/pages/main/events/helper/toolbar/Toolbar.js @@ -1,5 +1,5 @@ import React, { useEffect } from 'react' -import { Box, Typography, Card, LinearProgress } from '@material-ui/core'; +import { Box, Typography, Card } from '@material-ui/core'; import Help from '../Help' import { lightGreen } from '@material-ui/core/colors'; import CloseIcon from '@material-ui/icons/Close'; @@ -11,8 +11,9 @@ import { useSelector } from 'react-redux'; import { redux_org } from '../../../../../helper/reduxData'; import { localFields } from '../../../../../services/fields'; import SelectMenu from '../../../../../hoc/selectMenu/SelectMenu'; -import './style.css' import { ICON_COLOR } from '../../../../../helper/constant/colors'; +import LinearProgress from '../../../../../hoc/loader/LinearProgress'; +import './style.css' export const ACION_SEARCH = 0 export const ACTION_PICKER = 1 @@ -30,7 +31,7 @@ const LeftView = (props) => { const { onChange, loading, orgList, header, tip, children, filter } = props const orgInfo = useSelector(state => state.organizationInfo.data) const searchfilter = React.useRef(null) - const [range, setRange] = React.useState(filter && filter.range ? filter.range : undefined) + const [range, setRange] = React.useState(filter?.range) const onPickerChange = (range) => { setRange(range) @@ -38,52 +39,49 @@ const LeftView = (props) => { } useEffect(() => { - setRange(filter && filter.range ? filter.range : undefined) - }, [filter]); + setRange(filter?.range) + }, [filter?.range]); return ( {loading ? : null} - + book - {children} - - { - redux_org.isAdmin(orgInfo) && orgList ? -
- onChange(ACTION_ORG, value)} /> -
: null - } - - - - - { onChange(ACION_SEARCH, value) }} ref={searchfilter} compact={true} style={{ marginTop: 7, marginLeft: 8 }} /> - - - { onChange(ACTION_REFRESH) }}> - refresh - - - {tip ? - - : null} - - { onChange(ACTION_CLOSE) }}> - - +
+ {children} + { + redux_org.isAdmin(orgInfo) && orgList ? +
+ onChange(ACTION_ORG, value)} /> +
: null + } + + +
+ { onChange(ACION_SEARCH, value) }} ref={searchfilter} compact={true} /> + { onChange(ACTION_REFRESH) }}> + refresh + + {tip ? : null} + + + { onChange(ACTION_CLOSE) }}> + + + +
) - + } export default LeftView \ No newline at end of file diff --git a/src/pages/main/events/helper/toolbar/style.css b/src/pages/main/events/helper/toolbar/style.css index 434345f44b..057b9524ac 100644 --- a/src/pages/main/events/helper/toolbar/style.css +++ b/src/pages/main/events/helper/toolbar/style.css @@ -1,7 +1,6 @@ .calendar-dropdown-select { - min-width: 100px; - display:inline-block; border-radius: 5px; border:1px solid rgba(118, 255, 3, 0.7); - padding:0.15em; + margin-right: 15px; + padding:3px; } \ No newline at end of file diff --git a/src/pages/main/monitoring/dme/DMEToolbar.js b/src/pages/main/monitoring/dme/DMEToolbar.js index 31ea29fb5e..3e5b69151c 100644 --- a/src/pages/main/monitoring/dme/DMEToolbar.js +++ b/src/pages/main/monitoring/dme/DMEToolbar.js @@ -9,51 +9,31 @@ export const ACTION_CLOSE = 'Close' export const ACTION_PICKER = 'Picker' const DataType = (props) => { - const {order} = props const dataTypeList = ['avg', 'min', 'max'] const onChange = (value) => { props.onChange(ACTION_DATA_TYPE, value) } - + return ( - - +
+ ) } -const LatencyRange = (props) =>{ - const {order} = props - const dataTypeList = ['> 0ms', '> 5ms', '> 10ms', '> 25ms', '> 50ms', '> 100ms'] +const LatencyRange = (props) => { + const dataTypeList = ['\u003E 0ms', '\u003E 5ms', '\u003E 10ms', '\u003E 25ms', '\u003E 50ms', '\u003E 100ms'] const onChange = (value) => { props.onChange(ACTION_LATENCY_RANGE, value) } - - return ( - - +
) } @@ -63,16 +43,18 @@ const DMEToolbar = (props) => {
- - {csvData ? - - - - : null - } - - - +
+ { props.onChange(ACTION_PICKER, value) }} relativemax={6}/> + + + {csvData ? + + + + : null + } + {props.onChange(ACTION_CLOSE)}}>close +
diff --git a/src/pages/main/reporter/Generator.js b/src/pages/main/reporter/Generator.js index 8fc56f8d81..af02479a68 100644 --- a/src/pages/main/reporter/Generator.js +++ b/src/pages/main/reporter/Generator.js @@ -67,35 +67,18 @@ class Generator extends React.Component { render() { const { loading, org } = this.state const { orgList } = this.props - const gridLength = redux_org.isAdmin(this) ? 1 : 2 - const xl = gridLength + (redux_org.isAdmin(this) ? 1 : 0) - const lg = gridLength + 1 - const md = gridLength + 1 - const sm = gridLength + 1 - const xs = gridLength return ( - Custom Report - - - - - - - - - { - redux_org.isAdmin(this) ? - - : null } - - - - + +
) } diff --git a/src/pages/main/reporter/Reporter.js b/src/pages/main/reporter/Reporter.js index cda3701329..9e85aa000a 100644 --- a/src/pages/main/reporter/Reporter.js +++ b/src/pages/main/reporter/Reporter.js @@ -67,7 +67,7 @@ class Reporter extends React.Component { toolbarAction = () => { return ( - { this.updateState({ open: true }) }}> + { this.updateState({ open: true }) }}> ) } diff --git a/src/pages/main/userSetting/preferences/LogsPref.js b/src/pages/main/userSetting/preferences/LogsPref.js index 927c864b1c..289aa96b26 100644 --- a/src/pages/main/userSetting/preferences/LogsPref.js +++ b/src/pages/main/userSetting/preferences/LogsPref.js @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react' import MexForms, { SWITCH } from '../../../../hoc/forms/MexForms' -import { Icon } from '../../../../hoc/mexui' import { PREF_LOGS } from '../../../../utils/sharedPreferences_util' const LogsPref = (props) => {