Add formatting utils

Signed-off-by: Niklas Granander <ngranander@spotify.com>

plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.tsx

@@ -29,11 +29,17 @@ import { useApi } from '@backstage/core-plugin-api';
 import { BuildItem, BuildStatus, xcmetricsApiRef } from '../../api';
 import { useAsync } from 'react-use';
 import { Alert } from '@material-ui/lab';
-import { Duration } from 'luxon';
 import { Chip } from '@material-ui/core';
 import { StatusMatrixComponent } from '../StatusMatrixComponent';
+import { formatDuration, formatStatus } from '../../utils';
 
-const formatStatus = (status: BuildStatus, warningCount: number) => {
+const Status = ({
+  status,
+  warningCount,
+}: {
+  status: BuildStatus;
+  warningCount: number;
+}) => {
   const statusIcons = {
     succeeded: <StatusOK />,
     failed: <StatusError />,
@@ -42,7 +48,7 @@ const formatStatus = (status: BuildStatus, warningCount: number) => {
 
   return (
     <>
-      {statusIcons[status]} {status[0].toUpperCase() + status.slice(1)}
+      {statusIcons[status]} {formatStatus(status)}
       {warningCount > 0 && ` with ${warningCount} warning`}
       {warningCount > 1 && 's'}
     </>
@@ -63,7 +69,7 @@ const columns: TableColumn<BuildItem>[] = [
     field: 'duration',
     type: 'time',
     searchable: false,
-    render: data => Duration.fromObject({ seconds: data.duration }).toISOTime(),
+    render: data => formatDuration(data.duration),
   },
   {
     title: 'User',
@@ -72,7 +78,9 @@ const columns: TableColumn<BuildItem>[] = [
   {
     title: 'Status',
     field: 'buildStatus',
-    render: data => formatStatus(data.buildStatus, data.warningCount),
+    render: data => (
+      <Status status={data.buildStatus} warningCount={data.warningCount} />
+    ),
   },
   {
     field: 'isCI',

plugins/xcmetrics/src/utils/format.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Duration } from 'luxon';
+import { BuildStatus } from '../api';
+
+export const formatDuration = (seconds: number) =>
+  Duration.fromObject({ seconds: Math.round(seconds) }).toISOTime({
+    suppressMilliseconds: true,
+  });
+
+export const formatStatus = (status: BuildStatus) =>
+  status[0].toUpperCase() + status.slice(1);

plugins/xcmetrics/src/utils/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './format';