feat(ui): Add a button to navigate to external links

[Avasz]

First of all thank you for this awesome tool! Really like this, have been using this for 100+ hosts and it has been helping us a lot!!

We use Grafana for detailed monitoring of the host system metrics and Gatus for the Uptime monitoring & alerting of those hosts. It would be better if we can have one or multiple button/link that can open any third party pages [Grafana Dashboard for that particular host in my case ] to analyze what went wrong.

Please let me know your views on this! I hope this makes sense to other users too.

[TwiN]

Hello @Avasz, I'm glad to know Gatus has been helpful to you so far.

To answer your question, I also think that it definitely makes sense.

That said, there would definitely be some challenges when it comes to the UI aspect of adding 3rd party links; it'd probably have to be a drop down button with a list of all external links, that or a dedicated section in the service details page.

So before considering that option, is there a reason why you can't include the link to 3rd party links in the alert description? If you're using Slack notifications or something of the sort, it shouldn't be too hard to add links to these external services.

P.S. Answering "because it's not as convenient as having a drop down menu on the main dashboard" is a perfectly acceptable answer.

[Avasz]

Yes, I do include the external link in my alert descriptions.

But there are times when I am taking a look at the Gatus dashboard and see few regular healthcheck fails that do not trigger the alert because it didn't actually meet my threshold. For eg:

Also one more reason is, I want to have Gatus as the main dashboard for my services, from which I can link it to external service.

The above screenshot also shows what I had in my mind while making this feature request - the external link icon near the IP address.

Thank you!

[TwiN]

Something like this would totally make sense:

services:
  - name: example
    url: "https://twinnation.org/health"
    conditions:
      - "[STATUS] == 200"
    links:
      - name: Repository
        value: "https://github.com/example/example"
        type: URL
      - name: Staging
        value: "https://staging.example.org"
        type: URL

On the UI, it could look something like this:

Allowing a type also gives it the potential to be extended later on without breaking changes (see #131).

[tchartron]

Hi, is there any implementation plan for this feature request ? I also think it could be pretty nice to have it

Thanks for your work, gatus is great !

[TwiN]

@tchartron Unfortunately, I don't have any timeline in mind since I'm busy with other projects as well as work at the moment.

Small modification on the aforementioned plan. This is how I think it should be reflected in the configuration:

endpoints:
  - name: example
    url: "https://example.org"
    conditions:
      - "[STATUS] == 200"
    ui:
      links:
        - name: Repository
          value: "https://github.com/example/example"
        - name: Staging
          value: "https://staging.example.org"

Basically, the changes are to put links under ui and remove the type parameter for now since it's not necessary yet.

[finzzz]

Hi, I thought this is the feature that got released in 3.5.0....
Why not just add option like "external: https://google.com" for example (?)

[TwiN]

@finzzz The feature that was just released is a link to open when the logo is clicked.

This issue is more about having endpoint-level external links rather than a global link.

[finzzz]

Yeah, that's what I need, endpoint-level external links.

[TwiN]

Had some free time today, decided to add support for buttons under the header:

Very minimal, but I figured it could still come in handy.

[razermuse]

I am just curious if the "links" capability got implemented in gatus? I am running a system that uses virtual hosts on different ports so they all share the same root URL. That's what is displayed in gatus instead of the entire path. For example, gatus shows one app as "jenkins.synopsys.pw" when it's really "http://jenkins.synopsys.pw:8080/ticketbook/home.jsp".

I'd like to be able to give myself and other users of my status page the ability to navigate to these different sites by either clicking on a HTTP link or a button of some kind.

[TwiN]

@razermuse At the moment, only global external links have been implemented (see this comment), not per-endpoint external links.

[luislhl]

@TwiN I could give it a try to implement this.

I'm evaluating some tools, and Gatus seems to be the best one for my case, but I miss this feature as well.

It seems this issue already has enough info for me to start.

Would you have anything else to add that could be useful? Or any additional directions?

[TwiN]

@luislhl I'd be fine with the suggested configuration schema:

endpoints:
  - name: ...
    url: ...
    ui:
      links:
        - name: Repository
          value: "https://github.com/example/example"
        - name: Staging
          value: "https://staging.example.org"
    conditions:
      - ...

An alternative but more complicated implementation I would prefer, however, would be:

    ui:
      menu:
        - name: Repository
          type: link
          value: "https://github.com/example/example"
        - name: Staging
          type: link
          value: "https://staging.example.org"
        - name: Contact
          type: text
          value: "@someusername"

in which case the UI would make the menu elements of type link clickable (<a href=...>), while the elements of type text would not be clickable.

The latter implementation would be awesome, because it would be future proof and I could see interesting features being added in the future, such as menu elements of type modal which would open up a modal to display more complex instructions. The modal would be for a future implementation, of course, but I'm just trying to think in term of future-proofing.

As for the visual representation, an ellipsis next to the Endpoint status as shown here would be the most convenient option IMO.

The relevant code is going to be:

• Backend: https://github.com/TwiN/gatus/blob/master/core/ui/ui.go
• UI: https://github.com/TwiN/gatus/blob/master/web/app/src/components/Endpoint.vue