Merge 317f2c8111 into 996de036e8

docs/widgets.md

@@ -2648,9 +2648,10 @@ Linkding is a self-hosted bookmarking service, which has a clean interface and i
 #### Options
 
 | **Field**      | **Type**  | **Required** | **Description**                                                          |
-| ------------ | -------- | ------------ | ------------------------------------------------------------------------ |
+| -------------- | --------- | ------------ | ------------------------------------------------------------------------ |
 | **`url`**      | `string`  | Required     | The URL of the Uptime Kuma instance                                      |
 | **`apiKey`**   | `string`  | Required     | The API key (see https://github.com/louislam/uptime-kuma/wiki/API-Keys). |
+| **`showCert`** | `boolean` | _Optional_   | If true, will show certificate information, when it is available, in the tooltip of the status pill (on mouse hover). Also will color the status yellow if the service is up but the certificate is invalid. Default false. |
 
 #### Example
 

src/components/Widgets/UptimeKuma.vue

@@ -5,11 +5,28 @@
         <div class="item monitor-row">
           <div class="title-title"><span class="text">{{ monitor.name }}</span></div>
           <div class="monitors-container">
-            <div class="status-container">
+            <div class="status-container up-status">
-              <span class="status-pill" :class="[monitor.statusClass]">{{ monitor.status }}</span>
+              <span
+                class="status-pill"
+                :class="[monitor.statusClass, monitor.certClass]"
+                v-tooltip="showCert ? {
+                  content: (monitor.certTitle || '') + (
+                    monitor.certClass === 'valid-cert' ? monitor.certDaysTitle : ''
+                  ),
+                  trigger: 'hover focus',
+                  delay: { show: 350, hide: 100 },
+                } : undefined"
+                :title="showCert ? (monitor.certTitle || '') + (
+                  monitor.certClass === 'valid-cert' ? monitor.certDaysTitle : ''
+                ) : undefined"
+              >
+                {{ monitor.status }}
+              </span>
             </div>
-            <div class="status-container">
+            <div class="status-container response-time">
-              <span class="response-time">{{ monitor.responseTime }}ms</span>
+              <span v-if="monitor.responseTime">
+                {{ monitor.responseTime }}ms
+              </span>
             </div>
           </div>
         </div>
@@ -58,6 +75,10 @@ export default {
     url() {
       return this.parseAsEnvVar(this.options.url);
     },
+    /* Determine if the cert information should be shown */
+    showCert() {
+      return this.options.showCert;
+    },
     /* Create authorisation header for the instance from the apiKey */
     authHeaders() {
       if (!this.apiKey) {
@@ -121,11 +142,14 @@ export default {
       const copy = { ...monitor };
       switch (key) {
         case 'monitor_cert_days_remaining': {
-          copy.certDaysRemaining = value;
+          if (!this.showCert) break;
+          copy.certDaysTitle = ` for ${value} days`;
           break;
         }
         case 'monitor_cert_is_valid': {
-          copy.certValid = value;
+          if (!this.showCert) break;
+          copy.certClass = value === '1' ? 'valid-cert' : 'invalid-cert';
+          copy.certTitle = `Certificate is ${value === '1' ? 'valid' : 'invalid'}`;
           break;
         }
         case 'monitor_response_time': {
@@ -133,7 +157,24 @@ export default {
           break;
         }
         case 'monitor_status': {
-          copy.status = value === '1' ? 'Up' : 'Down';
+          switch (value) {
+            case '1': {
+              copy.status = 'Up';
+              break;
+            }
+            case '2': {
+              copy.status = 'Pending';
+              break;
+            }
+            case '3': {
+              copy.status = 'Maintenance';
+              break;
+            }
+            default: {
+              copy.status = 'Down';
+              break;
+            }
+          }
           copy.statusClass = copy.status.toLowerCase();
           break;
         }
@@ -144,7 +185,7 @@ export default {
       return copy;
     },
     getRowValue(row) {
-      return this.getValueWithRegex(row, /\b(\d+)(\.\d+)*\b$/);
+      return this.getValueWithRegex(row, /[\s](-?\d+)(\.\d+)*\b$/);
     },
     getRowMonitorName(row) {
       return this.getValueWithRegex(row, /monitor_name="([^"]+)"/);
@@ -155,13 +196,18 @@ export default {
     getValueWithRegex(string, regex) {
       const result = string.match(regex);
 
-      const isArray = Array.isArray(result);
+      if (!Array.isArray(result)) {
-
-      if (!isArray) {
         return result;
       }
 
-      return result.length > 1 ? result[1] : result[0];
+      if (result.length > 1) {
+        // -1 means N/A
+        if (result[1] === '-1' && !result[2]) {
+          return null;
+        }
+        return result[1];
+      }
+      return result[0];
     },
     optionsValid({ url, authHeaders }) {
       const errors = [];
@@ -199,12 +245,27 @@ export default {
   &.up {
     background-color: rgb(92, 221, 139);
     color: black;
+
+    &.invalid-cert {
+      background-color: rgb(219, 216, 18);
+      color: black;
+    }
   }
 
   &.down {
     background-color: rgb(220, 53, 69);
     color: white;
   }
+
+  &.pending {
+    background-color: rgb(108, 117, 125);
+    color: black;
+  }
+
+  &.maintenance {
+    background-color: rgb(23, 71, 245);
+    color: black;
+  }
 }
 
 div.item.monitor-row:hover {
@@ -217,22 +278,53 @@ div.item.monitor-row:hover {
   }
 }
 
-.monitors-container {
+.item-wrapper {
-  display: flex;
+  container-type: inline-size;
-  flex-direction: row;
+  container-name: item-wrapper-container;
-  align-items: center;
-  justify-content: space-around;
-  width: 50%;
 }
 
 .monitor-row {
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  justify-content: left;
   padding: 0.35em 0.5em;
   align-items: center;
-}
 
   .title-title {
     font-weight: bold;
+    text-align: left;
+    flex: 1 1 60%;
+  }
+
+  .monitors-container {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 0 1 40%;
+    align-items: center;
+    justify-content: space-around;
+
+    .status-container.up-status {
+      min-width: 7.5rem;
+    }
+    .status-container.response-time {
+      min-width: 5rem;
+    }
+  }
+}
+
+@container item-wrapper-container (width < 320px) {
+  .monitor-row {
+    flex-direction: column;
+    justify-content: center;
+
+    .title-title {
+      text-align: center;
+    }
+
+    .monitors-container {
+      flex-wrap: unset;
+      flex-direction: column;
+    }
+  }
 }
 </style>