Merge pull request #7889 from jeremyguarini/code_coverage_ui_updates

Minor UI updates to make numbers and dates a bit more human friendly

.changeset/neat-pugs-wait.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-code-coverage': patch
+---
+
+Change represented test date from epoch to something more human friendly. Round test coverage to 2 decimal places.

plugins/code-coverage/package.json

@@ -33,6 +33,7 @@
     "@material-ui/lab": "4.0.0-alpha.57",
     "@material-ui/styles": "^4.11.0",
     "highlight.js": "^10.6.0",
+    "luxon": "^2.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",

plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx

@@ -46,6 +46,8 @@ import { codeCoverageApiRef } from '../../api';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
+import { DateTime } from 'luxon';
+
 type Coverage = 'line' | 'branch';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
@@ -69,6 +71,13 @@ const getTrendIcon = (trend: number, classes: ClassNameMap) => {
   }
 };
 
+// convert timestamp to human friendly form
+function formatDateToHuman(timeStamp: string | number) {
+  return DateTime.fromMillis(Number(timeStamp)).toLocaleString(
+    DateTime.DATETIME_MED,
+  );
+}
+
 export const CoverageHistoryChart = () => {
   const { entity } = useEntity();
   const codeCoverageApi = useApi(codeCoverageApiRef);
@@ -149,10 +158,10 @@ export const CoverageHistoryChart = () => {
             margin={{ right: 48, top: 32 }}
           >
             <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="timestamp" />
+            <XAxis dataKey="timestamp" tickFormatter={formatDateToHuman} />
             <YAxis dataKey="line.percentage" />
             <YAxis dataKey="branch.percentage" />
-            <Tooltip />
+            <Tooltip labelFormatter={formatDateToHuman} />
             <Legend />
             <Line
               type="monotone"

plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx

@@ -232,7 +232,7 @@ export const FileExplorer = () => {
       title: 'Coverage',
       type: 'numeric',
       field: 'coverage',
-      render: (row: CoverageTableRow) => `${row.coverage}%`,
+      render: (row: CoverageTableRow) => `${row.coverage.toFixed(2)}%`,
     },
     {
       title: 'Missing lines',