Skip to content

feat(perf): Add landing widgets for most issues and errors #29209

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
k-fish merged 1 commit into from
Oct 19, 2021
Merged

feat(perf): Add landing widgets for most issues and errors #29209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions static/app/views/performance/data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ export enum PERFORMANCE_TERM {
SLOW_FRAMES = 'slowFrames',
FROZEN_FRAMES = 'frozenFrames',
STALL_PERCENTAGE = 'stallPercentage',
MOST_ISSUES = 'mostIssues',
MOST_ERRORS = 'mostErrors',
}

export type TooltipOption = SelectValue<string> & {
Expand Down Expand Up @@ -357,6 +359,8 @@ export const PERFORMANCE_TERMS: Record<PERFORMANCE_TERM, TermFormatter> = {
t('Warm start is a measure of the application start up time while still in memory.'),
slowFrames: () => t('The count of the number of slow frames in the transaction.'),
frozenFrames: () => t('The count of the number of frozen frames in the transaction.'),
mostErrors: () => t('Transactions with the most associated errors.'),
mostIssues: () => t('The most instances of an issue for a related transaction.'),
stallPercentage: () =>
t(
'The percentage of the transaction duration in which the application is in a stalled state.'
Expand Down
7 changes: 2 additions & 5 deletions static/app/views/performance/landing/views/allTransactionsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,9 @@ export function AllTransactionsView(props: BasePerformanceViewProps) {
<DoubleChartRow
{...props}
allowedCharts={[
// TODO(k-fish): Temporarily adding extra charts here while trends widgets are in progress.
PerformanceWidgetSetting.TPM_AREA,
PerformanceWidgetSetting.TPM_AREA,
PerformanceWidgetSetting.TPM_AREA,
PerformanceWidgetSetting.MOST_IMPROVED,
PerformanceWidgetSetting.MOST_REGRESSED,
PerformanceWidgetSetting.MOST_RELATED_ERRORS,
PerformanceWidgetSetting.MOST_RELATED_ISSUES,
]}
/>
<Table {...props} setError={usePageError().setPageError} />
Expand Down
31 changes: 22 additions & 9 deletions static/app/views/performance/landing/widgets/components/performanceWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,21 @@ export function GenericPerformanceWidget<T extends WidgetDataConstraint>(
props: WidgetPropUnion<T>
) {
const [widgetData, setWidgetData] = useState<T>({} as T);
const [nextWidgetData, setNextWidgetData] = useState<T>({} as T);

const setWidgetDataForKey = useCallback(
(dataKey: string, result?: WidgetDataResult) => {
if (result) {
setNextWidgetData({...nextWidgetData, [dataKey]: result});
}
if (result?.hasData || result?.isErrored) {
setNextWidgetData({...nextWidgetData, [dataKey]: result});
Copy link
Member

@Zylphrex Zylphrex Oct 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this call necessary? If result?.hasData || result?.isErrored ever evaluates to true, result will always be true and set the widget data to the same thing right?

setWidgetData({...widgetData, [dataKey]: result});
}
},
[setWidgetData]
[widgetData, nextWidgetData, setWidgetData, setNextWidgetData]
);
const widgetProps = {widgetData, setWidgetDataForKey};
const widgetProps = {widgetData, nextWidgetData, setWidgetDataForKey};

const queries = Object.entries(props.Queries).map(([key, definition]) => ({
...definition,
Expand All @@ -44,6 +49,8 @@ export function GenericPerformanceWidget<T extends WidgetDataConstraint>(

const api = useApi();

const totalHeight = props.Visualizations.reduce((acc, curr) => acc + curr.height, 0);

return (
<Fragment>
<QueryHandler
Expand All @@ -53,28 +60,34 @@ export function GenericPerformanceWidget<T extends WidgetDataConstraint>(
queries={queries}
api={api}
/>
<_DataDisplay<T> {...props} {...widgetProps} />
<_DataDisplay<T> {...props} {...widgetProps} totalHeight={totalHeight} />
</Fragment>
);
}

function _DataDisplay<T extends WidgetDataConstraint>(
props: GenericPerformanceWidgetProps<T> & WidgetDataProps<T>
props: GenericPerformanceWidgetProps<T> &
WidgetDataProps<T> & {nextWidgetData: T; totalHeight: number}
) {
const {Visualizations, chartHeight, containerType} = props;
const {Visualizations, chartHeight, totalHeight, containerType} = props;

const Container = getPerformanceWidgetContainer({
containerType,
});

const missingDataKeys = !Object.values(props.widgetData).length;
const numberKeys = Object.keys(props.Queries).length;
const missingDataKeys = Object.values(props.widgetData).length !== numberKeys;
const missingNextDataKeys = Object.values(props.nextWidgetData).length !== numberKeys;
const hasData =
!missingDataKeys && Object.values(props.widgetData).every(d => !d || d.hasData);
const isLoading =
!missingDataKeys && Object.values(props.widgetData).some(d => !d || d.isLoading);
!missingNextDataKeys &&
Object.values(props.nextWidgetData).some(d => !d || d.isLoading);
const isErrored =
!missingDataKeys && Object.values(props.widgetData).some(d => d && d.isErrored);

const paddingOffset = 32; // space(2) * 2;

return (
<Container data-test-id="performance-widget-container">
<ContentContainer>
Expand All @@ -84,7 +97,7 @@ function _DataDisplay<T extends WidgetDataConstraint>(
isLoading={isLoading}
isErrored={isErrored}
hasData={hasData}
errorComponent={<DefaultErrorComponent height={chartHeight} />}
errorComponent={<DefaultErrorComponent height={totalHeight - paddingOffset} />}
dataComponents={Visualizations.map((Visualization, index) => (
<ContentContainer
key={index}
Expand All @@ -99,7 +112,7 @@ function _DataDisplay<T extends WidgetDataConstraint>(
/>
</ContentContainer>
))}
emptyComponent={<Placeholder height={`${chartHeight}px`} />}
emptyComponent={<Placeholder height={`${totalHeight - paddingOffset}px`} />}
/>
</Container>
);
Expand Down
5 changes: 5 additions & 0 deletions static/app/views/performance/landing/widgets/components/queryHandler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ export function QueryHandler<T extends WidgetDataConstraint>(
project={globalSelection.projects}
environment={globalSelection.environments}
organization={props.queryProps.organization}
orgSlug={props.queryProps.organization.slug}
query={props.queryProps.eventView.getQueryWithAdditionalConditions()}
eventView={props.queryProps.eventView}
location={props.queryProps.location}
widgetData={props.widgetData}
>
{results => {
return (
Expand Down
72 changes: 72 additions & 0 deletions static/app/views/performance/landing/widgets/components/selectableList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React, {ReactNode} from 'react';
import styled from '@emotion/styled';

import Radio from 'app/components/radio';
import space from 'app/styles/space';
import {RadioLineItem} from 'app/views/settings/components/forms/controls/radioGroup';

type Props = {
selectedIndex: number;
setSelectedIndex: (index: number) => void;
items: (() => ReactNode)[];
radioColor?: string;
};

export default function SelectableList(props: Props) {
return (
<div>
{props.items.map((item, index) => (
<SelectableItem
{...props}
isSelected={index === props.selectedIndex}
currentIndex={index}
key={index}
>
{item()}
</SelectableItem>
))}
</div>
);
}

function SelectableItem({
isSelected,
currentIndex: index,
children,
setSelectedIndex,
radioColor,
}: {isSelected: boolean; currentIndex: number; children: React.ReactNode} & Props) {
return (
<ListItemContainer>
<ItemRadioContainer color={radioColor ?? ''}>
<RadioLineItem index={index} role="radio">
<Radio checked={isSelected} onChange={() => setSelectedIndex(index)} />
</RadioLineItem>
</ItemRadioContainer>
{children}
</ListItemContainer>
);
}

export const RightAlignedCell = styled('div')`
text-align: right;
`;

const ListItemContainer = styled('div')`
display: grid;
grid-template-columns: 24px auto 150px 30px;
grid-template-rows: repeat(2, auto);
grid-column-gap: ${space(1)};
border-top: 1px solid ${p => p.theme.border};
padding: ${space(1)} ${space(2)};
`;

const ItemRadioContainer = styled('div')`
grid-row: 1/3;
input {
cursor: pointer;
}
input:checked::after {
background-color: ${p => p.color};
}
`;
4 changes: 2 additions & 2 deletions static/app/views/performance/landing/widgets/components/widgetChartRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,14 @@ export const TripleChartRow = (props: ChartRowProps) => <ChartRow {...props} />;

TripleChartRow.defaultProps = {
chartCount: 3,
chartHeight: 160,
chartHeight: 120,
};

export const DoubleChartRow = (props: ChartRowProps) => <ChartRow {...props} />;

DoubleChartRow.defaultProps = {
chartCount: 2,
chartHeight: 300,
chartHeight: 220,
};

const StyledRow = styled(PerformanceLayoutBodyRow)`
Expand Down
4 changes: 4 additions & 0 deletions static/app/views/performance/landing/widgets/components/widgetContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import ContextMenu from 'app/views/dashboardsV2/contextMenu';

import {GenericPerformanceWidgetDataType} from '../types';
import {PerformanceWidgetSetting, WIDGET_DEFINITIONS} from '../widgetDefinitions';
import {LineChartListWidget} from '../widgets/lineChartListWidget';
import {SingleFieldAreaWidget} from '../widgets/singleFieldAreaWidget';

import {ChartRowProps} from './widgetChartRow';
Expand Down Expand Up @@ -75,6 +76,7 @@ const _WidgetContainer = (props: Props) => {
};

const widgetProps = {
chartSetting,
...WIDGET_DEFINITIONS({organization})[chartSetting],
ContainerActions: containerProps => (
<WidgetContainerActions
Expand All @@ -90,6 +92,8 @@ const _WidgetContainer = (props: Props) => {
throw new Error('Trends not currently supported.');
case GenericPerformanceWidgetDataType.area:
return <SingleFieldAreaWidget {...props} {...widgetProps} />;
case GenericPerformanceWidgetDataType.line_list:
return <LineChartListWidget {...props} {...widgetProps} />;
default:
throw new Error(`Widget type "${widgetProps.dataType}" has no implementation.`);
}
Expand Down
31 changes: 31 additions & 0 deletions static/app/views/performance/landing/widgets/transforms/transformDiscoverToList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import {getParams} from 'app/components/organizations/globalSelectionHeader/getParams';
import {defined} from 'app/utils';
import {TableData} from 'app/utils/discover/discoverQuery';
import {GenericChildrenProps} from 'app/utils/discover/genericDiscoverQuery';

import {QueryDefinitionWithKey, WidgetDataConstraint, WidgetPropUnion} from '../types';

export function transformDiscoverToList<T extends WidgetDataConstraint>(
widgetProps: WidgetPropUnion<T>,
results: GenericChildrenProps<TableData>,
_: QueryDefinitionWithKey<T>
) {
const {start, end, utc, interval, statsPeriod} = getParams(widgetProps.location.query);
Copy link
Member

@Zylphrex Zylphrex Oct 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this using the default stats period of 14d? Performance uses 24h.


const data = results.tableData?.data ?? [];

const childData = {
...results,
isErrored: !!results.error,
hasData: defined(data) && !!data.length,
data,

utc: utc === 'true',
interval,
statsPeriod: statsPeriod ?? undefined,
start: start ?? '',
end: end ?? '',
};

return childData;
}
2 changes: 1 addition & 1 deletion static/app/views/performance/landing/widgets/transforms/transformEventsToArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function transformEventsRequestToArea<T extends WidgetDataConstraint>(
...results,
isLoading: results.loading,
isErrored: results.errored,
hasData: defined(data) && data.length && !!data[0].data.length,
hasData: defined(data) && !!data.length && !!data[0].data.length,
data,
dataMean,
previousData: results.previousTimeseriesData ?? undefined,
Expand Down
14 changes: 10 additions & 4 deletions static/app/views/performance/landing/widgets/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {Location} from 'history';
import {Client} from 'app/api';
import BaseChart from 'app/components/charts/baseChart';
import {RenderProps} from 'app/components/charts/eventsRequest';
import {DateString, Organization} from 'app/types';
import {DateString, Organization, OrganizationSummary} from 'app/types';
import EventView from 'app/utils/discover/eventView';

import {PerformanceWidgetContainerTypes} from './components/performanceWidgetContainer';
Expand All @@ -20,6 +20,7 @@ export enum GenericPerformanceWidgetDataType {
histogram = 'histogram',
area = 'area',
vitals = 'vitals',
line_list = 'line_list',
trends = 'trends',
}

Expand All @@ -35,7 +36,7 @@ export interface WidgetDataConstraint {
export type QueryChildren = {
children: (props: any) => ReactNode; // TODO(k-fish): Fix any type.
};
export type QueryFC = FunctionComponent<
export type QueryFC<T extends WidgetDataConstraint> = FunctionComponent<
QueryChildren & {
fields?: string | string[];
yAxis?: string | string[];
Expand All @@ -45,15 +46,20 @@ export type QueryFC = FunctionComponent<
project?: Readonly<number[]>;
environment?: Readonly<string[]>;
team?: Readonly<string | string[]>;
organization?: Organization;
query?: string;
orgSlug: string;
location: Location;
organization: OrganizationSummary;
eventView: EventView;
widgetData: T;
}
>;

export type QueryDefinition<
T extends WidgetDataConstraint,
S extends WidgetDataResult | undefined
> = {
component: QueryFC;
component: QueryFC<T>;
fields: string | string[];
enabled?: (data: T) => boolean;
transform: (
Expand Down
16 changes: 16 additions & 0 deletions static/app/views/performance/landing/widgets/widgetDefinitions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export enum PerformanceWidgetSetting {
WORST_LCP_VITALS = 'worst_lcp_vitals',
MOST_IMPROVED = 'most_improved',
MOST_REGRESSED = 'most_regressed',
MOST_RELATED_ERRORS = 'most_related_errors',
MOST_RELATED_ISSUES = 'most_related_issues',
}

const WIDGET_PALETTE = CHART_PALETTE[5];
Expand Down Expand Up @@ -122,6 +124,20 @@ export const WIDGET_DEFINITIONS: ({
dataType: GenericPerformanceWidgetDataType.area,
chartColor: WIDGET_PALETTE[0],
},
[PerformanceWidgetSetting.MOST_RELATED_ERRORS]: {
title: t('Most Related Errors'),
titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.USER_MISERY),
fields: [`failure_count()`],
dataType: GenericPerformanceWidgetDataType.line_list,
chartColor: WIDGET_PALETTE[0],
},
[PerformanceWidgetSetting.MOST_RELATED_ISSUES]: {
title: t('Most Related Issues'),
titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.USER_MISERY),
fields: [`count()`],
dataType: GenericPerformanceWidgetDataType.line_list,
chartColor: WIDGET_PALETTE[0],
},
[PerformanceWidgetSetting.MOST_IMPROVED]: {
title: t('Most Improved'),
titleTooltip: t(
Expand Down
Loading