Subject: Pgadmin4 System Stats Extension Design

From: Sahil Harpal <[email-masked]>
Date: Tue, 13 Jun 2023 15:29:48 +0530

Dear all,

I am working on pgadmin4 to let users see their system-level statistics on
the dashboard. In this mail, I've attached the wireframe to display system
stats on the existing dashboard.

I am open to hearing your thoughts and suggestions on the design.

Thanks,
Sahil

---

From: Akshay Joshi <[email-masked]>
Date: Wed, 14 Jun 2023 10:12:37 +0530

Hi Sahil

At first glance, it looks good to me. Seems you have created a new tab
System Statistics instead of using the existing dashboard.

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 15 Jun 2023 01:41:53 +0530

Thank you, Akshay, for your feedback.
Here are a few more designs that I have created based on the discussion
with my mentors. I would love to know your thoughts on them.

Design 1 - Using an additional new tab for system statistics
Design 2 - Added buttons to toggle between existing dashboard data and
system statistics.

Thanks,
Sahil

On Wed, 14 Jun 2023 at 10:12, Akshay Joshi <[email-masked]>
wrote:

>> I am working on pgadmin4 to let users see their system-level statistics
>> on the dashboard. In this mail, I've attached the wireframe to display
>> system stats on the existing dashboard.
>>

---

From: Akshay Joshi <[email-masked]>
Date: Thu, 15 Jun 2023 11:07:43 +0530

Hi Sahil

> Design 2 - Added buttons to toggle between existing dashboard data and

    I personally like Design 2 as we have only one main tab "Dashboard" and
then two sub-tabs "General"(Can be changed) and "System Statistics".

---

From: Aditya Toshniwal <[email-masked]>
Date: Thu, 15 Jun 2023 11:21:11 +0530

Hi Sahil,

I would suggest club OS, CPU, Process, Disk and I/O in a tabbed control.
(Taking inspiration from the task manager).
It will reduce the network calls, cluttering and improve DOM performance.

On Thu, Jun 15, 2023 at 11:08 AM Akshay Joshi <[email-masked]>
wrote:

>     I personally like Design 2 as we have only one main tab "Dashboard"
> and then two sub-tabs "General"(Can be changed) and "System Statistics".
>
>>
>> Thanks,
>> Sahil
>>
>>
>>
>>

-- 
Thanks,
Aditya Toshniwal
pgAdmin Hacker | Sr. Software Architect | *enterprisedb.com*
<https://www.enterprisedb.com/>
"Don't Complain about Heat, Plant a TREE"

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 15 Jun 2023 14:25:33 +0530

Hi Aditya,

Thank you for pointing this out. It would also be more convenient for users
to navigate to specific statistics easily.

So, can we finalise the following design?
- Single dashboard with buttons to toggle between General (existing
graphs/stats) and System Statistics.
- Clubbing OS, CPU, Process, Disk and I/O in tabbed control.

Thanks,
Sahil

On Thu, 15 Jun 2023 at 11:21, Aditya Toshniwal <
[email-masked]> wrote:

> On Thu, Jun 15, 2023 at 11:08 AM Akshay Joshi <
> [email-masked]> wrote:
>
>> Hi Sahil
>>
>>> On Wed, 14 Jun 2023 at 10:12, Akshay Joshi <
>>> [email-masked]> wrote:
>>>
>>>> Hi Sahil
>>>>
>>>>> I am working on pgadmin4 to let users see their system-level
>>>>> statistics on the dashboard. In this mail, I've attached the wireframe to
>>>>> display system stats on the existing dashboard.
>>>>>

---

From: Dave Page <[email-masked]>
Date: Thu, 15 Jun 2023 10:52:08 +0100

On Thu, 15 Jun 2023 at 09:55, Sahil Harpal <[email-masked]>
wrote:

> Hi Aditya,
>
> Thank you for pointing this out. It would also be more convenient for
> users to navigate to specific statistics easily.
>

Why use buttons and not tabs? Tabs are far more flexible as they can be
re-arranged, docked differently etc.

> - Clubbing OS, CPU, Process, Disk and I/O in tabbed control.

I think the current design has too much on one big page, so yes, I'd want
to see those split up onto different tabs. Not sure about the grouping
though. Maybe:

Summary (OS info, system specs etc)
CPU
Memory
Storage (including I/O)

Process info would be included on each tab as related to that tab's content
- e.g. CPU per process on the CPU tab, memory per process on the memory
tab, etc..)

>>>>> On Tue, Jun 13, 2023 at 4:27 PM Sahil Harpal <
>>>>> [email-masked]> wrote:
>>>>>
>>>>>> Dear all,
>>>>>>

-- 
Dave Page
Blog: https://pgsnake.blogspot.com
Twitter: @pgsnake

EDB: https://www.enterprisedb.com

---

From: Khushboo Vashi <[email-masked]>
Date: Thu, 15 Jun 2023 15:37:29 +0530

Regarding I/O analysis, what would be more beneficial, combining total
read/total write etc., per disk OR Sahil doing a different graph for each
parameter for all the disks?

On Thu, Jun 15, 2023 at 3:22 PM Dave Page <[email-masked]> wrote:

> Process info would be included on each tab as related to that tab's
> content - e.g. CPU per process on the CPU tab, memory per process on the
> memory tab, etc..)
>
>
>> Thanks,
>> Sahil
>>
>>
>>>>> Here are a few more designs that I have created based on the
>>>>> discussion with my mentors. I would love to know your thoughts on them.
>>>>>
>>>>>> At first glance, it looks good to me. Seems you have created a new
>>>>>> tab System Statistics instead of using the existing dashboard.
>>>>>>

---

From: Dave Page <[email-masked]>
Date: Thu, 15 Jun 2023 11:57:30 +0100

> parameter for all the disks?

I think combining R/W is fine, as long as it uses two scales in case the
values are wildly different (which is likely).

>>>> I would suggest club OS, CPU, Process, Disk and I/O in a tabbed
>>>> control. (Taking inspiration from the task manager).
>>>>> On Thu, Jun 15, 2023 at 1:42 AM Sahil Harpal <
>>>>>> Design 2 - Added buttons to toggle between existing dashboard data
>>>>>> and system statistics.
>>>>>>
>>>>>
>>>>>     I personally like Design 2 as we have only one main tab
>>>>> "Dashboard" and then two sub-tabs "General"(Can be changed) and "System
>>>>> Statistics".
>>>>>
>>>>>>
>>>>>> Thanks,
>>>>>> Sahil
>>>>>>
>>>>>>
>>>>>>
>>>>>>

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 16 Jun 2023 14:15:14 +0530

> values are wildly different (which is likely).

So should I combine all the parameters (Total read/write operations, Total
Bytes read/write, and time spent) in a single graph for one disk or just
the total number of read/write operations?
<https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&>
Sender
notified by
Mailtrack
<https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&>
16/06/23,
14:14:28

On Thu, 15 Jun 2023 at 16:27, Dave Page <[email-masked]> wrote:

>>> I think the current design has too much on one big page, so yes, I'd
>>> want to see those split up onto different tabs. Not sure about the grouping
>>> though. Maybe:
>>>

---

From: Sahil Harpal <[email-masked]>
Date: Sat, 17 Jun 2023 14:31:05 +0530

Hi Dave,

Could you please confirm whether we can proceed with the following grouping?

*1. Summary*

   - OS information
   - Sys CPU Information
   - Sys Process Information

