Status page certificate expiry

[tarun7singh]

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

• I have read and understand the pull request rules.

Description

Fixes #2451
Fixes #3456
Fixes #2522

Type of change

• User interface (UI)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I ran ESLint and other linters for modified files
• I have performed a self-review of my own code and tested it
• I have commented my code, particularly in hard-to-understand areas
  (including JSDoc for methods)
• My changes generate no new warnings

Screenshots (if any)

[tarun7singh]

@louislam This pull request is ready fo review, let me know if we need any style changes on how expiry is shown on the status page

[CommanderStorm]

Disclaimer: I am not a designer => feel free to overrule
From a design perspective, I don't like how this looks like a regular title (a user would not be able to pick up, that this is an expiry notice).

What do you think: Could we move this to a subtle or tag and still keep the current design?

[tarun7singh]

Should i try showing it as pill like the uptime percetage, with colors for showing how soon it will be expiring?
My reason for avoiding that was to not clutter the ui.

[CommanderStorm]

Yes, a pill is what I meant with tag. This would be one option.

[tarun7singh]

Here's the pill/tags based design i came up with, which one do you prefer?

1. Expiry inside the pill
   

2. Expiry outside the pill
   

I think second option looks much better but name of the monitor is getting confusing.

Color is green for expiry of more than 7 days
Color is red for everything else

[tarun7singh]

@louislam Do you have any preference out of the above two designs?

[CommanderStorm]

My concerns have been addressed. (if you mark them as resolved, they are not shown any more ^^)

I (not a desiger/bdfl => this requires Louis vote) am unsure if the Pills' design fits, but I think this has a solid chance and looks close enough.

[chakflying]

Expiry should not be shown if monitor type is not HTTPS.

[louislam]

I might prefer to put in front of the tag list. Like this.

[tarun7singh]

I have incorporated tags design as suggested by @louislam and added check for monitor type (@chakflying ).

[tarun7singh]

This is ready to be merged @CommanderStorm & @louislam

[CommanderStorm]

Could you add Resolves #3456 to the description?

[maurerle]

And also
resolves #2522 (well, it is not sortable, but sorting according to tags would be a quite different feature..?)

[tarun7singh]

@maurerle
I can add #2522 to the description but should we create a new issue for the sortable part?

[CommanderStorm]

should we create a new issue for the sortable part?

I think this is included in #1610 => no need to create another issue