how to set up the Glances widget so that everything appears under the Glances tab?

[rankokrneta]

Description

Hello,

I'm seeking assistance with customizing the layout of the Glances graphs. Specifically, I aim to replicate a layout similar to the one shown in this image:

My goal is to have the Glances section span across the entire top of the page, with a configuration of 3x2 widgets positioned below it. Could you guide me on whether this is achievable and provide instructions on how to set it up?
my current state:

Thank you for your help!

homepage version

v0.8.10 (0af975b, Mar 24, 2024)

Installation method

Docker

Configuration

settings.yaml
---
# For configuration options and examples, please see:
# https://gethomepage.dev/latest/configs/settings

title: Homepage
language: rs
#background: 
     
background: link**
  image: 
  blur: sm # sm, "", md, xl... see https://tailwindcss.com/docs/backdrop-blur
  saturate: 25 # 0, 50, 100... see https://tailwindcss.com/docs/backdrop-saturate
  brightness: 25  # 0, 50, 75... see https://tailwindcss.com/docs/backdrop-brightness
  opacity: 75  # 0-100

providers:
  openweathermap: openweathermapapikey
  weatherapi: weatherapiapikey

layout:
  My First Gorup:
    style: row
    columns: 3


services.yaml

- My First Gorup:
    - System Monitoring:
    - Glances:
        icon: glances.png
        siteMonitor: http://192.168.10.10:2018
        href: http://192.168.10.10:2018
    - CPU Usage:    
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: info
            diskUnits: bytes # optional, bytes (default) or bbytes. Only applies to disk
            refreshInterval: 1000 # optional - in milliseconds, defaults to 1000 or more, depending on the metric
            pointsLimit: 15 # optional, defaults to 15
    - CPU Usage:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: cpu
            #chart: false
    - Memory Usage:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: memory
            #chart: false
    - Temperature:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: sensor:Package id 0
            #chart: falser
    - Network Usage:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: network:eth0
            #chart: false
    - Disk:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: disk:sda
            #chart: false

Container Logs

No response

Browser Logs

No response

Troubleshooting

layout:
System Monitoring:
style: row
columns: 2
rows: 6

no CSS or other custom settings

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

To achieve the layout you're aiming for with the Glances widgets, you'll need to adjust your settings.yaml and services.yaml files to specify the layout and widget configurations correctly. Based on the information you've provided, here's how you can set up a 3x2 grid of Glances widgets below a full-width Glances section at the top of the page.

First, you'll need to define the layout in your settings.yaml file. You can create a section for the full-width Glances widget and another section for the 3x2 grid. Here's an example of how you might structure your layout:

layout:
  System Monitoring:
    style: row
    columns: 1  # Full-width section for the top Glances widget
  Glances Grid:
    style: row
    columns: 3  # 3x2 grid for the other Glances widgets

Next, in your services.yaml file, you'll need to define the widgets within the appropriate sections. Here's an example configuration:

- System Monitoring:
    - Glances Full Width:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: info  # Assuming 'info' is the correct metric for the full-width widget
            # Additional widget options as needed

- Glances Grid:
    - CPU Usage:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: cpu
            # Additional widget options as needed
    - Memory Usage:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: memory
            # Additional widget options as needed
    - Temperature:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: sensor:Package id 0
            # Additional widget options as needed
    - Network Usage:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: network:eth0
            # Additional widget options as needed
    - Disk Usage:
        widget:
            type: glances
            url: http://192.168.10.10:2018
            metric: disk:sda
            # Additional widget options as needed
    # Add more widgets as needed to fill the grid

Please note that the metric values should correspond to the actual metrics you want to display for each widget. The info metric used in the full-width widget is just an example and may not be correct for your setup.

Make sure to replace the metric values with the appropriate ones for your Glances instance. Also, adjust any additional widget options as needed for your specific requirements.

After making these changes, you should see the Glances section spanning the entire top of the page with a 3x2 grid of widgets positioned below it. If you encounter any issues or need further customization, you may need to adjust the layout and widget configurations accordingly.

Remember to check the documentation for the latest information on configuring widgets and layouts:

• Homepage Documentation

If you need further assistance, please provide more details or clarify any specific issues you're facing.

This comment was generated by Glime.

[rankokrneta]

Great that was the answer!

[github-actions[bot]]

This discussion has been automatically closed because it was marked as answered. See our contributing guidelines for more details.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.