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

feat(ui) - overview - feature selection

Browse source
This commit is contained in:
Shekar Siri 2022-08-10 15:12:37 +02:00
parent 5387f2a57e
commit f3efb31776
2 changed files with 37 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
View file

@ -9,6 +9,7 @@ import TimelineScale from './components/TimelineScale';
import FeatureSelection from './components/FeatureSelection/FeatureSelection';
import TimelinePointer from './components/TimelinePointer';
import VerticalPointerLine from './components/VerticalPointerLine';
import cn from 'classnames';
interface Props {
resourceList: any[];
@ -23,14 +24,14 @@ function OverviewPanel(props: Props) {
return eventsList.filter((item: any) => item.type === TYPES.CLICKRAGE);
}, [eventsList]);
const scale = 100 / endTime;
const selectedFeatures = React.useMemo(() => ['NETWORK', 'ERRORS', 'EVENTS'], []);
const [selectedFeatures, setSelectedFeatures] = React.useState(['NETWORK', 'ERRORS', 'EVENTS']);
return (
<BottomBlock style={{ height: '260px' }}>
<BottomBlock.Header>
<span className="font-semibold color-gray-medium mr-4">Overview</span>
<div className="flex items-center">
<FeatureSelection list={selectedFeatures} updateList={() => {}} />
<FeatureSelection list={selectedFeatures} updateList={setSelectedFeatures} />
</div>
</BottomBlock.Header>
<BottomBlock.Content>
@ -38,29 +39,17 @@ function OverviewPanel(props: Props) {
<TimelineScale />
<div style={{ width: '100%' }} className="transition relative">
<VerticalPointerLine />
<EventRow
title="Network"
className=""
list={resourceList}
scale={scale}
renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={NETWORK} />}
/>
<div className="bg-white border-t border-b -mx-4 px-4">
<EventRow
title="Click Rage"
className=""
list={clickRageList}
scale={scale}
renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={TYPES.CLICKRAGE} />}
/>
</div>
<EventRow
title="Errors & Issues"
className=""
list={exceptionsList}
scale={scale}
renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={EXCEPTIONS} />}
/>
{selectedFeatures.map((feature: any, index: number) => (
<div className={cn("-mx-4 px-4", { 'bg-white border-t border-b' : index % 2})}>
<EventRow
key={feature}
title={feature}
list={resourceList}
scale={scale}
renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={feature} />}
/>
</div>
))}
</div>
</div>
</BottomBlock.Content>

74
frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
View file

@ -13,59 +13,31 @@ interface Props {
}
function FeatureSelection(props: Props) {
const { list } = props;
const features = [NETWORK, ERRORS, EVENTS, CLICKRAGE, PERFORMANCE];
const disabled = list.length >= 3;
return (
<React.Fragment>
<Checkbox
name="slack"
className="mr-8"
type="checkbox"
checked={list.includes(NETWORK)}
onClick={(e: any) => {
console.log(e);
}}
label={NETWORK}
/>
<Checkbox
name="slack"
className="mr-8"
type="checkbox"
checked={list.includes(ERRORS)}
onClick={(e: any) => {
console.log(e);
}}
label={ERRORS}
/>
<Checkbox
name="slack"
className="mr-8"
type="checkbox"
checked={list.includes(EVENTS)}
onClick={(e: any) => {
console.log(e);
}}
label={EVENTS}
/>
<Checkbox
name="slack"
className="mr-8"
type="checkbox"
checked={list.includes(CLICKRAGE)}
onClick={(e: any) => {
console.log(e);
}}
label={CLICKRAGE}
/>
<Checkbox
name="slack"
className="mr-8"
type="checkbox"
checked={list.includes(PERFORMANCE)}
onClick={(e: any) => {
console.log(e);
}}
label={PERFORMANCE}
/>
{features.map((feature, index) => {
const checked = list.includes(feature);
const _disabled = disabled && !checked;
return (
<Checkbox
key={index}
label={feature}
checked={checked}
className="mx-4"
disabled={_disabled}
onClick={() => {
if (checked) {
props.updateList(list.filter((item: any) => item !== feature));
} else {
props.updateList([...list, feature]);
}
}}
/>
);
})}
</React.Fragment>
);
}