*2. CPU*

   - Sys CPU Usage Information
   - Sys Load Avg Information
   - Process Name/Pid - CPU Usage (From Process)

*3. Memory*

   - Sys Memory Information
   - Process Name/Pid - Memory Usage and Memory Bytes (From Process)

*4. Storage (including I/O)*

   - Sys Disk Information
   - Sys I/O Analysis Information

I have also attached the dashboard layout, as you suggested.

Thanks,
Sahil

---

From: Dave Page <[email-masked]>
Date: Mon, 19 Jun 2023 09:37:04 +0100

> I have also attached the dashboard layout, as you suggested.

Seems reasonable to me. A wireframe would seem like the best next step, to
confirm we're all happy with what's proposed. It's hard to visualise from a
list of bullet points.

---

From: Ashesh Vashi <[email-masked]>
Date: Mon, 19 Jun 2023 14:19:27 +0530

On Mon, Jun 19, 2023 at 2:07 PM Dave Page <[email-masked]> wrote:

>> Can we please remove the 'Sys' prefix from these chart titles? (It looks
redundant to me).

--
Ashesh Vashi

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 19 Jun 2023 19:59:58 +0530

> the total number of read/write operations?

Could you please also clarify this?

On Fri, 16 Jun 2023 at 14:15, Sahil Harpal <[email-masked]>
wrote:

> <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> Sender
> notified by
> Mailtrack
> <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 16/06/23,
> 14:14:28
>

---

From: Dave Page <[email-masked]>
Date: Mon, 19 Jun 2023 15:33:17 +0100

On Mon, 19 Jun 2023 at 15:30, Sahil Harpal <[email-masked]>
wrote:

>> So should I combine all the parameters (Total read/write operations,
>> Total Bytes read/write, and time spent) in a single graph for one disk or
>> just the total number of read/write operations?
>>
>

Don't combine ops/time/bytes etc, but you can combine read/write,
input/output etc. as we do on the existing graphs.

>> So should I combine all the parameters (Total read/write operations,
>> Total Bytes read/write, and time spent) in a single graph for one disk or
>> just the total number of read/write operations?
>>>>> Why use buttons and not tabs? Tabs are far more flexible as they can
>>>>> be re-arranged, docked differently etc.
>>>>>
>>>>>
>>>>>>>>>> At first glance, it looks good to me. Seems you have created a
>>>>>>>>>> new tab System Statistics instead of using the existing dashboard.
>>>>>>>>>>

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 19 Jun 2023 20:41:23 +0530

> confirm we're all happy with what's proposed. It's hard to visualise from a

Hi all,

I am attaching the updated wireframes.

Thanks,
Sahil

---

From: Dave Page <[email-masked]>
Date: Mon, 19 Jun 2023 16:20:55 +0100

On Mon, 19 Jun 2023 at 16:11, Sahil Harpal <[email-masked]>
wrote:

>> Seems reasonable to me. A wireframe would seem like the best next step,
>> to confirm we're all happy with what's proposed. It's hard to visualise
>> from a list of bullet points.
>>
>
> Hi all,
>

Hi,

It's not quite what I was suggesting - you have Read for 4 disks on one
graph, and Write for 4 on another etc. (and then total reads and writes
separately for each disk). I was suggesting one graph per disk (as you did
for reads/writes) for each pair of read/write metrics.

I'd aim for 3 graphs per row on a normal display (Total Reads/Total Writes,
Bytes Read/Bytes Written, Time Reading/Time Writing), and 1 for small
displays (never 2, as that will always look unbalanced).

As Ashesh noted, you should also omit the "Sys" part of the names (and
various other labels will need to be cleaned up), but there's no need to do
that on the wireframe.

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 20 Jun 2023 01:31:17 +0530

Hi Dave,

On Mon, 19 Jun 2023 at 20:51, Dave Page <[email-masked]> wrote:

> I'd aim for 3 graphs per row on a normal display (Total Reads/Total
> Writes, Bytes Read/Bytes Written, Time Reading/Time Writing).
>

I am attaching the new design.
I have added 3 graphs per row for every Disk separately. Could you please
confirm whether it is what you are suggesting?

---

From: Dave Page <[email-masked]>
Date: Tue, 20 Jun 2023 10:39:55 +0100

> confirm whether it is what you are suggesting?
Looks good to me!

---

From: Sahil Harpal <[email-masked]>
Date: Sun, 25 Jun 2023 02:31:59 +0530

I tried combining the process and handle count in a single graph. But as
you can see in the attached image, insights are not properly visible since
the difference between the values is too large. Even when the process count
is 320, without tooltips, it appears as zero. Can we draw separate graphs
for both? Or do you think the current single combined version is fine?

---

From: Dave Page <[email-masked]>
Date: Sat, 24 Jun 2023 22:32:03 +0100

Can you add a different scale on the right hand side? I haven’t
familiarised myself with the library we’re using now, but others I’ve used
can do that.

-- 
-- 
Dave Page
https://pgsnake.blogspot.com

EDB Postgres
https://www.enterprisedb.com

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 26 Jun 2023 14:51:41 +0530

> familiarised myself with the library we’re using now, but others I’ve used

Yeah sure. I think we can do this by passing few additional configuration
options. I'll let you know it that works.

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 11 Jul 2023 11:58:29 +0530

Hi,

I have written code for the Summary and CPU tabs and would like to post it
here for review.

I'm currently displaying the static values in the process info pie chart
because of a minor bug. The pg_sys_process_info() query takes much longer
(around 2 mins) to execute and prevents the updation of other graphs and
tables. I tried adding it in separate useInterval with larger pollDelay,
but it didn't work. In the patch, I commented out that snippet (In
Summary.jsx).

I'm attaching the *WIP.patch* file which contains the latest changes and
also the SS of the Summary and CPU tabs.

---

From: Ashesh Vashi <[email-masked]>
Date: Tue, 11 Jul 2023 12:04:35 +0530

> but it didn't work. In the patch, I commented out that snippet (In
Try preloading the extension in the PostgreSQL server.
e.g.  Add this extension in the 'shared_preload_libraries' in
postgresql.conf.

Reference: https://pgpedia.info/s/shared_preload_libraries.html

-- Ashesh

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 11 Jul 2023 14:29:08 +0530

> Reference: https://pgpedia.info/s/shared_preload_libraries.html
Thank you, Ashesh! I will try this and provide you with an update.

On Tue, 11 Jul 2023 at 12:39, Aditya Toshniwal <
[email-masked]> wrote:

> Hi Sahil,
>
> Just to mention, make sure you're not using any chart component other than
> StreamingChart if the data is frequently updated.
> We have faced performance issues for continuously updating charts with
> Chart.js.
>

Also, as Aditya has mentioned, yeah, it will definitely affect the
performance, as re-rendering the charts would be costly. So, would love to
know suggestions for Disk info and Process info, as we have decided to use
pie and bar charts over there.
Either we can reload the charts only when the tab changes, or we can use
StreamingChart for them too?

Also, currently, StreamingChart is not formatting the axis values and takes
much space in case of larger values eg. memory_usage, handle_count etc. Can
we add a custom formatter for y-axis values? I have attached the images for
the same.

---

From: Aditya Toshniwal <[email-masked]>
Date: Tue, 11 Jul 2023 14:37:30 +0530

Hi Sahil,

On Tue, Jul 11, 2023 at 2:29 PM Sahil Harpal <[email-masked]>
wrote:

