93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Icon, Toggler, Button, Input, Loader, Tooltip } from 'UI';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { connect } from 'react-redux';
|
|
import cn from 'classnames';
|
|
|
|
function CaptureRate({ isAdmin = false }) {
|
|
const { settingsStore } = useStore();
|
|
const [changed, setChanged] = useState(false);
|
|
const [sessionSettings] = useState(settingsStore.sessionSettings);
|
|
const [loading] = useState(settingsStore.loadingCaptureRate);
|
|
|
|
const captureRate = sessionSettings.captureRate;
|
|
const setCaptureRate = sessionSettings.changeCaptureRate;
|
|
const captureAll = sessionSettings.captureAll;
|
|
const setCaptureAll = sessionSettings.changeCaptureAll;
|
|
|
|
useEffect(() => {
|
|
settingsStore.fetchCaptureRate();
|
|
}, []);
|
|
|
|
const changeCaptureRate = (input: string) => {
|
|
setChanged(true);
|
|
setCaptureRate(input);
|
|
};
|
|
|
|
const toggleRate = () => {
|
|
const newValue = !captureAll;
|
|
setChanged(true);
|
|
if (newValue === true) {
|
|
const updateObj = {
|
|
rate: '100',
|
|
captureAll: true,
|
|
};
|
|
settingsStore.saveCaptureRate(updateObj);
|
|
} else {
|
|
setCaptureAll(newValue);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Loader loading={loading}>
|
|
<h3 className="text-lg">Capture Rate</h3>
|
|
<div className="my-1">The percentage of session you want to capture</div>
|
|
<Tooltip title="You don't have permission to change." disabled={isAdmin} delay={0}>
|
|
<div className={cn('mt-2 mb-4 mr-1 flex items-center', { disabled: !isAdmin })}>
|
|
<Toggler checked={captureAll} name="test" onChange={toggleRate} />
|
|
<span className="ml-2" style={{ color: captureAll ? '#000000' : '#999' }}>
|
|
100%
|
|
</span>
|
|
</div>
|
|
</Tooltip>
|
|
{!captureAll && (
|
|
<div className="flex items-center">
|
|
<Tooltip title="You don't have permission to change." disabled={isAdmin} delay={0}>
|
|
<div className={cn("relative", { 'disabled' : !isAdmin })}>
|
|
<Input
|
|
type="number"
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => changeCaptureRate(e.target.value)}
|
|
value={captureRate.toString()}
|
|
style={{ height: '38px', width: '100px' }}
|
|
disabled={captureAll}
|
|
min={0}
|
|
max={100}
|
|
/>
|
|
<Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
|
|
</div>
|
|
</Tooltip>
|
|
<span className="mx-3">of the sessions</span>
|
|
<Button
|
|
disabled={!changed}
|
|
variant="outline"
|
|
onClick={() =>
|
|
settingsStore
|
|
.saveCaptureRate({
|
|
rate: captureRate,
|
|
captureAll,
|
|
})
|
|
.finally(() => setChanged(false))
|
|
}
|
|
>
|
|
Update
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</Loader>
|
|
);
|
|
}
|
|
|
|
export default connect((state: any) => ({
|
|
isAdmin: state.getIn(['user', 'account', 'admin']) || state.getIn(['user', 'account', 'superAdmin']),
|
|
}))(observer(CaptureRate));
|