starred/uptime-kuma

Fork 0

mirror of https://github.com/louislam/uptime-kuma.git synced 2026-03-02 22:57:00 -05:00

Add Monitor Descriptions to the Status Page #2061

New issue

Open

opened 2026-02-28 02:41:50 -05:00 by deekerman · 7 comments

deekerman commented

2026-02-28 02:41:50 -05:00

Owner

Originally created by @TritonB7 on GitHub (Apr 1, 2023).

⚠️ Please verify that this feature request has NOT been suggested before.

I checked and didn't find similar feature request

🏷️ Feature Request Type

UI Feature

🔖 Feature description

Recently, the feature to add monitor model descriptions were added and these descriptions could be seen while hovering over the monitor in the dashboard. Can these same descriptions be displayed on the status page as well? With the option for hover and/or list the description underneath the monitor?

✔️ Solution

Our Uptime Kuma instance instance is only accessable by specific IP addresses so that my colleagues can view the status page. I do not want to give my colleagues access to the dashboard, where they could possible make unsupervised changes. Currently, the dashboard is the only way that I know of to view the descriptions.

I think it would be a nice feature to have the monitor model description viewable on the status page as well.

Create/edit a new monitor.

In the monitor settings - Add toggle to enable allow description to be viewable on status page.
For example:

  Monitor1 - Enable "Show description on Status Page"
  Monitor2 - Disable "Show description on Status Page"
  Monitor3 - Enable "Show description on Status Page"

In the Status Page settings - Add global toggle to show Monitor Descriptions (e.g. if description is not empty/null)
For example, after enabling this toggle:

   Monitor1 now displays a description underneath the monitor name on the Status Page.
   Monitor2 does not display description underneath the monitor name on the Status Page (the normal/current view).
   Monitor3 now displays a description underneath the monitor name on the Status Page.

❓ Alternatives

I am not aware of any current alternatives, if I could create multiple users with read permissions to the dashboard, the users would be able to see the descriptions as well, without having the descriptions displayed on the status page.

📝 Additional Context

No response

Originally created by @TritonB7 on GitHub (Apr 1, 2023). ### ⚠️ Please verify that this feature request has NOT been suggested before. - [X] I checked and didn't find similar feature request ### 🏷️ Feature Request Type UI Feature ### 🔖 Feature description Recently, the feature to add monitor model descriptions were added and these descriptions could be seen while hovering over the monitor in the dashboard. Can these same descriptions be displayed on the status page as well? With the option for hover and/or list the description underneath the monitor? ### ✔️ Solution Our Uptime Kuma instance instance is only accessable by specific IP addresses so that my colleagues can view the status page. I do not want to give my colleagues access to the dashboard, where they could possible make unsupervised changes. Currently, the dashboard is the only way that I know of to view the descriptions. I think it would be a nice feature to have the monitor model description viewable on the status page as well. - Create/edit a new monitor. - In the monitor settings - Add toggle to enable allow description to be viewable on status page. For example: Monitor1 - Enable "Show description on Status Page" Monitor2 - Disable "Show description on Status Page" Monitor3 - Enable "Show description on Status Page" - In the Status Page settings - Add global toggle to show Monitor Descriptions (e.g. if description is not empty/null) For example, after enabling this toggle: Monitor1 now displays a description underneath the monitor name on the Status Page. Monitor2 does not display description underneath the monitor name on the Status Page (the normal/current view). Monitor3 now displays a description underneath the monitor name on the Status Page. ![Monitor Settings](https://user-images.githubusercontent.com/31591982/229293483-b43e8c4a-e268-4c0b-96fc-9dfe75f8b784.png) ![Status Page Settings](https://user-images.githubusercontent.com/31591982/229293492-a6a94f96-3602-4e3e-9cc2-e9da56e98c99.png) ![Status-Page](https://user-images.githubusercontent.com/31591982/229293503-5da8d1ec-007d-46ec-82ff-2ae88f901926.png) ### ❓ Alternatives I am not aware of any current alternatives, if I could create multiple users with read permissions to the dashboard, the users would be able to see the descriptions as well, without having the descriptions displayed on the status page. ### 📝 Additional Context _No response_

deekerman added the

feature-request

A:status-page

labels

2026-02-28 02:41:50 -05:00

deekerman commented

2026-02-28 02:41:52 -05:00

Author

Owner

@Tiago8v commented on GitHub (Jan 23, 2024):

Hello there, I had the same issue... and was able to bypass this "problem" by doing the following:

