IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Included JSX files in the linter check.

Browse Source
This commit is contained in:
Aditya Toshniwal 2021-04-08 17:56:18 +05:30 committed by Akshay Joshi
parent ffdd58ffb4
commit c88a63edf8
8 changed files with 167 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/.eslintrc.js
View File

@ -29,6 +29,7 @@ module.exports = {
'babelOptions': {
'plugins': [
'@babel/plugin-syntax-jsx',
'@babel/plugin-proposal-class-properties',
],
},
},

2
web/package.json
View File

@ -128,7 +128,7 @@
"wkx": "^0.5.0"
},
"scripts": {
"linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js .",
"linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js --ext .jsx .",
"webpacker": "yarn run webpack --config webpack.config.js --progress",
"webpacker:watch": "yarn run webpack --config webpack.config.js --progress --watch",
"bundle:watch": "yarn run linter && yarn run webpacker:watch",

69
web/pgadmin/dashboard/static/js/Graphs.jsx
View File

@ -250,6 +250,7 @@ Graphs.propTypes = {
PropTypes.string.isRequired,
PropTypes.number.isRequired,
]),
pageVisible: PropTypes.bool,
enablePoll: PropTypes.bool,
};
@ -330,40 +331,40 @@ export function GraphsWrapper(props) {
return (
<>
<DashboardRow>
<DashboardRowCol breakpoint='md' parts={6}>
<ChartContainer id='sessions-graph' title={props.isDatabase ? gettext('Database sessions') : gettext('Server sessions')} legendRef={sessionStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.sessionStats} updateOptions={updateOptions}
onInit={onInitCallback(sessionStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
<DashboardRowCol breakpoint='md' parts={6}>
<ChartContainer id='tps-graph' title={gettext('Transactions per second')} legendRef={tpsStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.tpsStats} updateOptions={updateOptions}
onInit={onInitCallback(tpsStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
</DashboardRow>
<DashboardRow>
<DashboardRowCol breakpoint='md' parts={4}>
<ChartContainer id='ti-graph' title={gettext('Tuples in')} legendRef={tiStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.tiStats} updateOptions={updateOptions}
onInit={onInitCallback(tiStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
<DashboardRowCol breakpoint='md' parts={4}>
<ChartContainer id='to-graph' title={gettext('Tuples out')} legendRef={toStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.toStats} updateOptions={updateOptions}
onInit={onInitCallback(toStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
<DashboardRowCol breakpoint='md' parts={4}>
<ChartContainer id='bio-graph' title={gettext('Block I/O')} legendRef={bioStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.bioStats} updateOptions={updateOptions}
onInit={onInitCallback(bioStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
</DashboardRow>
<DashboardRow>
<DashboardRowCol breakpoint='md' parts={6}>
<ChartContainer id='sessions-graph' title={props.isDatabase ? gettext('Database sessions') : gettext('Server sessions')} legendRef={sessionStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.sessionStats} updateOptions={updateOptions}
onInit={onInitCallback(sessionStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
<DashboardRowCol breakpoint='md' parts={6}>
<ChartContainer id='tps-graph' title={gettext('Transactions per second')} legendRef={tpsStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.tpsStats} updateOptions={updateOptions}
onInit={onInitCallback(tpsStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
</DashboardRow>
<DashboardRow>
<DashboardRowCol breakpoint='md' parts={4}>
<ChartContainer id='ti-graph' title={gettext('Tuples in')} legendRef={tiStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.tiStats} updateOptions={updateOptions}
onInit={onInitCallback(tiStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
<DashboardRowCol breakpoint='md' parts={4}>
<ChartContainer id='to-graph' title={gettext('Tuples out')} legendRef={toStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.toStats} updateOptions={updateOptions}
onInit={onInitCallback(toStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
<DashboardRowCol breakpoint='md' parts={4}>
<ChartContainer id='bio-graph' title={gettext('Block I/O')} legendRef={bioStatsLegendRef} errorMsg={props.errorMsg}>
<LineChart options={options} data={props.bioStats} updateOptions={updateOptions}
onInit={onInitCallback(bioStatsLegendRef)}/>
</ChartContainer>
</DashboardRowCol>
</DashboardRow>
</>
);
}

2
web/pgadmin/static/js/chartjs/index.jsx
View File

@ -81,8 +81,10 @@ export default function BaseChart({type='line', id, options, data, redraw=false,
BaseChart.propTypes = {
type: PropTypes.string.isRequired,
id: PropTypes.string,
data: PropTypes.object.isRequired,
options: PropTypes.object,
redraw: PropTypes.bool,
updateOptions: PropTypes.object,
onInit: PropTypes.func,
onUpdate: PropTypes.func,

14
web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx
View File

@ -18,6 +18,7 @@ import {
} from '@projectstorm/react-diagrams';
import {Point} from '@projectstorm/geometry';
import _ from 'lodash';
import PropTypes from 'prop-types';
export const OneToManyModel = {
local_table_uid: undefined,
@ -84,7 +85,7 @@ const CustomLinkEndWidget = props => {
<polyline className="svg-link-ele" points="-8,0 0,15 0,0 0,30 0,15 8,0" fill="none" strokeWidth={props.width} />
</>
);
} else if (type == 'one') {
} else if (itype == 'one') {
return (
<polyline className="svg-link-ele" points="-8,15 0,15 0,0 0,30 0,15 8,15" fill="none" strokeWidth={props.width} />
);
@ -102,6 +103,15 @@ const CustomLinkEndWidget = props => {
);
};
CustomLinkEndWidget.propTypes = {
point: PropTypes.instanceOf(PointModel).isRequired,
rotation: PropTypes.number.isRequired,
tx: PropTypes.number.isRequired,
ty: PropTypes.number.isRequired,
type: PropTypes.oneOf(['many', 'one']).isRequired,
width: PropTypes.number,
};
export class OneToManyLinkWidget extends RightAngleLinkWidget {
constructor(props) {
super(props);
@ -243,7 +253,7 @@ export class OneToManyLinkWidget extends RightAngleLinkWidget {
window.addEventListener('mouseup', this.handleUp);
}
},
onMouseEnter: (event) => {
onMouseEnter: () => {
this.setState({ selected: true });
this.props.link.lastHoverIndexOfPath = j;
},

13
web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
View File

@ -8,7 +8,7 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import { DefaultNodeModel, PortWidget } from '@projectstorm/react-diagrams';
import { DefaultNodeModel, DiagramEngine, PortWidget } from '@projectstorm/react-diagrams';
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
import _ from 'lodash';
import { IconButton, DetailsToggleButton } from '../ui_components/ToolBar';
@ -17,6 +17,7 @@ import TableIcon from 'top/browser/server_groups/servers/databases/schemas/table
import PrimaryKeyIcon from 'top/browser/server_groups/servers/databases/schemas/tables/constraints/index_constraint/static/img/primary_key.svg';
import ForeignKeyIcon from 'top/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/img/foreign_key.svg';
import ColumnIcon from 'top/browser/server_groups/servers/databases/schemas/tables/columns/static/img/column.svg';
import PropTypes from 'prop-types';
const TYPE = 'table';
@ -127,6 +128,11 @@ function RowIcon({icon}) {
);
}
RowIcon.propTypes = {
icon: PropTypes.any.isRequired,
};
export class TableNodeWidget extends React.Component {
constructor(props) {
super(props);
@ -206,6 +212,11 @@ export class TableNodeWidget extends React.Component {
}
}
TableNodeWidget.propTypes = {
node: PropTypes.instanceOf(TableNodeModel),
engine: PropTypes.instanceOf(DiagramEngine),
};
export class TableNodeFactory extends AbstractReactFactory {
constructor() {
super(TYPE);

185
web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx
View File

@ -292,7 +292,7 @@ export default class BodyWidget extends React.Component {
closePanel() {
window.onbeforeunload = null;
this.props.panel.off(wcDocker.EVENT.CLOSING);
this.props.panel.off(window.wcDocker.EVENT.CLOSING);
this.props.pgWindow.pgAdmin.Browser.docker.removePanel(this.props.panel);
}
@ -555,16 +555,16 @@ export default class BodyWidget extends React.Component {
let nodesRect = this.diagram.getEngine().getBoundingNodesRect(this.diagram.getModel().getNodes(), 10);
let canvasRect = this.canvasEle.getBoundingClientRect();
let canvasTopLeftPoint = {
x: canvasRect.left,
y: canvasRect.top
x: canvasRect.left,
y: canvasRect.top
};
let nodeLayerTopLeftPoint = {
x: canvasTopLeftPoint.x + this.diagram.getModel().getOffsetX(),
y: canvasTopLeftPoint.y + this.diagram.getModel().getOffsetY()
x: canvasTopLeftPoint.x + this.diagram.getModel().getOffsetX(),
y: canvasTopLeftPoint.y + this.diagram.getModel().getOffsetY()
};
let nodesRectTopLeftPoint = {
x: nodeLayerTopLeftPoint.x + nodesRect.getTopLeft().x,
y: nodeLayerTopLeftPoint.y + nodesRect.getTopLeft().y
x: nodeLayerTopLeftPoint.x + nodesRect.getTopLeft().x,
y: nodeLayerTopLeftPoint.y + nodesRect.getTopLeft().y
};
let prevTransform = this.canvasEle.querySelector('div').style.transform;
this.canvasEle.childNodes.forEach((ele)=>{
@ -579,37 +579,37 @@ export default class BodyWidget extends React.Component {
/* html2canvas ignores CSS styles, set the CSS styles to inline */
const setSvgInlineStyles = (targetElem) => {
const transformProperties = [
'fill',
'color',
'font-size',
'stroke',
'font'
'fill',
'color',
'font-size',
'stroke',
'font'
];
let svgElems = Array.from(targetElem.getElementsByTagName("svg"));
let svgElems = Array.from(targetElem.getElementsByTagName('svg'));
for (let svgEle of svgElems) {
svgEle.setAttribute('width', svgEle.clientWidth);
svgEle.setAttribute('height', svgEle.clientHeight);
/* Wrap the SVG in a div tag so that transforms are consistent with html */
let wrap = document.createElement('div');
wrap.setAttribute('style', svgEle.getAttribute('style'));
svgEle.setAttribute('style', null);
svgEle.parentNode.appendChild(wrap);
wrap.appendChild(svgEle);
recurseElementChildren(svgEle);
svgEle.setAttribute('width', svgEle.clientWidth);
svgEle.setAttribute('height', svgEle.clientHeight);
/* Wrap the SVG in a div tag so that transforms are consistent with html */
let wrap = document.createElement('div');
wrap.setAttribute('style', svgEle.getAttribute('style'));
svgEle.setAttribute('style', null);
svgEle.parentNode.appendChild(wrap);
wrap.appendChild(svgEle);
recurseElementChildren(svgEle);
}
function recurseElementChildren(node) {
if (!node.style)
return;
if (!node.style)
return;
let styles = getComputedStyle(node);
for (let transformProperty of transformProperties) {
node.style[transformProperty] = styles[transformProperty];
}
for (let child of Array.from(node.childNodes)) {
recurseElementChildren(child);
}
let styles = getComputedStyle(node);
for (let transformProperty of transformProperties) {
node.style[transformProperty] = styles[transformProperty];
}
for (let child of Array.from(node.childNodes)) {
recurseElementChildren(child);
}
}
}
};
setTimeout(()=>{
html2canvas(this.canvasEle, {
@ -720,7 +720,7 @@ export default class BodyWidget extends React.Component {
}
}
onNoteClick(e) {
onNoteClick() {
let noteNode = this.diagram.getSelectedNodes()[0];
this.showNote(noteNode);
}
@ -810,65 +810,65 @@ export default class BodyWidget extends React.Component {
render() {
return (
<>
<ToolBar id="btn-toolbar">
<ButtonGroup>
<IconButton id="open-file" icon="fa fa-folder-open" onClick={this.onLoadDiagram} title={gettext('Load from file')}
shortcut={this.state.preferences.open_project}/>
<IconButton id="save-erd" icon="fa fa-save" onClick={()=>{this.onSaveDiagram();}} title={gettext('Save project')}
shortcut={this.state.preferences.save_project} disabled={!this.state.dirty}/>
<IconButton id="save-as-erd" icon="fa fa-share-square" onClick={this.onSaveAsDiagram} title={gettext('Save as')}
shortcut={this.state.preferences.save_project_as}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="save-sql" icon="fa fa-file-code" onClick={this.onSQLClick} title={gettext('Generate SQL')}
shortcut={this.state.preferences.generate_sql}/>
<IconButton id="save-image" icon="fa fa-file-image" onClick={this.onImageClick} title={gettext('Download image')}
shortcut={this.state.preferences.download_image}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="add-node" icon="fa fa-plus-square" onClick={this.onAddNewNode} title={gettext('Add table')}
shortcut={this.state.preferences.add_table}/>
<IconButton id="edit-node" icon="fa fa-pencil-alt" onClick={this.onEditNode} title={gettext('Edit table')}
shortcut={this.state.preferences.edit_table} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="clone-node" icon="fa fa-clone" onClick={this.onCloneNode} title={gettext('Clone table')}
shortcut={this.state.preferences.clone_table} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="delete-node" icon="fa fa-trash-alt" onClick={this.onDeleteNode} title={gettext('Drop table/link')}
shortcut={this.state.preferences.drop_table} disabled={!this.state.any_item_selected}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="add-onetomany" text="1M" onClick={this.onOneToManyClick} title={gettext('One-to-Many link')}
shortcut={this.state.preferences.one_to_many} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="add-manytomany" text="MM" onClick={this.onManyToManyClick} title={gettext('Many-to-Many link')}
shortcut={this.state.preferences.many_to_many} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="add-note" icon="fa fa-sticky-note" onClick={this.onNoteClick} title={gettext('Add/Edit note')}
shortcut={this.state.preferences.add_edit_note} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="auto-align" icon="fa fa-magic" onClick={this.onAutoDistribute} title={gettext('Auto align')}
shortcut={this.state.preferences.auto_align} />
<DetailsToggleButton id="more-details" onClick={this.onDetailsToggle} showDetails={this.state.show_details}
shortcut={this.state.preferences.show_details} />
</ButtonGroup>
<ButtonGroup>
<IconButton id="zoom-to-fit" icon="fa fa-compress" onClick={this.diagram.zoomToFit} title={gettext('Zoom to fit')}
shortcut={this.state.preferences.zoom_to_fit}/>
<IconButton id="zoom-in" icon="fa fa-search-plus" onClick={this.diagram.zoomIn} title={gettext('Zoom in')}
shortcut={this.state.preferences.zoom_in}/>
<IconButton id="zoom-out" icon="fa fa-search-minus" onClick={this.diagram.zoomOut} title={gettext('Zoom out')}
shortcut={this.state.preferences.zoom_out}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="help" icon="fa fa-question" onClick={this.onHelpClick} title={gettext('Help')} />
</ButtonGroup>
</ToolBar>
<ConnectionBar statusId="btn-conn-status" status={this.state.conn_status} bgcolor={this.props.params.bgcolor}
fgcolor={this.props.params.fgcolor} title={this.props.params.title}/>
<FloatingNote open={this.state.note_open} onClose={this.onNoteClose}
reference={this.noteRefEle} noteNode={this.state.note_node} appendTo={this.diagramContainerRef.current} rows={8}/>
<div className="diagram-container" ref={this.diagramContainerRef}>
<Loader message={this.state.loading_msg} autoEllipsis={true}/>
<CanvasWidget className="diagram-canvas flex-grow-1" ref={(ele)=>{this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} />
</div>
<ToolBar id="btn-toolbar">
<ButtonGroup>
<IconButton id="open-file" icon="fa fa-folder-open" onClick={this.onLoadDiagram} title={gettext('Load from file')}
shortcut={this.state.preferences.open_project}/>
<IconButton id="save-erd" icon="fa fa-save" onClick={()=>{this.onSaveDiagram();}} title={gettext('Save project')}
shortcut={this.state.preferences.save_project} disabled={!this.state.dirty}/>
<IconButton id="save-as-erd" icon="fa fa-share-square" onClick={this.onSaveAsDiagram} title={gettext('Save as')}
shortcut={this.state.preferences.save_project_as}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="save-sql" icon="fa fa-file-code" onClick={this.onSQLClick} title={gettext('Generate SQL')}
shortcut={this.state.preferences.generate_sql}/>
<IconButton id="save-image" icon="fa fa-file-image" onClick={this.onImageClick} title={gettext('Download image')}
shortcut={this.state.preferences.download_image}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="add-node" icon="fa fa-plus-square" onClick={this.onAddNewNode} title={gettext('Add table')}
shortcut={this.state.preferences.add_table}/>
<IconButton id="edit-node" icon="fa fa-pencil-alt" onClick={this.onEditNode} title={gettext('Edit table')}
shortcut={this.state.preferences.edit_table} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="clone-node" icon="fa fa-clone" onClick={this.onCloneNode} title={gettext('Clone table')}
shortcut={this.state.preferences.clone_table} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="delete-node" icon="fa fa-trash-alt" onClick={this.onDeleteNode} title={gettext('Drop table/link')}
shortcut={this.state.preferences.drop_table} disabled={!this.state.any_item_selected}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="add-onetomany" text="1M" onClick={this.onOneToManyClick} title={gettext('One-to-Many link')}
shortcut={this.state.preferences.one_to_many} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="add-manytomany" text="MM" onClick={this.onManyToManyClick} title={gettext('Many-to-Many link')}
shortcut={this.state.preferences.many_to_many} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="add-note" icon="fa fa-sticky-note" onClick={this.onNoteClick} title={gettext('Add/Edit note')}
shortcut={this.state.preferences.add_edit_note} disabled={!this.state.single_node_selected || this.state.single_link_selected}/>
<IconButton id="auto-align" icon="fa fa-magic" onClick={this.onAutoDistribute} title={gettext('Auto align')}
shortcut={this.state.preferences.auto_align} />
<DetailsToggleButton id="more-details" onClick={this.onDetailsToggle} showDetails={this.state.show_details}
shortcut={this.state.preferences.show_details} />
</ButtonGroup>
<ButtonGroup>
<IconButton id="zoom-to-fit" icon="fa fa-compress" onClick={this.diagram.zoomToFit} title={gettext('Zoom to fit')}
shortcut={this.state.preferences.zoom_to_fit}/>
<IconButton id="zoom-in" icon="fa fa-search-plus" onClick={this.diagram.zoomIn} title={gettext('Zoom in')}
shortcut={this.state.preferences.zoom_in}/>
<IconButton id="zoom-out" icon="fa fa-search-minus" onClick={this.diagram.zoomOut} title={gettext('Zoom out')}
shortcut={this.state.preferences.zoom_out}/>
</ButtonGroup>
<ButtonGroup>
<IconButton id="help" icon="fa fa-question" onClick={this.onHelpClick} title={gettext('Help')} />
</ButtonGroup>
</ToolBar>
<ConnectionBar statusId="btn-conn-status" status={this.state.conn_status} bgcolor={this.props.params.bgcolor}
fgcolor={this.props.params.fgcolor} title={this.props.params.title}/>
<FloatingNote open={this.state.note_open} onClose={this.onNoteClose}
reference={this.noteRefEle} noteNode={this.state.note_node} appendTo={this.diagramContainerRef.current} rows={8}/>
<div className="diagram-container" ref={this.diagramContainerRef}>
<Loader message={this.state.loading_msg} autoEllipsis={true}/>
<CanvasWidget className="diagram-canvas flex-grow-1" ref={(ele)=>{this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} />
</div>
</>
);
}
@ -892,4 +892,5 @@ BodyWidget.propTypes = {
pgWindow: PropTypes.object.isRequired,
pgAdmin: PropTypes.object.isRequired,
alertify: PropTypes.object.isRequired,
panel: PropTypes.object,
};

12
web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ToolBar.jsx
View File

@ -28,6 +28,7 @@ const BaseIconButton = forwardRef((props, ref)=>{
</button>
);
});
BaseIconButton.displayName = 'BaseIconButton';
BaseIconButton.propTypes = {
icon: PropTypes.string,
@ -88,6 +89,7 @@ export const IconButton = forwardRef((props, ref) => {
return <BaseIconButton ref={ref} className='btn btn-sm btn-primary-icon' {...otherProps}/>;
}
});
IconButton.displayName = 'IconButton';
IconButton.propTypes = {
title: PropTypes.string,
@ -120,6 +122,10 @@ export function ButtonGroup({className, children}) {
ButtonGroup.propTypes = {
className: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]),
};
/* Toolbar container */
@ -131,6 +137,10 @@ export default function ToolBar({id, children}) {
);
}
ButtonGroup.propTypes = {
ToolBar.propTypes = {
id: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]),
};