public inbox for [email protected]  
help / color / mirror / Atom feed
From: Pradip Parkale <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin][RM7308]: Server activity - Preserve sorting on refresh
Date: Wed, 13 Apr 2022 22:50:30 +0530
Message-ID: <CAJ9T6SsVKmpc5gWO8nnoVHTpXFZoua0R-k3Pz1fi053ukzf9Pw@mail.gmail.com> (raw)

Hi Hackers,

Please find attached for #7308.

   1. Sorting should be preserved when the server activity is refreshed and
   the tab changes.
   2. Also, I have fixed the issue where on database selection, 'Session'
   should be selected by default.


-- 
Thanks & Regards,
Pradip Parkale
Software Engineer | EnterpriseDB Corporation


Attachments:

  [application/octet-stream] RM7308.patch (6.2K, 3-RM7308.patch)
  download | inline diff:
diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index 4b7d779cc..a7f33e712 100644
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -27,6 +27,7 @@ import ActiveQuery from './ActiveQuery.ui';
 import _ from 'lodash';
 import CachedIcon from '@mui/icons-material/Cached';
 import EmptyPanelMessage from '../../../static/js/components/EmptyPanelMessage';
+import TabPanel from '../../../static/js/components/TabPanel';
 
 function parseData(data) {
   var res = [];
@@ -123,16 +124,15 @@ export default function Dashboard({
   ...props
 }) {
   const classes = useStyles();
-  let tab = ['Sessions', 'Locks', 'Prepared Transactions'];
+  let tabs = ['Sessions', 'Locks', 'Prepared Transactions'];
   const [dashData, setdashData] = useState([]);
   const [msg, setMsg] = useState('');
-  const[infoMsg, setInfo] = useState('');
   const [val, setVal] = useState(0);
   const [refresh, setRefresh] = useState(false);
   const [schemaDict, setSchemaDict] = React.useState({});
 
   if (!did) {
-    tab.push('Configuration');
+    tabs.push('Configuration');
   }
   val == 3 && did && setVal(0);
   const tabChanged = (e, tabVal) => {
@@ -233,11 +233,9 @@ export default function Dashboard({
                     .delete(url)
                     .then(function (res) {
                       if (res.data == gettext('Success')) {
-                        setInfo(txtSuccess);
                         Notify.success(txtSuccess);
                         setRefresh(!refresh);
                       } else {
-                        setInfo(txtError);
                         Notify.error(txtError);
                       }
                     })
@@ -302,11 +300,12 @@ export default function Dashboard({
                     .delete(url)
                     .then(function (res) {
                       if (res.data == gettext('Success')) {
-                        setInfo(txtSuccess);
                         Notify.success(txtSuccess);
+                        setRefresh(!refresh);
                       } else {
-                        setInfo(txtError);
                         Notify.error(txtError);
+                        setRefresh(!refresh);
+
                       }
                     })
                     .catch(function (error) {
@@ -722,6 +721,10 @@ export default function Dashboard({
       return false;
     }
   };
+  useEffect(() => {
+    // Reset Tab values to 0, so that it will select "Sessions" on node changed.
+    nodeData?._type === 'database' && setVal(0);
+  },[nodeData]);
 
   useEffect(() => {
     let url,
@@ -770,7 +773,7 @@ export default function Dashboard({
     if (message != '') {
       setMsg(message);
     }
-  }, [nodeData, val, did, preferences, infoMsg, refresh, props.dbConnected]);
+  }, [nodeData, val, did, preferences, refresh, props.dbConnected]);
 
   const RefreshButton = () =>{
     return(
@@ -810,33 +813,47 @@ export default function Dashboard({
               >
                 {gettext('Server activity')}{' '}
               </Box>
-              <Box display="flex">
-                <Tabs
-                  value={val}
-                  onChange={tabChanged}
-                  className={classes.searchInput}
-                >
-                  {tab.map((tabValue, i) => {
-                    return <Tab key={i} label={tabValue} />;
-                  })}
-                </Tabs>
-                <RefreshButton/>
-              </Box>
-              <Box flexGrow={1}>
-                <PgTable
-                  caveTable={false}
-                  columns={
-                    val === 0
-                      ? activityColumns
-                      : val === 1
-                        ? databaseLocksColumns
-                        : val == 2
-                          ? databasePreparedColumns
-                          : serverConfigColumns
-                  }
-                  data={dashData}
-                  schema={schemaDict}
-                ></PgTable>
+              <Box height="100%" display="flex" flexDirection="column">
+                <Box>
+                  <Tabs
+                    value={val}
+                    onChange={tabChanged}
+                  >
+                    {tabs.map((tabValue, i) => {
+                      return <Tab key={i} label={tabValue} />;
+                    })}
+                    <RefreshButton/>
+                  </Tabs>
+                </Box>
+                <TabPanel value={val} index={0} classNameRoot={classes.tabPanel}>
+                  <PgTable
+                    caveTable={false}
+                    columns={activityColumns}
+                    data={dashData}
+                    schema={schemaDict}
+                  ></PgTable>
+                </TabPanel>
+                <TabPanel value={val} index={1} classNameRoot={classes.tabPanel}>
+                  <PgTable
+                    caveTable={false}
+                    columns={databaseLocksColumns}
+                    data={dashData}
+                  ></PgTable>
+                </TabPanel>
+                <TabPanel value={val} index={2} classNameRoot={classes.tabPanel}>
+                  <PgTable
+                    caveTable={false}
+                    columns={databasePreparedColumns}
+                    data={dashData}
+                  ></PgTable>
+                </TabPanel>
+                <TabPanel value={val} index={3} classNameRoot={classes.tabPanel}>
+                  <PgTable
+                    caveTable={false}
+                    columns={serverConfigColumns}
+                    data={dashData}
+                  ></PgTable>
+                </TabPanel>
               </Box>
             </Box>
           </Box>
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index 35ed86488..b3e99f740 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -274,6 +274,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, ..
       data,
       defaultColumn,
       isSelectRow,
+      autoResetSortBy: false,
     },
     useGlobalFilter,
     useSortBy,


view thread (3+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected]
  Subject: Re: [pgAdmin][RM7308]: Server activity - Preserve sorting on refresh
  In-Reply-To: <CAJ9T6SsVKmpc5gWO8nnoVHTpXFZoua0R-k3Pz1fi053ukzf9Pw@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox