jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix show more button for metric adding

Browse source
This commit is contained in:
sylenien 2022-05-17 13:29:55 +02:00 • committed by Delirium
parent 14ef2cba26
commit 9960927ca0
14 changed files with 51 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
View file

@ -68,6 +68,7 @@ export default class CallWithErrors extends React.PureComponent {
<Table
cols={ cols }
rows={ _data }
isTemplate={this.props.isTemplate}
/>
</NoContent>
</Loader>

4
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
View file

@ -27,9 +27,10 @@ interface Props {
metric?: any,
data: any;
onClick?: (filters) => void;
isTemplate?: boolean;
}
function CustomMetriTable(props: Props) {
const { metric = {}, data = { values: [] }, onClick = () => null } = props;
const { metric = {}, data = { values: [] }, onClick = () => null, isTemplate } = props;
const rows = List(data.values);
const onClickHandler = (event, data) => {
@ -56,6 +57,7 @@ function CustomMetriTable(props: Props) {
rows={ rows }
rowClass="group"
onRowClick={ onClickHandler }
isTemplate={isTemplate}
/>
</NoContent>
</div>

12
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
View file

@ -5,7 +5,7 @@ import { Styles } from '../../common';
import { ResponsiveContainer } from 'recharts';
import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
import stl from './CustomMetricWidget.css';
import { getChartFormatter, getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
import { getChartFormatter, getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
import { init, edit, remove, setAlertMetricId, setActiveWidget, updateActiveState } from 'Duck/customMetrics';
import APIClient from 'App/api_client';
import { setShowAlerts } from 'Duck/dashboard';
@ -21,7 +21,7 @@ const customParams = rangeName => {
// if (rangeName === LAST_30_MINUTES) params.density = 70
// if (rangeName === YESTERDAY) params.density = 70
// if (rangeName === LAST_7_DAYS) params.density = 70
return params
}
@ -41,9 +41,10 @@ interface Props {
edit: (setDefault?) => void;
setActiveWidget: (widget) => void;
updateActiveState: (metricId, state) => void;
isTemplate?: boolean;
}
function CustomMetricWidget(props: Props) {
const { metric, showSync, compare, period } = props;
const { metric, showSync, compare, period, isTemplate } = props;
const [loading, setLoading] = useState(false)
const [data, setData] = useState<any>([]);
const [seriesMap, setSeriesMap] = useState<any>([]);
@ -97,7 +98,7 @@ function CustomMetricWidget(props: Props) {
const periodTimestamps = metric.metricType === 'timeseries' ?
getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density) :
period.toTimestamps();
const activeWidget = {
widget: metric,
period: period,
@ -166,6 +167,7 @@ function CustomMetricWidget(props: Props) {
metric={ metric }
data={ data[0] }
onClick={ clickHandlerTable }
isTemplate={isTemplate}
/>
)}
</>
@ -202,4 +204,4 @@ const WidgetIcon = ({ className = '', tooltip = '', icon, onClick }) => (
position="top center"
inverted
/>
)
)

3
frontend/app/components/Dashboard/Widgets/MissingResources/MissingResources.js
View file

@ -8,7 +8,7 @@ const cols = [
{
key: 'resource',
title: 'Resource',
Component: ResourceInfo,
Component: ResourceInfo,
width: '40%',
},
{
@ -49,6 +49,7 @@ export default class MissingResources extends React.PureComponent {
rows={ resources }
rowClass="group"
compare={compare}
isTemplate={this.props.isTemplate}
/>
</NoContent>
</Loader>

1
frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
View file

@ -53,6 +53,7 @@ export default class MostImpactfulErrors extends React.PureComponent {
cols={ cols }
rows={ errors }
rowProps={ { findJourneys: this.findJourneys } }
isTemplate={this.props.isTemplate}
/>
</NoContent>
</Loader>

6
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
View file

@ -45,6 +45,7 @@ const cols = [
interface Props {
data: any
metric?: any
isTemplate?: boolean
}
function CallWithErrors(props: Props) {
const { data, metric } = props;
@ -57,7 +58,7 @@ function CallWithErrors(props: Props) {
};
return (
<NoContent
size="small"
show={ metric.data.chart.length === 0 }
@ -70,10 +71,11 @@ function CallWithErrors(props: Props) {
<Table
cols={ cols }
rows={ _data }
isTemplate={props.isTemplate}
/>
</div>
</NoContent>
);
}
export default CallWithErrors;
export default CallWithErrors;

8
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
View file

@ -11,7 +11,7 @@ const cols = [
{
key: 'resource',
title: 'Resource',
Component: ResourceInfo,
Component: ResourceInfo,
width: '40%',
},
{
@ -38,9 +38,10 @@ const cols = [
interface Props {
data: any
metric?: any
isTemplate?: boolean
}
function MissingResources(props: Props) {
const { data, metric } = props;
const { data, metric, isTemplate } = props;
return (
<NoContent
@ -54,10 +55,11 @@ function MissingResources(props: Props) {
cols={ cols }
rows={ List(metric.data.chart) }
rowClass="group"
isTemplate={isTemplate}
/>
</div>
</NoContent>
);
}
export default MissingResources;
export default MissingResources;

6
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
View file

@ -56,9 +56,10 @@ const cols = [
interface Props {
data: any
metric?: any
isTemplate?: boolean
}
function SlowestResources(props: Props) {
const { data, metric } = props;
const { data, metric, isTemplate } = props;
return (
<NoContent
@ -72,10 +73,11 @@ function SlowestResources(props: Props) {
cols={ cols }
rows={ List(metric.data.chart) }
rowClass="group"
isTemplate={isTemplate}
/>
</div>
</NoContent>
);
}
export default SlowestResources;
export default SlowestResources;

3
frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
View file

@ -35,7 +35,7 @@ const cols = [
@widgetHOC('slowestImages', { fitContent: true })
export default class SlowestImages extends React.PureComponent {
render() {
const { data: images, loading } = this.props;
const { data: images, loading, isTemplate } = this.props;
return (
<Loader loading={ loading } size="small">
<NoContent
@ -45,6 +45,7 @@ export default class SlowestImages extends React.PureComponent {
<Table
cols={ cols }
rows={ images }
isTemplate={isTemplate}
/>
</NoContent>
</Loader>

10
frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
View file

@ -65,13 +65,13 @@ export default class SlowestResources extends React.PureComponent {
};
writeOption = (e, { name, value }) => {
this.setState({ [ name ]: value })
this.setState({ [ name ]: value })
this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { [ name ]: value === 'all' ? null : value })
}
render() {
const { data, loading, compare } = this.props;
const { data, loading, compare, isTemplate } = this.props;
return (
<div>
<div className={ cn(stl.topActions, 'py-3 flex text-right')}>
@ -86,8 +86,8 @@ export default class SlowestResources extends React.PureComponent {
<NoContent
size="small"
show={ data.size === 0 }
>
<Table cols={ cols } rows={ data } rowClass="group" compare={compare} />
>
<Table cols={ cols } rows={ data } isTemplate={isTemplate} rowClass="group" compare={compare} />
</NoContent>
</Loader>
</div>

7
frontend/app/components/Dashboard/Widgets/common/Table.js
View file

@ -19,9 +19,10 @@ export default class Table extends React.PureComponent {
compare = false,
maxHeight = 200,
onRowClick = null,
isTemplate,
} = this.props;
const { showAll } = this.state;
return (
<div className="w-full">
<div className="flex">
@ -47,9 +48,9 @@ export default class Table extends React.PureComponent {
</div>
)) }
</div>
)) }
)) }
</div>
{ rows.size > (small ? 3 : 5) && !showAll &&
{ !isTemplate && rows.size > (small ? 3 : 5) && !showAll &&
<div className="w-full flex justify-center">
<Button
onClick={ this.onLoadMoreClick }

8
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -15,10 +15,11 @@ import useIsMounted from 'App/hooks/useIsMounted'
interface Props {
metric: any;
isWidget?: boolean
isWidget?: boolean;
isTemplate?: boolean;
}
function WidgetChart(props: Props) {
const { isWidget = false, metric } = props;
const { isWidget = false, metric, isTemplate } = props;
const { dashboardStore, metricStore } = useStore();
const _metric: any = useObserver(() => metricStore.instance);
const period = useObserver(() => dashboardStore.period);
@ -87,7 +88,7 @@ function WidgetChart(props: Props) {
if (isOverviewWidget) {
return <CustomMetricOverviewChart data={data} />
}
return <WidgetPredefinedChart metric={metric} data={data} predefinedKey={metric.predefinedKey} />
return <WidgetPredefinedChart isTemplate={isTemplate} metric={metric} data={data} predefinedKey={metric.predefinedKey} />
}
if (metricType === 'timeseries') {
@ -116,6 +117,7 @@ function WidgetChart(props: Props) {
return <CustomMetricTable
metric={metric} data={data[0]}
onClick={onChartClick}
isTemplate={isTemplate}
/>;
} else if (viewType === 'pieChart') {
return (

13
frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
View file

@ -32,9 +32,10 @@ interface Props {
data: any;
predefinedKey: string
metric?: any;
isTemplate?: boolean;
}
function WidgetPredefinedChart(props: Props) {
const { data, predefinedKey, metric } = props;
const { data, predefinedKey, metric, isTemplate } = props;
const renderWidget = () => {
switch (predefinedKey) {
@ -52,7 +53,7 @@ function WidgetPredefinedChart(props: Props) {
case 'domains_errors_5xx':
return <CallsErrors5xx data={data} metric={metric} />
case 'calls_errors':
return <CallWithErrors data={data} metric={metric} />
return <CallWithErrors isTemplate={isTemplate} data={data} metric={metric} />
// PERFORMANCE
case 'impacted_sessions_by_slow_pages':
@ -86,18 +87,18 @@ function WidgetPredefinedChart(props: Props) {
case 'resources_count_by_type':
return <BreakdownOfLoadedResources data={data} metric={metric} />
case 'missing_resources':
return <MissingResources data={data} metric={metric} />
return <MissingResources isTemplate={isTemplate} data={data} metric={metric} />
case 'resource_type_vs_response_end':
return <ResourceLoadedVsResponseEnd data={data} metric={metric} />
case 'resources_loading_time':
return <ResourceLoadingTime data={data} metric={metric} />
case 'slowest_resources':
return <SlowestResources data={data} metric={metric} />
return <SlowestResources isTemplate={isTemplate} data={data} metric={metric} />
default:
return <div className="h-40 color-red">Widget not supported</div>
}
}
}
return useObserver(() => (
<>
@ -106,4 +107,4 @@ function WidgetPredefinedChart(props: Props) {
));
}
export default WidgetPredefinedChart;
export default WidgetPredefinedChart;

2
frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
View file

@ -142,7 +142,7 @@ function WidgetWrapper(props: Props) {
{/* <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} > */}
<div className="px-4" onClick={onChartClick}>
<WidgetChart metric={widget} isWidget={isWidget} />
<WidgetChart metric={widget} isTemplate={isTemplate} isWidget={isWidget} />
</div>
{/* </LazyLoad> */}
</Tooltip>