diff --git a/plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.tsx b/plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.tsx
index bf2a0b845c..9a7bec510a 100644
--- a/plugins/xcmetrics/src/components/OverviewComponent/OverviewComponent.tsx
+++ b/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: ,
failed: ,
@@ -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[] = [
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[] = [
{
title: 'Status',
field: 'buildStatus',
- render: data => formatStatus(data.buildStatus, data.warningCount),
+ render: data => (
+
+ ),
},
{
field: 'isCI',
diff --git a/plugins/xcmetrics/src/utils/format.ts b/plugins/xcmetrics/src/utils/format.ts
new file mode 100644
index 0000000000..d8c08d9367
--- /dev/null
+++ b/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);
diff --git a/plugins/xcmetrics/src/utils/index.ts b/plugins/xcmetrics/src/utils/index.ts
new file mode 100644
index 0000000000..a4f1f2c669
--- /dev/null
+++ b/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';