+
+## Features
+
+- View total active incidents for a service declared in FireHydrant
+- Quick links to the top 5 most recent active incidents in FireHydrant
+- View incident metrics for a given service within the last 30 days, including: healthiness, total time impacted, total number of incidents, and MTT* (Mean Time To *) data such as MTTD (detect), MTTA (acknowledge), MTTM (mitigate) and MTTR (resolve).
+
+## Setup
+
+1. Install the plugin:
+
+```bash
+# From your Backstage root directory
+cd packages/app
+yarn add @backstage/plugin-firehydrant
+```
+
+2. Add the plugin to `EntityPage.tsx`, inside the `const overviewContent`'s parent `
+
+
+ );
+};
+
+export const secondsToDhms = (seconds: number) => {
+ const secs = Number(seconds);
+ const d = Math.floor(secs / (60 * 60 * 24));
+ const h = Math.floor((secs / (60 * 60)) % 24);
+ const m = Math.floor((secs / 60) % 60);
+ const s = secs % 60;
+
+ const dDisplay = d > 0 ? `${d}d ` : '';
+ const hDisplay = h > 0 ? `${h}h ` : '00h ';
+ const mDisplay = m > 0 ? `${m}m ` : '00m ';
+ const sDisplay = s > 0 ? `${s}s` : '00s';
+ return dDisplay + hDisplay + mDisplay + sDisplay;
+};
+
+export const truncateNum = (num: number) => {
+ const matcher = `^-?\\d+(?:\\.\\d{0,3})?`;
+ const re = new RegExp(matcher);
+ const match = num.toString().match(re);
+ const result = (match && match[0]) || '0'; // eslint-disable-line no-mixed-operators
+ return result;
+};
+
+export const calcHealthiness = ({
+ mttm,
+ incidents,
+ range,
+}: {
+ mttm: number;
+ incidents: number;
+ range: number;
+}) => {
+ const num = (1 - (mttm * incidents) / range) * 100;
+ return `${truncateNum(num)}%`;
+};
+
+type AnalyticsDataType = {
+ id?: string;
+ count?: number;
+ mttd?: number;
+ mtta?: number;
+ mttm?: number;
+ mttr?: number;
+ total_time?: number;
+};
+
+export const ServiceAnalytics = ({
+ value,
+ loading,
+ error,
+}: {
+ value: AnalyticsDataType;
+ loading: boolean;
+ error: any;
+}) => {
+ if (loading) {
+ return ;
+ } else if (error) {
+ return
+
+ )}
+ {showServiceDetails && (
+ {headerText}
+
+
+ {incident.name}
+
+
+ ))}
+ accordion-{heading}
+ ),
+}));
+
+jest.mock('../BuildTimelineComponent', () => ({
+ BuildTimelineComponent: () => 'BuildTimelineComponent',
+}));
+
+describe('BuildDetailsComponent', () => {
+ it('should render', async () => {
+ const rendered = await renderInTestApp(
+
+ {errorsResult.loading && }
+ {!errorsResult.loading &&
+ errorsResult.value?.map((error, idx) => (
+
+
+
+ ))}
+
+ {warningsResult.loading && }
+ {!warningsResult.loading &&
+ warningsResult.value?.map((warning, idx) => (
+
+
+
+ ))}
+
+
+ );
+ }}
/>
+ {`${label}: ${formatSecondsInterval(payload[0].value)}`}
+
+ {buildTime > 0 && + `Compile time: ${formatPercentage(compileTime / buildTime)}`} +
+ );
+ }
+
+ return null;
+};
+
+const getTimelineData = (targets: Target[]) => {
+ const min = targets[0].startTimestampMicroseconds;
+
+ return targets
+ .filter(target => target.fetchedFromCache === false)
+ .map(target => ({
+ name: target.name,
+ buildTime: [
+ target.startTimestampMicroseconds - min,
+ target.endTimestampMicroseconds - min,
+ ],
+ compileTime: [
+ target.startTimestampMicroseconds - min,
+ target.compilationEndTimestampMicroseconds - min,
+ ],
+ }));
+};
+
+export interface BuildTimelineProps {
+ targets: Target[];
+ height?: number;
+ width?: number;
+}
+
+export const BuildTimelineComponent = ({
+ targets,
+ height,
+ width,
+}: BuildTimelineProps) => {
+ const theme = useTheme();
+ if (!targets.length) return + {buildTime > 0 && + `Compile time: ${formatPercentage(compileTime / buildTime)}`} +
No Targets
; + + const data = getTimelineData(targets); + + return ( +
+ {label}
+ onDateChange?.(event.target.value)}
+ {...inputProps}
+ />
+
+ );
+};
diff --git a/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx b/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx
new file mode 100644
index 0000000000..b73e2cead5
--- /dev/null
+++ b/plugins/xcmetrics/src/components/PreformattedTextComponent/PreformattedTextComponent.tsx
@@ -0,0 +1,128 @@
+/*
+ * 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 {
+ Button,
+ createStyles,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ makeStyles,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import React, { useState } from 'react';
+import { BackstageTheme } from '@backstage/theme';
+import { cn } from '../../utils';
+
+const useStyles = makeStyles((theme: BackstageTheme) =>
+ createStyles({
+ pre: {
+ whiteSpace: 'pre-line',
+ wordBreak: 'break-all',
+ },
+ expandable: {
+ cursor: 'pointer',
+ },
+ fullPre: {
+ whiteSpace: 'pre-wrap',
+ },
+ closeButton: {
+ position: 'absolute',
+ right: theme.spacing(1),
+ top: theme.spacing(1),
+ color: theme.palette.grey[500],
+ },
+ }),
+);
+
+interface PreformattedTextProps {
+ text: string;
+ maxChars: number;
+}
+
+interface ExpandableProps extends PreformattedTextProps {
+ expandable: boolean;
+ title: string;
+}
+
+interface NonExpandableProps extends PreformattedTextProps {
+ expandable?: never;
+ title?: string;
+}
+
+export const PreformattedTextComponent = ({
+ text,
+ maxChars,
+ expandable,
+ title,
+}: NonExpandableProps | ExpandableProps) => {
+ const [open, setOpen] = useState(false);
+ const classes = useStyles();
+
+ const handleKeyUp = (event: React.KeyboardEvent expandable && setOpen(true)}
+ onKeyUp={handleKeyUp}
+ tabIndex={expandable ? 0 : undefined}
+ >
+
+
+ {expandable && (
+
+ )}
+
+ );
+};
diff --git a/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts b/plugins/xcmetrics/src/components/PreformattedTextComponent/index.ts
new file mode 100644
index 0000000000..dbc27dd869
--- /dev/null
+++ b/plugins/xcmetrics/src/components/PreformattedTextComponent/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 { PreformattedTextComponent } from './PreformattedTextComponent';
diff --git a/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx b/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx
index 1ecc324683..201cb4febf 100644
--- a/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx
+++ b/plugins/xcmetrics/src/components/StatusCellComponent/StatusCellComponent.tsx
@@ -28,15 +28,16 @@ interface TooltipContentProps {
const TooltipContent = ({ buildId }: TooltipContentProps) => {
const client = useApi(xcmetricsApiRef);
- const {
- value: build,
- loading,
- error,
- } = useAsync(async () => client.getBuild(buildId), []);
+ const { value, loading, error } = useAsync(
+ async () => client.getBuild(buildId),
+ [],
+ );
if (error) {
return
+ {text.slice(0, maxChars - 1).trim()}
+ {text.length > maxChars - 1 && '…'}
+
+ {error.message}
;
- } else if (loading || !build) {
+ }
+
+ if (loading || !value?.build) {
return ;
}
@@ -45,15 +46,15 @@ const TooltipContent = ({ buildId }: TooltipContentProps) => {