Add status indicator to certificates and show active domain names

Author: badkeyy

backend/internal/certificate.js

@@ -313,6 +313,7 @@ const internalCertificate = {
 					.where('is_deleted', 0)
 					.andWhere('id', data.id)
 					.allowGraph('[owner]')
+					.allowGraph('[proxy_hosts]')
 					.first();
 
 				if (access_data.permission_visibility !== 'all') {
@@ -464,6 +465,7 @@ const internalCertificate = {
 					.where('is_deleted', 0)
 					.groupBy('id')
 					.allowGraph('[owner]')
+					.allowGraph('[proxy_hosts]')
 					.orderBy('nice_name', 'ASC');
 
 				if (access_data.permission_visibility !== 'all') {

backend/models/certificate.js

@@ -4,7 +4,6 @@
 const db      = require('../db');
 const helpers = require('../lib/helpers');
 const Model   = require('objection').Model;
-const User    = require('./user');
 const now     = require('./now_helper');
 
 Model.knex(db);
@@ -68,6 +67,8 @@ class Certificate extends Model {
 	}
 
 	static get relationMappings () {
+		const ProxyHost = require('./proxy_host');
+		const User    = require('./user');
 		return {
 			owner: {
 				relation:   Model.HasOneRelation,
@@ -79,6 +80,17 @@ class Certificate extends Model {
 				modify: function (qb) {
 					qb.where('user.is_deleted', 0);
 				}
+			},
+			proxy_hosts: {
+				relation:   Model.HasManyRelation,
+				modelClass: ProxyHost,
+				join:       {
+					from: 'certificate.id',
+					to:   'proxy_host.certificate_id'
+				},
+				modify: function (qb) {
+					qb.where('proxy_host.is_deleted', 0);
+				}
 			}
 		};
 	}

frontend/js/app/nginx/certificates/list/item.ejs

@@ -33,6 +33,13 @@
 <td class="<%- isExpired() ? 'text-danger' : '' %>">
     <%- formatDbDate(expires_on, 'Do MMMM YYYY, h:mm a') %>
 </td>
+<td>
+    <% if (proxy_hosts.length > 0) { %>
+        <span class="status-icon bg-success"></span> <%- i18n('certificates', 'in-use') %>
+    <% } else { %>
+        <span class="status-icon bg-danger"></span> <%- i18n('certificates', 'inactive') %>
+    <% } %>
+</td>
 <% if (canManage) { %>
 <td class="text-right">
     <div class="item-action dropdown">
@@ -48,6 +55,13 @@
                 <div class="dropdown-divider"></div>
             <% } %>
             <a href="#" class="delete dropdown-item"><i class="dropdown-icon fe fe-trash-2"></i> <%- i18n('str', 'delete') %></a>
+            <% if (proxy_hosts.length > 0) { %>
+                <div class="dropdown-divider"></div>
+                <span class="dropdown-header"><%- i18n('certificates', 'active-domain_names') %></span>
+                <% proxy_hosts.forEach(function(host) { %>
+                    <a href="https://<%- host %>" class="dropdown-item" target="_blank"><%- host %></a>
+                <% }); %>
+            <% } %>
         </div>
     </div>
 </td>

frontend/js/app/nginx/certificates/list/item.js

@@ -44,12 +44,23 @@ module.exports = Mn.View.extend({
         },
     },
 
-    templateContext: {
-        canManage: App.Cache.User.canManage('certificates'),
-        isExpired: function () {
-            return moment(this.expires_on).isBefore(moment());
-        },
-        dns_providers: dns_providers
+    templateContext: function () {
+        return {
+            canManage: App.Cache.User.canManage('certificates'),
+            isExpired: function () {
+                return moment(this.expires_on).isBefore(moment());
+            },
+            dns_providers: dns_providers,
+            proxy_hosts: this.getProxyHosts() 
+        };
+    },
+
+    getProxyHosts: function () {
+        const hosts = this.model.attributes.proxy_hosts || [];
+        return hosts.reduce((acc, host) => {
+            acc.push(...(host.domain_names || []));
+            return acc;
+        }, []);
     },
 
     initialize: function () {

frontend/js/app/nginx/certificates/list/main.ejs

@@ -2,8 +2,8 @@
     <th width="30">&nbsp;</th>
     <th><%- i18n('str', 'name') %></th>
     <th><%- i18n('all-hosts', 'cert-provider') %></th>
-    <th><%- i18n('str', 'active-hosts') %></th>
     <th><%- i18n('str', 'expires') %></th>
+    <th><%- i18n('str', 'status') %></th>
     <% if (canManage) { %>
     <th>&nbsp;</th>
     <% } %>

frontend/js/app/nginx/certificates/main.js

@@ -74,7 +74,7 @@ module.exports = Mn.View.extend({
             e.preventDefault();
             let query = this.ui.query.val();
 
-            this.fetch(['owner'], query)
+            this.fetch(['owner','proxy_hosts'], query)
                 .then(response => this.showData(response))
                 .catch(err => {
                     this.showError(err);
@@ -89,7 +89,7 @@ module.exports = Mn.View.extend({
     onRender: function () {
         let view = this;
 
-        view.fetch(['owner'])
+        view.fetch(['owner','proxy_hosts'])
             .then(response => {
                 if (!view.isDestroyed()) {
                     if (response && response.length) {

frontend/js/i18n/messages.json

@@ -35,8 +35,7 @@
       "value": "Value",
       "please-wait": "Please wait...",
       "all": "All",
-      "any": "Any",
-      "active-hosts": "Active Hosts"
+      "any": "Any"
     },
     "login": {
       "title": "Login to your account"
@@ -207,7 +206,10 @@
       "reachability-other": "There is a server found at this domain but it returned an unexpected status code {code}. Is it the NPM server? Please make sure your domain points to the IP where your NPM instance is running.",
       "download": "Download",
       "renew-title": "Renew Let's Encrypt Certificate",
-      "search": "Search Certificate…"
+      "search": "Search Certificate…",
+      "in-use"  : "In use",
+      "inactive": "Inactive",
+      "active-domain_names": "Active domain names"
     },
     "access-lists": {
       "title": "Access Lists",