add tags (any color) on each monitor with the description text that I wanted to add
activate tags on status page
add the following CSS code on the status page

.tag-wrapper {
  background: none !important; /* Hides colored background */
  color: #666 !important; /* Greys out text */
}

.tag-wrapper:first-child{
  padding-left: 68px !important; /* Spaces first element to align with the monitor name */
}

While not perfect, it served my case! Hope it helps you too!

@Tiago8v commented on GitHub (Jan 23, 2024): Hello there, I had the same issue... and was able to bypass this "problem" by doing the following: 1. add tags (any color) on each monitor with the description text that I wanted to add 2. activate tags on status page 3. add the following CSS code on the status page ``` .tag-wrapper { background: none !important; /* Hides colored background */ color: #666 !important; /* Greys out text */ } .tag-wrapper:first-child{ padding-left: 68px !important; /* Spaces first element to align with the monitor name */ } ``` While not perfect, it served my case! Hope it helps you too! ![status_example](https://github.com/louislam/uptime-kuma/assets/6554679/7aa8b4c6-0cfa-4268-8d65-bbecefa2108d)

deekerman commented

2026-02-28 02:41:53 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Jan 23, 2024):

@CommanderStorm commented on GitHub (Jan 23, 2024): <img src="https://media1.giphy.com/media/lXu72d4iKwqek/giphy.gif"/>

deekerman commented

2026-02-28 02:41:53 -05:00

Author

Owner

@Geczy commented on GitHub (Feb 1, 2024):

i also came across the tag solution, here's my css

had to add the white space normal cause long descriptions weren't breaking

.tag-text {
white-space: normal !important;
color: black;
}
.tag-wrapper {
background-color: transparent !important;
}

@Geczy commented on GitHub (Feb 1, 2024): i also came across the tag solution, here's my css had to add the white space normal cause long descriptions weren't breaking ```css .tag-text { white-space: normal !important; color: black; } .tag-wrapper { background-color: transparent !important; } ``` ![CleanShot 2024-02-01 at 13 55 23@2x](https://github.com/louislam/uptime-kuma/assets/1036968/ff7b3de2-1a29-4c89-9800-e6bdda40a8eb)

deekerman commented

2026-02-28 02:41:53 -05:00

Author

Owner

@hmnd commented on GitHub (Mar 23, 2024):

To anyone looking here for an interim solution, here's a way to make the description appear as a tooltip:

Add your description to a monitor as a tag, as described above. Set the tag's color to pink and don't use pink for any other tags. Alternatively, change the [style*="background-color: rgb(219, 39, 119)"] to :first-child to always apply the CSS to the first tag shown on a monitor.
Add the following CSS to your status page:

/** remove this block if you need this to work with other tags */
.item > .row > div {
    display: flex;
}
.item > .row {
  position: relative;
}

div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]::before {
    visibility: visible;
    content: "ⓘ";
    font-size: 1.25rem;
    margin-right: 0.5rem;
    border-radius: 50rem !important;
    align-self: baseline;
    font-weight: bold;
    color: #626771;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"] {
    /** remove this line if you need this to work with other tags */
    top: -0.75rem;

    visibility: hidden;
    transition: 0.2s 1s;
    max-width: 25rem;
    position: absolute;
    color: #fff;
    background-color: #293245 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 0.75rem !important;
    border-radius: 0.5rem !important;
    z-index: 999;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"] .tag-text {
    white-space: normal !important;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]:where(
        :hover,
        :active
    )::before {
    color: #fff;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]:where(
        :hover,
        :active
    ) {
    visibility: visible;
    transition-delay: 0s;
}

https://github.com/louislam/uptime-kuma/assets/12853597/bd30aa9b-7410-4726-9c64-125b7fb2a195

