chore: initial commit for 30d badge/chart UI support

Makefile

@@ -18,14 +18,14 @@ test:
 
 
 ##########
-# Docker #
+# podman #
 ##########
 
 docker-build:
-	docker build -t twinproduction/gatus:latest .
+	podman build -t twinproduction/gatus:latest .
 
 docker-run:
-	docker run -p 8080:8080 --name gatus twinproduction/gatus:latest
+	podman run -p 8080:8080 --name gatus twinproduction/gatus:latest
 
 docker-build-and-run: docker-build docker-run
 

README.md

@@ -2305,6 +2305,7 @@ web:
 ![Uptime 1h](https://status.twin.sh/api/v1/endpoints/core_blog-external/uptimes/1h/badge.svg)
 ![Uptime 24h](https://status.twin.sh/api/v1/endpoints/core_blog-external/uptimes/24h/badge.svg)
 ![Uptime 7d](https://status.twin.sh/api/v1/endpoints/core_blog-external/uptimes/7d/badge.svg)
+![Uptime 30d](https://status.twin.sh/api/v1/endpoints/core_blog-external/uptimes/30d/badge.svg)
 
 Gatus can automatically generate an SVG badge for one of your monitored endpoints.
 This allows you to put badges in your individual applications' README or even create your own status page if you
@@ -2315,7 +2316,7 @@ The path to generate a badge is the following:
 /api/v1/endpoints/{key}/uptimes/{duration}/badge.svg
 ```
 Where:
-- `{duration}` is `30d` (alpha), `7d`, `24h` or `1h`
+- `{duration}` is `30d`, `7d`, `24h` or `1h`
 - `{key}` has the pattern `<GROUP_NAME>_<ENDPOINT_NAME>` in which both variables have ` `, `/`, `_`, `,` and `.` replaced by `-`.
 
 For instance, if you want the uptime during the last 24 hours from the endpoint `frontend` in the group `core`,
@@ -2374,13 +2375,14 @@ See more information about the Shields.io badge endpoint [here](https://shields.
 ![Response time 1h](https://status.twin.sh/api/v1/endpoints/core_blog-external/response-times/1h/badge.svg)
 ![Response time 24h](https://status.twin.sh/api/v1/endpoints/core_blog-external/response-times/24h/badge.svg)
 ![Response time 7d](https://status.twin.sh/api/v1/endpoints/core_blog-external/response-times/7d/badge.svg)
+![Response time 30d](https://status.twin.sh/api/v1/endpoints/core_blog-external/response-times/30d/badge.svg)
 
 The endpoint to generate a badge is the following:
 ```
 /api/v1/endpoints/{key}/response-times/{duration}/badge.svg
 ```
 Where:
-- `{duration}` is `30d` (alpha), `7d`, `24h` or `1h`
+- `{duration}` is `30d`, `7d`, `24h` or `1h`
 - `{key}` has the pattern `<GROUP_NAME>_<ENDPOINT_NAME>` in which both variables have ` `, `/`, `_`, `,` and `.` replaced by `-`.
 
 
@@ -2434,7 +2436,7 @@ The path to get raw uptime data for an endpoint is:
 /api/v1/endpoints/{key}/uptimes/{duration}
 ```
 Where:
-- `{duration}` is `30d` (alpha), `7d`, `24h` or `1h`
+- `{duration}` is `30d`, `7d`, `24h` or `1h`
 - `{key}` has the pattern `<GROUP_NAME>_<ENDPOINT_NAME>` in which both variables have ` `, `/`, `_`, `,` and `.` replaced by `-`.
 
 For instance, if you want the raw uptime data for the last 24 hours from the endpoint `frontend` in the group `core`, the URL would look like this:

api/raw.go

@@ -23,7 +23,7 @@ func UptimeRaw(c *fiber.Ctx) error {
 	case "1h":
 		from = time.Now().Add(-2 * time.Hour) // Because uptime metrics are stored by hour, we have to cheat a little
 	default:
-		return c.Status(400).SendString("Durations supported: 30d,7d, 24h, 1h")
+		return c.Status(400).SendString("Durations supported: 30d, 7d, 24h, 1h")
 	}
 	key := c.Params("key")
 	uptime, err := store.Get().GetUptimeByKey(key, from, time.Now())

config/ui/ui.go

@@ -11,7 +11,7 @@ import (
 const (
 	defaultTitle       = "Health Dashboard | Gatus"
 	defaultDescription = "Gatus is an advanced automated status page that lets you monitor your applications and configure alerts to notify you if there's an issue"
-	defaultHeader      = "Health Status"
+	defaultHeader      = "Health StatusAAAA"
 	defaultLogo        = ""
 	defaultLink        = ""
 	defaultCustomCSS   = ""

web/app/src/views/Details.vue

@@ -20,9 +20,13 @@
       <h1 class="text-xl xl:text-3xl font-mono text-gray-400">UPTIME</h1>
       <hr/>
       <div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
+        <div class="flex-1">
+          <h2 class="text-sm text-gray-400 mb-1">Last 30 days</h2>
+          <img :src="generateUptimeBadgeImageURL('30d')" alt="30d uptime badge" class="mx-auto" />
+        </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
-          <img :src="generateUptimeBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto"/>
+          <img :src="generateUptimeBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto" />
         </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 24 hours</h2>
@@ -36,9 +40,21 @@
     </div>
     <div v-if="endpointStatus && endpointStatus.key && showResponseTimeChartAndBadges" class="mt-12">
       <h1 class="text-xl xl:text-3xl font-mono text-gray-400">RESPONSE TIME</h1>
-      <hr/>
+      <hr />
-      <img :src="generateResponseTimeChartImageURL()" alt="response time chart" class="mt-6"/>
+      <!-- Dropdown to select duration -->
+      <select v-model="selectedChartDuration" @change="updateChart">
+        <option value="1h">1 hour</option>
+        <option value="7d">7 days</option>
+        <option value="24h">24 hours</option>
+        <option value="30d">30 days</option>
+      </select>
+      <img :src="generateResponseTimeChartImageURL(selectedChartDuration)" alt="response time chart" class="mt-6" />
+      <img :src="generateResponseTimeChartImageURL('24h')" alt="response time chart" class="mt-6" />
       <div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
+        <div class="flex-1">
+          <h2 class="text-sm text-gray-400 mb-1">Last 30 days</h2>
+          <img :src="generateResponseTimeBadgeImageURL('30d')" alt="7d response time badge" class="mx-auto mt-2" />
+        </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
           <img :src="generateResponseTimeBadgeImageURL('7d')" alt="7d response time badge" class="mx-auto mt-2"/>
@@ -174,8 +190,8 @@ export default {
     generateResponseTimeBadgeImageURL(duration) {
       return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/response-times/${duration}/badge.svg`;
     },
-    generateResponseTimeChartImageURL() {
+    generateResponseTimeChartImageURL(duration) {
-      return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/response-times/24h/chart.svg`;
+      return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/response-times/${duration}/chart.svg`;
     },
     changePage(page) {
       this.currentPage = page;
@@ -193,6 +209,7 @@ export default {
       endpointStatus: {},
       events: [],
       hourlyAverageResponseTime: {},
+      selectedChartDuration: '24h',
       // Since this page isn't at the root, we need to modify the server URL a bit
       serverUrl: SERVER_URL === '.' ? '..' : SERVER_URL,
       currentPage: 1,