Add status indicator to certificates and show active domain names

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",