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

Adjust styling of Dependencies page #3493

Merged
merged 2 commits into from
Dec 24, 2022
Merged

Adjust styling of Dependencies page #3493

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0071a9
Adjust styling of Dependencies page
tacigar Dec 23, 2022
d0eded1
Merge branch 'master' into adjust-dependencies-styling
tacigar Dec 23, 2022
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
169 changes: 71 additions & 98 deletions zipkin-lens/src/components/DependenciesPage/DependenciesGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright 2015-2020 The OpenZipkin Authors
* Copyright 2015-2022 The OpenZipkin Authors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
Expand All @@ -16,7 +16,6 @@

import {
Box,
Grid,
Theme,
createStyles,
makeStyles,
Expand All @@ -25,12 +24,10 @@ import {
import moment from 'moment';
import React, { CSSProperties, useState, useCallback, useMemo } from 'react';
import ReactSelect, { ValueType, ActionMeta } from 'react-select';
import { AutoSizer } from 'react-virtualized';

import Edge from './Edge';
import Dependencies from '../../models/Dependencies';
import NodeDetailData from './NodeDetailData';
import { Edge } from './types';
import VizceralWrapper from './VizceralWrapper';
import Dependencies from '../../models/Dependencies';

// These filter functions use any type because they are passed directly to untyped JS code.
const filterConnections = (object: any, value: any) => {
Expand Down Expand Up @@ -108,22 +105,10 @@ const reactSelectStyles = {

const useStyles = makeStyles((theme: Theme) =>
createStyles({
containerGrid: {
height: '100%',
},
graphItemGrid: {
height: '100%',
},
nodeDetailDataItemGrid: {
height: '100%',
boxShadow: theme.shadows[10],
zIndex: 1,
},
vizceralWrapper: {
// In Firefox, 100% height does not work...
'& .vizceral': {
height: '99%',
},
detailWrapper: {
flex: '0 0 420px',
width: 420,
borderLeft: `1px solid ${theme.palette.divider}`,
},
}),
);
Expand Down Expand Up @@ -238,82 +223,70 @@ const DependenciesGraph: React.FC<DependenciesGraphProps> = ({
);

return (
<Box width="100%" height="100%" data-testid="dependencies-graph">
<Grid container className={classes.containerGrid}>
<Grid
item
xs={focusedNodeName ? 7 : 12}
className={classes.graphItemGrid}
>
<AutoSizer>
Copy link
Member Author

Choose a reason for hiding this comment

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

We don't need to use AutoSizer in this case.
Sizing can be done only with CSS.

{({ width, height }) => (
<Box
width={width}
height={height}
position="relative"
className={classes.vizceralWrapper}
>
<VizceralWrapper
allowDraggingOfNodes
targetFramerate={30}
traffic={{
renderer: 'region',
layout: 'ltrTree',
name: 'dependencies-graph',
maxVolume: maxVolume * 50,
nodes,
connections: edges,
updated: createdTs,
}}
objectHighlighted={handleObjectHighlight}
styles={vizStyle}
key={
// Normally, when updating filters, Vizsceral will show and hide nodes without relaying
// them out. For a large dependency graph, this often won't let us see well the
// information about the filtered nodes, so we prefer to force a relayout any time we
// update the filter. Changing the key based on the filter like this causes react to
// destroy and reconstruct the component from scratch, which will have a layout zooming
// in on the filtered nodes.
filter
}
filters={[
{
name: 'shownConnections',
type: 'connection',
passes: filterConnections,
value: filter,
},
{
name: 'shownNodes',
type: 'node',
passes: filterNodes,
value: filter,
},
]}
/>
</Box>
)}
</AutoSizer>
<Box position="absolute" left={30} top={30}>
<ReactSelect
isClearable
options={filterOptions}
onChange={handleFilterChange}
value={!filter ? undefined : { value: filter, label: filter }}
styles={reactSelectStyles}
/>
</Box>
</Grid>
{focusedNodeName ? (
<Grid item xs={5} className={classes.nodeDetailDataItemGrid}>
<NodeDetailData
serviceName={focusedNodeName}
targetEdges={targetEdges}
sourceEdges={sourceEdges}
/>
</Grid>
) : null}
</Grid>
<Box
width="100%"
height="100%"
data-testid="dependencies-graph"
display="flex"
>
<Box flex="1 1" position="relative">
<VizceralWrapper
allowDraggingOfNodes
targetFramerate={30}
traffic={{
renderer: 'region',
layout: 'ltrTree',
name: 'dependencies-graph',
maxVolume: maxVolume * 50,
nodes,
connections: edges,
updated: createdTs,
}}
objectHighlighted={handleObjectHighlight}
styles={vizStyle}
key={
// Normally, when updating filters, Vizsceral will show and hide nodes without relaying
// them out. For a large dependency graph, this often won't let us see well the
// information about the filtered nodes, so we prefer to force a relayout any time we
// update the filter. Changing the key based on the filter like this causes react to
// destroy and reconstruct the component from scratch, which will have a layout zooming
// in on the filtered nodes.
filter
}
filters={[
{
name: 'shownConnections',
type: 'connection',
passes: filterConnections,
value: filter,
},
{
name: 'shownNodes',
type: 'node',
passes: filterNodes,
value: filter,
},
]}
/>
<Box position="absolute" left={20} top={20}>
<ReactSelect
isClearable
options={filterOptions}
onChange={handleFilterChange}
value={!filter ? undefined : { value: filter, label: filter }}
styles={reactSelectStyles}
/>
</Box>
</Box>
{focusedNodeName ? (
<Box className={classes.detailWrapper}>
<NodeDetailData
serviceName={focusedNodeName}
targetEdges={targetEdges}
sourceEdges={sourceEdges}
/>
</Box>
) : null}
</Box>
);
};
Expand Down
77 changes: 36 additions & 41 deletions zipkin-lens/src/components/DependenciesPage/DependenciesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright 2015-2020 The OpenZipkin Authors
* Copyright 2015-2022 The OpenZipkin Authors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
Expand All @@ -12,7 +12,7 @@
* the License.
*/

import { faSearch, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
import { faProjectDiagram, faSync } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { t, Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
Expand All @@ -30,35 +30,28 @@ import moment from 'moment';
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { withRouter, RouteComponentProps } from 'react-router-dom';

import DependenciesGraph from './DependenciesGraph';
import { clearAlert, setAlert } from '../App/slice';
import ExplainBox from '../common/ExplainBox';
import {
clearDependencies,
loadDependencies,
} from '../../slices/dependenciesSlice';
import { RootState } from '../../store';
import { clearAlert, setAlert } from '../App/slice';
import ExplainBox from '../common/ExplainBox';
import { LoadingIndicator } from '../common/LoadingIndicator';
import DependenciesGraph from './DependenciesGraph';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
searchWrapper: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(2),
flex: '0 0',
borderBottom: `1px solid ${theme.palette.divider}`,
},
dateTimePicker: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
},
dateTimePickerInput: {
fontSize: '1rem',
height: '1.8rem',
padding: `${theme.spacing(0.4)}px ${theme.spacing(0.6)}px`,
},
searchButton: {
fontSize: '1.2rem',
padding: theme.spacing(1),
minWidth: 0,
width: 32,
height: 32,
},
}),
);

Expand Down Expand Up @@ -209,39 +202,41 @@ const DependenciesPageImpl: React.FC<DependenciesPageProps> = ({
display="flex"
flexDirection="column"
>
<Box bgcolor="background.paper" boxShadow={3} p={3}>
<Box className={classes.searchWrapper}>
<Box display="flex" justifyContent="center" alignItems="center">
<KeyboardDateTimePicker
label={i18n._(t`Start Time`)}
inputVariant="outlined"
value={tempTimeRange.startTime}
onChange={handleStartTimeChange}
format="MM/DD/YYYY HH:mm:ss"
className={classes.dateTimePicker}
InputProps={{ classes: { input: classes.dateTimePickerInput } }}
/>
-
<KeyboardDateTimePicker
label={i18n._(t`End Time`)}
inputVariant="outlined"
value={tempTimeRange.endTime}
onChange={handleEndTimeChange}
format="MM/DD/YYYY HH:mm:ss"
className={classes.dateTimePicker}
InputProps={{ classes: { input: classes.dateTimePickerInput } }}
/>
<Box display="flex" mr={0.5} alignItems="center">
<KeyboardDateTimePicker
label={i18n._(t`Start Time`)}
inputVariant="outlined"
value={tempTimeRange.startTime}
onChange={handleStartTimeChange}
format="MM/DD/YYYY HH:mm:ss"
className={classes.dateTimePicker}
size="small"
/>
-
<KeyboardDateTimePicker
label={i18n._(t`End Time`)}
inputVariant="outlined"
value={tempTimeRange.endTime}
onChange={handleEndTimeChange}
format="MM/DD/YYYY HH:mm:ss"
className={classes.dateTimePicker}
size="small"
/>
</Box>
<Button
color="primary"
variant="contained"
onClick={handleSearchButtonClick}
className={classes.searchButton}
data-testid="search-button"
startIcon={<FontAwesomeIcon icon={faSync} />}
>
<FontAwesomeIcon icon={faSearch} />
<Trans>Run Query</Trans>
</Button>
</Box>
</Box>
<Box m={4} flexGrow={1}>
<Box flex="1 1" bgcolor="background.paper" overflow="hidden">
{content}
</Box>
</Box>
Expand Down
Loading