feat: Add tabs on system page

[svenvg93]

📃 Description

This PR adds tabs to the system page to seperate the diffrent charts and tables for a better structured overview.

• Core
  • CPU
  • Memory
  • Load Average
  • Temps
  • Bandwith
• Disk
  • Usage
  • IO
  • SMART
• GPU
  • GPU Power Draw chart (if power data exists)
  • GPU Engines chart (if engine data exists)
  • Individual GPU usage and VRAM charts for each GPU
• Containers
  • CPU
  • Memory
  • Network
  • Table overview
• Services
  • Systemd service overview

closes #1411

📷 Screenshots

[svenvg93]

@henrygd should be ready when you have time 😄

[svenvg93]

Hi @henrygd,
Sorry for bothering you. Just wanted to quickly ask your opinion. As the system file is getting pretty big. Would you think its a good idea to split the files per tab?

src/components/routes/system/
  ├── system.tsx (main file with tab structure)
  ├── core-metrics.tsx
  ├── disks-tab.tsx
  ├── gpu-tab.tsx
  ├── containers-tab.tsx
  └── services-tab.tsx

And then load them for each tab?

<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList>...</TabsList>
  
  <TabsContent value="overview">
    <CoreMetricsTab chartData={chartData} grid={grid} ... />
  </TabsContent>
  
  <TabsContent value="gpu">
    <GpuTab chartData={chartData} grid={grid} ... />
  </TabsContent>
  
  // ... other tabs
</Tabs>

[svenvg93]

@henrygd Would it be possible to get this one into the next release? There are some other small improvements open I would like to pick up for you, but this one is blocking me now 😅 .

[henrygd]

Sorry for the wait. I have a patch release prepped to go today, but I think it would make sense to get this in the next minor release. I'm going to try to get #539 in finally, and we could add a tab for proxmox details as well.

[svenvg93]

Sorry for the wait. I have a patch release prepped to go today, but I think it would make sense to get this in the next minor release. I'm going to try to get #539 in finally, and we could add a tab for proxmox details as well.

Sounds good! Do you me to change the structure for the charts as mentioned above or keep it all in one big file?

[henrygd]

Yes, I agree on splitting it up. Let's leave the -tab part out of the filenames, though, like gpu.tsx instead of gpu-tab.tsx. Thanks!

[svenvg93]

@henrygd this one is ready to go if you want

[henrygd]

Thank you for keeping this up to date and sorry for the extra work.

I took a peek and it seems these changes break the one minute time window. Don't worry about fixing if you don't have time. I can figure it out before merging, just want to make note of it here so I don't forget.

[svenvg93]

Thank you for keeping this up to date and sorry for the extra work.

I took a peek and it seems these changes break the one minute time window. Don't worry about fixing if you don't have time. I can figure it out before merging, just want to make note of it here so I don't forget.

Whoepsie, that is my fault.

I was able to fix it, but please double check 😄

[KriKrixs]

Is it maybe possible to add a "All" tab ? To keep the actual view ? I believe it will be cool for big screens

[svenvg93]

Is it maybe possible to add a "All" tab ? To keep the actual view ? I believe it will be cool for big screens

Not sure if a "All" would be the best option. We could make a toggle in the settings to turn the Tabs on/off depending on user preferences.

@henrygd Any thoughts on this?

[svenvg93]

@henrygd Sorry for the ping. Would it be possible to merge this one? The one minute charts are fixed, and every change on the system page will cause conflicts 😅