erohtar / dasherr Goto Github PK

(We discussed this in an (now closed) issue and I thought it would be a good idea to separate it.)

Due to the sheer amount of stuff I want to put on Dasherr having it all on one page is unrealistic.

There seem to be a few ways to do this:

Multiple Dasherr Instances

While this can work even now, one you have more than 2-3 it starts to get unmanageable and when they need to be updated it is even more problematic.

I don't actually see this as a tenable solution.

Specify Alternate Setting File

One idea would be to specify an alternate setting file on the query string, then you could set the tiles in the 'master' Dasherr instance to reload with another 'page' of options.

Something like:
index.php?use=settings2.json
index.php?settings=settings2.json

I think this would be the easiest method to implement.

Tabs

Tabs within Dasherr itself would also be a solution, unfortunately it would likely break current configurations since you'd need to be able to have multiple pages defined (and each of those with it's own widgets, sections and tiles.)

Conclusions

I would like to see being able to load alternate settings, and I also think tabs may be interesting as well so I'd like to see both if possible. (Please don't hit me.)

This is certainly not a high priority but users may find this useful.
It would be a css-style tooltip (unless it's easier to do it in js).

It would be an optional parameter for any object with a "name" field.

Example:

{
	"sections": [
		{
			"name": "Servers",
			"tiles": [
				{
					"name": "Synology 1",
					"url": "http://synology1:5000/",
					"faIcon": "fa-solid fa-hard-drive",
                                        "tooltip": "Synology Unit 1 with Media Files"
				},
...              

Sample HTML Code:
<div class=tooltip data-container=body><span class=tooltiptext>This is a tooltip.</span>This is what is displayed normally.</div>

Sample CSS:

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  min-width: 20vw;
  background-color: #404040;
  color: #E0E0E0;
  text-align: left;
  opacity: 0.9;
  padding: 0.2vw 0.2vw;
  font-family: Helvetica, sans-serif;
  font-size: 1.1vw;
  border-radius: 0.2vw;
  top: -2em;
  left: -1em;
  word-wrap: normal;
  padding-left: 0.2em;
  position: absolute;
  visibility: hidden;
  z-index: 99;
}

.tooltip .tooltiptext::after {
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

It would be nice if Sections (or at least the title) could be fancied up with text decoration modes (all uppercase, etc), different colors, background colors, font faces.

It would also be nice to have the option to have sections fill out to the right instead of down.

I don't run Glances, is there a way to disable the widget?

UPDATE: I ended up installing Glances and it seems handy although I still think the dashboard should be able to disable it.

An option to have host check done on the server side rather than the browser.

This would be useful for:

• Work around http/https issues
• Allow remote checking of intranet services
• Allow checking for services on an isolated subnet

This may also be a fix for #16

There is already options to disable and disableCheck but it would also be useful to be able to override "openTab".

For instance, if I wanted to have additional Dasherr 'pages', I could have those tiles be set to "openTab": "same" giving it the appearance of a single dashboard.

All ips having service open in a open port shows up in websites like shodan and other hack sites that keeps scaning ips around the world so it is wise to have a password locked dashboard

If you need a compose file?

• the ports can be config on your system; if there are port conflicts edit 8041 or 433 until the project succeed.
• or visit your internal_ip@{{port}}

version: "3.9"
services:
  nginx:
    image: lscr.io/linuxserver/nginx:latest
    container_name: Dashboard
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/London
    volumes:
      - ./Dasherr/www:/config/www
    ports:
      - 8041:80
      - 443:443
    restart: always

I am encountering some problems with the glances widget:

• Omitting the slash at the end of the URL, no fetching at all is performed.

{
    "name": "caroline",
    "type": "glances",
    "settings": {
        "url": "http://192.168.178.38:61208",
        "refreshMs": 5000
    }
}

• If you try fetching from a HTTP address, you get a Blocked loading mixed active content from http://192.168.178.38:61208/api/3/quicklook error

{
    "name": "caroline",
    "type": "glances",
    "settings": {
        "url": "http://192.168.178.38:61208/",
        "refreshMs": 5000
    }
}

• Changing the protocol to HTTPS, the error changes to Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://caroline:61208/api/3/quicklook. (Reason: CORS request did not succeed). Status code: (null).

{
    "name": "caroline",
    "type": "glances",
    "settings": {
        "url": "https://192.168.178.38:61208/",
        "refreshMs": 5000
    }
}

Over on the glances console, on the other hand, I get this weird looking logs:

192.168.178.25 - - [05/Dec/2022 03:37:49] code 400, message Bad request version ('üp{@õKB\x8bKöÅ\x99õ?à¶\x00"\x13\x01\x13\x03\x13\x02À+À/̨̩À,À0À')
192.168.178.25 - - [05/Dec/2022 03:37:49] code 400, message Bad request version ('N³ºülÈ\x00"\x13\x01\x13\x03\x13\x02À+À/̨̩À,À0À')

Current setup: Dasherr v1.04.00 hosted on a Synology Web Station host (aka a glorified apache webserver), with HTTPS enabled. Testing on Firefox 107.0.1 (64-bit)

There is a minor formatting issue with widgets disabled.

See image for details.

Release v1.04.01 included settings.json file. After updating we get a clean installation (((

This is clearly not a "Dasherr" bug "per se", but perhaps some alternate check methods may be a good idea. (I.e. perhaps perform a HTTP GET (i.e. curl) instead of just opening a connection to the port.)

Example:
With https://github.com/AUTOMATIC1111/stable-diffusion-webui the check causes the Stable Diffusion WebUI to throw an exception. It appears to still run so mostly this just makes it's console a horrible mess but it's possible that with other applications it may cause problems.

In this case, when Dasherr 'pings' the port, Stable Diffusion WebUI throws this exception:

ERROR:asyncio:Exception in callback _ProactorBasePipeTransport._call_connection_lost(None)
handle: <Handle _ProactorBasePipeTransport._call_connection_lost(None)>
Traceback (most recent call last):
  File "C:\Python\lib\asyncio\events.py", line 80, in _run
    self._context.run(self._callback, *self._args)
  File "C:\Python\lib\asyncio\proactor_events.py", line 162, in _call_connection_lost
    self._sock.shutdown(socket.SHUT_RDWR)
ConnectionResetError: [WinError 10054] An existing connection was forcibly closed by the remote host

If I use curl to the host:port, it doesn't throw an exception.

NOTE: This is pretty low priority.

Some font awesome icons appear to be wider than others causing text not to align as shown below:

In this example, the icons are (from top to bottom):

"fa-brands fa-intercom"
"fa-solid fa-gamepad"
"fa-brands fa-windows"

Not sure how the fix would go except maybe add css padding for the text?

UPDATE: There are apparently some css settings you can do to resize fa icons although this may require the kit configuration.
(ref: https://fontawesome.com/docs/web/style/fixed-width)

Are there plans to include more customization as to the amount of data that is presented from the Glances API? Currently we see Temperature, CPU and RAM. It would be great if we could configure specific data points we'd like (such as network I/O, disk details, etc) to see and have that rendered on the page.

In addition to FontAwesome, it would be nice if Dasherr could support:

• Additional Web Font icon sources
• A custom icon folder (.ico, .gif and .png formats)

I've found FontAwesome "free" is actually quite limiting in icon selection (even with the Pro icons, it's still limited anyway).

Currently, Dasherr uses this line in index.php:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

If a user wants to use a different set of web font icons, FontAwesome Pro, FontAwesome Kits (or self hosting) they are somewhat out of luck without modifying Dasherr to use a different stylesheet.

Somewhere (probably not in settings.json because it needs to be handled in index.php), you should be able to specify what to use for font icons. Unfortunately it's not simply a one line substitution:

FontAwesome kits don't use a .css but use a .js script:
<script src="https://kit.fontawesome.com/(ID).js" crossorigin="anonymous"></script>
(ref: https://fontawesome.com/docs/web/setup/use-kit)

FontAwesome's self hosting option seems to require more than one css entry:

  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">

(ref: https://fontawesome.com/docs/web/setup/host-yourself/webfonts)

NOTES:

I edited index.php to use my FontAwesome kit by commenting out the css line and adding the kit's script src line and it appears to work.

Since this isn't something people are going to modify a lot, maybe this section could just be a php include to something like custom.css to allow users to change web font icon stuff as needed?

In index.php:
Replace
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

With
<?php include 'include/fonticons.php';?>

include/fonticons.php

<?php
?> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<?php
?>

This would allow users to be able to do whatever they need to add or change to support their icon platform/configuration.
Since it's in PHP context, if they need to do any extra code work, that is available as well.

Are there any plans to provide a Docker Image?

I have 3 Synology RAID arrays, what if I want to run glances on all 3? (There's certainly room in the area of the widget to have multiple servers)

This may be more of a support question because I can't find any specifics on FontAwesome's site so forgive me if I'm not understanding how it works.

If I wanted to use FontAwesome Pro icons and purchased the Pro plan, how could I then have Dasherr use the fonts? Is there a way I could put an API key into Dasherr or is it tied to my IP address?

If you use Dasherr's edit function on a non-standard page (anything not settings.json) when you click the save icon, the changes are written to settings.json.

(I would've caught this sooner but I usually use Notepad++ for editing.)

In sub-optimal network conditions, Dasherr may fail to work on intranet servers due to external links, primarily the loading of font awesome's css.

I would suggest having some PHP code do the following:

1. Check to see if font awesome is enabled (true by default)
2. Simple check to see if cdnjs.cloudflare.com resolves and is reachable
3. If 1 and 2 is true, then include the <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> part of the head section; otherwise omit it. (Obviously any font awesome referenced graphics will be missing but Dasherr will load).

This would also allow, with additional work, having a local font awesome installation or some other alternate stylesheet.

(Background: We just had a 18 hour Comcast Business outage and I had to comment out the font-awesome stylesheet to have my intranet menu work.)