Refactored report IDs in UI code

Author: cry-inc

ui/components/app.js

@@ -42,7 +42,7 @@ export class App extends LitElement {
         return {
             component: { type: String },
             params: { type: Object },
-            reportHash: { type: String },
+            reportId: { type: String },
             mailId: { type: String },
         };
     }
@@ -51,7 +51,7 @@ export class App extends LitElement {
         super();
         this.component = "dashboard";
         this.params = {};
-        this.reportHash = null;
+        this.reportId = null;
         this.mailId = null;
         window.onhashchange = () => this.onHashChange();
         this.onHashChange();
@@ -81,10 +81,10 @@ export class App extends LitElement {
             this.component = "tlsrpt-reports";
         } else if (hash.startsWith("#/dmarc-reports/")) {
             this.component = "dmarc-report";
-            this.reportHash = hash.substring(16);
+            this.reportId = hash.substring(16);
         } else if (hash.startsWith("#/tlsrpt-reports/")) {
             this.component = "tlsrpt-report";
-            this.reportHash = hash.substring(17);
+            this.reportId = hash.substring(17);
         } else if (hash == "#/mails") {
             this.component = "mails";
         } else if (hash.startsWith("#/mails/")) {
@@ -104,9 +104,9 @@ export class App extends LitElement {
         } else if (this.component == "tlsrpt-reports") {
             component = html`<drv-tlsrpt-reports .params="${this.params}"></drv-tlsrpt-reports>`;
         } else if (this.component == "dmarc-report") {
-            component = html`<drv-dmarc-report hash="${this.reportHash}"></drv-dmarc-report>`;
+            component = html`<drv-dmarc-report id="${this.reportId}"></drv-dmarc-report>`;
         } else if (this.component == "tlsrpt-report") {
-            component = html`<drv-tlsrpt-report hash="${this.reportHash}"></drv-tlsrpt-report>`;
+            component = html`<drv-tlsrpt-report id="${this.reportId}"></drv-tlsrpt-report>`;
         } else if (this.component == "mails") {
             component = html`<drv-mails .params="${this.params}"></drv-mails>`;
         } else if (this.component == "mail") {

ui/components/dmarc-report.js

@@ -6,14 +6,14 @@ export class DmarcReport extends LitElement {
 
     static get properties() {
         return {
-            hash: { type: String },
+            id: { type: String },
             mailId: { type: String, attribute: false },
         };
     }
 
     constructor() {
         super();
-        this.hash = null;
+        this.id = null;
         this.mailId = null;
         this.report = null;
         this.ip2dns = {};
@@ -22,8 +22,8 @@ export class DmarcReport extends LitElement {
     }
 
     async updated(changedProperties) {
-        if (changedProperties.has("hash") && changedProperties.hash !== this.hash && this.hash) {
-            const response = await fetch("dmarc-reports/" + this.hash);
+        if (changedProperties.has("id") && changedProperties.id !== this.id && this.id) {
+            const response = await fetch("dmarc-reports/" + this.id);
             const rwi = await response.json();
             this.report = rwi.report;
             this.mailId = rwi.mail_id;
@@ -127,8 +127,8 @@ export class DmarcReport extends LitElement {
             <h1>Report Details</h1>
             <p>
                 <a class="button" href="#/mails/${this.mailId}">Show Mail</a>
-                <a class="button" href="/dmarc-reports/${this.hash}/xml" target="_blank">Open XML</a>
-                <a class="button" href="/dmarc-reports/${this.hash}/json" target="_blank">Open JSON</a>
+                <a class="button" href="/dmarc-reports/${this.id}/xml" target="_blank">Open XML</a>
+                <a class="button" href="/dmarc-reports/${this.id}/json" target="_blank">Open JSON</a>
             </p>
             <table>
                 <tr>

ui/components/tlsrpt-report.js

@@ -6,14 +6,14 @@ export class TlsRptReport extends LitElement {
 
     static get properties() {
         return {
-            hash: { type: String },
+            id: { type: String },
             mailId: { type: String, attribute: false },
         };
     }
 
     constructor() {
         super();
-        this.hash = null;
+        this.id = null;
         this.mailId = null;
         this.report = null;
         this.ip2dns = {};
@@ -22,8 +22,8 @@ export class TlsRptReport extends LitElement {
     }
 
     async updated(changedProperties) {
-        if (changedProperties.has("hash") && changedProperties.hash !== this.hash && this.hash) {
-            const response = await fetch("tlsrpt-reports/" + this.hash);
+        if (changedProperties.has("id") && changedProperties.id !== this.id && this.id) {
+            const response = await fetch("tlsrpt-reports/" + this.id);
             const rwi = await response.json();
             this.report = rwi.report;
             this.mailId = rwi.mail_id;
@@ -151,7 +151,7 @@ export class TlsRptReport extends LitElement {
             <h1>Report Details</h1>
             <p>
                 <a class="button" href="#/mails/${this.mailId}">Show Mail</a>
-                <a class="button" href="/tlsrpt-reports/${this.hash}/json" target="_blank">Open JSON</a>
+                <a class="button" href="/tlsrpt-reports/${this.id}/json" target="_blank">Open JSON</a>
             </p>
             <table>
                 <tr>