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

fix(ui) - fix network request

Browse source
This commit is contained in:
Shekar Siri 2022-03-07 19:26:42 +01:00
parent 1b6f8d9b50
commit d0b626edbc
3 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/app/svg/icons/filters/perfromance-network-request.svg Normal file
View file

@ -0,0 +1,5 @@
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.17157 3.17157C1.92172 2.42143 2.93913 2 4 2H28C29.0609 2 30.0783 2.42143 30.8284 3.17157C31.5786 3.92172 32 4.93913 32 6V26C32 27.0609 31.5786 28.0783 30.8284 28.8284C30.0783 29.5786 29.0609 30 28 30H4C2.93913 30 1.92172 29.5786 1.17157 28.8284C0.421427 28.0783 0 27.0609 0 26V6C0 4.93913 0.421427 3.92172 1.17157 3.17157ZM30 9V6C30 5.46957 29.7893 4.96086 29.4142 4.58579C29.0391 4.21071 28.5304 4 28 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V9V10V12V13V26C2 26.5304 2.21071 27.0391 2.58579 27.4142C2.96086 27.7893 3.46957 28 4 28H28C28.5304 28 29.0391 27.7893 29.4142 27.4142C29.7893 27.0391 30 26.5304 30 26V13V12V10V9Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5575 19.5675C15.6156 19.6257 15.6845 19.6719 15.7605 19.7034C15.8364 19.7349 15.9178 19.7511 16 19.7511C16.0822 19.7511 16.1636 19.7349 16.2395 19.7034C16.3155 19.6719 16.3844 19.6257 16.4425 19.5675L18.9425 17.0675C19.0006 17.0094 19.0467 16.9404 19.0782 16.8645C19.1096 16.7886 19.1258 16.7072 19.1258 16.625C19.1258 16.5428 19.1096 16.4614 19.0782 16.3855C19.0467 16.3096 19.0006 16.2406 18.9425 16.1825C18.8844 16.1244 18.8154 16.0783 18.7395 16.0468C18.6636 16.0154 18.5822 15.9992 18.5 15.9992C18.4178 15.9992 18.3364 16.0154 18.2605 16.0468C18.1846 16.0783 18.1156 16.1244 18.0575 16.1825L16.625 17.6163V12.875C16.625 12.7092 16.5591 12.5503 16.4419 12.4331C16.3247 12.3158 16.1658 12.25 16 12.25C15.8342 12.25 15.6753 12.3158 15.5581 12.4331C15.4408 12.5503 15.375 12.7092 15.375 12.875V17.6163L13.9425 16.1825C13.8251 16.0651 13.666 15.9992 13.5 15.9992C13.334 15.9992 13.1749 16.0651 13.0575 16.1825C12.9401 16.2999 12.8742 16.459 12.8742 16.625C12.8742 16.791 12.9401 16.9501 13.0575 17.0675L15.5575 19.5675V19.5675Z" fill="black"/>
<path d="M11.5075 10.1775C12.7569 9.10017 14.3503 8.50517 16 8.5C19.3625 8.5 22.1538 11 22.4575 14.2237C24.4475 14.505 26 16.1712 26 18.2162C26 20.4612 24.1275 22.25 21.8588 22.25H10.7262C8.135 22.25 6 20.2075 6 17.6475C6 15.4437 7.5825 13.6187 9.6775 13.1562C9.85625 12.0775 10.55 11.0025 11.5075 10.1775V10.1775ZM12.3238 11.1237C11.3775 11.94 10.8825 12.9238 10.8825 13.6938V14.2538L10.3262 14.315C8.58 14.5062 7.25 15.94 7.25 17.6475C7.25 19.4812 8.7875 21 10.7262 21H21.8588C23.475 21 24.75 19.735 24.75 18.2162C24.75 16.6962 23.475 15.4313 21.8588 15.4313H21.2338V14.8063C21.235 12.0313 18.91 9.75 16 9.75C14.6498 9.75539 13.3461 10.243 12.3238 11.125V11.1237Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

9
frontend/app/types/filter/filter.js
View file

@ -99,16 +99,11 @@ export default Record({
filters: List(filters)
.map(i => {
const filter = NewFilter(i).toData();
if (filter.hasOwnProperty('filters')) {
filter.filters = filter.filters.map(f => ({ ...f, value: [""]}));
// filter.filters = filter.filters.map(f => ({ ...f, value: [""]}));
if (i.hasOwnProperty('filters')) {
filter.filters = i.filters.map(f => NewFilter({...f, subFilter: i.type}).toData());
}
console.log('filter', filter);
return filter;
}),
// .concat(List(events).map(i => NewFilter(i).toData())),
// custom: Map(custom),
}
}
});

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

@ -40,7 +40,7 @@ export const filtersMap = {
{ 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 },
], icon: 'filters/perfromance-network-request', 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 },
[FilterKey.TTFB]: { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'isAny', operatorOptions: filterOptions.stringOperators, source: [], icon: 'filters/ttfb', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
@ -118,8 +118,18 @@ export default Record({
filters: [],
}, {
keyKey: "_key",
fromJS: ({ value, type, ...filter }) => {
const _filter = filtersMap[type];
fromJS: ({ value, type, subFilter = false, ...filter }) => {
let _filter = {};
if (subFilter) {
const mainFilter = filtersMap[subFilter];
const subFilterMap = {}
mainFilter.filters.forEach(option => {
subFilterMap[option.key] = option
})
_filter = subFilterMap[type]
} else {
_filter = filtersMap[type];
}
return {
...filter,
..._filter,