>> Just to mention, make sure you're not using any chart component other
>> than StreamingChart if the data is frequently updated.
Disk info doesn't need to be updated live. You can update it once on every
tab change. I feel process info should be a bar chart. The categories are
fixed in number and we can use StreamingChart for bar chart.

> Also, currently, StreamingChart is not formatting the axis values and
> takes much space in case of larger values eg. memory_usage, handle_count
> etc. Can we add a custom formatter for y-axis values? I have attached the
> images for the same.
>
Sure, you can tweak StreamingChart.

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 11 Jul 2023 20:45:09 +0530

> Thank you, Ashesh! I will try this and provide you with an update.
I tried adding 'system_stats' in the 'shared_preload_libraries', but it
doesn't work.

> fixed in number and we can use StreamingChart for bar chart.
 Okay sure.

Please ignore the previous WIP.patch file. I missed to include few
untracked changes.
I have attached the new patch file. Sorry for the inconvenience.

New patch consist:

   - Single dashboard with option to toggle between General and System
   Statistics
   - Summary tab (except process info details).
   - CPU Details
   - Memory Details

Thanks,
Sahil

---

From: Ashesh Vashi <[email-masked]>
Date: Wed, 12 Jul 2023 10:26:31 +0530

> I tried adding 'system_stats' in the 'shared_preload_libraries', but it
Did you restart the database server?

-- Ashesh

>> Disk info doesn't need to be updated live. You can update it once on
>> every tab change. I feel process info should be a bar chart. The
>> categories are fixed in number and we can use StreamingChart for bar chart.
>>
>  Okay sure.
>

---

From: Khushboo Vashi <[email-masked]>
Date: Wed, 12 Jul 2023 10:47:05 +0530

On Tue, Jul 11, 2023 at 8:45 PM Sahil Harpal <[email-masked]>
wrote:

>  It fails while applying. Can you please rebase your patch and send it?

Thanks,

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 12 Jul 2023 15:58:48 +0530

>  It fails while applying. Can you please rebase your patch and send it?

Could you please try the attached patch.

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 12 Jul 2023 16:19:53 +0530

On Wed, 12 Jul 2023 at 10:26, Ashesh Vashi <[email-masked]>
wrote:

>>> On Tue, 11 Jul 2023 at 12:04, Ashesh Vashi <
>>> [email-masked]> wrote:
>>>
Yep.

---

From: Ashesh Vashi <[email-masked]>
Date: Wed, 12 Jul 2023 16:33:33 +0530

>> Did you restart the database server?
If it is an extension issue, you may want to create an issue in its github
repo with reproduction steps, current & expected behaviour.

-- Ashesh

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 21 Jul 2023 01:59:07 +0530

> repo with reproduction steps, current & expected behaviour.

I think the issue is mostly with windows systems can anyone please confirm
whether the pg_sys_process_info() take long time to execute on Linux or Mac
systems also? Like in case of Windows it call Win32_Process.
If we somehow we able to execute this query seperately, I think we would
probably resolve this issue as then it won't block others.

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 21 Jul 2023 02:02:50 +0530

> Could you please try the attached patch.

Could you please confirm whether it's working or not? Also is there
anything that we can improve in this patch.

Thanks,
Sahil

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 24 Jul 2023 01:30:33 +0530

Hello all,
Regarding the storage tab and the disk information charts, we have decided
to display two charts:

   1. A pie chart to represent the proportion of total space.
   2. A bar chart to display the space available and used.

However, I'm facing an issue with the output of a query, as it is returning
null values for "mount_point" and "drive_letter," and the same names for
"file_system." This makes it difficult to distinguish between different
disks.

We need to find a suitable label or identifier to distinguish all the disks
correctly. Any suggestions or solutions to this problem?

Please find the attached image showing the output of a query for your
reference.

Thanks,
Sahil

---

From: Ashesh Vashi <[email-masked]>
Date: Mon, 24 Jul 2023 10:56:52 +0530

On Mon, Jul 24, 2023 at 1:30 AM Sahil Harpal <[email-masked]>
wrote:

> However, I'm facing an issue with the output of a query, as it is
> returning null values for "mount_point" and "drive_letter," and the same
> names for "file_system." This makes it difficult to distinguish between
> different disks.
>
Please share the exact output of the query to get any suggestions.

-- Ashesh

>
> We need to find a suitable label or identifier to distinguish all the
> disks correctly. Any suggestions or solutions to this problem?
>

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 24 Jul 2023 14:59:51 +0530

> Please share the exact output of the query to get any suggestions.
The following is the output returned by the query:

 mount_point | file_system | drive_letter | drive_type | file_system_type |
> total_space  |  used_space  |  free_space  | total_inodes | used_inodes |
> free_inodes
> -------------+-------------+--------------+------------+------------------+--------------+--------------+--------------+--------------+-------------+-------------
>
>              | NTFS        | C:           |          3 |
>  | 499350761472 |  86123380736 | 413227380736 |              |             |
>              | NTFS        |              |          3 |
>  |    633335808 |    543641600 |     89694208 |              |             |
>              | NTFS        |              |          3 |
>  | 500913139712 | 106947141632 | 393965998080 |              |             |
>              | NTFS        |              |          3 |
>  | 499288895488 | 237867192320 | 261421703168 |              |             |
>              | FAT32       |              |          3 |
>  |    100663296 |     52180992 |     48482304 |              |             |
> (5 rows)

---

From: Dave Page <[email-masked]>
Date: Mon, 24 Jul 2023 11:04:09 +0100

On Mon, 24 Jul 2023 at 10:30, Sahil Harpal <[email-masked]>
wrote:

>  mount_point | file_system | drive_letter | drive_type | file_system_type
>> | total_space  |  used_space  |  free_space  | total_inodes | used_inodes |
>> free_inodes
On your system, what are the volumes without letters etc? If they're things
like swap/pagefile, recovery partition etc, then they can probably be
omitted (e.g. SELECT ... WHERE mount_point IS NOT NULL OR drive_letter IS
NOT NULL).

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 24 Jul 2023 16:17:01 +0530

On Mon, 24 Jul 2023 at 15:34, Dave Page <[email-masked]> wrote:

> On your system, what are the volumes without letters etc? If they're
> things like swap/pagefile, recovery partition etc, then they can probably
> be omitted (e.g. SELECT ... WHERE mount_point IS NOT NULL OR drive_letter
> IS NOT NULL).
>

 On my system, the SSD is assigned the letter C, and I have partitioned my
HDD into two partitions with the letters F and G.

---

From: Dave Page <[email-masked]>
Date: Mon, 24 Jul 2023 12:09:01 +0100

> HDD into two partitions with the letters F and G.

OK, so F and G are not being shown in the query results (or more correctly,
they are there, but the drive letter is showing as NULL?). If so, that
seems like a bug in the extension.

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 25 Jul 2023 14:21:08 +0530

On Mon, 24 Jul 2023 at 16:39, Dave Page <[email-masked]> wrote:

> OK, so F and G are not being shown in the query results (or more
> correctly, they are there, but the drive letter is showing as NULL?). If
> so, that seems like a bug in the extension.
>
Yeah, it's showing NULL for the F and G drives. Can anyone please confirm
this once to just ensure it's not my system's fault?

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 27 Jul 2023 13:09:31 +0530

> Could you please try the attached patch.
Just a follow-up email to check if I can proceed with a similar structure
and logic for the remaining disk tab.
If anyone has faced any issues while using it or has any suggestions for
improvement, please let me know, and I will make the necessary changes and
follow the same approach for the disk tab. Although there is an issue with
drive's letters, the I/O analysis of block devices is working just fine on
my system, so I can probably start working on it parallelly.

Thanks,
Sahil

---

From: Khushboo Vashi <[email-masked]>
Date: Thu, 27 Jul 2023 13:59:38 +0530

Hi Sahil,

On Thu, Jul 27, 2023 at 1:09 PM Sahil Harpal <[email-masked]>
wrote:

> Some initial review comments.

- While applying the patch, I got warnings; please fix those.
- Fix PEP-8 errors (yarn run pep8)
- Fix the linter errors. Run *yarn run bundle:dev* instead of *yarn run
webpacker so* you will get the linter errors on every run.
- If the System Stat extension does not exist, display the appropriate
message instead of blank graphs.
- For the first time, graphs start from the opposite side, and after the
following API call, those get adjusted; please fix that.
- Please consider the refresh rate for the API calls (preferences settings
> Dashboards > Refresh rates)

The code review is in progress; I will send my review comments once
completed.

Thanks,
Khushboo

---

From: Khushboo Vashi <[email-masked]>
Date: Thu, 27 Jul 2023 16:26:46 +0530

On Thu, Jul 27, 2023 at 1:59 PM Khushboo Vashi <
[email-masked]> wrote:

> You have made different files tab-wise; it would be more manageable if you
could put them under a subfolder OR start a name with system_state or
something like that.

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 2 Aug 2023 18:13:46 +0530

Hi Khushboo,

On Thu, 27 Jul 2023 at 16:26, Khushboo Vashi <
[email-masked]> wrote:

>> - Please consider the refresh rate for the API calls (preferences
>> settings > Dashboards > Refresh rates)
>>
>>>
Thank you for the feedback. I have made all the changes as you have
suggested, except for the issue where graphs are starting from opposite
sides. I am using the same StreamingChart component that is already there.
I just made a few changes to handle multiple Y-axes. I tried debugging it,
but haven't found a solution yet. However, I also checked the pgAdmin4
desktop application, and I observed a similar behavior there. The initial
graphs start from the opposite side and then get adjusted automatically,
but the transition is a little faster there. Could you please help identify
what might be causing this issue?

Thank you,
Sahil

---

From: Aditya Toshniwal <[email-masked]>
Date: Thu, 3 Aug 2023 09:32:10 +0530

Hi Sahil,

On Wed, Aug 2, 2023 at 6:14 PM Sahil Harpal <[email-masked]>
wrote:

>> You have made different files tab-wise; it would be more manageable if
>> you could put them under a subfolder OR start a name with system_state or
>> something like that.
Because it is the default behaviour of streaming. You can add a prop
reverse=true to StreamingChart and change the code ret.reverse(); based on
condition.
Unrelated to this, I think instead of showing disk sizes in bytes you can
show them in a human readable format like below used in Statistics tab of
Tables collection node.

---

From: Sahil Harpal <[email-masked]>
Date: Sun, 6 Aug 2023 13:21:26 +0530

Hi Aditya,
On Thu, 3 Aug 2023 at 09:32, Aditya Toshniwal <
[email-masked]> wrote

> reverse=true to StreamingChart and change the code ret.reverse(); based
> on condition.
>
So basically, you are suggesting to add one additional property to the
streaming chart, right? Based on its value, apply ret.reverse(). This means
if reverse is true, apply ret.reverse(), otherwise don't. But it is
required to reverse our data every time, otherwise, I believe the most
recent data point will be at the beginning of our plot.
I've tried one more approach here. If our data array is full, this graph
shifting won't happen. So, if we initialize our data list with null values,
there won't be any visible shift. What do you think about this solution?

> show them in a human readable format like below used in Statistics tab of
Sure I'll do this!

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 7 Aug 2023 11:00:39 +0530

Hi Sahil,

> there won't be any visible shift. What do you think about this solution?
I would suggest changing the behaviour in StreamingChart so that it can be
used at other places. If you want to reverse it then you can still do it. I
had achieved reverse direction with the following piece of code. Basically,
creating an array of 75 points, filling it with available points and
reverse. You can change it based on reverse=true flag. In your case, simply
reverse, not need of 75 points.
Array.from(new Array(xRange).keys()),
...(data.datasets?.map((d)=>{
let ret = [...d.data];
ret.reverse();
return ret;
})??{}),

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 7 Aug 2023 16:47:27 +0530

Hi Aditya,
On Mon, 7 Aug 2023 at 11:01, Aditya Toshniwal <
[email-masked]> wrote:

> reverse. You can change it based on reverse=true flag. In your case,
> simply reverse, not need of 75 points.

I'm a little confused here. So, the code snippet above is exactly what's
used to initialize the data currently.

The expected behavior is that the graph should start from the right side
only. However, currently, when the page loads, for a few seconds, the
graphs are visible on the left side and then shift to the right.

I think we can skip the reverse if we make changes in the statsReducer
method.
action.counter ?  action.incoming[label] - action.counterData[label] :
action.incoming[label],
        ...state[label].slice(0, X_AXIS_LENGTH-1),

Here, we are adding new data to the beginning and selecting the first
X_AXIS_LENGTH-1 datapoints from the previous state. However, an alternative
approach would be to initially take the X_AXIS_LENGTH-1 elements from the
end of the array, then add a new element to the end. This would eliminate
the need to reverse the array.

I believe this reversal isn't causing any issues, but something might be
occurring during graph plotting. Reversing just ensures that the most
recent data point remains on the right within the stream.

Thank you,
Sahil

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 7 Aug 2023 17:11:50 +0530

On Mon, Aug 7, 2023 at 4:47 PM Sahil Harpal <[email-masked]>
wrote:

>> I would suggest changing the behaviour in StreamingChart so that it can
>> be used at other places. If you want to reverse it then you can still do
>> it. I had achieved reverse direction with the following piece of code.
>> Basically, creating an array of 75 points, filling it with available points
>> and reverse. You can change it based on reverse=true flag. In your case,
OK I thought you wanted the graph to go from left to right.  Yeah, I have
seen that glitch a few times (but rare). I think you can ignore it for now,
we can look into it once we get time. It is not a priority.
The reason data reversing and stuff is maintained in StreaminChart is -
Pass the data points and StreamingChart will appear from right to left.
Don't want the source to take efforts to reverse and fill.

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 10 Aug 2023 00:37:42 +0530

Hi all,

I have attached the updated patch with recent changes.

New changes:

   1. Displayed the appropriate message If the System Stat extension does
   not exist.
   2. Provided option to configure refresh rates for the API calls
   (Preferences settings > Dashboards > Refresh rates).
   3. Added I/O analysis of block devices under the storage tab.
   4. Fixed PEP-8 errors.
   5. Fixed the linter errors.
   6. Moved all the system stats related .jsx files under a seperate folder
   "dashboard/static/js/SystemStats".
   7. Added formatter to convert disk sizes (in bytes) to human readable
   format.

Pending Work:

   1. Process information -
      - Issue: The pg_sys_process_info() query takes much longer (more than
      2 mins) to execute and prevents the updation of other graphs and tables.
   2. Disk information -
      - Issue: The pg_sys_disk_info() query returns NULL value for some of
      the drive letters.
   3. StreamingChart -
      - Issue: Graph shifting glitch. For the first time, graphs start from
      the opposite side, and after the following API call or a few
seconds later,
      those get adjusted.

