Display host certificate decimal serials in addition to hex for smaller values to match keychain (#28732)

For #27007 

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.
- [x] Input data is properly validated, `SELECT *` is avoided, SQL
injection is prevented (using placeholders for values in statements)
- [x] A detailed QA plan exists on the associated ticket (if it isn't
there, work with the product group's QA engineer to add it)
- [x] Manual QA for all new/changed functionality

changes/27007-host-certificate-serial-display

@@ -0,0 +1 @@
+Host certificates with serial numbers below 2^63 will display the decimal represntation of the serial number in addition to hex so that it is easier to match them up to what is displayed in the macOS keychain.

frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx

@@ -42,6 +42,21 @@ const CertificateDetailsModal = ({
     signing_algorithm,
   } = certificate;
 
+  let serialDecimal = "";
+  try {
+    if (serial) {
+      // Convert the serial number to decimal and display it if it is less than 2^63 to
+      // match keychain and openSSL display behavior
+      const serialParsed = BigInt(`0x${serial}`);
+      if (serialParsed < BigInt("0x8000000000000000")) {
+        serialDecimal = serialParsed.toString(10);
+      }
+    }
+  } catch (e) {
+    // The serial couldn't be converted to decimal but this is best effort so not a big deal
+    // since we will still show the original representation, whatever it was
+  }
+
   const showSubjectSection = Boolean(
     subjectCountry ||
       subjectOrganization ||
@@ -184,11 +199,18 @@ const CertificateDetailsModal = ({
                 )}
                 {serial && (
                   <DataSet
-                    title="Serial number"
+                    title="Serial number (hex)"
                     value={serial}
                     orientation="horizontal"
                   />
                 )}
+                {serialDecimal && (
+                  <DataSet
+                    title="Serial number (decimal)"
+                    value={serialDecimal}
+                    orientation="horizontal"
+                  />
+                )}
               </dl>
             </div>
           )}