add forwarded host, avoid mutating const

adobe · Aug 15, 2024 · a93a294 · a93a294
1 parent 26c5878
commit a93a294
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/tools/cache/debugger.css b/tools/cache/debugger.css
@@ -23,7 +23,7 @@ input#url-input {
 }
 
 .tile {
-  box-shadow: 3px 3px 4px rgba(0 0 0 10%);
+  box-shadow: 3px 3px 4px rgba(0 0 0 0.1);
   border-radius: 8px;
   margin: 12px 0;
   padding: 12px 0;
@@ -47,12 +47,16 @@ div.row span.val.bad {
 
 .pill {
   border-radius: 20px;
-    padding: 4px 8px;
-    margin: 0 4px;
-    font-size: 0.8em;
-    border: 1px solid #000;
-    white-space: nowrap;
-    line-height: 2.2;
+  padding: 4px 8px;
+  margin: 0 4px;
+  font-size: 0.8em;
+  border: 1px solid #000;
+  white-space: nowrap;
+  line-height: 2.2;
+}
+
+.pill.badge {
+  margin-left: -2px;
 }
 
 .pill.good {
@@ -70,5 +74,4 @@ div.row span.val.bad {
 .pill.warn {
   background-color: #FFA500;
   border: 1px solid #FFA500;
-
 }
diff --git a/tools/cache/debugger.js b/tools/cache/debugger.js
@@ -64,10 +64,9 @@ const tileTemplate = (
       </div>
       ${
   Object.entries(ENV_HEADERS[env]).map(([key, valKeys]) => {
-    if (typeof valKeys === 'string') {
-      // eslint-disable-next-line no-param-reassign
-      valKeys = [valKeys];
-    }
+    // eslint-disable-next-line no-param-reassign
+    valKeys = typeof valKeys === 'string' ? [valKeys] : [...valKeys];
+
     let valCls = '';
     let val = '';
     while (!val && valKeys.length) {
@@ -101,10 +100,11 @@ const renderDetails = (data) => {
   const {
     x_push_invalidation: pushInval = 'disabled',
     x_byo_cdn_type: byoCdnType = 'unknown',
+    x_forwarded_host: forwardedHost = '',
   } = data.probe.req.headers;
   const pushInvalPill = pushInval === 'enabled'
-    ? '<span class="pill good">enabled</span>'
-    : '<span class="pill bad">disabled</span>';
+    ? '<span class="pill badge good">enabled</span>'
+    : '<span class="pill badge bad">disabled</span>';
   const actualCdn = inferCDNType(data);
   const cdnMatchClass = actualCdn === byoCdnType ? 'good' : 'bad';
 
@@ -118,11 +118,15 @@ const renderDetails = (data) => {
       </div>
       <div class="row">
         <span class="key">BYOCDN Type</span>
-        <span class="val"><span class="pill ${cdnMatchClass}">${byoCdnType}</span></span>
+        <span class="val"><span class="pill badge ${cdnMatchClass}">${byoCdnType}</span></span>
       </div>
       <div class="row">
         <span class="key">Actual CDN Type</span>
-        <span class="val"><span class="pill ${cdnMatchClass}">${actualCdn}</span></span>
+        <span class="val"><span class="pill badge ${cdnMatchClass}">${actualCdn}</span></span>
+      </div>
+      <div class="row">
+        <span class="key">Forwarded Host</span>
+        <span class="val">${forwardedHost}</span>
       </div>
     </div>
   `;
@@ -146,6 +150,8 @@ const renderDetails = (data) => {
 };
 
 (async () => {
+  // renderDetails(stub);
+
   const loc = new URL(window.location.href);
   if (loc.searchParams.has('url')) {
     input.value = loc.searchParams.get('url');