@hmnd commented on GitHub (Mar 23, 2024): To anyone looking here for an interim solution, here's a way to make the description appear as a tooltip: 1. Add your description to a monitor as a tag, as described above. Set the tag's color to pink and don't use pink for any other tags. Alternatively, change the `[style*="background-color: rgb(219, 39, 119)"]` to `:first-child` to always apply the CSS to the first tag shown on a monitor. 2. Add the following CSS to your status page: ```css /** remove this block if you need this to work with other tags */ .item > .row > div { display: flex; } .item > .row { position: relative; } div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]::before { visibility: visible; content: "ⓘ"; font-size: 1.25rem; margin-right: 0.5rem; border-radius: 50rem !important; align-self: baseline; font-weight: bold; color: #626771; } div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"] { /** remove this line if you need this to work with other tags */ top: -0.75rem; visibility: hidden; transition: 0.2s 1s; max-width: 25rem; position: absolute; color: #fff; background-color: #293245 !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; padding-right: 0.75rem !important; border-radius: 0.5rem !important; z-index: 999; } div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"] .tag-text { white-space: normal !important; } div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]:where( :hover, :active )::before { color: #fff; } div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]:where( :hover, :active ) { visibility: visible; transition-delay: 0s; } ``` https://github.com/louislam/uptime-kuma/assets/12853597/bd30aa9b-7410-4726-9c64-125b7fb2a195

deekerman commented

2026-02-28 02:41:53 -05:00

Author

Owner

@Ionys320 commented on GitHub (Dec 12, 2024):

Hi,
I see #4612 is in draft, so I could work on my own solution if needed.

Two questions :

Should we keep one description shared across the dashboard and the status page? Or instead, should we have a "technical" description and a "public" one?
For this point, I think it would be easier to only have one, shared across the two parts of UK. If needed to have distinctive descriptions, we must define how the case "no public desc given but a technical one" is handled (this.publicDescription ?? this.description ?)
The "Show description" would be at the same place than the "Show URL" button (Option depending of each monitor)? Or would it be like tags (same option for all monitors)?

@Ionys320 commented on GitHub (Dec 12, 2024): Hi, I see #4612 is in draft, so I could work on my own solution if needed. Two questions : 1. Should we keep one description shared across the dashboard and the status page? Or instead, should we have a "technical" description and a "public" one? For this point, I think it would be easier to only have one, shared across the two parts of UK. If needed to have distinctive descriptions, we must define how the case "no public desc given but a technical one" is handled (`this.publicDescription ?? this.description` ?) 2. The "Show description" would be at the same place than the "Show URL" button (Option depending of each monitor)? Or would it be like tags (same option for all monitors)?

deekerman commented

2026-02-28 02:41:53 -05:00

Author

Owner

@homelab-alpha commented on GitHub (Dec 12, 2024):

Hi,

I see #4612 is in draft, so I could work on my own solution if needed.

Two questions :

Should we keep one description shared across the dashboard and the status page? Or instead, should we have a "technical" description and a "public" one?

For this point, I think it would be easier to only have one, shared across the two parts of UK. If needed to have distinctive descriptions, we must define how the case "no public desc given but a technical one" is handled (this.publicDescription ?? this.description ?)

The "Show description" would be at the same place than the "Show URL" button (Option depending of each monitor)? Or would it be like tags (same option for all monitors)?

I agree with the first point: having a single shared description makes sense.

For the second point, the button should be per monitor. This feels safer, especially when the status portal is publicly accessible.

@homelab-alpha commented on GitHub (Dec 12, 2024): > Hi, > > I see #4612 is in draft, so I could work on my own solution if needed. > > > > Two questions : > > 1. Should we keep one description shared across the dashboard and the status page? Or instead, should we have a "technical" description and a "public" one? > > For this point, I think it would be easier to only have one, shared across the two parts of UK. If needed to have distinctive descriptions, we must define how the case "no public desc given but a technical one" is handled (`this.publicDescription ?? this.description` ?) > > > > 2. The "Show description" would be at the same place than the "Show URL" button (Option depending of each monitor)? Or would it be like tags (same option for all monitors)? I agree with the first point: having a single shared description makes sense. For the second point, the button should be per monitor. This feels safer, especially when the status portal is publicly accessible.

deekerman commented

2026-02-28 02:41:53 -05:00

Author

Owner

@recordcrash commented on GitHub (Apr 29, 2025):

Here's a solution so long descriptions wrap:

.tag-text {
width: 100% !important;
word-wrap: break-word !important;
white-space: wrap !important;
} 
.tag-wrapper {
background: none !important;
color: #666 !important;
width:100% !important;
}
div.extra-info > div:first-child {width:100% !important;}

@recordcrash commented on GitHub (Apr 29, 2025): Here's a solution so long descriptions wrap: ```css .tag-text { width: 100% !important; word-wrap: break-word !important; white-space: wrap !important; } .tag-wrapper { background: none !important; color: #666 !important; width:100% !important; } div.extra-info > div:first-child {width:100% !important;} ```

deekerman referenced this issue

2026-02-28 02:54:43 -05:00

Docker container monitoring #2433