Show expiration information with metric search (#1517)

mozilla · Nov 17, 2022 · c8c2a42 · c8c2a42
1 parent 8dd0e39
commit c8c2a42
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/src/components/ItemList.svelte b/src/components/ItemList.svelte
@@ -174,17 +174,22 @@
         <!-- We have to do inline styling here to override Protocol CSS rules -->
         <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity -->
         <col width="35%" />
-        <col
-          width={itemType === "metrics" || itemType === "tags" ? "20%" : "65%"}
-        />
-        <col
-          width={itemType === "metrics" || itemType === "tags" ? "45%" : "0"}
-        />
+        {#if itemType === "metrics"}
+          <col width="15%" />
+          <col width="15%" />
+          <col width="35%" />
+        {:else if itemType === "tags"}
+          <col width="20%" />
+          <col width="45%" />
+        {:else}
+          <col width="65%" />
+        {/if}
         <thead>
           <tr>
             <th scope="col" style="text-align: center;">Name</th>
             {#if itemType === "metrics"}
               <th scope="col" style="text-align: center;">Type</th>
+              <th scope="col" style="text-align: center;">Expiration</th>
             {:else if itemType === "tags"}
               <th scope="col" style="text-align: center;">Metric Count</th>
             {/if}
@@ -270,6 +275,11 @@
                     <code>{@html highlightSearch(item.type, search)}</code>
                   </div>
                 </td>
+                <td style="text-align: center;">
+                  <div class="item-property">
+                    {item.expires ? item.expires : "never"}
+                  </div>
+                </td>
               {:else if itemType === "tags"}
                 <td style="text-align: center;">
                   <div class="item-property">