Extract column definitions and improve formatting

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

plugins/xcmetrics/src/components/BuildListComponent/BuildListComponent.tsx

@@ -14,49 +14,13 @@
  * limitations under the License.
  */
 import React, { useRef, useState } from 'react';
-import { Table, TableColumn } from '@backstage/core-components';
+import { Table } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { Build, BuildFilters, xcmetricsApiRef } from '../../api';
-import { formatDuration, formatTime } from '../../utils';
-import { Chip, Grid } from '@material-ui/core';
+import { BuildFilters, xcmetricsApiRef } from '../../api';
+import { Grid } from '@material-ui/core';
 import { BuildListFilterComponent as Filters } from '../BuildListFilterComponent';
 import { DateTime } from 'luxon';
-
-const columns: TableColumn<Build>[] = [
-  {
-    title: 'Status',
-    field: 'buildStatus',
-  },
-  {
-    title: 'Project',
-    field: 'projectName',
-  },
-  {
-    title: 'Schema',
-    field: 'schema',
-  },
-  {
-    title: 'Started',
-    field: 'startedAt',
-    searchable: false,
-    render: data => formatTime(data.startTimestamp),
-  },
-  {
-    title: 'Duration',
-    field: 'duration',
-    render: data => formatDuration(data.duration),
-  },
-  {
-    title: 'User',
-    field: 'userid',
-  },
-  {
-    field: 'isCI',
-    render: data => data.isCi && <Chip label="CI" size="small" />,
-    width: '10',
-    sorting: false,
-  },
-];
+import { buildPageColumns } from '../BuildTableColumns';
 
 export const BuildListComponent = () => {
   const client = useApi(xcmetricsApiRef);
@@ -82,7 +46,7 @@ export const BuildListComponent = () => {
       />
       <Table
         title="Builds"
-        columns={columns}
+        columns={buildPageColumns}
         options={{ paging: true, sorting: false, search: false, pageSize: 10 }}
         tableRef={tableRef}
         data={query => {

plugins/xcmetrics/src/components/BuildListFilterComponent/BuildListFilterComponent.tsx

@@ -90,21 +90,21 @@ export const BuildListFilterComponent = ({
       direction="row"
       className={classes.filtersContent}
     >
-      <Grid item xs={2}>
+      <Grid item sm={6} md={4} lg={2}>
         <DatePickerComponent
           label="From"
           value={values.from}
           onDateChange={date => setValues({ ...values, from: date })}
         />
       </Grid>
-      <Grid item xs={2}>
+      <Grid item sm={6} md={4} lg={2}>
         <DatePickerComponent
           label="To"
           value={values.to}
           onDateChange={date => setValues({ ...values, to: date })}
         />
       </Grid>
-      <Grid item xs={2}>
+      <Grid item sm={6} md={4} lg={2}>
         <Select
           label="Status"
           items={statusItems}
@@ -116,7 +116,7 @@ export const BuildListFilterComponent = ({
           }}
         />
       </Grid>
-      <Grid item xs={2}>
+      <Grid item sm={6} md={4} lg={2}>
         {loading ? (
           <Select
             label="Project"

plugins/xcmetrics/src/components/BuildTableColumns.tsx

@@ -0,0 +1,89 @@
+/*
+ * 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 { Chip } from '@material-ui/core';
+import React, { ReactChild } from 'react';
+import {
+  StatusOK,
+  StatusError,
+  StatusWarning,
+  TableColumn,
+} from '@backstage/core-components';
+import { Build, BuildStatus } from '../api';
+import { formatTime, formatDuration } from '../utils';
+
+const STATUS_ICONS: { [key in BuildStatus]: ReactChild } = {
+  succeeded: <StatusOK />,
+  failed: <StatusError />,
+  stopped: <StatusWarning />,
+};
+
+const baseColumns: TableColumn<Build>[] = [
+  {
+    field: 'buildStatus',
+    render: data => STATUS_ICONS[data.buildStatus],
+  },
+  {
+    title: 'Project',
+    field: 'projectName',
+  },
+  {
+    title: 'Schema',
+    field: 'schema',
+  },
+  {
+    title: 'Started',
+    field: 'startedAt',
+    render: data => formatTime(data.startTimestamp),
+    cellStyle: { whiteSpace: 'nowrap' },
+  },
+  {
+    title: 'Duration',
+    field: 'duration',
+    render: data => formatDuration(data.duration),
+  },
+  {
+    title: 'User',
+    field: 'userid',
+  },
+];
+
+const isCi: TableColumn<Build> = {
+  field: 'isCI',
+  render: data => data.isCi && <Chip label="CI" size="small" />,
+  width: '10',
+  sorting: false,
+};
+
+export const overviewColumns: TableColumn<Build>[] = [...baseColumns, isCi];
+
+export const buildPageColumns: TableColumn<Build>[] = [
+  ...baseColumns,
+  {
+    title: 'Host',
+    field: 'machineName',
+  },
+  {
+    title: 'Warnings',
+    field: 'warningCount',
+  },
+  {
+    title: 'Category',
+    field: 'category',
+    render: data => <Chip label={data.category} size="small" />,
+  },
+  isCi,
+];

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

@@ -13,69 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { ReactChild } from 'react';
+import React from 'react';
 import {
   ContentHeader,
   SupportButton,
   Progress,
-  StatusOK,
-  StatusError,
-  StatusWarning,
   Table,
-  TableColumn,
   EmptyState,
   InfoCard,
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { Build, BuildStatus, xcmetricsApiRef } from '../../api';
+import { xcmetricsApiRef } from '../../api';
 import { useAsync } from 'react-use';
 import { Alert } from '@material-ui/lab';
 import { StatusMatrixComponent } from '../StatusMatrixComponent';
-import { formatDuration, formatTime } from '../../utils';
-import { Chip, Grid } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import { OverviewTrendsComponent } from '../OverviewTrendsComponent';
-
-const STATUS_ICONS: { [key in BuildStatus]: ReactChild } = {
-  succeeded: <StatusOK />,
-  failed: <StatusError />,
-  stopped: <StatusWarning />,
-};
-
-const columns: TableColumn<Build>[] = [
-  {
-    field: 'buildStatus',
-    render: data => STATUS_ICONS[data.buildStatus],
-  },
-  {
-    title: 'Project',
-    field: 'projectName',
-  },
-  {
-    title: 'Schema',
-    field: 'schema',
-  },
-  {
-    title: 'Started',
-    field: 'startedAt',
-    searchable: false,
-    render: data => formatTime(data.startTimestamp),
-  },
-  {
-    title: 'Duration',
-    field: 'duration',
-    render: data => formatDuration(data.duration),
-  },
-  {
-    title: 'User',
-    field: 'userid',
-  },
-  {
-    field: 'isCI',
-    render: data => data.isCi && <Chip label="CI" size="small" />,
-    width: '10',
-    sorting: false,
-  },
-];
+import { overviewColumns } from '../BuildTableColumns';
 
 export const OverviewComponent = () => {
   const client = useApi(xcmetricsApiRef);
@@ -108,9 +62,14 @@ export const OverviewComponent = () => {
       <Grid container spacing={3} direction="row">
         <Grid item xs={12} md={8} lg={8} xl={9}>
           <Table
-            options={{ paging: false, search: false }}
+            options={{
+              paging: false,
+              search: false,
+              sorting: false,
+              draggable: false,
+            }}
             data={builds}
-            columns={columns}
+            columns={overviewColumns}
             title={
               <>
                 Latest Builds

plugins/xcmetrics/src/utils/format.ts

@@ -23,8 +23,7 @@ export const formatDuration = (seconds: number) => {
 
   const h = duration.hours ? `${duration.hours} h` : '';
   const m = duration.minutes ? `${duration.minutes} m` : '';
-  const s =
-    duration.hours < 12 && duration.seconds ? `${duration.seconds} s` : '';
+  const s = duration.hours < 12 ? `${duration.seconds ?? 0} s` : '';
 
   return `${h} ${m} ${s}`;
 };