I need suggestions for labels for different tables and charts. Also, could
you please clarify the use of the counterData variable, which is used for
some of the charts (tps_stats, ti_stats, to_stats, and bio_stats)?

Thank you,
Sahil

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 16 Aug 2023 08:29:58 +0530

Hi,
This email is regarding the recent patch I shared with you. Have you
encountered any issues or identified areas for improvement? Additionally,
could you assist me in resolving the challenges I'm currently facing and
provide suggestions for chart titles?

Thanks,
Sahil

On Thu, 10 Aug 2023 at 00:37, Sahil Harpal <[email-masked]>
wrote:

>    6. Moved all the system stats related .jsx files under a
>    seperate folder "dashboard/static/js/SystemStats".
>       - Issue: The pg_sys_process_info() query takes much longer (more
>       than 2 mins) to execute and prevents the updation of other graphs and
>       tables.
>    2. Disk information -
>       - Issue: The pg_sys_disk_info() query returns NULL value for some
>       of the drive letters.
>    3. StreamingChart -
>       - Issue: Graph shifting glitch. For the first time, graphs start
>       from the opposite side, and after the following API call or a few seconds
>       later, those get adjusted.
>

---

From: Khushboo Vashi <[email-masked]>
Date: Wed, 16 Aug 2023 09:48:21 +0530

Can you please rebase the patch and send it again?

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 16 Aug 2023 11:08:49 +0530

Could you please try this attached patch.

---

From: Khushboo Vashi <[email-masked]>
Date: Wed, 16 Aug 2023 11:13:24 +0530

> Could you please try this attached patch.
Still failing.

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 16 Aug 2023 11:51:15 +0530

I've noticed something here. I cleared all the errors using 'yarn run
bundle:dev,' except for the unused 'counterData' variable, which I'll
correct soon. But when I attempted to apply this patch on a freshly cloned
repository, it displayed the following warnings. However, it didn't fail,
and all the files and folders were created successfully.
I removed all the whitespaces before creating the patch, and I have also
checked all these lines where it is showing the trailing whitespace, but
there are no trailing whitespaces. The 'yarn run bundle:dev' command also
does not give any prompt for this. Could you please suggest what to do?

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 16 Aug 2023 15:25:26 +0530

I have pushed the recent changes to my GitHub repository.
If you are still unable to apply the patch, you can pull it from here. In
the meantime, I'll check what might be wrong with this patch file.
link - https://github.com/Sahil1479/pgadmin4/tree/system_stats

---

From: Khushboo Vashi <[email-masked]>
Date: Thu, 17 Aug 2023 10:39:09 +0530

Hi Sahil,

> link - https://github.com/Sahil1479/pgadmin4/tree/system_stats
Can you please fix the below JS error ? Due to this CPU and Memory tabs are
not working.

Thanks,
Khushboo

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 17 Aug 2023 11:48:36 +0530

Hi Khushboo,

On Thu, 17 Aug 2023 at 10:39, Khushboo Vashi <
[email-masked]> wrote:

> Can you please fix the below JS error ? Due to this CPU and Memory tabs
> are not working.
>

For me, it's working properly. I think in your case, the system is
returning a null value for some of the processes. Could you please confirm
this? If it is so, then either we can set a default value of 0 or simply a
null string. Using console.log(), you can see what it is returning.

if(data.hasOwnProperty('pmu_stats')){
let pmu_info_list = [];
  const pmu_info_obj = data['pmu_stats'];
  console.log(pmu_info_obj); // It will print entire list in the console
  for (const key in pmu_info_obj) {
  pmu_info_list.push({ icon: '', pid: pmu_info_obj[key]['pid'], name:
pmu_info_obj[key]['name'],
memory_usage: formatBytes(pmu_info_obj[key]['memory_usage']), memory_bytes:
formatBytes(pmu_info_obj[key]['memory_bytes']) });
  }
setProcessMemoryUsageStats(pmu_info_list);
}

---

From: Khushboo Vashi <[email-masked]>
Date: Thu, 17 Aug 2023 14:39:12 +0530

On Thu, Aug 17, 2023 at 11:48 AM Sahil Harpal <[email-masked]>
wrote:

> Sample data of my system to fix this issue:

   1. process331:
      1. memory_bytes: null
      2. memory_usage: null
      3. name: "QuickLookUIServi"
      4. pid: 938
      5. row_number: 331

> memory_usage: formatBytes(pmu_info_obj[key]['memory_usage']), memory_bytes
> : formatBytes(pmu_info_obj[key]['memory_bytes']) });
>   }

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 17 Aug 2023 14:50:00 +0530

On Thu, 17 Aug 2023 at 14:39, Khushboo Vashi <
[email-masked]> wrote:

>       1. memory_bytes:null
>       2. memory_usage:null
>       3. name:"QuickLookUIServi"
>       4. pid:938
>       5. row_number:331
>
> Okay, so it is an issue of null value then.
Are null values being returned for all processes or only for specific ones?
Also can you please verify it by running "SELECT * FROM
pg_sys_cpu_memory_by_process();" query in the query tool? Just want to
ensure I'm not making mistakes while processing the queries output.

---

From: Khushboo Vashi <[email-masked]>
Date: Thu, 17 Aug 2023 14:53:38 +0530

> Are null values being returned for all processes or only for specific ones?
It returns null for some of the processes, not for all.

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 17 Aug 2023 15:05:46 +0530

> It returns null for some of the processes, not for all.

Okay, great. So should we display null for those processes or 0B?

---

From: Dave Page <[email-masked]>
Date: Thu, 17 Aug 2023 10:38:16 +0100

> Okay, great. So should we display null for those processes or 0B?

null. We don't have any info, which is not the same as 0B.

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 17 Aug 2023 15:17:04 +0530

> null. We don't have any info, which is not the same as 0B.

Understood. Thank you!

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 17 Aug 2023 15:42:45 +0530

Hi Khushboo,

I have made the necessary changes and pushed them to the same
repository. Let me know if that resolves this null value issue.

Thank you,
Sahil

---

From: Khushboo Vashi <[email-masked]>
Date: Thu, 17 Aug 2023 17:57:43 +0530

Hi Sahil,

Please find the below review comments:

   - Do not use the Title case for the graph/chart’s heading. For example, *CPU
   Usage *should be *CPU usage*.
   - If I select any database without an extension installed and then
   select the database with the extension, the message (Extension is not
   installed) remains on the page. The database change doesn’t reflect on the
   UI.
   - CPU Usage () - What are these empty parentheses?
   - Please use the same grey background shades on the entire page.
   - Storage tab: If possible, please display the disk name in the heading
   - The Tooltip for graph points remains on the page. Please refer to the
   below screenshot.

   - Please use rounded corners for all the tables (same as graphs).
   - Sometimes graphs start from left and then shift to right. This issue I
   have reported in my initial review too.

Thanks,
Khushboo

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 18 Aug 2023 10:08:36 +0530

On Thu, 17 Aug 2023 at 17:57, Khushboo Vashi <
[email-masked]> wrote:

>
>    - The Tooltip for graph points remains on the page. Please refer to
>    the below screenshot.
>
>
Is this happening simply by moving the cursor within the graph area or when
resizing the screen?

For me, it's working fine if I move the cursor within the graph area, but I
can also sometimes observe this glitch when I attempt to change the screen
width and quickly move the cursor within the graph area.

---

From: Sahil Harpal <[email-masked]>
Date: Sat, 19 Aug 2023 16:20:01 +0530

