CEC-5205 display DTC snapshots. (#463)

* CEC-5205 display DTC snapshots.

* Apply suggestions from code review

* Update src/components/DTCTimeline/DTCTimeline/index.jsx

src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap

@@ -607,6 +607,12 @@ exports[`Render Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    DTC Snapshot
+                  </th>
                 </tr>
               </thead>
               <tbody

src/components/DTCTimeline/DTCTimeline/index.jsx

@@ -69,6 +69,11 @@ const MainForm = ({ vin }) => {
       id: "created_at",
       label: "Cloud Time",
     },
+    {
+      id: "snapshot",
+      label: "DTC Snapshot",
+      no_sort: true,
+    },
   ];
 
   const handleSort = (_event, property) => {
@@ -304,6 +309,7 @@ const MainForm = ({ vin }) => {
                   {(dtc.voltage || dtc.voltage === 0) && <TableCell>{dtc.voltage + " V"}</TableCell>}
                   <TableCell>{formatDate(dtc.epoch_usec)}</TableCell>
                   <TableCell>{formatDate(dtc.created_at)}</TableCell>
+                  {dtc.snapshot && <TableCell style={{ wordBreak: "break-all" }}>{dtc.snapshot}</TableCell>}
                 </TableRow>
               ))}
             </TableBody>