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

change(ui) - no content changes for widget sessions, user sessions and active sessions

Browse source
This commit is contained in:
Shekar Siri 2022-08-12 11:39:36 +02:00
parent 970b346425
commit 289c5c9611
3 changed files with 93 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/app/components/Assist/components/SessionList/SessionList.tsx
View file

@ -4,6 +4,7 @@ import { fetchLiveList } from 'Duck/sessions';
import { Loader, NoContent, Label } from 'UI';
import SessionItem from 'Shared/SessionItem';
import { useModal } from 'App/components/Modal';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
interface Props {
loading: boolean;
@ -24,14 +25,26 @@ function SessionList(props: Props) {
return (
<div style={{ width: '50vw' }}>
<div className="border-r shadow h-screen overflow-y-auto" style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}>
<div
className="border-r shadow h-screen overflow-y-auto"
style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}
>
<div className="p-4">
<div className="text-2xl">
{props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
</div>
</div>
<Loader loading={props.loading}>
<NoContent show={!props.loading && props.list.size === 0} title="No live sessions.">
<NoContent
show={!props.loading && props.list.size === 0}
title={
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No live sessions found.</div>
</div>
}
>
<div className="p-4">
{props.list.map((session: any) => (
<div className="mb-6">

105
frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
View file

@ -1,21 +1,21 @@
import React, { useEffect, useState } from "react";
import { NoContent, Loader, Pagination } from "UI";
import Select from "Shared/Select";
import cn from "classnames";
import { useStore } from "App/mstore";
import SessionItem from "Shared/SessionItem";
import { observer, useObserver } from "mobx-react-lite";
import { DateTime } from "luxon";
import { debounce } from "App/utils";
import useIsMounted from "App/hooks/useIsMounted";
import AnimatedSVG, { ICONS } from "Shared/AnimatedSVG/AnimatedSVG";
import React, { useEffect, useState } from 'react';
import { NoContent, Loader, Pagination } from 'UI';
import Select from 'Shared/Select';
import cn from 'classnames';
import { useStore } from 'App/mstore';
import SessionItem from 'Shared/SessionItem';
import { observer, useObserver } from 'mobx-react-lite';
import { DateTime } from 'luxon';
import { debounce } from 'App/utils';
import useIsMounted from 'App/hooks/useIsMounted';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
interface Props {
className?: string;
}
function WidgetSessions(props: Props) {
const { className = "" } = props;
const [activeSeries, setActiveSeries] = useState("all");
const { className = '' } = props;
const [activeSeries, setActiveSeries] = useState('all');
const [data, setData] = useState<any>([]);
const isMounted = useIsMounted();
const [loading, setLoading] = useState(false);
@ -23,15 +23,9 @@ function WidgetSessions(props: Props) {
const { dashboardStore, metricStore } = useStore();
const filter = useObserver(() => dashboardStore.drillDownFilter);
const widget: any = useObserver(() => metricStore.instance);
const startTime = DateTime.fromMillis(filter.startTimestamp).toFormat(
"LLL dd, yyyy HH:mm"
);
const endTime = DateTime.fromMillis(filter.endTimestamp).toFormat(
"LLL dd, yyyy HH:mm"
);
const [seriesOptions, setSeriesOptions] = useState([
{ label: "All", value: "all" },
]);
const startTime = DateTime.fromMillis(filter.startTimestamp).toFormat('LLL dd, yyyy HH:mm');
const endTime = DateTime.fromMillis(filter.endTimestamp).toFormat('LLL dd, yyyy HH:mm');
const [seriesOptions, setSeriesOptions] = useState([{ label: 'All', value: 'all' }]);
const writeOption = ({ value }: any) => setActiveSeries(value.value);
useEffect(() => {
@ -40,7 +34,7 @@ function WidgetSessions(props: Props) {
label: item.seriesName,
value: item.seriesId,
}));
setSeriesOptions([{ label: "All", value: "all" }, ...seriesOptions]);
setSeriesOptions([{ label: 'All', value: 'all' }, ...seriesOptions]);
}, [data]);
const fetchSessions = (metricId: any, filter: any) => {
@ -55,10 +49,7 @@ function WidgetSessions(props: Props) {
setLoading(false);
});
};
const debounceRequest: any = React.useCallback(
debounce(fetchSessions, 1000),
[]
);
const debounceRequest: any = React.useCallback(debounce(fetchSessions, 1000), []);
const depsString = JSON.stringify(widget.series);
useEffect(() => {
@ -68,13 +59,7 @@ function WidgetSessions(props: Props) {
page: metricStore.sessionsPage,
limit: metricStore.sessionsPageSize,
});
}, [
filter.startTimestamp,
filter.endTimestamp,
filter.filters,
depsString,
metricStore.sessionsPage,
]);
}, [filter.startTimestamp, filter.endTimestamp, filter.filters, depsString, metricStore.sessionsPage]);
return useObserver(() => (
<div className={cn(className)}>
@ -82,28 +67,15 @@ function WidgetSessions(props: Props) {
<div className="flex items-baseline">
<h2 className="text-2xl">Sessions</h2>
<div className="ml-2 color-gray-medium">
between{" "}
<span className="font-medium color-gray-darkest">
{startTime}
</span>{" "}
and{" "}
<span className="font-medium color-gray-darkest">
{endTime}
</span>{" "}
between <span className="font-medium color-gray-darkest">{startTime}</span> and{' '}
<span className="font-medium color-gray-darkest">{endTime}</span>{' '}
</div>
</div>
{widget.metricType !== "table" && (
{widget.metricType !== 'table' && (
<div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">
Filter by Series
</span>
<Select
options={seriesOptions}
defaultValue={"all"}
onChange={writeOption}
plain
/>
<span className="mr-2 color-gray-medium">Filter by Series</span>
<Select options={seriesOptions} defaultValue={'all'} onChange={writeOption} plain />
</div>
)}
</div>
@ -112,14 +84,10 @@ function WidgetSessions(props: Props) {
<Loader loading={loading}>
<NoContent
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG
name={ICONS.NO_RESULTS}
size="170"
/>
<div className="mt-6 text-2xl">
No recordings found
</div>
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No relevant sessions found for the selected time period.</div>
</div>
}
show={filteredSessions.sessions.length === 0}
@ -134,13 +102,8 @@ function WidgetSessions(props: Props) {
<div className="w-full flex items-center justify-center py-6">
<Pagination
page={metricStore.sessionsPage}
totalPages={Math.ceil(
filteredSessions.total /
metricStore.sessionsPageSize
)}
onPageChange={(page: any) =>
metricStore.updateKey("sessionsPage", page)
}
totalPages={Math.ceil(filteredSessions.total / metricStore.sessionsPageSize)}
onPageChange={(page: any) => metricStore.updateKey('sessionsPage', page)}
limit={metricStore.sessionsPageSize}
debounceRequest={500}
/>
@ -155,13 +118,9 @@ function WidgetSessions(props: Props) {
const getListSessionsBySeries = (data: any, seriesId: any) => {
const arr: any = { sessions: [], total: 0 };
data.forEach((element: any) => {
if (seriesId === "all") {
if (seriesId === 'all') {
const sessionIds = arr.sessions.map((i: any) => i.sessionId);
arr.sessions.push(
...element.sessions.filter(
(i: any) => !sessionIds.includes(i.sessionId)
)
);
arr.sessions.push(...element.sessions.filter((i: any) => !sessionIds.includes(i.sessionId)));
arr.total = element.total;
} else {
if (element.seriesId === seriesId) {

87
frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
View file

@ -4,52 +4,57 @@ import { NoContent, Icon, Loader } from 'UI';
import Session from 'Types/session';
import SessionItem from 'Shared/SessionItem';
import stl from './sessionList.module.css';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@connect(state => ({
currentSessionId: state.getIn([ 'sessions', 'current', 'sessionId' ])
@connect((state) => ({
currentSessionId: state.getIn(['sessions', 'current', 'sessionId']),
}))
class SessionList extends React.PureComponent {
render() {
const {
similarSessions,
loading,
currentSessionId,
} = this.props;
render() {
const { similarSessions, loading, currentSessionId } = this.props;
const similarSessionWithoutCurrent = similarSessions.map(({sessions, ...rest}) => {
return {
...rest,
sessions: sessions.map(Session).filter(({ sessionId }) => sessionId !== currentSessionId)
}
}).filter(site => site.sessions.length > 0);
return (
<Loader loading={ loading }>
<NoContent
show={ !loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0 )}
title="No recordings found."
>
<div className={ stl.sessionList }>
{ similarSessionWithoutCurrent.map(site => (
<div className={ stl.siteWrapper } key={ site.host }>
<div className={ stl.siteHeader }>
<Icon name="window" size="14" color="gray-medium" marginRight="10" />
<span>{ site.name }</span>
</div>
<div className="bg-white p-3 rounded border">
{ site.sessions.map(session => (
<div className="border-b last:border-none">
<SessionItem key={ session.sessionId } session={ session } />
const similarSessionWithoutCurrent = similarSessions
.map(({ sessions, ...rest }) => {
return {
...rest,
sessions: sessions.map(Session).filter(({ sessionId }) => sessionId !== currentSessionId),
};
})
.filter((site) => site.sessions.length > 0);
return (
<Loader loading={loading}>
<NoContent
show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)}
title={
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No sessions found.</div>
</div>
}
>
<div className={stl.sessionList}>
{similarSessionWithoutCurrent.map((site) => (
<div className={stl.siteWrapper} key={site.host}>
<div className={stl.siteHeader}>
<Icon name="window" size="14" color="gray-medium" marginRight="10" />
<span>{site.name}</span>
</div>
<div className="bg-white p-3 rounded border">
{site.sessions.map((session) => (
<div className="border-b last:border-none">
<SessionItem key={session.sessionId} session={session} />
</div>
))}
</div>
</div>
))}
</div>
)) }
</div>
</div>
)) }
</div>
</NoContent>
</Loader>
);
}
</NoContent>
</Loader>
);
}
}
export default SessionList;