Create StatusMatrix and StatusCell components

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

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

@@ -31,6 +31,7 @@ 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';
 
 const formatStatus = (status: BuildStatus, warningCount: number) => {
   const statusIcons = {
@@ -113,7 +114,12 @@ export const OverviewComponent = () => {
         options={{ paging: false, search: false }}
         data={builds}
         columns={columns}
-        title="Latest Builds"
+        title={
+          <>
+            Latest Builds
+            <StatusMatrixComponent />
+          </>
+        }
       />
     </>
   );

plugins/xcmetrics/src/components/StatusMatrixComponent/StatusMatrixComponent.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 { makeStyles } from '@material-ui/core';
+import React from 'react';
+import { BackstageTheme } from '@backstage/theme';
+import { BuildStatus } from '../../api';
+
+const useStyles = makeStyles<BackstageTheme>(theme => ({
+  root: {
+    marginTop: 8,
+  },
+  cell: (props: { status?: BuildStatus }) => {
+    const statusBackgrounds: { [key in BuildStatus]: string } = {
+      succeeded: theme.palette.success.main,
+      failed: theme.palette.error.main,
+      stopped: theme.palette.warning.main,
+    };
+
+    return {
+      width: 12,
+      height: 12,
+      margin: '0 4px 4px 0',
+      float: 'left',
+      backgroundColor: statusBackgrounds[props.status!],
+    };
+  },
+}));
+
+const StatusCell = ({ status }: { status: BuildStatus }) => {
+  const classes = useStyles({ status });
+  return <div className={`${classes.cell} ${status}`} />;
+};
+
+export const StatusMatrixComponent = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      {[...Array(240).keys()].map(() => (
+        <StatusCell status="succeeded" />
+      ))}
+    </div>
+  );
+};

plugins/xcmetrics/src/components/StatusMatrixComponent/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 './StatusMatrixComponent';