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

Significant changes to use ReactJS extensively.

Browse Source 
1. Replace the current layout library wcDocker with ReactJS based rc-dock. #6479
2. Have close buttons on individual panel tabs instead of common. #2821
3. Changes in the context menu on panel tabs - Add close, close all and close others menu items. #5394
4. Allow closing all the tabs, including SQL and Properties. #4733
5. Changes in docking behaviour of different tabs based on user requests and remove lock layout menu.
6. Fix an issue where the scroll position of panels was not remembered on Firefox. #2986
7. Reset layout now will not require page refresh and is done spontaneously.
8. Use the zustand store for storing preferences instead of plain JS objects. This will help reflecting preferences immediately.
9. The above fix incorrect format (no indent) of SQL stored functions/procedures. #6720
10. New version check is moved to an async request now instead of app start to improve startup performance.
11. Remove jQuery and Bootstrap completely.
12. Replace jasmine and karma test runner with jest. Migrate all the JS test cases to jest. This will save time in writing and debugging JS tests.
13. Other important code improvements and cleanup.
This commit is contained in:
Aditya Toshniwal
2023-10-23 17:43:17 +05:30
committed by GitHub
parent 6d555645e9
commit 862f101772
373 changed files with 11149 additions and 14836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/pgadmin/misc/bgprocess/static/js/BgProcessConstants.js Normal file
View File

@@ -0,0 +1,21 @@
/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2023, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
export const BgProcessManagerEvents = {
LIST_UPDATED: 'LIST_UPDATED',
};
export const BgProcessManagerProcessState = {
PROCESS_NOT_STARTED: 0,
PROCESS_STARTED: 1,
PROCESS_FINISHED: 2,
PROCESS_TERMINATED: 3,
/* Supported by front end only */
PROCESS_TERMINATING: 10,
PROCESS_FAILED: 11,
};

46
web/pgadmin/misc/bgprocess/static/js/BgProcessManager.js
View File

@@ -6,32 +6,18 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import getApiInstance, { parseApiError } from '../../../../static/js/api_instance';
import url_for from 'sources/url_for';
import Notifier from '../../../../static/js/helpers/Notifier';
import EventBus from '../../../../static/js/helpers/EventBus';
import * as BgProcessNotify from './BgProcessNotify';
import showDetails from './showDetails';
import gettext from 'sources/gettext';
import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
import * as BgProcessNotify from './BgProcessNotify';
import pgAdmin from 'sources/pgadmin';
import { processesPanelData } from '../../../../static/js/BrowserComponent';
import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants';
const WORKER_INTERVAL = 1000;
export const BgProcessManagerEvents = {
LIST_UPDATED: 'LIST_UPDATED',
};
export const BgProcessManagerProcessState = {
PROCESS_NOT_STARTED: 0,
PROCESS_STARTED: 1,
PROCESS_FINISHED: 2,
PROCESS_TERMINATED: 3,
/* Supported by front end only */
PROCESS_TERMINATING: 10,
PROCESS_FAILED: 11,
};
export default class BgProcessManager {
static instance;
@@ -148,7 +134,7 @@ export default class BgProcessManager {
this._eventManager.fireEvent(BgProcessManagerEvents.LIST_UPDATED);
})
.catch((err)=>{
Notifier.error(parseApiError(err));
pgAdmin.Browser.notifier.error(parseApiError(err));
});
}
@@ -169,16 +155,12 @@ export default class BgProcessManager {
/* Object not available */
removeJob(jobId);
} else {
Notifier.error(parseApiError(err));
pgAdmin.Browser.notifier.error(parseApiError(err));
}
});
});
}
viewJobDetails(jobId) {
showDetails(this.procList.find((p)=>p.id==jobId));
}
updateCloudDetails(jobId) {
this.api.put(url_for('bgprocess.update_cloud_details', {
pid: jobId,
@@ -186,7 +168,7 @@ export default class BgProcessManager {
.then((res)=>{
let _server = res.data?.data?.node;
if(!_server) {
Notifier.error(gettext('Cloud server deployment is pending'));
pgAdmin.Browser.notifier.error(gettext('Cloud server deployment is pending'));
return;
}
let _server_path = '/browser/server_group_' + _server.gid + '/' + _server.id,
@@ -209,7 +191,7 @@ export default class BgProcessManager {
})
.catch((err)=>{
if(err.response?.status != 410) {
Notifier.error(gettext('Failed Cloud Deployment.'));
pgAdmin.Browser.notifier.error(gettext('Failed Cloud Deployment.'));
}
});
}
@@ -223,14 +205,12 @@ export default class BgProcessManager {
}
openProcessesPanel() {
let processPanel = this.pgBrowser.docker.findPanels('processes');
if(processPanel.length > 0) {
processPanel = processPanel[0];
let processPanel = this.pgBrowser.docker.find(BROWSER_PANELS.PROCESSES);
if(!processPanel) {
pgAdmin.Browser.docker.openTab(processesPanelData, BROWSER_PANELS.MAIN, 'middle', true);
} else {
let propertiesPanel = this.pgBrowser.docker.findPanels('properties');
processPanel = this.pgBrowser.docker.addPanel('processes', window.wcDocker.DOCK.STACKED, propertiesPanel[0]);
this.pgBrowser.docker.focus(BROWSER_PANELS.PROCESSES);
}
processPanel.focus();
}
registerListener(event, callback) {

8
web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
View File

@@ -1,13 +1,13 @@
import { Box, makeStyles } from '@material-ui/core';
import React from 'react';
import Notifier from '../../../../static/js/helpers/Notifier';
import CloseIcon from '@material-ui/icons/CloseRounded';
import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
import clsx from 'clsx';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
import { BgProcessManagerProcessState } from './BgProcessManager';
import { BgProcessManagerProcessState } from './BgProcessConstants';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import pgAdmin from 'sources/pgadmin';
const useStyles = makeStyles((theme)=>({
@@ -77,7 +77,7 @@ ProcessNotifyMessage.propTypes = {
export function processStarted(desc, onViewProcess) {
Notifier.notify(
pgAdmin.Browser.notifier.notify(
<ProcessNotifyMessage title={gettext('Process started')} desc={desc} onViewProcess={onViewProcess} dataTestSuffix="start"/>,
null
);
@@ -94,7 +94,7 @@ export function processCompleted(desc, process_state, onViewProcess) {
success = false;
}
Notifier.notify(
pgAdmin.Browser.notifier.notify(
<ProcessNotifyMessage title={title} desc={desc} onViewProcess={onViewProcess} success={success} dataTestSuffix="end"/>,
null
);

2
web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
View File

@@ -13,7 +13,7 @@ import url_for from 'sources/url_for';
import { Box, makeStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
import { MESSAGE_TYPE, NotifierMessage } from '../../../../static/js/components/FormComponents';
import { BgProcessManagerProcessState } from './BgProcessManager';
import { BgProcessManagerProcessState } from './BgProcessConstants';
import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
import HighlightOffRoundedIcon from '@material-ui/icons/HighlightOffRounded';
import AccessTimeRoundedIcon from '@material-ui/icons/AccessTimeRounded';

38
web/pgadmin/misc/bgprocess/static/js/Processes.jsx
View File

@@ -7,13 +7,12 @@
//
//////////////////////////////////////////////////////////////
import React, { useEffect, useMemo } from 'react';
import React, { useCallback, useEffect, useMemo } from 'react';
import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import pgAdmin from 'sources/pgadmin';
import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessManager';
import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants';
import { PgIconButton } from '../../../../static/js/components/Buttons';
import CancelIcon from '@material-ui/icons/Cancel';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
@@ -21,7 +20,10 @@ import DeleteIcon from '@material-ui/icons/Delete';
import HelpIcon from '@material-ui/icons/HelpRounded';
import url_for from 'sources/url_for';
import { Box } from '@material-ui/core';
import Notifier from '../../../../static/js/helpers/Notifier';
import { usePgAdmin } from '../../../../static/js/BrowserComponent';
import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
import ErrorBoundary from '../../../../static/js/helpers/ErrorBoundary';
import ProcessDetails from './ProcessDetails';
const useStyles = makeStyles((theme) => ({
@@ -93,13 +95,33 @@ const ProcessStateTextAndColor = {
[BgProcessManagerProcessState.PROCESS_TERMINATING]: [gettext('Terminating...'), 'bgTerm'],
[BgProcessManagerProcessState.PROCESS_FAILED]: [gettext('Failed'), 'bgFailed'],
};
export default function Processes() {
const classes = useStyles();
const pgAdmin = usePgAdmin();
const [tableData, setTableData] = React.useState([]);
const [selectedRows, setSelectedRows] = React.useState([]);
let columns = useMemo(()=>[
const onViewDetailsClick = useCallback((p)=>{
const panelTitle = gettext('Process Watcher - %s', p.type_desc);
const panelId = BROWSER_PANELS.PROCESS_DETAILS+''+p.id;
pgAdmin.Browser.docker.openDialog({
id: panelId,
title: panelTitle,
content: (
<ErrorBoundary>
<ProcessDetails
data={p}
closeModal={()=>{
pgAdmin.Browser.docker.close(panelId);
}}
/>
</ErrorBoundary>
)
}, pgAdmin.Browser.stdW.md);
}, []);
const columns = useMemo(()=>[
{
accessor: 'stop_process',
Header: () => null,
@@ -149,7 +171,7 @@ export default function Processes() {
noBorder
onClick={(e) => {
e.preventDefault();
pgAdmin.Browser.BgProcessManager.viewJobDetails(row.original.id);
onViewDetailsClick(row.original);
}}
aria-label="View details"
title={gettext('View details')}
@@ -266,7 +288,7 @@ export default function Processes() {
aria-label="Acknowledge and Remove"
title={gettext('Acknowledge and Remove')}
onClick={() => {
Notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{
pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{
pgAdmin.Browser.BgProcessManager.acknowledge(selectedRows.map((p)=>p.original.id));
});
}}

31
web/pgadmin/misc/bgprocess/static/js/showDetails.jsx
View File

@@ -1,31 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import pgAdmin from 'sources/pgadmin';
import Theme from '../../../../static/js/Theme';
import ProcessDetails from './ProcessDetails';
import gettext from 'sources/gettext';
export default function showDetails(p) {
let pgBrowser = pgAdmin.Browser;
// Register dialog panel
pgBrowser.Node.registerUtilityPanel();
let panel = pgBrowser.Node.addUtilityPanel(pgBrowser.stdW.md),
j = panel.$container.find('.obj_properties').first();
panel.title(gettext('Process Watcher - %s', p.type_desc));
panel.focus();
panel.on(window.wcDocker.EVENT.CLOSED, ()=>{
ReactDOM.unmountComponentAtNode(j[0]);
});
ReactDOM.render(
<Theme>
<ProcessDetails
data={p}
closeModal={()=>{
panel.close();
}}
/>
</Theme>, j[0]);
}