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

fix heatmap filter selection, fix sso button?

Browse source
This commit is contained in:
nick-delirium 2024-08-29 15:42:36 +02:00
parent 4ed6523ee8
commit addd8f23a3
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
9 changed files with 62 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/Router.tsx
View file

@ -66,6 +66,7 @@ const Router: React.FC<RouterProps> = (props) => {
scopeSetup,
localSpotJwt,
} = props;
const params = new URLSearchParams(location.search)
const spotCb = params.get('spotCallback');
const spotReqSent = React.useRef(false)
@ -162,7 +163,6 @@ const Router: React.FC<RouterProps> = (props) => {
}, []);
useEffect(() => {
// handleJwtFromUrl();
handleDestinationPath();
setSessionPath(previousLocation ? previousLocation : location);
@ -227,7 +227,7 @@ const Router: React.FC<RouterProps> = (props) => {
<NewModalProvider>
<ModalProvider>
<Loader loading={loading} className="flex-1">
<Layout hideHeader={hideHeader} siteId={siteId}>
<Layout hideHeader={hideHeader}>
<PrivateRoutes />
</Layout>
</Loader>
@ -249,7 +249,7 @@ const mapStateToProps = (state: Map<string, any>) => {
]);
const sitesLoading = state.getIn(['site', 'fetchListRequest', 'loading']);
const scopeSetup = state.getIn(['user', 'scopeSetup'])
const loading = Boolean(userInfoLoading) || Boolean(sitesLoading)
const loading = Boolean(userInfoLoading) || Boolean(sitesLoading) || (!scopeSetup && !siteId);
return {
siteId,
changePassword,

5
frontend/app/components/Login/Login.tsx
View file

@ -150,6 +150,7 @@ const Login: React.FC<LoginProps> = ({
? `${window.location.origin}/api/sso/saml2?iFrame=true&spot=true`
: `${window.location.origin}/api/sso/saml2?spot=true`;
console.log(authDetails.enforceSSO)
return (
<div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center">
@ -160,7 +161,7 @@ const Login: React.FC<LoginProps> = ({
<h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">
Login to your account
</h2>
<div className={cn({ hidden: authDetails.enforceSSO })}>
<div className={cn(authDetails.enforceSSO ? '!hidden' : '')}>
<Form
onSubmit={onSubmit}
className={cn('flex items-center justify-center flex-col')}
@ -285,7 +286,7 @@ const Login: React.FC<LoginProps> = ({
</div>
<div
className={cn('flex items-center w-96 justify-center my-8', {
hidden: !authDetails.enforceSSO,
'!hidden': !authDetails.enforceSSO,
})}
>
<a href={ssoLink} rel="noopener noreferrer">

5
frontend/app/dateRange.js
View file

@ -58,11 +58,6 @@ export function getDateRangeFromValue(value) {
case DATE_RANGE_VALUES.LAST_24_HOURS:
return Interval.fromDateTimes(now.minus({ hours: 24 }), now);
case DATE_RANGE_VALUES.LAST_7_DAYS:
const range = Interval.fromDateTimes(
now.minus({ days: 7 }).startOf('day'),
now.endOf('day')
);
console.log(range, now.minus({ days: 7}))
return Interval.fromDateTimes(
now.minus({ days: 7 }).startOf('day'),
now.endOf('day')

6
frontend/app/layout/SideMenu.tsx
View file

@ -210,6 +210,10 @@ function SideMenu(props: Props) {
props.history.push(path);
};
const RenderDivider = (props: {index: number}) => {
if (props.index === 0) return null;
return <Divider style={{ margin: '6px 0' }} />;
}
return (
<>
<Menu
@ -226,7 +230,7 @@ function SideMenu(props: Props) {
<React.Fragment key={category.key}>
{!category.hidden && (
<>
{index > 0 && <Divider style={{ margin: '6px 0' }} />}
<RenderDivider index={index} />
{category.items
.filter((item: any) => !item.hidden)

4
frontend/app/mstore/types/filter.ts
View file

@ -71,10 +71,10 @@ export default class Filter {
this.filters.splice(index, 1)
}
fromJson(json: any) {
fromJson(json: any, isHeatmap?: boolean) {
this.name = json.name
this.filters = json.filters.map((i: Record<string, any>) =>
new FilterItem(undefined, this.isConditional, this.isMobile).fromJson(i)
new FilterItem(undefined, this.isConditional, this.isMobile).fromJson(i, undefined, isHeatmap)
);
this.eventsOrder = json.eventsOrder
return this

73
frontend/app/mstore/types/filterItem.ts
View file

@ -1,6 +1,12 @@
import { makeAutoObservable, observable, action } from 'mobx';
import { FilterKey, FilterType, FilterCategory } from 'Types/filter/filterType';
import { filtersMap, conditionalFiltersMap, mobileConditionalFiltersMap } from 'Types/filter/newFilter';
import { FilterCategory, FilterKey, FilterType } from 'Types/filter/filterType';
import {
conditionalFiltersMap,
filtersMap,
mobileConditionalFiltersMap,
} from 'Types/filter/newFilter';
import { action, makeAutoObservable, observable } from 'mobx';
import { pageUrlOperators } from '../../constants/filterOptions';
export default class FilterItem {
type: string = '';
@ -25,7 +31,7 @@ export default class FilterItem {
data: any = {},
private readonly isConditional?: boolean,
private readonly isMobile?: boolean
) {
) {
makeAutoObservable(this, {
type: observable,
key: observable,
@ -62,35 +68,41 @@ export default class FilterItem {
}
fromData(data: any) {
Object.assign(this, data)
this.type = data.type
this.key = data.key
this.label = data.label
this.operatorOptions = data.operatorOptions
this.hasSource = data.hasSource
this.category = data.category
this.sourceOperatorOptions = data.sourceOperatorOptions
this.value = data.value
this.isEvent = Boolean(data.isEvent)
this.operator = data.operator
this.source = data.source
this.sourceOperator = data.sourceOperator
this.filters = data.filters
this.isActive = Boolean(data.isActive)
this.completed = data.completed
this.dropped = data.dropped
this.options = data.options
return this
Object.assign(this, data);
this.type = data.type;
this.key = data.key;
this.label = data.label;
this.operatorOptions = data.operatorOptions;
this.hasSource = data.hasSource;
this.category = data.category;
this.sourceOperatorOptions = data.sourceOperatorOptions;
this.value = data.value;
this.isEvent = Boolean(data.isEvent);
this.operator = data.operator;
this.source = data.source;
this.sourceOperator = data.sourceOperator;
this.filters = data.filters;
this.isActive = Boolean(data.isActive);
this.completed = data.completed;
this.dropped = data.dropped;
this.options = data.options;
return this;
}
fromJson(json: any, mainFilterKey = '') {
fromJson(json: any, mainFilterKey = '', isHeatmap?: boolean) {
const isMetadata = json.type === FilterKey.METADATA;
let _filter: any = (isMetadata ? filtersMap['_' + json.source] : filtersMap[json.type]) || {};
let _filter: any =
(isMetadata ? filtersMap['_' + json.source] : filtersMap[json.type]) ||
{};
if (this.isConditional) {
if (this.isMobile) {
_filter = mobileConditionalFiltersMap[json.type] || mobileConditionalFiltersMap[json.source];
_filter =
mobileConditionalFiltersMap[json.type] ||
mobileConditionalFiltersMap[json.source];
} else {
_filter = conditionalFiltersMap[json.type] || conditionalFiltersMap[json.source];
_filter =
conditionalFiltersMap[json.type] ||
conditionalFiltersMap[json.source];
}
}
if (mainFilterKey) {
@ -110,6 +122,9 @@ export default class FilterItem {
this.hasSource = _filter.hasSource;
this.category = _filter.category;
this.sourceOperatorOptions = _filter.sourceOperatorOptions;
if (isHeatmap && this.type === FilterKey.LOCATION) {
this.sourceOperatorOptions = pageUrlOperators;
}
this.options = _filter.options;
this.isEvent = Boolean(_filter.isEvent);
@ -138,7 +153,9 @@ export default class FilterItem {
operator: this.operator,
source: isMetadata ? this.key.replace(/^_/, '') : this.source,
sourceOperator: this.sourceOperator,
filters: Array.isArray(this.filters) ? this.filters.map((i) => i.toJson()) : [],
filters: Array.isArray(this.filters)
? this.filters.map((i) => i.toJson())
: [],
};
if (this.type === FilterKey.DURATION) {
json.value = this.value.map((i: any) => (!i ? 0 : i));

4
frontend/app/mstore/types/filterSeries.ts
View file

@ -21,10 +21,10 @@ export default class FilterSeries {
this[key] = value
}
fromJson(json) {
fromJson(json, isHeatmap = false) {
this.seriesId = json.seriesId
this.name = json.name
this.filter = new Filter().fromJson(json.filter || { filters: [] })
this.filter = new Filter().fromJson(json.filter || { filters: [] }, isHeatmap)
return this
}

4
frontend/app/mstore/types/widget.ts
View file

@ -8,7 +8,7 @@ import {FilterKey} from 'Types/filter/filterType';
import Period, {LAST_24_HOURS} from 'Types/app/period';
import Funnel from '../types/funnel';
import {metricService} from 'App/services';
import {FUNNEL, INSIGHTS, TABLE, USER_PATH, WEB_VITALS} from 'App/constants/card';
import { FUNNEL, HEATMAP, INSIGHTS, TABLE, USER_PATH, WEB_VITALS } from "App/constants/card";
import Error from '../types/error';
import {getChartFormatter} from 'Types/dashboard/helper';
import FilterItem from './filterItem';
@ -153,7 +153,7 @@ export default class Widget {
this.name = json.name;
this.series =
json.series && json.series.length > 0
? json.series.map((series: any) => new FilterSeries().fromJson(series))
? json.series.map((series: any) => new FilterSeries().fromJson(series, this.metricType === HEATMAP))
: [new FilterSeries()];
this.dashboards = json.dashboards || [];
this.owner = json.ownerName;

2
frontend/tsconfig.json
View file

@ -9,8 +9,6 @@
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"esModuleInterop": true,
// "module": "es6",
// "module": "es2020",
"target": "es6",
"allowJs": true,
"isolatedModules": true,