[SHOWCASE] Dipan's Dash

[dipanghosh]

Title

Dipan's Dashboard

Screenshot

Would you like your name/ username included?

Yes

Link to your Website/ Profile/ Twitter (optional)

https://dipan.de

Description (Optional)

With the option of embedding iframes, it becomes possible to combine and conquer. I have set up Dashy to include graphs from grafana, and set them so that they update automatically. I also have uptime monitors from uptime Kuma, panels from homeasistant are also possible to be included.

Dashy is awesome!

Web | Dipan Ghosh

Personal Website of Dipan Ghosh. Enjoy nature and travel photography especially flower.

[Lissy93]

That's a work of a work of art, it's beautiful!
Thanks for sharing :) It will be added in the next PR (#775).

P.s Lovely photos on your website, you're very talented!

[dipanghosh]

Thank you :)

Awesome work on this project.

[rankokrneta]

Hi, @dipanghosh

Will you share config.yml for this state of the art?

[dipanghosh]

Hey @rankokrneta ,

Yes, but you should know that this dashboard heavily relies on a tech stack involving InfluxDB and Grafana. The graphs are merely being imported from Grafana.

If you are have grafana set up already, and are interested how to integrate that into Dashy, then I can help.

[rankokrneta]

@dipanghosh
no, still didn't set up, but planning Prometheus(InfluxDB) and Grafana to be my primary monitoring (as I already use this on my work).
Generally, the layout and colors are great, everything on this dash is beautiful!

[lolgufdHD]

Hey @dipanghosh,

I love your Dashboard and I'm Currently trying to recreate it. How did you do the Uptime-Kuma widget?

[dipanghosh]

@rankokrneta Thanks!! The awesome work by @Lissy93, and a whole bunch of other awesome opensource projects has allowed me to create this. Thanks goes to them. If you need any particular help setting it up, just ping me here.

@lolgufdHD Pretty much all the graph widgets on here are using Grafana using iframe, and the uptime kuma widget is also using iframe. Here is the relevant configuration. Let me know if this helps.

  - name: Uptime-Kuma
    widgets:
      - type: iframe
        useProxy: true
        options:
          url: https://<url_to_uptimekuma>
          frameHeight: 500
        id: 0_1071_iframe
    displayData:
      sortBy: default
      rows: 1
      cols: 1
      collapsed: false
      hideForGuests: false

[lolgufdHD]

@dipanghosh
for some reason the iframes are not allowed by my domain which points to uptime kuma as well as Grafana. Do you know whats up with that? In Edge however it does show the widgets but in the window it says that the connection was denied.

For more Context, a Cloudflare tunnel is pointing to the Grafana and Uptime Kuma app in Truenas. I tried googling said issue, but can't seem to find anything helpful.

[dipanghosh]

Oh yes. By default these services do not allow embedding. This is true for Grafana and also for Uptime Kuma. You need to change a setting for that.

For Grafana, you need to set

 GF_SECURITY_ALLOW_EMBEDDING: true

and the same applies for Uptime Kuma as well. The relevant setting there is

 UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN: 1

Now for the TrueNAS app, I do not know where to set these settings. However, it should be possible by editing the relevant settings file, such as grafana.ini.

Hope this helps.

Dunno how I found these in the first place, but I do remember hunting for the settings. Cheers!

[lolgufdHD]

@dipanghosh
finally got the Grafana embedding to work, how exactly did you set up Grafana? Did you use the panel sharing and then the embed function, or how did you do it?

[dipanghosh]

@lolgufdHD
Let me show you the tricks of the trade. It requires quite a bit of trial and error to set up grafana just right. This is actually the secret ingredient 😁

There are two important things what needs to be done in order show grafana graphs in an iframe.

First: You need to tell grafana, that it is okay to be embed into other websites which you have already done.

Second: You need to figure out the URL parameters to set for the embedding to look nice. I will paste the dashy config I am using below, just change the initial part to point it to your server. For the CPU usage, I am using:

- name: CPU Usage
widgets:
  - type: iframe
    useProxy: true
    options:
    url: >-
    https://[your_grafana_server]/d/[ID_of_the_dashboard]/new-dashboard?orgId=1&viewPanel=4&kiosk&refresh=5s
    frameHeight: 500
    id: 0_765_iframe

Notice the URL. Notice the paramaters passes after the question mark. Those are important. Now, go to grafana and pick a graph. Select share from the dropdown menu.

Then, copy the URL from there, but replace everything after the question mark like above. This should result in an embedded grafana graph that autoupdates every 5 seconds.

Let me know how this goes.

[lolgufdHD]

@dipanghosh
Thanks for your help in advance,
but it doesn't work for some reason. Here is my Code:

 - name: CPU Usage
    widgets:
      - type: iframe
        useProxy: true
        options:
          url: https://my-domain.com/d/rYdddlPWk/truenas-scale?orgId=1&viewPanel=77&kiosk&refresh=5s
          frameHeight: 500

I double-checked, but embedding is definitely enabled.

[dipanghosh]

First ensure you are able to visit the URL you are embedding, and that it works correctly.
If this is working, then check if you are able to embed grafana. Try some other service that allow embedding a webpage (HomeAssistant for instance) or make a simple webpage yourself.

If both of those pass, then you should have no issues.

BTW, have you restarted the grafana service after changing the settings?

[lolgufdHD]

Okay, I will try that.

Yes, I did restart Grafana, but I suspect that maybe Cloudflare is blocking the embed.

[lolgufdHD]

@dipanghosh
Okay, got it to work, the problem was indeed Cloudflare. Thank you so much for your help.

[lolgufdHD]

@dipanghosh
Okay my uptime Kuma looks diffrent from yours:

How can I make it look like yours? Did you use the statuspage as an embed?

[dipanghosh]

Nope, doing that will create this issue. I created a separate status page, and then used that page to embed.

[lolgufdHD]

@dipanghosh
How did you get rid of the "All Systems Operational" box?
When I try to hide the class with CSS, it also hides the monitors.

[dipanghosh]

Elementary, dear Watson.

.overall-status {
  display: none;
}

Gotta target the right class, not the class that is applied to all the monitor elements as well.

[lolgufdHD]

@dipanghosh

Ahhh thank you

[fbellati]

Dear @dipanghosh,
i'm working to reproduce your beautiful work, but how to:

• hide the "modify status page" and "go to dashboard" buttons?
• hide the title of the Page?
  Thnks

[lolgufdHD]

Thats how I did it.

[dipanghosh]

Hey @fbellati

Yes, use CSS. the following CSS hides the title (and logo if you have it).

.mb-4.title-flex{
display: none;
}

The two buttons... well you can hide them with css, but that may cause you problems as you will not able to modify the status page anymore (because the buttons will be gone.) You can unhide them by using the DevTools, but depends if you are comfortable with that.

The alternative here is to log out of Uptime Kuma once you are done with editing and you like the statuspage. Remeber status pages are public, and if you are not logged in, those buttons will no longer show up.

I hope that helps you out.

[fbellati]

Really fast answer! I appreciate the help! @lolgufdHD and @dipanghosh.

• ok with buttons and, ok with logout. It's working.

[lolgufdHD]

@fbellati

Glad to Help :)

[dipanghosh]

No worries. I am glad people have such an interest in the Dashboard.

[vooodooo]

Hey @rankokrneta ,

Yes, but you should know that this dashboard heavily relies on a tech stack involving InfluxDB and Grafana. The graphs are merely being imported from Grafana.

If you are have grafana set up already, and are interested how to integrate that into Dashy, then I can help.

Awesome theme for dashy <3, Can you share your Config & Style? I already have grafana and Influxdb working. :-)