Fix webui

[ldez]

What does this PR do?

• Health page
  • reduce CPU usage
  • Average Response Time (graph)
    • speedup loading
    • remove some animation
    • better resizing support
  • Total Status Code Count (graph)
    • speedup loading
    • add colors
  • Total Response Time (value): compact display
  • Average Response Time (value): compact display
  • Recent errors
    • remove request link
    • smooth refresh
    • human readable date
• Global
  • navbar on small screen
  • API and custom path
  • replace px by em or rem
  • clean sass files
  • relative fonts path
• Providers
  • limit frontends and backends
  • search filter
    • clean filter
    • consistent behavior
  • frontend name & backend name
  • backend name in frontend
  • table overlap
  • frontend without backend -> turn to red
  • backend without servers -> turn to red

Motivation

Fixes #3258, #3282

Additional Notes

Provider page

Health page

[kachkaev]

Many thanks for putting this together @ldez! 🎉 I'd be keen to try it out, but I'm not sure if I can quickly spin up traefik without Docker. Is an image automatically ‘baked’ in CI by a chance?

Two questions:

• In addition to removing time precision as suggested in webui: display health durations with a 3 digits precision #3297, how about making time in the error log a bit more humane? Or is it not worth it?

• I see that two ticks in UX issues in the new dashboard #3258 are still off. They say:

  • Going to ‘Health’ tab (e.g. http://localhost:8080/dashboard/status) and then refreshing the page strips status from the URI and brings back to the main dashboard page.

  • I'd also use white-space: nowrap css in Status and even possibly Time column. That's so that their rather short values did not look torn on narrow screens. URLs could either have overflow:hidden or use more than one line if they don't fit the rest of the table width.

  Are you planning to leave these things as is for now or are the checkboxes simply out of sync?

The screenshots look awesome! I especially like your choice of colours for HTTP status codes! 💯

[ldez]

@kachkaev I will answer you into the issue.

[ldez]

@kachkaev you can test with ldez/traefik:webui Docker image

[kachkaev]

Many thanks for sharing the image @ldez!

Looks like something is broken because the UI is unable to fetch any data from the API:

Requests like http://localhost:8080/dashboard/api/providers return 404. Image is sha256:2c1e71d965063f13ac332f40cbf165c5396e354f26073f52e8cdb97df18955a6, which should be the one you've shared (it's up-to-date when I docker pull). Apart from that, traefik works and correctly routes to a couple of local containers.

Because of this glitch I could only check the menu and horizontal padding of the health blocks – that looks good! The only minor issue I could find is that the third row in the burger menu is clickable and takes a user to http://localhost:8080/dashboard/null (this is where the version should be I guess):

---

There was also one unrelated issue that I had initially, it is to do with --metrics.statistics.recenterrors that I set after migrating to 1.6.0. This flag caused Error parsing command: unknown flag: --metrics.statistics.recenterrors and I had to check out the new docs and change it to --api.statistics.recenterrors.

[ldez]

The only minor issue I could find is that the third row in the burger menu is clickable and takes a user to ...

Normally, this menu item display the Traefik version, this problem is related to the issue with the API calls.

Could you retry to pull the image (I updated the tag)?

[Ch1ch1]

Could you retry to pull the image (I updated the tag)?

Now working like a charm with ldez/traefik:webui

[kachkaev]

Many thanks for updating the image @ldez! The UX is smoother now 🚀 Here are a few observations, which may improve the dashboard in future, but all except the first one are not critical IMO:

• URI protocol in error log shows up as unsafe::, which generates links like unsafe:://localhost/favicon.ico:

  

  I can share my launch options if that matters.

• Selecting text in the error log does not reset immedeately, however, hitting a new error page does break the current text selection. That would not be an issue for me with 0.5 requests per day 😅, however, more advanced users may find this side-effect inconvenient. I guess that Angular is not reusing list items and simply flushes the entire list on an update. Does there exist some Node ID concept in Angular that could help reuse DOM nodes? This would be solvable with <Item key={item.id || `${item.status}-${item.uri}-${item.timestamp}`} data={item} /> in React.

• When the health summary is shown on a mobile screen, vertical separators remain visible and make a bit of noise:

  

• In Uptime Since the format is 05/09/2018 18:56:41, where month precedes day. I know this is a common in States, but would not it be more helpful to see 2018-05-09 (i.e. YYYY-MM-DD)? This is more international and thus reduces a change of interpreting, say, Jan 2 as Feb 1. Also, which time zone is this? UTC? Server time? My local time? The UI does not give an answer.

• It'd be great if the burger was a bit less greedy and did not hide the entire menu at ≈1080px of page width. This creates quite a lot of unused empty space near the logo where at least providers and health could fit. This would save laptop and tablet users a mouse move and a click millions of times.

• This one is purely a matter of taste: the boxes near the number of frontends or backends might look better aligned if moved to the right a bit. This is especially desired on a small screen where the ‘islands’ stick to the page border:

  

  ↓

  

• Very related to previous: what is the rationale for aligning frontend and backend headers to the right? This creates a gab between an icon and a text, which weakens their semantic relationship and also makes it a bit harder for a human eye to scan through the names (this is a typical issue for an alphabetically ordered lists that's alight to right):

  

  How about using align: left in in card headers?

• The response time chart still running a quite funny animation after switching from health to dashboard and back after some time (not a big deal).

• Time and status code in error log still use quite a lot of horizontal space. From UX issues in the new dashboard #3258 (comment):

  It can be a human-readable time in UTC or a local time zone (say, with a minute precision) with a more technically looking time coordinate shown when the value is hovered. A simple and quite a common way of implementing this is just assigning title="TTTT" to a span. Could this trick be applied to status codes too? I.e. the first column would say 404 or 500 (coloured the same way as the chart above) and hovering over a box with the number would reveal title="Not Found". That should leave more space for the URL while not being a problem for an average user since the dashboard is targeting sysadmins.

[rroblik]

Yeah nice fix ! Working now also for me on https://docker.mydomain.com/proxy with yml file like that (if anybody have the same need)

version: "3.5"

services:
  traefik:
    #image: traefik:1.6.0
    image: ldez/traefik:webui
    command:
      --docker
      --docker.swarmmode
      --docker.watch
      --logLevel=DEBUG
    ports:
      - target: 80
        published: 80
        protocol: tcp
        mode: host
      - target: 443
        published: 443
        protocol: tcp
        mode: host
    volumes:
      - ./configs/traefik.toml:/traefik.toml
      - ./rules/:/etc/traefik/rules/
      - ./_certs/:/ssl/
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - webgateway
    deploy:
      labels:
        traefik.enable: "true"
        traefik.docker.network: "webgateway"
        traefik.backend: "proxy"
        traefik.port: "8080"
        traefik.frontend.rule: "Host:docker.mydomain.com;PathPrefixStrip:/proxy;PathPrefix:/proxy"
        traefik.weight: 100
      replicas: 1
      placement:
        constraints: 
          - node.role == manager
      #replicas: 3
      restart_policy:
        condition: any
    
networks:
  webgateway:
    external: true

Any idea for a release date in "official" traefik image ?

[mmatur]

LGTM

[juliens]

LGTM

[dtomcej]

All the beautiful changes!
LGTM