Merge branch 'xcmetrics-error-trend' into xcmetrics-overview-features

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

plugins/xcmetrics/src/api/XcmetricsClient.ts

@@ -18,6 +18,7 @@ import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import {
   Build,
+  BuildCount,
   BuildStatusResult,
   PaginationResult,
   XcmetricsApi,
@@ -56,6 +57,19 @@ export class XcmetricsClient implements XcmetricsApi {
     return ((await response.json()) as PaginationResult<Build>).items;
   }
 
+  async getBuildCounts(days: number): Promise<BuildCount[]> {
+    const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
+    const response = await fetch(
+      `${baseUrl}/statistics/build/count?days=${days}`,
+    );
+
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+
+    return (await response.json()) as BuildCount[];
+  }
+
   async getBuildStatuses(limit: number): Promise<BuildStatusResult[]> {
     const baseUrl = `${await this.discoveryApi.getBaseUrl('proxy')}/xcmetrics`;
     const response = await fetch(

plugins/xcmetrics/src/api/types.ts

@@ -46,6 +46,12 @@ export type Build = {
 
 export type BuildStatusResult = Pick<Build, 'id' | 'buildStatus'>;
 
+export type BuildCount = {
+  day: string;
+  errors: number;
+  builds: number;
+};
+
 export type PaginationResult<T> = {
   items: T[];
   metadata: {
@@ -58,6 +64,7 @@ export type PaginationResult<T> = {
 export interface XcmetricsApi {
   getBuild(id: string): Promise<Build>;
   getBuilds(): Promise<Build[]>;
+  getBuildCounts(days: number): Promise<BuildCount[]>;
   getBuildStatuses(limit: number): Promise<BuildStatusResult[]>;
 }
 

plugins/xcmetrics/src/components/ErrorTrendComponent/ErrorTrendComponent.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 React from 'react';
+import { Progress, TrendLine } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { BuildCount, xcmetricsApiRef } from '../../api';
+import { useAsync } from 'react-use';
+import { Alert } from '@material-ui/lab';
+
+const TRENDLINE_TITLE = 'Error Rate';
+
+interface ErrorTrendProps {
+  days: number;
+}
+
+export const ErrorTrendComponent = ({ days }: ErrorTrendProps) => {
+  const client = useApi(xcmetricsApiRef);
+  const { value: buildCounts, loading, error } = useAsync(
+    async (): Promise<BuildCount[]> => client.getBuildCounts(days),
+    [],
+  );
+
+  if (loading) {
+    return <Progress />;
+  } else if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  } else if (!buildCounts) {
+    return <TrendLine data={Array(days).fill(0)} title={TRENDLINE_TITLE} />;
+  }
+
+  let max = 0;
+  const averageErrors = buildCounts.map(counts => {
+    if (counts.builds === 0) return 0;
+    const dayAverage = counts.errors / counts.builds;
+    max = Math.max(max, dayAverage);
+    return dayAverage;
+  });
+
+  return <TrendLine data={averageErrors} title={TRENDLINE_TITLE} max={max} />;
+};

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

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

@@ -24,14 +24,16 @@ import {
   Table,
   TableColumn,
   EmptyState,
+  InfoCard,
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { Build, BuildStatus, xcmetricsApiRef } from '../../api';
 import { useAsync } from 'react-use';
 import { Alert } from '@material-ui/lab';
-import { Chip } from '@material-ui/core';
 import { StatusMatrixComponent } from '../StatusMatrixComponent';
 import { formatDuration, formatStatus } from '../../utils';
+import { Chip, Grid, Typography } from '@material-ui/core';
+import { ErrorTrendComponent } from '../ErrorTrendComponent';
 
 const Status = ({
   status,
@@ -118,17 +120,27 @@ export const OverviewComponent = () => {
       <ContentHeader title="XCMetrics Dashboard">
         <SupportButton>Dashboard for XCMetrics</SupportButton>
       </ContentHeader>
-      <Table
-        options={{ paging: false, search: false }}
-        data={builds}
-        columns={columns}
-        title={
-          <>
-            Latest Builds
-            <StatusMatrixComponent />
-          </>
-        }
-      />
+      <Grid container spacing={3} direction="row">
+        <Grid item xs={7}>
+          <Table
+            options={{ paging: false, search: false }}
+            data={builds}
+            columns={columns}
+            title={
+              <>
+                Latest Builds
+                <StatusMatrixComponent />
+              </>
+            }
+          />
+        </Grid>
+        <Grid item xs={5}>
+          <InfoCard>
+            <Typography variant="overline">Error Rate</Typography>
+            <ErrorTrendComponent days={14} />
+          </InfoCard>
+        </Grid>
+      </Grid>
     </>
   );
 };