On Thu, 17 Aug 2023 at 17:57, Khushboo Vashi <
[email-masked]> wrote:

>
>    - Sometimes graphs start from left and then shift to right. This issue
>    I have reported in my initial review too.
>
> For StreamingChart should I ignore it for now?
On Mon, 7 Aug 2023 at 17:12, Aditya Toshniwal <

> we can look into it once we get time. It is not a priority.

Or try the solution below?

Thank you,
Sahil

---

From: Sahil Harpal <[email-masked]>
Date: Sat, 19 Aug 2023 16:21:13 +0530

> some of the charts (tps_stats, ti_stats, to_stats, and bio_stats)?

Could you please help me with these blockers and doubts?

Thank you,
Sahil

---

From: Khushboo Vashi <[email-masked]>
Date: Mon, 21 Aug 2023 09:55:34 +0530

On Fri, Aug 18, 2023 at 10:08 AM Sahil Harpal <[email-masked]>
wrote:

> Is this happening simply by moving the cursor within the graph area or
> when resizing the screen?
>
This is happening by simply moving the cursor across the graphs on each
tab. Maybe you can try to reduce the graph refresh rate to 1 second and try.

>
> For me, it's working fine if I move the cursor within the graph area, but
> I can also sometimes observe this glitch when I attempt to change the
> screen width and quickly move the cursor within the graph area.
>

---

From: Khushboo Vashi <[email-masked]>
Date: Mon, 21 Aug 2023 09:59:02 +0530

On Sat, Aug 19, 2023 at 4:21 PM Sahil Harpal <[email-masked]>
wrote:

>> This may happen on Windows, can you try to fetch these details separately
(not combining with other charts) only for Windows?

>>    1. Disk information -
>> If it returns NULL then do not show anything for that field for
particular Disk.

>>    1. StreamingChart -
>> I need suggestions for labels for different tables and charts. Also,
>> could you please clarify the use of the counterData variable, which is used
>> for some of the charts (tps_stats, ti_stats, to_stats, and bio_stats)?
>>
>

---

From: Khushboo Vashi <[email-masked]>
Date: Mon, 21 Aug 2023 10:02:59 +0530

Sahil, once the issues get resolved, please raise the PR and we will do the
final review there.

On Mon, Aug 21, 2023 at 9:59 AM Khushboo Vashi <
[email-masked]> wrote:

>>> This may happen on Windows, can you try to fetch these details
> separately (not combining with other charts) only for Windows?
>
>>
>>>    1. Disk information -

---

From: Sahil Harpal <[email-masked]>
Date: Mon, 21 Aug 2023 10:51:19 +0530

pgAdmin4-cursor-rec.mp4
<https://drive.google.com/file/d/19_Fw-hvZue4_1tTED9INss33eZcfdIEd/view?usp=drive_web>
Hi Khushboo,
On Mon, 21 Aug 2023 at 09:55, Khushboo Vashi <

> tab. Maybe you can try to reduce the graph refresh rate to 1 second and try.

I'm unable to reproduce the issue even after modifying the refresh rate to
1 second. I have attached a screen recording to illustrate how it is
functioning on my end.
Do you have any thoughts on why the cursor issue might be happening?

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 22 Aug 2023 13:18:59 +0530

Hello Khushboo,

Thank you for sharing this with me. As you can see, towards the end, when
you encountered the tooltip issue, the size of the graph container was
changing. I even found this bug in the actual pgAdmin4 application
installed on my system. Please see the attached video.

Here's what I believe is happening: When the container's size changes, it
seems that tooltips continue to accumulate without being properly removed.
The method we use to display tooltips involves inserting a new element into
the DOM with the class name "uplot-tooltip". So, if we remove all the
existing tooltip elements before inserting a new one, it could potentially
resolve the issue. Would like to know your thoughts on this.

Thank you,
Sahil

On Mon, 21 Aug 2023 at 11:11, Khushboo Vashi <
[email-masked]> wrote:

> See the attachment.
>
> On Mon, Aug 21, 2023 at 10:51 AM Sahil Harpal <[email-masked]>
> wrote:
>
>>  pgAdmin4-cursor-rec.mp4
>>>>>    - The Tooltip for graph points remains on the page. Please refer
>>>>>    to the below screenshot.
>>>>>
>> I'm unable to reproduce the issue even after modifying the refresh rate
>> to 1 second. I have attached a screen recording to illustrate how it is
>> functioning on my end.

---

From: Khushboo Vashi <[email-masked]>
Date: Tue, 22 Aug 2023 16:02:28 +0530

Hi Sahil,

On Tue, Aug 22, 2023 at 1:19 PM Sahil Harpal <[email-masked]>
wrote:

> The method we use to display tooltips involves inserting a new element
> into the DOM with the class name "uplot-tooltip". So, if we remove all the
> It would be good if you fix this issue as you already investigated and
found the root cause. But if you have other things to complete as the
deadline is approaching you can create this issue at pgAdmin repo as it is
an existing one.

Thanks,
Khushboo

>>>> On Fri, Aug 18, 2023 at 10:08 AM Sahil Harpal <
>>>>>> Is this happening simply by moving the cursor within the graph area
>>>>> or when resizing the screen?
>>>>>

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 22 Aug 2023 16:45:34 +0530

> deadline is approaching you can create this issue at pgAdmin repo as it is

Sure, I'll try to fix this.

---

From: Sahil Harpal <[email-masked]>
Date: Tue, 22 Aug 2023 23:34:55 +0530

> separately (not combining with other charts) only for Windows?

I tried this, but it didn't work. I even created a separate endpoint to
fetch the data; however, it's still not working as expected. I believe it's
more of a server-side problem. I'm not entirely certain, but I think we're
executing the queries sequentially (Single threaded). This could be
preventing the updating of other graphs and tables.
Since the deadline is approaching, I'll first try to resolve other issues
and after that I'll look into this.

>>> If it returns NULL then do not show anything for that field for
For disk statistics, we have decided to use pie and bar charts, and we need
drive letters for labeling. I just observed that the query is now returning
drive letters for both SSD and HDD partitions, which were failing earlier.
Maybe it was my system's fault. However, there are still some entries for
which the drive letter is missing.
But as @Dave Page <[email-masked]> suggested:

