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

feat(ui) - custom metrics - wip

Browse source
This commit is contained in:
Shekar Siri 2022-03-04 18:56:55 +01:00
parent 82ceecbef9
commit cf87b226ab
6 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
View file

@ -35,7 +35,7 @@ function CustomMetricPieChart(props: Props) {
}
return (
<div>
<NoContent size="small" show={data.values.length === 0} >
<NoContent size="small" show={data.values && data.values.length === 0} >
<ResponsiveContainer height={ 220 } width="100%">
<PieChart>
<Pie

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

@ -46,7 +46,7 @@ function CustomMetriTable(props: Props) {
}
return (
<div className="" style={{ height: '240px'}}>
<NoContent show={data.values.length === 0} size="small">
<NoContent show={data.values && data.values.length === 0} size="small">
<Table
small
cols={ cols }

1
frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
View file

@ -114,6 +114,7 @@ function FilterValue(props: Props) {
/>
)
case FilterType.NUMBER:
case FilterType.NUMBER_MULTIPLE:
return (
<input
className="w-full px-2 py-1 text-sm leading-tight text-gray-700 rounded-lg"

6
frontend/app/types/customMetric.js
View file

@ -28,11 +28,11 @@ export const FilterSeries = Record({
export default Record({
metricId: undefined,
name: 'Series',
metricType: 'table',
metricOf: 'USERID',
metricType: 'timeseries',
metricOf: 'sessionCount',
metricValue: ['sessionCount'],
metricFormat: 'sessionCount',
viewType: 'pieChart',
viewType: 'lineChart',
series: List(),
isPublic: true,
startDate: '',

6
frontend/app/types/filter/filterType.ts
View file

@ -13,6 +13,7 @@ export enum FilterType {
ISSUE = "ISSUE",
BOOLEAN = "BOOLEAN",
NUMBER = "NUMBER",
NUMBER_MULTIPLE = "NUMBER_MULTIPLE",
DURATION = "DURATION",
MULTIPLE = "MULTIPLE",
SUB_FILTERS = "SUB_FILTERS",
@ -64,6 +65,9 @@ export enum FilterKey {
FETCH_FAILED = "FETCH_FAILED",
FETCH = "FETCH",
FETCH_URL = "FETCH_URL",
FETCH_STATUS = "FETCH_STATUS",
FETCH_STATUS_CODE = "FETCH_STATUS_CODE",
FETCH_METHOD = "FETCH_METHOD",
FETCH_DURATION = "FETCH_DURATION",
FETCH_REQUEST_BODY = "FETCH_REQUEST_BODY",
FETCH_RESPONSE_BODY = "FETCH_RESPONSE_BODY",
}

5
frontend/app/types/filter/newFilter.js
View file

@ -35,8 +35,11 @@ export const filtersMap = {
// PERFORMANCE
[FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, category: FilterCategory.PERFORMANCE, label: 'Fetch Request', subFilters: [
{ key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with URL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_STATUS, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'with duration', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_REQUEST_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
{ key: FilterKey.FETCH_RESPONSE_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
], icon: 'filters/fetch-failed', isEvent: true },
[FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'isAny', operatorOptions: filterOptions.stringOperators, source: [], icon: 'filters/dom-complete', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
[FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint', operator: 'isAny', operatorOptions: filterOptions.stringOperators, source: [], icon: 'filters/lcpt', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },