phntxx / dashboard

:bar_chart: a nice and simple dashboard / landing page.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[App/Bookmarks/Greeter/System] Custom greeter, make apps and bookmarks open in new tabs, support for .yaml files, editor frontend

joakimp opened this issue · comments

Hey phntxx, it's a nice little dashboard you have created here. I have a few suggestions for improvements that you might consider:

  1. Make the welcome heading configurable. Being greeted with 'Good morning!' or 'Good night!' is nice, of course, but if this is made as part of a landing page at a company portal or so it would be nice to have the possibility to easily change this into something else. Same thing if you prefer another language than English. Of course, the ability to select different messages depending on the time and/or date is a nice feature to have.
  2. Add an option in the *.json files for each link to open in current OR in a new browser tab. If the dashboard is embedded as iframe in another page you will find that many linked web pages will refuse to open as part of that iframe.
  3. Add a yaml frontend for simpler editing of links.

Thanks for your good work!

Hi!

I'll go through your list one by one:

  1. / 2. Making the welcome-heading configurable and giving users to configure behaviour (i.e. choose if a link opens in a new tab) sound like good ideas, I'll get to work on that right away.

  2. Could you maybe elaborate on that a little more? I'd be really interested in adding an editor onto the web interface, but I'm not exactly sure if that's feasible with the current architecture.

Actually, I think a good start would be to just accept yaml files for configuration purposes. The rational for this is that yaml notation is easier to read than json notation. Hence, there is also less risk of making stupid errors when editing the configuration. For instance, your sample file apps.json would look something like this:

---
categories:
- name: Networking
  items:
  - name: pfSense
    displayURL: example.com
    URL: https://example.com
    icon: security
  - name: Pihole
    displayURL: example.com
    URL: https://example.com
    icon: vpn_lock
- name: Monitoring
  items:
  - name: Tautulli
    displayURL: example.com
    URL: https://example.com
    icon: bar_chart
  - name: Grafana
    displayURL: example.com
    URL: https://example.com
    icon: show_chart
apps:
- name: Plex
  displayURL: example.com
  URL: https://example.com
  icon: tv
- name: NextCloud
  displayURL: example.com
  URL: https://example.com
  icon: filter_drama
- name: Ghost
  displayURL: example.com
  URL: https://example.com
  icon: rss_feed
- name: Minecraft
  displayURL: example.com
  URL: https://example.com
  icon: games
- name: ESXi
  displayURL: example.com
  URL: https://example.com
  icon: dns

There exist numerous libraries in different languages for converting yaml to json, so not much (if anything) need to change with the existing code.

To actually add capability for also editing the config files in the browser would be even better, but it is also a bigger undertaking. In all honesty, I have never looked into how this can be accomplished in practice. However, one example of a project who has it working is Portainer.io. The setup of docker stacks can be done using a web editor. The image below shows how I created a stack that basically just start dashboard using docker-compose.

Skärmavbild 2021-04-01 kl  13 31 14

Just a quick update here:

  1. I've gotten around to making the greeter customizable. See here for the default configuration, it should be pretty easy to adapt that to different environments.

  2. I've done some work on making links open in new tabs, though I'm not quite finished on that yet.

  3. Adding support for yaml files, while a neat concept that I do understand the motivation behind, would be a pretty big undertaking, so that's not on my roadmap for now.

  4. I thought about your idea a bit more. I think that the feature of editing the files through the web browser may be a bit ambitious for this app, though that could probably be accomplished by creating another container of, e.g. Icecoder, which would then share a volume for the app configuration files with my dashboard. I'll look around if I can find some lightweight docker image that could handle this, which I would then add into the documentation. Writing something like that myself would just take way too much time away from this and other projects.

Kind regards
phntxx

+1 to open links in a new tab

EDIT: While reading the code, I noticed that adding newTab: true in the JSON configuration files enables links to be opened in a new tab. You should document this ! 😉

Cool catch, directly implemented the newTab: true
Could this also be implemented for Bookmarks? That would be great!

Just implemented this for bookmarks.