> be omitted (e.g. SELECT ... WHERE mount_point IS NOT NULL OR drive_letter
Can I omit the rows with null values?

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 23 Aug 2023 00:43:44 +0530

Also. what should I use for labeling: mount_point or drive_letter? It's
possible that the query might not return either of these values on some
systems.
For instance, in my case, it's returning values for drive_letter but null
for mount_point. However, in the example provided (here
<https://pgsnake.blogspot.com/2020/06/systemstats-extension-for-postgresql.html>),
it's returning paths for mount_point and null for drive_letter.

On Tue, 22 Aug 2023 at 23:34, Sahil Harpal <[email-masked]>
wrote:

>>>>       - Issue: The pg_sys_disk_info() query returns NULL value for
>>>>       some of the drive letters.
>>>>
> For disk statistics, we have decided to use pie and bar charts, and we
> need drive letters for labeling. I just observed that the query is now
> returning drive letters for both SSD and HDD partitions, which were failing
> earlier. Maybe it was my system's fault. However, there are still some
> entries for which the drive letter is missing.

---

From: Khushboo Vashi <[email-masked]>
Date: Wed, 23 Aug 2023 11:37:04 +0530

> Can I omit the rows with null values?
Yes.

---

From: Khushboo Vashi <[email-masked]>
Date: Wed, 23 Aug 2023 11:51:13 +0530

> it's returning paths for mount_point and null for drive_letter.
Give first priority to Mount Point then drive letters (in most of the case
either of them will have value) and ignore if both are null.

>>>>>       - Issue: The pg_sys_process_info() query takes much longer
>>>>>       (more than 2 mins) to execute and prevents the updation of other graphs and
>>>>>       tables.
>>>>>

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 24 Aug 2023 20:07:40 +0530

Hi,
Can we include total space stats (left pie chart) in the same bar chart? or
would it be better if we keep it separate?

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 24 Aug 2023 20:27:50 +0530

On Sat, 19 Aug 2023 at 16:20, Sahil Harpal <[email-masked]>
wrote:

>>    - Sometimes graphs start from left and then shift to right. This
>>    issue I have reported in my initial review too.
>>
>> OK I thought you wanted the graph to go from left to right.  Yeah, I
>> have seen that glitch a few times (but rare). I think you can ignore it for
>> now, we can look into it once we get time. It is not a priority.
>>
>
> Can you please help me with this?

---

From: Aditya Toshniwal <[email-masked]>
Date: Fri, 25 Aug 2023 11:29:00 +0530

Hi Sahil,

On Thu, Aug 24, 2023 at 8:07 PM Sahil Harpal <[email-masked]>
wrote:

> Hi,
> Can we include total space stats (left pie chart) in the same bar chart?
> or would it be better if we keep it separate?
>
How do you propose to merge both? I would also suggest using a stacked bar
chart on the right. And format from bytes to MBs.

---

From: Aditya Toshniwal <[email-masked]>
Date: Fri, 25 Aug 2023 11:30:06 +0530

Hi Sahil,

>> Can you please help me with this?
Let me apply your patch and try once.

---

From: Aditya Toshniwal <[email-masked]>
Date: Fri, 25 Aug 2023 11:55:41 +0530

Hi Sahil,

On Fri, Aug 25, 2023 at 11:30 AM Aditya Toshniwal <
[email-masked]> wrote:

>>>> I've tried one more approach here. If our data array is full, this
>>>> graph shifting won't happen. So, if we initialize our data list with null
>>>> values, there won't be any visible shift. What do you think about this
>>>> solution?
>>>>
Can you please share the rebased patch?

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 25 Aug 2023 12:02:17 +0530

Hi Aditya,
On Fri, 25 Aug 2023 at 11:29, Aditya Toshniwal <

> chart on the right. And format from bytes to MBs.
Currently, I have implemented like this:
So, I was thinking of adding one more column for total space for each disk.
Regarding the stacked bar chart, we will need to increase the height of the
default chart container; otherwise, the proportion of different categories
won't be clearly visible in some cases.
And I believe that if we use a stacked bar chart, there won't be a need to
provide total space details, as the height of that stacked bar will be
nothing but the total space, right?

---

From: Aditya Toshniwal <[email-masked]>
Date: Fri, 25 Aug 2023 12:06:21 +0530

Hi Sahil,

On Fri, Aug 25, 2023 at 12:02 PM Sahil Harpal <[email-masked]>
wrote:

>> How do you propose to merge both? I would also suggest using a stacked
>> bar chart on the right. And format from bytes to MBs.
>>
>>>
> Regarding the stacked bar chart, we will need to increase the height of
> the default chart container; otherwise, the proportion of different
> categories won't be clearly visible in some cases.
I don't think we'll need to increase the height though. Even if you use
stacks, they will show total for each drive and not total available space.

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 25 Aug 2023 12:15:12 +0530

Hi Aditya,

On Fri, 25 Aug 2023 at 12:06, Aditya Toshniwal <
[email-masked]> wrote:

>>>> Can we include total space stats (left pie chart) in the same bar
>>>> chart? or would it be better if we keep it separate?
>>>>
>> And I believe that if we use a stacked bar chart, there won't be a need
>> to provide total space details, as the height of that stacked bar will be

Ahh yes, users won't be able to see the absolute total value. So should I
change it to a stacked bar with 3 categories then?

---

From: Aditya Toshniwal <[email-masked]>
Date: Fri, 25 Aug 2023 12:32:06 +0530

> change it to a stacked bar with 3 categories then?
I would suggest keeping the pie chart and making the stacks of used and
unused. If possible please keep the pie chart colors different from bar
chart.

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 25 Aug 2023 13:34:57 +0530

Hi Aditya,
On Fri, 25 Aug 2023 at 12:32, Aditya Toshniwal <
[email-masked]> wrote:

>>>>> On Thu, Aug 24, 2023 at 8:07 PM Sahil Harpal <
Ok, sure I'll do it.

> Can you please share the rebased patch?
Please find the attached patch with recent changes. It doesn't include this
stacked bar, but it contains things suggested in the second review, and I
also tried to resolve the tooltip issue. Let me know if it's working
correctly.
I have also pushed these changes here:
https://github.com/Sahil1479/pgadmin4/tree/system_stats [Branch:
system_stats]

I will share the final patch with a detailed summary of all the things that
have been changed once I complete this stacked/pie chart and a few more
refinements.

Thank you,
Sahil

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 25 Aug 2023 13:41:33 +0530

I have added the idea of array initialization for the 'Process & handle
count' chart. Let me know if similar can be used for all the streaming
charts to resolve the graph shifting issue.

On Fri, 25 Aug 2023 at 13:34, Sahil Harpal <[email-masked]>
wrote:

>>>> On Fri, Aug 25, 2023 at 12:02 PM Sahil Harpal <
>>>>>> How do you propose to merge both? I would also suggest using a
>>>>>> stacked bar chart on the right. And format from bytes to MBs.
>>>>>>
>>>>>>>
>>>>>>
>>>>> Regarding the stacked bar chart, we will need to increase the height
>>>>> of the default chart container; otherwise, the proportion of different
>>>>> And I believe that if we use a stacked bar chart, there won't be a
>>>>> need to provide total space details, as the height of that stacked bar will
>>>>> be nothing but the total space, right?
>>>>>
>>> Ahh yes, users won't be able to see the absolute total value. So should
>>> I change it to a stacked bar with 3 categories then?
>>>
> Please find the attached patch with recent changes. It doesn't include
> this stacked bar, but it contains things suggested in the second review,
> and I also tried to resolve the tooltip issue. Let me know if it's working
> correctly.
> I will share the final patch with a detailed summary of all the things
> that have been changed once I complete this stacked/pie chart and a few
> more refinements.
>
> Thank you,
> Sahil
>

---

From: Sahil Harpal <[email-masked]>
Date: Sat, 26 Aug 2023 11:36:26 +0530

Hi Khushboo,

On Mon, 21 Aug 2023 at 10:03, Khushboo Vashi <
[email-masked]> wrote:

> Sahil, once the issues get resolved, please raise the PR and we will do
> the final review there.
>
Could you please tell me to which branch I should raise the PR?
Also, should I remove the code responsible for the static DonutChart of
process information?

Thank you,
Sahil

---

From: Khushboo Vashi <[email-masked]>
Date: Sun, 27 Aug 2023 07:13:42 +0530

> Could you please tell me to which branch I should raise the PR?
Master branch

---

From: Sahil Harpal <[email-masked]>
Date: Sun, 27 Aug 2023 17:57:54 +0530

Hello everyone,

I have raised the PR <https://github.com/pgadmin-org/pgadmin4/pull/6721>.
I would like to request you all to review the changes and provide your
valuable feedback. Your insights and suggestions would be invaluable in
ensuring the quality and accuracy of the codebase.

Thank you,
Sahil

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 28 Aug 2023 10:43:40 +0530

Hi Sahil,

I have few observations. You have added separate titles for graphs and
other tabular data. This is inconsistent with existing UI.
For example,
like here:

like here:

The dashboard goes blank when I change refresh rates.

And regarding filling with nulls to fix the reversing issue of graph - you
can do it in StreamingChart itself when setting initialState var, as it is
StreamingChart's responsibility to do it.
Next review will be on the PR directly.

---

From: Sahil Harpal <[email-masked]>
Date: Thu, 31 Aug 2023 16:17:08 +0530

Hi Aditya,
I have made all these changes except the StreamingChart issue. I tried
filling an array with null values inside the StreamingChart component while
initializing initialState but still the issue is not resolved.
I have made following changes:

>  const initialState = [
>       let nullValues = new Array(xRange - d.data.length).fill(null);
>       let ret = [...nullValues, ...d.data];
>       ret.reverse();
>       return ret;
>     })??{}),
>   ];

