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

Merge pull request #359 from openreplay/custom-metrics-improvements

Browse source 
Custom metrics - wip
This commit is contained in:
Shekar Siri 2022-03-04 11:33:42 +01:00 • committed by GitHub
commit f6b3a05ab5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
69 changed files with 893 additions and 343 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
api/routers/core.py
View file

@ -36,8 +36,7 @@ def get_session2(projectId: int, sessionId: Union[int, str], context: schemas.Cu
include_fav_viewed=True, group_metadata=True)
if data is None:
return {"errors": ["session not found"]}
if not data.get("live"):
sessions_favorite_viewed.view_session(project_id=projectId, user_id=context.user_id, session_id=sessionId)
sessions_favorite_viewed.view_session(project_id=projectId, user_id=context.user_id, session_id=sessionId)
return {
'data': data
}

2
backend/pkg/db/postgres/connector.go
View file

@ -10,7 +10,7 @@ import (
)
func getTimeoutContext() context.Context {
ctx, _ := context.WithTimeout(context.Background(), time.Duration(time.Second*10))
ctx, _ := context.WithTimeout(context.Background(), time.Duration(time.Second*30))
return ctx
}

2
ee/api/chalicelib/core/users.py
View file

@ -156,7 +156,7 @@ def update(tenant_id, user_id, changes):
(SELECT role_id FROM roles WHERE tenant_id = %(tenant_id)s AND name != 'Owner' LIMIT 1)))""")
else:
sub_query_users.append(f"{helper.key_to_snake_case(key)} = %({key})s")
changes["role_id"] = changes.get("roleId", changes.get("role_id"))
with pg_client.PostgresClient() as cur:
if len(sub_query_users) > 0:
cur.execute(

21
frontend/app/Router.js
View file

@ -21,6 +21,10 @@ import Header from 'Components/Header/Header';
import FunnelDetails from 'Components/Funnels/FunnelDetails';
import FunnelIssueDetails from 'Components/Funnels/FunnelIssueDetails';
import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
import { fetchList as fetchSiteList } from 'Duck/site';
import { fetchList as fetchAnnouncements } from 'Duck/announcements';
import { fetchList as fetchAlerts } from 'Duck/alerts';
import { fetchWatchdogStatus } from 'Duck/watchdogs';
import APIClient from './api_client';
import * as routes from './routes';
@ -80,7 +84,14 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB);
onboarding: state.getIn([ 'user', 'onboarding' ])
};
}, {
fetchUserInfo, fetchTenants, setSessionPath, fetchIntegrationVariables
fetchUserInfo,
fetchTenants,
setSessionPath,
fetchIntegrationVariables,
fetchSiteList,
fetchAnnouncements,
fetchAlerts,
fetchWatchdogStatus,
})
class Router extends React.Component {
state = {
@ -93,6 +104,14 @@ class Router extends React.Component {
props.fetchUserInfo().then(() => {
props.fetchIntegrationVariables()
}),
props.fetchSiteList().then(() => {
setTimeout(() => {
props.fetchAnnouncements();
props.fetchAlerts();
props.fetchWatchdogStatus();
}, 100);
}),
// props.fetchAnnouncements(),
])
// .then(() => this.onLoginLogout());
}

6
frontend/app/components/Alerts/Notifications/Notifications.js
View file

@ -18,9 +18,9 @@ class Notifications extends React.Component {
constructor(props) {
super(props);
setTimeout(() => {
props.fetchList();
}, 1000);
// setTimeout(() => {
// props.fetchList();
// }, 1000);
setInterval(() => {
props.fetchList();

6
frontend/app/components/Announcements/Announcements.js
View file

@ -10,11 +10,7 @@ import { withRouter } from 'react-router-dom';
@withToggle('visible', 'toggleVisisble')
@withRouter
class Announcements extends React.Component {
constructor(props) {
super(props);
props.fetchList();
}
navigateToUrl = url => {
if (url) {
if (url.startsWith(window.ENV.ORIGIN)) {

28
frontend/app/components/BugFinder/BugFinder.js
View file

@ -4,14 +4,11 @@ import withPageTitle from 'HOCs/withPageTitle';
import {
fetchFavoriteList as fetchFavoriteSessionList
} from 'Duck/sessions';
import { countries } from 'App/constants';
import { applyFilter, clearEvents, addAttribute } from 'Duck/filters';
import { fetchList as fetchFunnelsList } from 'Duck/funnels';
import { defaultFilters, preloadedFilters } from 'Types/filter';
import { KEYS } from 'Types/filter/customFilter';
import SessionList from './SessionList';
import stl from './bugFinder.css';
import { fetchList as fetchSiteList } from 'Duck/site';
import withLocationHandlers from "HOCs/withLocationHandlers";
import { fetch as fetchFilterVariables } from 'Duck/sources';
import { fetchSources } from 'Duck/customField';
@ -68,7 +65,6 @@ const allowedQueryKeys = [
fetchSources,
clearEvents,
setActiveTab,
fetchSiteList,
fetchFunnelsList,
resetFunnel,
resetFunnelFilters,
@ -81,7 +77,6 @@ export default class BugFinder extends React.PureComponent {
state = {showRehydratePanel: false}
constructor(props) {
super(props);
// props.fetchFavoriteSessionList();
// TODO should cache the response
// props.fetchSources().then(() => {
@ -115,29 +110,6 @@ export default class BugFinder extends React.PureComponent {
this.setState({ showRehydratePanel: !this.state.showRehydratePanel })
}
// fetchPreloadedFilters = () => {
// this.props.fetchFilterVariables('filterValues').then(function() {
// const { filterValues } = this.props;
// const keys = [
// {key: KEYS.USER_OS, label: 'OS'},
// {key: KEYS.USER_BROWSER, label: 'Browser'},
// {key: KEYS.USER_DEVICE, label: 'Device'},
// {key: KEYS.REFERRER, label: 'Referrer'},
// {key: KEYS.USER_COUNTRY, label: 'Country'},
// ]
// if (filterValues && filterValues.size != 0) {
// keys.forEach(({key, label}) => {
// const _keyFilters = filterValues.get(key)
// if (key === KEYS.USER_COUNTRY) {
// preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, actualValue: countries[item], isFilter: true})));
// } else {
// preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, isFilter: true})));
// }
// })
// }
// }.bind(this));
// }
setActiveTab = tab => {
this.props.setActiveTab(tab);
}

2
frontend/app/components/BugFinder/DateRange.js
View file

@ -10,7 +10,7 @@ import DateRangeDropdown from 'Shared/DateRangeDropdown';
})
export default class DateRange extends React.PureComponent {
onDateChange = (e) => {
this.props.fetchFunnelsList(e.rangeValue)
// this.props.fetchFunnelsList(e.rangeValue)
this.props.applyFilter(e)
}
render() {

6
frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js
View file

@ -22,9 +22,9 @@ function SessionsMenu(props) {
}
}
useEffect(() => {
fetchWatchdogStatus()
}, [])
// useEffect(() => {
// fetchWatchdogStatus()
// }, [])
const capturingAll = props.captureRate && props.captureRate.get('captureAll');

2
frontend/app/components/Client/Client.js
View file

@ -3,7 +3,6 @@ import { withRouter } from 'react-router-dom';
import { Switch, Route, Redirect } from 'react-router';
import { CLIENT_TABS, client as clientRoute } from 'App/routes';
import { fetchList as fetchMemberList } from 'Duck/member';
import { fetchList as fetchSiteList } from 'Duck/site';
import ProfileSettings from './ProfileSettings';
import Integrations from './Integrations';
@ -21,7 +20,6 @@ import Roles from './Roles';
appearance: state.getIn([ 'user', 'account', 'appearance' ]),
}), {
fetchMemberList,
fetchSiteList,
})
@withRouter
export default class Client extends React.PureComponent {

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

@ -240,7 +240,6 @@ export default class Dashboard extends React.PureComponent {
Custom Metrics are not supported for comparison.
</div>
)}
{/* <CustomMetrics /> */}
</div>
}
>

59
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/CustomMetriLineChart.tsx Normal file
View file

@ -0,0 +1,59 @@
import React from 'react'
import { Styles } from '../../common';
import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
import { LineChart, Line, Legend } from 'recharts';
interface Props {
data: any;
params: any;
seriesMap: any;
colors: any;
onClick?: (event, index) => void;
}
function CustomMetriLineChart(props: Props) {
const { data, params, seriesMap, colors, onClick = () => null } = props;
return (
<ResponsiveContainer height={ 240 } width="100%">
<LineChart
data={ data }
margin={Styles.chartMargins}
// syncId={ showSync ? "domainsErrors_4xx" : undefined }
onClick={onClick}
isAnimationActive={ false }
>
<CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
<XAxis
{...Styles.xaxis}
dataKey="time"
interval={params.density/7}
/>
<YAxis
{...Styles.yaxis}
allowDecimals={false}
label={{
...Styles.axisLabelLeft,
value: "Number of Sessions"
}}
/>
<Legend />
<Tooltip {...Styles.tooltip} />
{ seriesMap.map((key, index) => (
<Line
key={key}
name={key}
type="monotone"
dataKey={key}
stroke={colors[index]}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.6 }
// fill="url(#colorCount)"
dot={false}
/>
))}
</LineChart>
</ResponsiveContainer>
)
}
export default CustomMetriLineChart

1
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetriLineChart/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './CustomMetriLineChart';

19
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/CustomMetricPercentage.tsx Normal file
View file

@ -0,0 +1,19 @@
import React from 'react'
interface Props {
data: any;
params: any;
colors: any;
onClick?: (event, index) => void;
}
function CustomMetriPercentage(props: Props) {
const { data = {} } = props;
return (
<div className="flex flex-col items-center justify-center" style={{ height: '240px'}}>
<div className="text-6xl">{data.count}</div>
<div className="text-lg mt-6">{`${data.previousCount} ( ${data.countProgress}% ) from previous period.`}</div>
</div>
)
}
export default CustomMetriPercentage;

1
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './CustomMetricPercentage';

6
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.css Normal file
View file

@ -0,0 +1,6 @@
.wrapper {
background-color: white;
/* border: solid thin $gray-medium; */
border-radius: 3px;
padding: 10px;
}

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

@ -0,0 +1,155 @@
import React from 'react'
import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
import { LineChart, Line, Legend, PieChart, Pie, Cell } from 'recharts';
import { Styles } from '../../common';
function renderCustomizedLabel({
cx, cy, midAngle, innerRadius, outerRadius, value, color, startAngle, endAngle}) {
const RADIAN = Math.PI / 180;
const diffAngle = endAngle - startAngle;
const delta = ((360-diffAngle)/15)-1;
const radius = innerRadius + (outerRadius - innerRadius);
const x = cx + (radius+delta) * Math.cos(-midAngle * RADIAN);
const y = cy + (radius+(delta*delta)) * Math.sin(-midAngle * RADIAN);
return (
<text x={x} y={y} fill={color} textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central" fontSize={12} fontWeight="normal">
{value}
</text>
);
};
function renderCustomizedLabelLine(props){
let { cx, cy, midAngle, innerRadius, outerRadius, color, startAngle, endAngle } = props;
const RADIAN = Math.PI / 180;
const diffAngle = endAngle - startAngle;
const radius = 10 + innerRadius + (outerRadius - innerRadius);
let path='';
for(let i=0;i<((360-diffAngle)/15);i++){
path += `${(cx + (radius+i) * Math.cos(-midAngle * RADIAN))},${(cy + (radius+i*i) * Math.sin(-midAngle * RADIAN))} `
}
return (
<polyline points={path} stroke={color} fill="none" />
);
}
interface Props {
data: any;
params: any;
// seriesMap: any;
colors: any;
onClick?: (event, index) => void;
}
function CustomMetricPieChart(props: Props) {
const { data = { values: [] }, params, colors, onClick = () => null } = props;
return (
<ResponsiveContainer height={ 240 } width="100%">
<PieChart>
<Pie
isAnimationActive={ false }
data={data.values}
dataKey="sessionCount"
nameKey="name"
cx="50%"
cy="50%"
// innerRadius={40}
outerRadius={70}
// fill={colors[0]}
activeIndex={1}
labelLine={({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
value,
index
}) => {
const RADIAN = Math.PI / 180;
let radius1 = 15 + innerRadius + (outerRadius - innerRadius);
let radius2 = innerRadius + (outerRadius - innerRadius);
let x2 = cx + radius1 * Math.cos(-midAngle * RADIAN);
let y2 = cy + radius1 * Math.sin(-midAngle * RADIAN);
let x1 = cx + radius2 * Math.cos(-midAngle * RADIAN);
let y1 = cy + radius2 * Math.sin(-midAngle * RADIAN);
const percentage = value * 100 / data.values.reduce((a, b) => a + b.sessionCount, 0);
if (percentage<3){
return null;
}
return(
<line x1={x1} y1={y1} x2={x2} y2={y2} stroke="#3EAAAF" strokeWidth={1} />
)
}}
label={({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
value,
index
}) => {
const RADIAN = Math.PI / 180;
let radius = 20 + innerRadius + (outerRadius - innerRadius);
let x = cx + radius * Math.cos(-midAngle * RADIAN);
let y = cy + radius * Math.sin(-midAngle * RADIAN);
const percentage = (value / data.values.reduce((a, b) => a + b.sessionCount, 0)) * 100;
if (percentage<3){
return null;
}
return (
<text
x={x}
y={y}
fontWeight="300"
fontSize="12px"
// fontFamily="'Source Sans Pro', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'"
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
fill='#3EAAAF'
>
{data.values[index].name} - ({value})
</text>
);
}}
// label={({
// cx,
// cy,
// midAngle,
// innerRadius,
// outerRadius,
// value,
// index
// }) => {
// const RADIAN = Math.PI / 180;
// const radius = 30 + innerRadius + (outerRadius - innerRadius);
// const x = cx + radius * Math.cos(-midAngle * RADIAN);
// const y = cy + radius * Math.sin(-midAngle * RADIAN);
// return (
// <text
// x={x}
// y={y}
// fill="#3EAAAF"
// textAnchor={x > cx ? "start" : "end"}
// dominantBaseline="top"
// fontSize={10}
// >
// {data.values[index].name} ({value})
// </text>
// );
// }}
>
{data.values.map((entry, index) => (
<Cell key={`cell-${index}`} fill={Styles.colorsPie[index % Styles.colorsPie.length]} />
))}
</Pie>
<Tooltip {...Styles.tooltip} />
</PieChart>
</ResponsiveContainer>
)
}
export default CustomMetricPieChart;

1
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './CustomMetricPieChart';

6
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.css Normal file
View file

@ -0,0 +1,6 @@
.wrapper {
background-color: white;
/* border: solid thin $gray-medium; */
border-radius: 3px;
padding: 10px;
}

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

@ -0,0 +1,39 @@
import React from 'react'
import { Table } from '../../common';
import { List } from 'immutable';
const cols = [
{
key: 'name',
title: 'Resource',
toText: name => name || 'Unidentified',
width: '70%',
},
{
key: 'sessionCount',
title: 'Sessions',
toText: sessions => sessions,
width: '30%',
},
];
interface Props {
data: any;
onClick?: (event, index) => void;
}
function CustomMetriTable(props: Props) {
const { data = { values: [] }, onClick = () => null } = props;
const rows = List(data.values);
return (
<div className="" style={{ height: '240px'}}>
<Table
small
cols={ cols }
rows={ rows }
rowClass="group"
/>
</div>
)
}
export default CustomMetriTable;

1
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './CustomMetricTable';

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

@ -2,22 +2,25 @@ import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Loader, NoContent, Icon, Popup } from 'UI';
import { Styles } from '../../common';
import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
import { LineChart, Line, Legend } from 'recharts';
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 { init, edit, remove, setAlertMetricId, setActiveWidget, updateActiveState } from 'Duck/customMetrics';
import APIClient from 'App/api_client';
import { setShowAlerts } from 'Duck/dashboard';
import CustomMetriLineChart from '../CustomMetriLineChart';
import CustomMetricPieChart from '../CustomMetricPieChart';
import CustomMetricPercentage from '../CustomMetricPercentage';
import CustomMetricTable from '../CustomMetricTable';
const customParams = rangeName => {
const params = { density: 70 }
if (rangeName === LAST_24_HOURS) params.density = 70
if (rangeName === LAST_30_MINUTES) params.density = 70
if (rangeName === YESTERDAY) params.density = 70
if (rangeName === LAST_7_DAYS) params.density = 70
// if (rangeName === LAST_24_HOURS) params.density = 70
// if (rangeName === LAST_30_MINUTES) params.density = 70
// if (rangeName === YESTERDAY) params.density = 70
// if (rangeName === LAST_7_DAYS) params.density = 70
return params
}
@ -47,11 +50,10 @@ function CustomMetricWidget(props: Props) {
const colors = Styles.customMetricColors;
const params = customParams(period.rangeName)
const gradientDef = Styles.gradientDef();
const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart', startDate: period.start, endDate: period.end }
useEffect(() => {
new APIClient()['post']('/custom_metrics/chart', { ...metricParams, q: metric.name })
new APIClient()['post'](`/custom_metrics/${metricParams.metricId}/chart`, { ...metricParams, q: metric.name })
.then(response => response.json())
.then(({ errors, data }) => {
if (errors) {
@ -78,8 +80,19 @@ function CustomMetricWidget(props: Props) {
if (event) {
const payload = event.activePayload[0].payload;
const timestamp = payload.timestamp;
const { startTimestamp, endTimestamp } = getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density);
props.setActiveWidget({ widget: metric, startTimestamp, endTimestamp, timestamp: payload.timestamp, index })
const periodTimestamps = metric.metricType === 'timeseries' ?
getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density) :
period.toTimestamps();
const activeWidget = {
widget: metric,
period: period,
...periodTimestamps,
timestamp: payload.timestamp,
index,
}
props.setActiveWidget(activeWidget);
}
}
@ -89,7 +102,7 @@ function CustomMetricWidget(props: Props) {
return (
<div className={stl.wrapper}>
<div className="flex items-center mb-10 p-2">
<div className="flex items-center p-2">
<div className="font-medium">{metric.name}</div>
<div className="ml-auto flex items-center">
<WidgetIcon className="cursor-pointer mr-6" icon="bell-plus" tooltip="Set Alert" onClick={props.onAlertClick} />
@ -97,56 +110,51 @@ function CustomMetricWidget(props: Props) {
<WidgetIcon className="cursor-pointer" icon="close" tooltip="Hide Metric" onClick={() => updateActiveState(metric.metricId, false)} />
</div>
</div>
<div>
<div className="px-3">
<Loader loading={ loading } size="small">
<NoContent
size="small"
show={ data.length === 0 }
>
<ResponsiveContainer height={ 240 } width="100%">
<LineChart
data={ data }
margin={Styles.chartMargins}
syncId={ showSync ? "domainsErrors_4xx" : undefined }
onClick={clickHandler}
>
<defs>
<linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={colors[4]} stopOpacity={ 0.9 } />
<stop offset="95%" stopColor={colors[4]} stopOpacity={ 0.2 } />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
<XAxis
{...Styles.xaxis}
dataKey="time"
interval={params.density/7}
/>
<YAxis
{...Styles.yaxis}
allowDecimals={false}
label={{
...Styles.axisLabelLeft,
value: "Number of Sessions"
}}
/>
<Legend />
<Tooltip {...Styles.tooltip} />
{ seriesMap.map((key, index) => (
<Line
key={key}
name={key}
type="monotone"
dataKey={key}
stroke={colors[index]}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }
fill="url(#colorCount)"
dot={false}
<>
{metric.viewType === 'lineChart' && (
<CustomMetriLineChart
data={ data }
params={ params }
seriesMap={ seriesMap }
colors={ colors }
onClick={ clickHandler }
/>
))}
</LineChart>
)}
{metric.viewType === 'pieChart' && (
<CustomMetricPieChart
data={ data[0] }
params={ params }
colors={ colors }
onClick={ clickHandler }
/>
)}
{metric.viewType === 'progress' && (
<CustomMetricPercentage
data={ data[0] }
params={ params }
colors={ colors }
onClick={ clickHandler }
/>
)}
{metric.viewType === 'table' && (
<CustomMetricTable
data={ data[0] }
// params={ params }
// colors={ colors }
onClick={ clickHandler }
/>
)}
</>
</ResponsiveContainer>
</NoContent>
</Loader>

11
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css
View file

@ -1,6 +1,13 @@
.wrapper {
background-color: white;
background-color: $gray-light;
/* border: solid thin $gray-medium; */
border-radius: 3px;
padding: 10px;
padding: 20px;
}
.innerWapper {
border-radius: 3px;
width: 70%;
margin: 0 auto;
background-color: white;
}

126
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
View file

@ -1,16 +1,20 @@
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { Loader, NoContent, Icon } from 'UI';
import { Loader, NoContent, SegmentSelection, Icon } from 'UI';
import { Styles } from '../../common';
import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip, LineChart, Line, Legend } from 'recharts';
// import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip, LineChart, Line, Legend } from 'recharts';
import Period, { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
import stl from './CustomMetricWidgetPreview.css';
import { getChartFormatter } from 'Types/dashboard/helper';
import { remove } from 'Duck/customMetrics';
import DateRange from 'Shared/DateRange';
import { edit } from 'Duck/customMetrics';
import CustomMetriLineChart from '../CustomMetriLineChart';
import CustomMetricPercentage from '../CustomMetricPercentage';
import CustomMetricTable from '../CustomMetricTable';
import APIClient from 'App/api_client';
import CustomMetricPieChart from '../CustomMetricPieChart';
const customParams = rangeName => {
const params = { density: 70 }
@ -43,8 +47,9 @@ function CustomMetricWidget(props: Props) {
const params = customParams(period.rangeName)
const gradientDef = Styles.gradientDef();
const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
const prevMetricRef = useRef<any>();
const isTimeSeries = metric.metricType === 'timeseries';
const isTable = metric.metricType === 'table';
useEffect(() => {
// Check for title change
@ -83,11 +88,46 @@ function CustomMetricWidget(props: Props) {
props.edit({ ...changedDates, rangeName: changedDates.rangeValue });
}
const chagneViewType = (e, { name, value }) => {
props.edit({ [ name ]: value });
}
return (
<div className="mb-10">
<div className="flex items-center mb-4">
<div className="mr-auto font-medium">Preview</div>
<div>
<div className="flex items-center">
{isTimeSeries && (
<SegmentSelection
name="viewType"
className="my-3"
primary
icons={true}
onSelect={ chagneViewType }
value={{ value: metric.viewType }}
list={ [
{ value: 'lineChart', name: 'Chart', icon: 'graph-up-arrow' },
{ value: 'progress', name: 'Progress', icon: 'hash' },
]}
/>
)}
{isTable && (
<SegmentSelection
name="viewType"
className="my-3"
primary={true}
icons={true}
onSelect={ chagneViewType }
value={{ value: metric.viewType }}
list={[
{ value: 'table', name: 'Table', icon: 'table' },
{ value: 'pieChart', name: 'Chart', icon: 'graph-up-arrow' },
]}
/>
)}
<div className="mx-2" />
<span className="mr-1 color-gray-medium">Time Range</span>
<DateRange
rangeValue={metric.rangeName}
startDate={metric.startDate}
@ -99,50 +139,50 @@ function CustomMetricWidget(props: Props) {
</div>
</div>
<div className={stl.wrapper}>
<div>
<div className={stl.innerWapper}>
<Loader loading={ loading } size="small">
<NoContent
size="small"
show={ data.length === 0 }
>
<ResponsiveContainer height={ 240 } width="100%">
<LineChart
data={ data }
margin={Styles.chartMargins}
syncId={ showSync ? "domainsErrors_4xx" : undefined }
>
<CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
<XAxis
{...Styles.xaxis}
dataKey="time"
interval={params.density/7}
/>
<YAxis
{...Styles.yaxis}
allowDecimals={false}
label={{
...Styles.axisLabelLeft,
value: "Number of Sessions"
}}
/>
<Legend />
<Tooltip {...Styles.tooltip} />
{ seriesMap.map((key, index) => (
<Line
key={key}
name={key}
type="monotone"
dataKey={key}
stroke={colors[index]}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.6 }
// fill="url(#colorCount)"
dot={false}
/>
))}
</LineChart>
</ResponsiveContainer>
<div className="p-4 font-medium">
{metric.name}
</div>
<div className="px-4 pb-4">
{ isTimeSeries && (
<>
{ metric.viewType === 'progress' && (
<CustomMetricPercentage
data={data[0]}
colors={colors}
params={params}
/>
)}
{ metric.viewType === 'lineChart' && (
<CustomMetriLineChart
data={data}
seriesMap={seriesMap}
colors={colors}
params={params}
/>
)}
</>
)}
{ isTable && (
<>
{ metric.viewType === 'table' ? (
<CustomMetricTable data={data[0]} />
) : (
<CustomMetricPieChart
data={data[0]}
colors={colors}
params={params}
/>
)}
</>
)}
</div>
</NoContent>
</Loader>
</div>

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

@ -5,6 +5,7 @@ import CustomMetricWidget from './CustomMetricWidget';
import AlertFormModal from 'App/components/Alerts/AlertFormModal';
import { init as initAlert } from 'Duck/alerts';
import LazyLoad from 'react-lazyload';
import CustomMetrics from 'App/components/shared/CustomMetrics';
interface Props {
fetchList: Function;
@ -22,7 +23,7 @@ function CustomMetricsWidgets(props: Props) {
return (
<>
{list.filter(item => item.active).map((item: any) => (
{list.map((item: any) => (
<LazyLoad>
<CustomMetricWidget
key={item.metricId}
@ -36,6 +37,13 @@ function CustomMetricsWidgets(props: Props) {
</LazyLoad>
))}
{list.size === 0 && (
<div className="flex items-center py-2">
<div className="mr-2">Be proactive by monitoring the metrics you care about the most.</div>
<CustomMetrics />
</div>
)}
<AlertFormModal
showModal={!!activeMetricId}
metricId={activeMetricId}
@ -46,5 +54,5 @@ function CustomMetricsWidgets(props: Props) {
}
export default connect(state => ({
list: state.getIn(['customMetrics', 'list']),
list: state.getIn(['customMetrics', 'list']).filter(item => item.active),
}), { fetchList, initAlert })(CustomMetricsWidgets);

2
frontend/app/components/Dashboard/Widgets/common/Styles.js
View file

@ -5,6 +5,7 @@ const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7
const compareColors = ['#394EFF', '#4D5FFF', '#808DFF', '#B3BBFF', '#E5E8FF'];
const compareColorsx = ["#222F99", "#2E3ECC", "#394EFF", "#6171FF", "#8895FF", "#B0B8FF", "#D7DCFF"].reverse();
const customMetricColors = ['#3EAAAF', '#394EFF', '#666666'];
const colorsPie = colors.concat(["#DDDDDD"]);
const countView = count => {
const isMoreThanK = count >= 1000;
@ -14,6 +15,7 @@ const countView = count => {
export default {
customMetricColors,
colors,
colorsPie,
colorsx,
compareColors,
compareColorsx,

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

@ -16,7 +16,8 @@ export default class Table extends React.PureComponent {
rowProps,
rowClass = '',
small = false,
compare = false
compare = false,
maxHeight = 200,
} = this.props;
const { showAll } = this.state;
@ -30,7 +31,7 @@ export default class Table extends React.PureComponent {
<div key={ key } style={ { width } } className={ stl.header }>{ title }</div>)
}
</div>
<div className={ cn(stl.content, "thin-scrollbar") }>
<div className={ cn(stl.content, "thin-scrollbar") } style={{ maxHeight: maxHeight + 'px'}}>
{ rows.take(showAll ? 10 : (small ? 3 : 5)).map(row => (
<div className={ cn(rowClass, stl.row, { [stl.small]: small}) } key={ row.key }>
{ cols.map(({ cellClass = '', className = '', Component, key, toText = t => t, width }) => (
@ -41,21 +42,20 @@ export default class Table extends React.PureComponent {
</div>
)) }
</div>
)) }
{ rows.size > (small ? 3 : 5) && !showAll &&
<div className="w-full flex justify-center mt-3">
)) }
</div>
{ rows.size > (small ? 3 : 5) && !showAll &&
<div className="w-full flex justify-center">
<Button
onClick={ this.onLoadMoreClick }
plain
small
className="text-center"
>
{ 'Load More' }
{ rows.size + ' More' }
</Button>
</div>
}
</div>
</div>
);
}

4
frontend/app/components/Header/Header.js
View file

@ -66,10 +66,6 @@ const Header = (props) => {
}
}, [showTrackingModal])
useEffect(() => {
fetchSiteList()
}, [])
return (
<div className={ cn(styles.header, showTrackingModal ? styles.placeOnTop : '') }>
<NavLink to={ withSiteId(SESSIONS_PATH, siteId) }>

12
frontend/app/components/Header/SiteDropdown.js
View file

@ -11,6 +11,8 @@ import cn from 'classnames';
import NewSiteForm from '../Client/Sites/NewSiteForm';
import { clearSearch } from 'Duck/search';
import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
import { fetchList as fetchAlerts } from 'Duck/alerts';
import { fetchWatchdogStatus } from 'Duck/watchdogs';
@withRouter
@connect(state => ({
@ -23,13 +25,15 @@ import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
init,
clearSearch,
fetchIntegrationVariables,
fetchAlerts,
fetchWatchdogStatus,
})
export default class SiteDropdown extends React.PureComponent {
state = { showProductModal: false }
componentDidMount() {
this.props.fetchIntegrationVariables();
}
// componentDidMount() {
// this.props.fetchIntegrationVariables();
// }
closeModal = (e, newSite) => {
this.setState({ showProductModal: false })
@ -44,6 +48,8 @@ export default class SiteDropdown extends React.PureComponent {
this.props.setSiteId(siteId);
this.props.clearSearch();
this.props.fetchIntegrationVariables();
this.props.fetchAlerts();
this.props.fetchWatchdogStatus();
}
render() {

8
frontend/app/components/Session/Session.js
View file

@ -16,11 +16,11 @@ const SESSIONS_ROUTE = sessionsRoute();
function Session({
sessionId,
loading,
hasErrors,
hasErrors,
session,
fetchSession,
fetchSlackList,
hasSessionsPath
fetchSlackList,
hasSessionsPath
}) {
usePageTitle("OpenReplay Session Player");
useEffect(() => {
@ -51,7 +51,7 @@ function Session({
<Loader className="flex-1" loading={ loading || sessionId !== session.sessionId }>
{ session.isIOS
? <IOSPlayer session={session} />
: (session.live && !hasSessionsPath ? <LivePlayer /> : <WebPlayer />)
: <WebPlayer />
}
</Loader>
</NoContent>

16
frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js
View file

@ -10,13 +10,15 @@ export default connect(state => ({
metadata: state.getIn([ 'sessions', 'current', 'metadata' ]),
}))(function Metadata ({ metadata }) {
const [ visible, setVisible ] = useState(false);
const toggle = useCallback(() => metadata.length > 0 && setVisible(v => !v), []);
const metaLenth = Object.keys(metadata).length;
const toggle = useCallback(() => metaLenth > 0 && setVisible(v => !v), []);
return (
<>
<Popup
trigger={
<IconButton
className={cn("w-full", { 'opacity-25' : metadata.length === 0 })}
className={cn("w-full", { 'opacity-25' : metaLenth === 0 })}
onClick={ toggle }
icon="id-card"
plain
@ -33,17 +35,17 @@ export default connect(state => ({
</div>
}
on="click"
disabled={metadata.length > 0}
disabled={metaLenth > 0}
size="tiny"
inverted
position="top center"
/>
{ visible &&
<div className={ stl.modal } >
<NoContent show={ metadata.size === 0 } size="small">
{ metadata.map((i) => {
const key = Object.keys(i)[0]
const value = i[key]
<NoContent show={ metaLenth === 0 } size="small">
{ Object.keys(metadata).map((key) => {
// const key = Object.keys(i)[0]
const value = metadata[key]
return <MetadataItem item={ { value, key } } key={ key } />
}) }
</NoContent>

2
frontend/app/components/Session_/EventsBlock/Metadata/MetadataItem.js
View file

@ -49,7 +49,7 @@ export default class extends React.PureComponent {
content={ open && <SessionList similarSessions={ similarSessions } loading={ loading } /> }
onClose={ open ? this.switchOpen : () => null }
/>
<div className={ cn("flex justify-between items-center p-3", stl.field) } >
<div className={ cn("flex justify-between items-center p-3 capitalize", stl.field) } >
<div>
<div className={ stl.key }>{ item.key }</div>
<TextEllipsis

2
frontend/app/components/Session_/Performance/Performance.js
View file

@ -115,7 +115,7 @@ const HeapTooltip = ({ active, payload}) => {
}
const NodesCountTooltip = ({ active, payload} ) => {
if (!active || payload.length === 0) return null;
if (!active || !payload || payload.length === 0) return null;
return (
<div className={ stl.tooltipWrapper } >
<p>

122
frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Form, SegmentSelection, Button, IconButton } from 'UI';
import { Form, Button, IconButton } from 'UI';
import FilterSeries from '../FilterSeries';
import { connect } from 'react-redux';
import { edit as editMetric, save, addSeries, removeSeries, remove } from 'Duck/customMetrics';
@ -7,7 +7,8 @@ import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMe
import { confirm } from 'UI/Confirmation';
import { toast } from 'react-toastify';
import cn from 'classnames';
import DropdownPlain from '../../DropdownPlain';
import { metricTypes, metricOf, issueOptions } from 'App/constants/filterOptions';
interface Props {
metric: any;
editMetric: (metric, shouldFetch?) => void;
@ -21,6 +22,13 @@ interface Props {
function CustomMetricForm(props: Props) {
const { metric, loading } = props;
// const metricOfOptions = metricOf.filter(i => i.key === metric.metricType);
const timeseriesOptions = metricOf.filter(i => i.key === 'timeseries');
const tableOptions = metricOf.filter(i => i.key === 'table');
const isTable = metric.metricType === 'table';
const isTimeSeries = metric.metricType === 'timeseries';
const _issueOptions = [{ text: 'All', value: '' }].concat(issueOptions);
const addSeries = () => {
props.addSeries();
@ -30,12 +38,33 @@ function CustomMetricForm(props: Props) {
props.removeSeries(index);
}
const write = ({ target: { value, name } }) => props.editMetric({ ...metric, [ name ]: value }, false);
const write = ({ target: { value, name } }) => props.editMetric({ [ name ]: value }, false);
const writeOption = (e, { value, name }) => {
props.editMetric({ [ name ]: value }, false);
const changeConditionTab = (e, { name, value }) => {
props.editMetric({[ 'viewType' ]: value });
if (name === 'metricValue') {
props.editMetric({ metricValue: [value] }, false);
}
if (name === 'metricOf') {
if (value === 'ISSUES') {
props.editMetric({ metricValue: [''] }, false);
}
}
if (name === 'metricType') {
if (value === 'timeseries') {
props.editMetric({ metricOf: timeseriesOptions[0].value, viewType: 'lineChart' }, false);
} else if (value === 'table') {
props.editMetric({ metricOf: tableOptions[0].value, viewType: 'table' }, false);
}
}
};
// const changeConditionTab = (e, { name, value }) => {
// props.editMetric({[ 'viewType' ]: value });
// };
const save = () => {
props.save(metric).then(() => {
toast.success(metric.exists() ? 'Updated succesfully.' : 'Created succesfully.');
@ -79,30 +108,71 @@ function CustomMetricForm(props: Props) {
<div className="form-group">
<label className="font-medium">Metric Type</label>
<div className="flex items-center">
<span className="bg-white p-1 px-2 border rounded" style={{ height: '30px'}}>Timeseries</span>
<span className="mx-2 color-gray-medium">of</span>
<div>
<SegmentSelection
primary
name="viewType"
small={true}
// className="my-3"
onSelect={ changeConditionTab }
value={{ value: metric.viewType }}
list={ [
{ name: 'Session Count', value: 'lineChart' },
{ name: 'Session Percentage', value: 'progress', disabled: true },
]}
/>
</div>
<DropdownPlain
name="metricType"
options={metricTypes}
value={ metric.metricType }
onChange={ writeOption }
/>
{metric.metricType === 'timeseries' && (
<>
<span className="mx-3">of</span>
<DropdownPlain
name="metricOf"
options={timeseriesOptions}
value={ metric.metricOf }
onChange={ writeOption }
/>
</>
)}
{metric.metricType === 'table' && (
<>
<span className="mx-3">of</span>
<DropdownPlain
name="metricOf"
options={tableOptions}
value={ metric.metricOf }
onChange={ writeOption }
/>
</>
)}
{metric.metricOf === 'ISSUES' && (
<>
<span className="mx-3">issue type</span>
<DropdownPlain
name="metricValue"
options={_issueOptions}
value={ metric.metricValue[0] }
onChange={ writeOption }
/>
</>
)}
{metric.metricType === 'table' && (
<>
<span className="mx-3">showing</span>
<DropdownPlain
name="metricFormat"
options={[
{ value: 'sessionCount', text: 'Session Count' },
]}
value={ metric.metricFormat }
onChange={ writeOption }
/>
</>
)}
</div>
</div>
<div className="form-group">
<label className="font-medium">Chart Series</label>
{metric.series && metric.series.size > 0 && metric.series.map((series: any, index: number) => (
{metric.series && metric.series.size > 0 && metric.series.take(isTable ? 1 : metric.series.size).map((series: any, index: number) => (
<div className="mb-2">
<FilterSeries
hideHeader={ isTable }
seriesIndex={index}
series={series}
onRemoveSeries={() => removeSeries(index)}
@ -112,9 +182,11 @@ function CustomMetricForm(props: Props) {
))}
</div>
<div className={cn("flex justify-end -my-4", {'disabled' : metric.series.size > 2})}>
<IconButton hover type="button" onClick={addSeries} primaryText label="SERIES" icon="plus" />
</div>
{ isTimeSeries && (
<div className={cn("flex justify-end -my-4", {'disabled' : metric.series.size > 2})}>
<IconButton hover type="button" onClick={addSeries} primaryText label="SERIES" icon="plus" />
</div>
)}
<div className="my-8" />

5
frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { IconButton } from 'UI';
import { connect } from 'react-redux';
import { edit, init } from 'Duck/customMetrics';
@ -7,6 +7,9 @@ interface Props {
init: (instance?, setDefault?) => void;
}
function CustomMetrics(props: Props) {
useEffect(() => { // TODO remove this block
props.init()
}, [])
return (
<div className="self-start">
<IconButton plain outline icon="plus" label="CREATE METRIC" onClick={() => props.init()} />

10
frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
View file

@ -25,10 +25,12 @@ interface Props {
editSeriesFilterFilter: typeof editSeriesFilterFilter;
editSeriesFilter: typeof editSeriesFilter;
removeSeriesFilterFilter: typeof removeSeriesFilterFilter;
hideHeader?: boolean;
emptyMessage?: any;
}
function FilterSeries(props: Props) {
const { canDelete } = props;
const { canDelete, hideHeader = false, emptyMessage = 'Add user event or filter to define the series by clicking Add Step.' } = props;
const [expanded, setExpanded] = useState(true)
const { series, seriesIndex } = props;
@ -51,7 +53,7 @@ function FilterSeries(props: Props) {
return (
<div className="border rounded bg-white">
<div className="border-b px-5 h-12 flex items-center relative">
<div className={cn("border-b px-5 h-12 flex items-center relative", { 'hidden': hideHeader })}>
<div className="mr-auto">
<SeriesName name={series.name} onUpdate={(name) => props.updateSeries(seriesIndex, { name }) } />
</div>
@ -78,10 +80,10 @@ function FilterSeries(props: Props) {
onChangeEventsOrder={onChangeEventsOrder}
/>
): (
<div className="color-gray-medium">Add user event or filter to define the series by clicking Add Step.</div>
<div className="color-gray-medium">{emptyMessage}</div>
)}
</div>
<div className="px-5 border-t h-12 flex items-center">
<div className="px-6 border-t h-12 flex items-center -mx-4">
<FilterSelection
filter={undefined}
onFilterClick={onAddFilter}

3
frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
View file

@ -5,7 +5,6 @@ import stl from './SessionListModal.css';
import { connect } from 'react-redux';
import { fetchSessionList, setActiveWidget } from 'Duck/customMetrics';
import { DateTime } from 'luxon';
interface Props {
loading: boolean;
list: any;
@ -57,9 +56,9 @@ function SessionListModal(props: Props) {
const writeOption = (e, { name, value }) => setActiveSeries(value);
const filteredSessions = getListSessionsBySeries(activeSeries);
const startTime = DateTime.fromMillis(activeWidget.startTimestamp).toFormat('LLL dd, yyyy HH:mm a');
const endTime = DateTime.fromMillis(activeWidget.endTimestamp).toFormat('LLL dd, yyyy HH:mm a');
return (
<SlideModal
title={ activeWidget && (

2
frontend/app/components/shared/DropdownPlain/DropdownPlain.css
View file

@ -4,6 +4,8 @@
border-radius: 3px;
color: $gray-darkest;
font-weight: 500;
background-color: white;
border: solid thin $gray-light;
&:hover {
background-color: $gray-light;
}

9
frontend/app/components/shared/DropdownPlain/DropdownPlain.tsx
View file

@ -3,25 +3,30 @@ import stl from './DropdownPlain.css';
import { Dropdown, Icon } from 'UI';
interface Props {
name?: string;
options: any[];
onChange: (e, { name, value }) => void;
icon?: string;
direction?: string;
value: any;
multiple?: boolean;
}
export default function DropdownPlain(props: Props) {
const { value, options, icon = "chevron-down", direction = "left" } = props;
const { name = "sort", value, options, icon = "chevron-down", direction = "right", multiple = false } = props;
return (
<div>
<Dropdown
value={value}
name="sort"
name={name}
className={ stl.dropdown }
direction={direction}
options={ options }
onChange={ props.onChange }
// floating
scrolling
multiple={ multiple }
selectOnBlur={ false }
// defaultValue={ value }
icon={ icon ? <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> : null }
/>

26
frontend/app/components/shared/FilterDropdown/FilterDropdown.js
View file

@ -100,18 +100,20 @@ const FilterDropdown = props => {
</div>
)}
{showDropdown && (
<div className="absolute mt-2 bg-white rounded border p-3 z-20" id="filter-dropdown" style={{ width: '200px'}}>
<div className="font-medium mb-2 tracking-widest color-gray-dark">SELECT FILTER</div>
{filterKeys.filter(f => !filterKeyMaps.includes(f.key)).map(f => (
<div
key={f.key}
onClick={() => onFilterKeySelect(f.key)}
className={cn(stl.filterItem, 'py-3 -mx-3 px-3 flex items-center cursor-pointer')}
>
<Icon name={f.icon} size="16" />
<span className="ml-3 capitalize">{f.name}</span>
</div>
))}
<div className="absolute mt-2 bg-white rounded border z-20" id="filter-dropdown" style={{ width: '200px'}}>
<div className="font-medium mb-2 tracking-widest color-gray-dark p-3">SELECT FILTER</div>
<div className="px-3" style={{ maxHeight: '200px', overflowY: 'auto'}} >
{filterKeys.filter(f => !filterKeyMaps.includes(f.key)).map(f => (
<div
key={f.key}
onClick={() => onFilterKeySelect(f.key)}
className={cn(stl.filterItem, 'py-3 -mx-3 px-3 flex items-center cursor-pointer')}
>
<Icon name={f.icon} size="16" />
<span className="ml-3 capitalize">{f.name}</span>
</div>
))}
</div>
</div>
)}
{filterKey && (

20
frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
View file

@ -47,15 +47,17 @@ function FilterAutoComplete(props: Props) {
const requestValues = (q) => {
setLoading(true);
return new APIClient()[method?.toLowerCase()](endpoint, { ...params, q })
.then(response => response.json())
.then(({ errors, data }) => {
if (errors) {
// this.setError();
} else {
setOptions(data);
}
}).finally(() => setLoading(false));
return new APIClient()[method?.toLocaleLowerCase()](endpoint, { ...params, q })
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error(response.statusText);
})
.then(({ data }) => {
setOptions(data);
})
.finally(() => setLoading(false));
}
const debouncedRequestValues = React.useCallback(debounce(requestValues, 300), []);

55
frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
View file

@ -4,6 +4,8 @@ import FilterSelection from '../FilterSelection';
import FilterValue from '../FilterValue';
import { Icon } from 'UI';
import FilterSource from '../FilterSource';
import { FilterType } from 'App/types/filter/filterType';
import SubFilterItem from '../SubFilterItem';
interface Props {
filterIndex: number;
@ -15,9 +17,14 @@ interface Props {
function FilterItem(props: Props) {
const { isFilter = false, filterIndex, filter } = props;
const canShowValues = !(filter.operator === "isAny" || filter.operator === "onAny" || filter.operator === "isUndefined");
const isSubFilter = filter.type === FilterType.SUB_FILTERS;
const replaceFilter = (filter) => {
props.onUpdate({ ...filter, value: [""]});
props.onUpdate({
...filter,
value: [""],
subFilters: filter.subFilters ? filter.subFilters.map(i => ({ ...i, value: [""] })) : []
});
};
const onOperatorChange = (e, { name, value }) => {
@ -28,6 +35,19 @@ function FilterItem(props: Props) {
props.onUpdate({ ...filter, sourceOperator: value })
}
const onUpdateSubFilter = (subFilter, subFilterIndex) => {
props.onUpdate({
...filter,
subFilters: filter.subFilters.map((i, index) => {
if (index === subFilterIndex) {
return subFilter;
}
return i;
})
});
};
return (
<div className="flex items-center hover:bg-active-blue -mx-5 px-5 py-2">
<div className="flex items-start w-full">
@ -48,14 +68,31 @@ function FilterItem(props: Props) {
)}
{/* Filter values */}
<FilterOperator
options={filter.operatorOptions}
onChange={onOperatorChange}
className="mx-2 flex-shrink-0"
value={filter.operator}
/>
{ canShowValues && (<FilterValue filter={filter} onUpdate={props.onUpdate} />) }
{ !isSubFilter && (
<>
<FilterOperator
options={filter.operatorOptions}
onChange={onOperatorChange}
className="mx-2 flex-shrink-0"
value={filter.operator}
/>
{ canShowValues && (<FilterValue filter={filter} onUpdate={props.onUpdate} />) }
</>
)}
{/* SubFilters */}
{isSubFilter && (
<div className="grid grid-col ml-3 w-full">
{filter.subFilters.map((subFilter, subFilterIndex) => (
<SubFilterItem
filterIndex={subFilterIndex}
filter={subFilter}
onUpdate={(f) => onUpdateSubFilter(f, subFilterIndex)}
onRemoveFilter={props.onRemoveFilter}
/>
))}
</div>
)}
</div>
<div className="flex flex-shrink-0 self-start mt-1 ml-auto px-2">
<div

2
frontend/app/components/shared/Filters/FilterList/FilterList.tsx
View file

@ -32,7 +32,7 @@ function FilterList(props: Props) {
<div className="mr-2 color-gray-medium text-sm" style={{ textDecoration: 'underline dotted'}}>
<Popup
trigger={<div>Events Order</div>}
content={ `Events Order` }
content={ `Select the operator to be applied between events in your search.` }
size="tiny"
inverted
position="top center"

34
frontend/app/components/shared/Filters/SubFilterItem/SubFilterItem.tsx Normal file
View file

@ -0,0 +1,34 @@
import { filter } from 'App/components/BugFinder/ManageFilters/savedFilterList.css'
import React from 'react'
import FilterOperator from '../FilterOperator';
import FilterValue from '../FilterValue';
interface Props {
filterIndex: number;
filter: any; // event/filter
onUpdate: (filter) => void;
onRemoveFilter: () => void;
isFilter?: boolean;
}
export default function SubFilterItem(props: Props) {
const { isFilter = false, filterIndex, filter } = props;
const canShowValues = !(filter.operator === "isAny" || filter.operator === "onAny" || filter.operator === "isUndefined");
const onOperatorChange = (e, { name, value }) => {
props.onUpdate({ ...filter, operator: value })
}
return (
<div className="flex items-center hover:bg-active-blue pb-4">
<div className="flex-shrink-0 py-1">{filter.label}</div>
<FilterOperator
options={filter.operatorOptions}
onChange={onOperatorChange}
className="mx-2 flex-shrink-0"
value={filter.operator}
/>
{ canShowValues && (<FilterValue filter={filter} onUpdate={props.onUpdate} />) }
</div>
)
}

1
frontend/app/components/shared/Filters/SubFilterItem/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './SubFilterItem';

6
frontend/app/components/shared/FunnelSearch/FunnelSearch.tsx
View file

@ -18,12 +18,6 @@ function FunnelSearch(props: Props) {
const onAddFilter = (filter) => {
props.addFilter(filter);
// filter.value = [""]
// const newFilters = appliedFilter.filters.concat(filter);
// props.edit({
// ...appliedFilter.filter,
// filters: newFilters,
// });
}
const onUpdateFilter = (filterIndex, filter) => {

6
frontend/app/components/shared/SessionSearch/SessionSearch.tsx
View file

@ -19,12 +19,6 @@ function SessionSearch(props: Props) {
const onAddFilter = (filter) => {
props.addFilter(filter);
// filter.value = [""]
// const newFilters = appliedFilter.filters.concat(filter);
// props.edit({
// ...appliedFilter.filter,
// filters: newFilters,
// });
}
const onUpdateFilter = (filterIndex, filter) => {

21
frontend/app/components/shared/TrackerUpdateMessage/TrackerUpdateMessage.js
View file

@ -1,18 +1,25 @@
import React from 'react'
import React, { useEffect } from 'react'
import { Icon } from 'UI'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom';
import { onboarding as onboardingRoute } from 'App/routes'
import { withSiteId } from 'App/routes';
import { isGreaterOrEqualVersion } from 'App/utils'
const TrackerUpdateMessage= (props) => {
// const { site } = props;
const { site, sites, match: { params: { siteId } } } = props;
const [needUpdate, setNeedUpdate] = React.useState(false)
const { sites, match: { params: { siteId } } } = props;
const activeSite = sites.find(s => s.id == siteId);
const hasSessions = !!activeSite && !activeSite.recorded;
const appVersionInt = parseInt(window.ENV.TRACKER_VERSION.split(".").join(""))
const trackerVersionInt = site.trackerVersion ? parseInt(site.trackerVersion.split(".").join("")) : 0
const needUpdate = !hasSessions && appVersionInt > trackerVersionInt;
useEffect(() => {
if (!activeSite || !activeSite.trackerVersion) return;
const isLatest = isGreaterOrEqualVersion(activeSite.trackerVersion, window.ENV.TRACKER_VERSION);
if (!isLatest && activeSite.recorded) {
setNeedUpdate(true)
}
}, [activeSite])
return needUpdate ? (
<>
{(

9
frontend/app/components/ui/SegmentSelection/SegmentSelection.js
View file

@ -9,13 +9,14 @@ class SegmentSelection extends React.Component {
}
render() {
const { className, list, small = false, extraSmall = false, primary = false, size = "normal" } = this.props;
const { className, list, small = false, extraSmall = false, primary = false, size = "normal", icons = false } = this.props;
return (
<div className={ cn(styles.wrapper, {
[styles.primary] : primary,
[styles.small] : size === 'small' || small,
[styles.extraSmall] : extraSmall,
[styles.extraSmall] : size === 'extraSmall' || extraSmall,
[styles.icons] : icons === true,
}, className) }
>
{ list.map(item => (
@ -27,8 +28,8 @@ class SegmentSelection extends React.Component {
data-active={ this.props.value && this.props.value.value === item.value }
onClick={ () => !item.disabled && this.setActiveItem(item) }
>
{ item.icon && <Icon name={ item.icon } size="20" marginRight="10" /> }
<div>{ item.name }</div>
{ item.icon && <Icon name={ item.icon } size={(size === "extraSmall" || icons) ? 14 : 20} marginRight={ item.name ? "6" : "" } /> }
<div className="leading-none">{ item.name }</div>
</div>
}
disabled={!item.disabled}

16
frontend/app/components/ui/SegmentSelection/segmentSelection.css
View file

@ -12,13 +12,13 @@
padding: 10px;
flex: 1;
text-align: center;
border-right: solid thin $teal;
cursor: pointer;
background-color: $gray-lightest;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
border-right: solid thin $gray-light;
& span svg {
fill: $gray-medium;
@ -53,9 +53,16 @@
& .item {
color: $teal;
background-color: white;
border-right: solid thin $teal;
& svg {
fill: $teal !important;
}
&[data-active=true] {
background-color: $teal;
color: white;
& svg {
fill: white !important;
}
}
}
}
@ -65,6 +72,11 @@
}
.extraSmall .item {
padding: 0 4px;
padding: 2px 4px !important;
font-size: 12px;
}
.icons .item {
padding: 4px !important;
font-size: 12px;
}

22
frontend/app/components/ui/SlideModal/SlideModal.js
View file

@ -1,12 +1,24 @@
import styles from './slideModal.css';
import cn from 'classnames';
export default class SlideModal extends React.PureComponent {
componentDidMount() {
document.addEventListener('keydown', this.keyPressHandler);
}
// componentDidMount() {
// document.addEventListener('keydown', this.keyPressHandler);
// }
componentWillUnmount() {
document.removeEventListener('keydown', this.keyPressHandler);
// componentWillUnmount() {
// document.removeEventListener('keydown', this.keyPressHandler);
// }
componentDidUpdate(prevProps) {
if (prevProps.isDisplayed !== this.props.isDisplayed) {
if (this.props.isDisplayed) {
document.addEventListener('keydown', this.keyPressHandler);
document.body.classList.add('no-scroll');
} else {
document.removeEventListener('keydown', this.keyPressHandler);
document.body.classList.remove('no-scroll');
}
}
}
keyPressHandler = (e) => {

33
frontend/app/constants/filterOptions.js
View file

@ -54,6 +54,36 @@ export const customOperators = [
{ key: '>=', text: '>=', value: '>=' },
]
export const metricTypes = [
{ text: 'Timeseries', value: 'timeseries' },
{ text: 'Table', value: 'table' },
];
export const metricOf = [
{ text: 'Session Count', value: 'sessionCount', key: 'timeseries' },
{ text: 'Users', value: 'USERID', key: 'table' },
{ text: 'Issues', value: 'ISSUES', key: 'table' },
{ text: 'Browser', value: 'USERBROWSER', key: 'table' },
{ text: 'Device', value: 'USERDEVICE', key: 'table' },
{ text: 'Country', value: 'USERCOUNTRY', key: 'table' },
{ text: 'URL', value: 'VISITED_URL', key: 'table' },
]
export const issueOptions = [
{ text: 'Click Rage', value: 'click_rage' },
{ text: 'Dead Click', value: 'dead_click' },
{ text: 'Excessive Scrolling', value: 'excessive_scrolling' },
{ text: 'Bad Request', value: 'bad_request' },
{ text: 'Missing Resource', value: 'missing_resource' },
{ text: 'Memory', value: 'memory' },
{ text: 'CPU', value: 'cpu' },
{ text: 'Slow Resource', value: 'slow_resource' },
{ text: 'Slow Page Load', value: 'slow_page_load' },
{ text: 'Crash', value: 'crash' },
{ text: 'Custom', value: 'custom' },
{ text: 'JS Exception', value: 'js_exception' },
]
export default {
options,
baseOperators,
@ -62,4 +92,7 @@ export default {
booleanOperators,
customOperators,
getOperatorsByKeys,
metricTypes,
metricOf,
issueOptions,
}

14
frontend/app/duck/filters.js
View file

@ -1,4 +1,4 @@
import { fromJS, List, Map, Set } from 'immutable';
import { List, Map, Set } from 'immutable';
import { errors as errorsRoute, isRoute } from "App/routes";
import Filter from 'Types/filter';
import SavedFilter from 'Types/filter/savedFilter';
@ -8,15 +8,6 @@ import withRequestState, { RequestTypes } from './requestStateCreator';
import { fetchList as fetchSessionList } from './sessions';
import { fetchList as fetchErrorsList } from './errors';
import { fetchListType, fetchType, saveType, editType, initType, removeType } from './funcTools/crud/types';
import logger from 'App/logger';
import { newFiltersList } from 'Types/filter'
import NewFilter, { filtersMap } from 'Types/filter/newFilter';
// for (var i = 0; i < newFiltersList.length; i++) {
// filterOptions[newFiltersList[i].category] = newFiltersList.filter(filter => filter.category === newFiltersList[i].category)
// }
const ERRORS_ROUTE = errorsRoute();
@ -44,11 +35,8 @@ const ADD_ATTRIBUTE = 'filters/ADD_ATTRIBUTE';
const EDIT_ATTRIBUTE = 'filters/EDIT_ATTRIBUTE';
const REMOVE_ATTRIBUTE = 'filters/REMOVE_ATTRIBUTE';
const SET_ACTIVE_FLOW = 'filters/SET_ACTIVE_FLOW';
const UPDATE_VALUE = 'filters/UPDATE_VALUE';
const REFRESH_FILTER_OPTIONS = 'filters/REFRESH_FILTER_OPTIONS';
const initialState = Map({
instance: Filter(),
activeFilter: null,

6
frontend/app/duck/search.js
View file

@ -161,7 +161,7 @@ export const applySavedSearch = (filter) => (dispatch, getState) => {
export const fetchSessions = (filter) => (dispatch, getState) => {
const _filter = filter ? filter : getState().getIn([ 'search', 'instance']);
return dispatch(applyFilter(_filter));
// return dispatch(applyFilter(_filter)); // TODO uncomment this line
};
export const updateSeries = (index, series) => ({
@ -233,6 +233,10 @@ export const hasFilterApplied = (filters, filter) => {
export const addFilter = (filter) => (dispatch, getState) => {
filter.value = checkFilterValue(filter.value);
filter.subFilters = filter.subFilters ? filter.subFilters.map(subFilter => ({
...subFilter,
value: checkFilterValue(subFilter.value),
})) : null;
const instance = getState().getIn([ 'search', 'instance']);
if (hasFilterApplied(instance.filters, filter)) {

2
frontend/app/player/MessageDistributor/managers/AssistManager.ts
View file

@ -103,7 +103,7 @@ export default class AssistManager {
if (document.hidden && getState().calling === CallingState.NoCall) {
this.socket?.close()
}
}, 15000)
}, 30000)
} else {
inactiveTimeout && clearTimeout(inactiveTimeout)
this.socket?.open()

6
frontend/app/styles/main.css
View file

@ -141,4 +141,10 @@
margin: 25px 0;
background-color: $gray-light;
}
.no-scroll {
height: 100vh;
overflow-y: hidden;
padding-right: 15px;
}

3
frontend/app/svg/icons/graph-up-arrow.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 402 B

3
frontend/app/svg/icons/hash.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hash" viewBox="0 0 16 16">
<path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 855 B

3
frontend/app/svg/icons/table.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 371 B

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

@ -103,5 +103,11 @@ export default Record({
endTimestamp: this.end,
};
},
toTimestampstwo() {
return {
startTimestamp: this.start / 1000,
endTimestamp: this.end / 1000,
};
},
}
});

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

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

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

@ -15,6 +15,7 @@ export enum FilterType {
NUMBER = "NUMBER",
DURATION = "DURATION",
MULTIPLE = "MULTIPLE",
SUB_FILTERS = "SUB_FILTERS",
COUNTRY = "COUNTRY",
DROPDOWN = "DROPDOWN",
MULTIPLE_DROPDOWN = "MULTIPLE_DROPDOWN",
@ -61,4 +62,8 @@ export enum FilterKey {
AVG_CPU_LOAD = "AVG_CPU_LOAD",
AVG_MEMORY_USAGE = "AVG_MEMORY_USAGE",
FETCH_FAILED = "FETCH_FAILED",
FETCH = "FETCH",
FETCH_URL = "FETCH_URL",
FETCH_STATUS = "FETCH_STATUS",
FETCH_METHOD = "FETCH_METHOD",
}

20
frontend/app/types/filter/index.js
View file

@ -236,22 +236,4 @@ export const operatorOptions = (filter) => {
case KEYS.CLICK_RAGE:
return [{ key: 'onAnything', text: 'on anything', value: 'true' }]
}
}
const NewFilterType = (key, category, label, icon, isEvent = false) => {
return {
key: key,
category: category,
label: label,
icon: icon,
isEvent: isEvent,
operators: operatorOptions({ key }),
value: [""]
}
}
export const newFiltersList = [
NewFilterType(TYPES.CLICK, 'Gear', 'Click', 'filters/click', true),
NewFilterType(TYPES.CLICK, 'Gear', 'Input', 'filters/click', true),
NewFilterType(TYPES.CONSOLE, 'Other', 'Console', 'filters/click', true),
];
}

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

@ -6,21 +6,6 @@ import { capitalize } from 'App/utils';
const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
const containsFilters = [{ key: 'contains', text: 'contains', value: 'contains' }]
const ISSUE_OPTIONS = [
{ text: 'Click Rage', value: 'click_rage' },
{ text: 'Dead Click', value: 'dead_click' },
{ text: 'Excessive Scrolling', value: 'excessive_scrolling' },
{ text: 'Bad Request', value: 'bad_request' },
{ text: 'Missing Resource', value: 'missing_resource' },
{ text: 'Memory', value: 'memory' },
{ text: 'CPU', value: 'cpu' },
{ text: 'Slow Resource', value: 'slow_resource' },
{ text: 'Slow Page Load', value: 'slow_page_load' },
{ text: 'Crash', value: 'crash' },
{ text: 'Custom', value: 'custom' },
{ text: 'JS Exception', value: 'js_exception' },
]
export const filtersMap = {
// EVENTS
[FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Click', operator: 'on', operatorOptions: filterOptions.targetOperators, icon: 'filters/click', isEvent: true },
@ -48,13 +33,18 @@ export const filtersMap = {
[FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },
// 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_METHOD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with method', 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 },
[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 },
[FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'isAny', operatorOptions: filterOptions.stringOperators, source: [], icon: 'filters/cpu-load', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
[FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'isAny', operatorOptions: filterOptions.stringOperators, source: [], icon: 'filters/memory-load', isEvent: true, hasSource: true, sourceOperator: '=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
[FilterKey.FETCH_FAILED]: { key: FilterKey.FETCH_FAILED, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Failed Request', operator: 'isAny', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch-failed', isEvent: true },
[FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions.baseOperators, icon: 'filters/click', options: ISSUE_OPTIONS },
[FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/click', options: filterOptions.issueOptions },
}
export const liveFiltersMap = {
@ -121,17 +111,19 @@ export default Record({
isEvent: false,
index: 0,
options: [],
subFilters: [],
}, {
keyKey: "_key",
fromJS: ({ value, key, type, ...filter }) => {
// const _filter = filtersMap[key] || filtersMap[type] || {};
const _filter = filtersMap[type];
return {
...filter,
..._filter,
key: _filter.key,
type: _filter.type, // camelCased(filter.type.toLowerCase()),
value: value.length === 0 ? [""] : value, // make sure there an empty value
value: value.length === 0 ? [""] : value,
// subFilters: filter.subFilters.map(this),
}
},
})
@ -142,33 +134,29 @@ export default Record({
* @returns
*/
export const generateFilterOptions = (map) => {
const _options = {};
const filterSection = {};
Object.keys(map).forEach(key => {
const filter = map[key];
if (_options.hasOwnProperty(filter.category)) {
_options[filter.category].push(filter);
if (filterSection.hasOwnProperty(filter.category)) {
filterSection[filter.category].push(filter);
} else {
_options[filter.category] = [filter];
filterSection[filter.category] = [filter];
}
});
return _options;
return filterSection;
}
export const generateLiveFilterOptions = (map) => {
const _options = {};
const filterSection = {};
Object.keys(map).filter(i => map[i].isLive).forEach(key => {
const filter = map[key];
filter.operator = 'contains';
// filter.type = FilterType.STRING;
// filter.type = FilterType.AUTOCOMPLETE_LOCAL;
// filter.options = countryOptions;
// filter.operatorOptions = [{ key: 'contains', text: 'contains', value: 'contains' }]
if (_options.hasOwnProperty(filter.category)) {
_options[filter.category].push(filter);
if (filterSection.hasOwnProperty(filter.category)) {
filterSection[filter.category].push(filter);
} else {
_options[filter.category] = [filter];
filterSection[filter.category] = [filter];
}
});
return _options;
return filterSection;
}

6
frontend/app/utils.js
View file

@ -226,4 +226,10 @@ export const iceServerConfigFromString = (str) => {
return server
}
})
}
export const isGreaterOrEqualVersion = (version, compareTo) => {
const [major, minor, patch] = version.split("-")[0].split('.');
const [majorC, minorC, patchC] = compareTo.split("-")[0].split('.');
return (major > majorC) || (major === majorC && minor > minorC) || (major === majorC && minor === minorC && patch >= patchC);
}

2
frontend/env.js
View file

@ -13,7 +13,7 @@ const oss = {
ORIGIN: () => 'window.location.origin',
API_EDP: () => 'window.location.origin + "/api"',
ASSETS_HOST: () => 'window.location.origin + "/assets"',
VERSION: '1.5.1',
VERSION: '1.5.2',
SOURCEMAP: true,
MINIO_ENDPOINT: process.env.MINIO_ENDPOINT,
MINIO_PORT: process.env.MINIO_PORT,

2
scripts/helmcharts/init.sh
View file

@ -15,7 +15,7 @@ fatal()
exit 1
}
version="v1.5.1"
version="v1.5.2"
usr=`whoami`
# Installing k3s

2
scripts/helmcharts/vars.yaml
View file

@ -1,4 +1,4 @@
fromVersion: "v1.5.1"
fromVersion: "v1.5.2"
# Databases specific variables
postgresql: &postgres
# For generating passwords

2
utilities/servers/websocket.js
View file

@ -162,7 +162,7 @@ module.exports = {
wsRouter,
start: (server) => {
io = _io(server, {
maxHttpBufferSize: 1e6,
maxHttpBufferSize: 5e6,
cors: {
origin: "*",
methods: ["GET", "POST", "PUT"]