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

Remove dashboard display menues #971

Merged
merged 5 commits into from
Sep 25, 2018
Merged

Remove dashboard display menues #971

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a508d6b
Remove show copyable svg dashboard display menu
bjoernricks Sep 24, 2018
66cbb65
Pass handler to open filter selection to children func
bjoernricks Sep 24, 2018
94538ed
Replace dashboard display menu with an icon overlay
bjoernricks Sep 24, 2018
3132e82
Fix loading the filters for dashboard displays
bjoernricks Sep 24, 2018
e1232d8
Get rid of dashboad DisplayMenu
bjoernricks Sep 24, 2018
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
1 change: 0 additions & 1 deletion gsa/CMakeLists.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,6 @@ set (GSA_JS_SRC_FILES
${GSA_SRC_DIR}/src/web/components/dashboard/display/datatable.js
${GSA_SRC_DIR}/src/web/components/dashboard/display/datatabledisplay.js
${GSA_SRC_DIR}/src/web/components/dashboard/display/display.js
${GSA_SRC_DIR}/src/web/components/dashboard/display/displaymenu.js
${GSA_SRC_DIR}/src/web/components/dashboard/display/filterselection.js
${GSA_SRC_DIR}/src/web/components/dashboard/display/severity/severityclassdisplay.js
${GSA_SRC_DIR}/src/web/components/dashboard/display/severity/severityclasstabledisplay.js
Expand Down
136 changes: 76 additions & 60 deletions gsa/src/web/components/dashboard/display/datadisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,17 @@ import _ from 'gmp/locale';
import {isDefined} from 'gmp/utils/identity';
import {excludeObjectProps} from 'gmp/utils/object';

import PropTypes from 'web/utils/proptypes';
import Theme from 'web/utils/theme';
import Icon from 'web/components/icon/icon';
import IconDivider from 'web/components/layout/icondivider';

import Loading from 'web/components/loading/loading';

import Layout from 'web/components/layout/layout';

import MenuEntry from 'web/components/menu/menuentry';
import PropTypes from 'web/utils/proptypes';
import Theme from 'web/utils/theme';

import Display, {
DISPLAY_HEADER_HEIGHT, DISPLAY_BORDER_WIDTH,
} from './display';
import DisplayMenu from './displaymenu';


const ownProps = [
'title',
Expand Down Expand Up @@ -83,6 +80,36 @@ const FilterString = styled.div`
overflow: hidden;
`;

const IconBar = styled.div`
height: 26px;
width: 100%;
min-height: 26px;
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
padding: 5px 10px;
position: absolute;
z-index: ${Theme.Layers.higher};
transition: opacity 500ms;
`;

const DisplayBox = styled.div`
display: flex;
flex-grow: 1;
position: relative;

${IconBar} {
visibility: hidden;
opacity: 0;
}

&:hover ${IconBar} {
visibility: visible;
opacity: 1;
}
`;

const escapeCsv = value => '"' + `${value}`.replace('"', '""') + '"';

class DataDisplay extends React.Component {
Expand All @@ -100,7 +127,6 @@ class DataDisplay extends React.Component {
title: this.props.title({data, id: this.props.id}),
};

this.handleOpenCopyableSvg = this.handleOpenCopyableSvg.bind(this);
this.handleDownloadSvg = this.handleDownloadSvg.bind(this);
this.handleDownloadCsv = this.handleDownloadCsv.bind(this);
}
Expand Down Expand Up @@ -166,25 +192,6 @@ class DataDisplay extends React.Component {
return URL.createObjectURL(svg_blob);
}

handleOpenCopyableSvg() {
const {title} = this.state;
const {document} = window.open('', '_blank');

const head = document.querySelector('head');

// add a title to the new document
const titleEl = document.createElement('title');
titleEl.appendChild(document.createTextNode(title));
head.appendChild(titleEl);

const body = document.querySelector('body');
const img = document.createElement('img');

img.setAttribute('src', this.createSvgUrl());

body.appendChild(img);
}

cleanupDownloadSvg() {
if (isDefined(this.downloadSvgUrl)) {
URL.revokeObjectURL(this.downloadSvgUrl);
Expand Down Expand Up @@ -261,14 +268,15 @@ class DataDisplay extends React.Component {
width,
isLoading,
showFilterString = false,
showFilterSelection = false,
} = this.props;
const {
children,
menuEntries = [],
id,
dataTitles,
dataRow,
filter,
onSelectFilterClick,
onRemoveClick,
...props
} = this.props;
Expand All @@ -281,7 +289,7 @@ class DataDisplay extends React.Component {
isLoading = isLoading && !isDefined(originalData);

const otherProps = excludeObjectProps(props, ownProps);
const showDataMenus = isDefined(dataRow) && isDefined(dataTitles);
const showCsvDownload = isDefined(dataRow) && isDefined(dataTitles);

showFilterString = showFilterString && isDefined(filter);
if (showFilterString) {
Expand All @@ -291,41 +299,48 @@ class DataDisplay extends React.Component {
const showContent = height > 0 && width > 0; // > 0 also checks for null, undefined and null
return (
<Display
menu={
showDataMenus || hasSvg || menuEntries.length > 0 ?
<DisplayMenu>
{menuEntries}
{hasSvg &&
<MenuEntry onClick={this.handleOpenCopyableSvg}>
{_('Show copyable SVG')}
</MenuEntry>
}
{showDataMenus &&
<MenuEntry onClick={this.handleDownloadCsv}>
{_('Download CSV')}
</MenuEntry>
}
{hasSvg &&
<MenuEntry onClick={this.handleDownloadSvg}>
{_('Download SVG')}
</MenuEntry>
}
</DisplayMenu> : null
}
title={`${title}`}
onRemoveClick={onRemoveClick}
{...otherProps}
>
<Layout flex="column" grow="1">
<DisplayBox>
{isLoading ?
<Loading/> :
showContent && children({
id,
data: transformedData,
width,
height,
svgRef: this.svgRef,
})
showContent &&
<React.Fragment>
<IconBar>
<IconDivider>
{showFilterSelection &&
<Icon
img="filter.svg"
title={_('Select Filter')}
onClick={onSelectFilterClick}
/>
}
{hasSvg &&
<Icon
img="download.svg"
onClick={this.handleDownloadSvg}
title={_('Download SVG')}
/>
}
{showCsvDownload &&
<Icon
img="download.svg"
title={_('Download CSV')}
onClick={this.handleDownloadCsv}
/>
}
</IconDivider>
</IconBar>
{children({
id,
data: transformedData,
width,
height,
svgRef: this.svgRef,
})}
</React.Fragment>
}
{showFilterString &&
<FilterString>
Expand All @@ -334,7 +349,7 @@ class DataDisplay extends React.Component {
<i>{filter.simple().toFilterString()}</i>)
</FilterString>
}
</Layout>
</DisplayBox>
<Download innerRef={this.downloadRef}>
</Download>
</Display>
Expand All @@ -352,11 +367,12 @@ DataDisplay.propTypes = {
height: PropTypes.number.isRequired,
id: PropTypes.string.isRequired,
isLoading: PropTypes.bool,
menuEntries: PropTypes.arrayOf(PropTypes.element),
showFilterSelection: PropTypes.bool,
showFilterString: PropTypes.bool,
title: PropTypes.func.isRequired,
width: PropTypes.number.isRequired,
onRemoveClick: PropTypes.func.isRequired,
onSelectFilterClick: PropTypes.func,
};

export default DataDisplay;
Expand Down
3 changes: 0 additions & 3 deletions gsa/src/web/components/dashboard/display/display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,15 +105,13 @@ const DisplayTitle = styled.div`
const Display = ({
children,
dragHandleProps,
menu,
title,
onRemoveClick,
}) => {
return (
<DisplayView>
<HeaderContainer {...dragHandleProps}>
<Header>
{menu}
<HeaderContent>
<DisplayTitle>
{title}
Expand All @@ -135,7 +133,6 @@ const Display = ({

Display.propTypes = {
dragHandleProps: PropTypes.object,
menu: PropTypes.element,
title: PropTypes.string,
onRemoveClick: PropTypes.func.isRequired,
};
Expand Down
114 changes: 0 additions & 114 deletions gsa/src/web/components/dashboard/display/displaymenu.js
View file
Open in desktop

This file was deleted.

Loading