It works fine if we initialize the data array with the null values but I'm
not getting why this is not working.

Thank you,
Sahil

31/08/23,
16:14:27

On Mon, 28 Aug 2023 at 10:44, Aditya Toshniwal <
[email-masked]> wrote:

>>>>> Sahil, once the issues get resolved, please raise the PR and we will
>>>>> do the final review there.
>>>>>

---

From: Aditya Toshniwal <[email-masked]>
Date: Thu, 31 Aug 2023 17:19:45 +0530

Hi Sahil,

OK fine. We will check it later. Not priority. Please also fix the review
raised on PR.

On Thu, Aug 31, 2023, 16:17 Sahil Harpal <[email-masked]> wrote:

> <https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11&> 31/08/23,
> 16:14:27
>
>> And regarding filling with nulls to fix the reversing issue of graph -
>> you can do it in StreamingChart itself when setting initialState var, as it
>> is StreamingChart's responsibility to do it.
>>>>> Also, should I remove the code responsible for the static DonutChart
>>>>> of process information?
>>>>>
>>>>> Thank you,
>>>>> Sahil
>>>>>
>>>>>>
>>
>> --
>> Thanks,
>> Aditya Toshniwal

---

From: Sahil Harpal <[email-masked]>
Date: Sun, 3 Sep 2023 02:30:42 +0530

Hi Aditya,

I have made almost all of the requested changes and pushed the latest code.
I just need a bit of clarification for a couple of suggestions that I have
posted in the reviews.

Thank you,
Sahil

On Thu, 31 Aug 2023 at 17:20, Aditya Toshniwal <
[email-masked]> wrote:

>> It works fine if we initialize the data array with the null values but
>> I'm not getting why this is not working.
>>
>> Thank you,
>> Sahil
>>
>>
>>>> I have raised the PR
>>>> <https://github.com/pgadmin-org/pgadmin4/pull/6721>.

---

From: Aditya Toshniwal <[email-masked]>
Date: Mon, 4 Sep 2023 11:17:18 +0530

Hi Sahil,

I have replied to the PR.

On Sun, Sep 3, 2023 at 2:31 AM Sahil Harpal <[email-masked]>
wrote:

> Hi Aditya,
>
> I have made almost all of the requested changes and pushed the latest
> code. I just need a bit of clarification for a couple of suggestions that I
> have posted in the reviews.
>
> Thank you,
> Sahil
>
>
>> OK fine. We will check it later. Not priority. Please also fix the
>> review raised on PR.
>>
>>>>>>>> Sahil, once the issues get resolved, please raise the PR and we
>>>>>>>> will do the final review there.
>>>>>>>>

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 8 Sep 2023 01:13:06 +0530

Hi Aditya,

Sorry for the delay; I've been a bit busy lately. I have made all the
requested changes. Could you please review it?

Thanks,
Sahil

On Mon, 4 Sept 2023 at 11:17, Aditya Toshniwal <
[email-masked]> wrote:

>>>>> On Sun, Aug 27, 2023 at 5:58 PM Sahil Harpal <
>>>>>> I would like to request you all to review the changes and provide
>>>>>> your valuable feedback. Your insights and suggestions would be invaluable
>>>>>> in ensuring the quality and accuracy of the codebase.
>>>>>>
>>>>>> Thank you,
>>>>>> Sahil
>>>>>>
>>>>>>>> Also, should I remove the code responsible for the static
>>>>>>>> DonutChart of process information?
>>>>>>>>
>>>>>>>> Thank you,
>>>>>>>> Sahil
>>>>>>>>
>>>>>>>>>
>>>>>
>>>>> --
>>>>> Thanks,
>>>>> Aditya Toshniwal

---

From: Aditya Toshniwal <[email-masked]>
Date: Fri, 8 Sep 2023 09:03:51 +0530

Hi Sahil,

Your PR is showing 135 file changes and a lot of commits which shouldn't
have appeared on your PR.
It is very difficult to identify your changes. Can you please check once?

On Fri, Sep 8, 2023 at 1:13 AM Sahil Harpal <[email-masked]>
wrote:

>>>>>> I have few observations. You have added separate titles for graphs
>>>>>> and other tabular data. This is inconsistent with existing UI.
>>>>>> For example,
>>>>>> like here:
>>>>>>
>>>>>> like here:
>>>>>>
>>>>>>
>>>>>>
>>>>>> And regarding filling with nulls to fix the reversing issue of graph
>>>>>> - you can do it in StreamingChart itself when setting initialState var, as
>>>>>> it is StreamingChart's responsibility to do it.

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 8 Sep 2023 10:50:12 +0530

Oh yeah! Maybe because I rebased the branch. I'll try to fix this.

On Fri, Sep 8, 2023, 9:04 AM Aditya Toshniwal <
[email-masked]> wrote:

>>>>>> I have made all these changes except the StreamingChart issue. I
>>>>>> tried filling an array with null values inside the StreamingChart component
>>>>>> while initializing initialState but still the issue is not resolved.
>>>>>> It works fine if we initialize the data array with the null values
>>>>>> but I'm not getting why this is not working.
>>>>>>
>>>>>> Thank you,
>>>>>> Sahil
>>>>>>
>>>>>>

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 8 Sep 2023 15:09:08 +0530

Hi Aditya,

I have fixed this.

Thank you,
Sahil

08/09/23,
15:08:19

On Fri, 8 Sept 2023 at 10:50, Sahil Harpal <[email-masked]>
wrote:

>>>>>>>> And regarding filling with nulls to fix the reversing issue of
>>>>>>>> graph - you can do it in StreamingChart itself when setting initialState
>>>>>>>> var, as it is StreamingChart's responsibility to do it.

---

From: Sahil Harpal <[email-masked]>
Date: Wed, 13 Sep 2023 10:21:50 +0530

Hello Aditya,

> It is very difficult to identify your changes. Can you please check once?

I have resolved the issue with the extra commits, and now there are only 9
files that I have updated.
Please let me know if there is anything else required from my side.

Thank you,
Sahil

---

From: Sahil Harpal <[email-masked]>
Date: Fri, 15 Sep 2023 13:48:10 +0530

Hi Khushboo,

Could you please suggest labels for the tables in the Memory and CPU tabs.
Also, I'm not able to reproduce the alignment issue that you have
mentioned, but I have added a fix to by setting width to 100% maybe it
would work.

Thank you,
Sahil