- {text}
-
-);
-
-const Section = ({index, title, description, content}) => (
-
-
-);
-
-function AlertForm(props) {
- const {
- slackChannels,
- msTeamsChannels,
- webhooks,
- onDelete,
- style = {height: "calc('100vh - 40px')"},
- } = props;
- const {alertsStore, metricStore} = useStore()
- const {
- triggerOptions: allTriggerSeries,
- loading,
- } = alertsStore
-
- const triggerOptions = metricStore.instance.series.length > 0 ? allTriggerSeries.filter(s => {
- return metricStore.instance.series.findIndex(ms => ms.seriesId === s.value) !== -1
- }).map(v => {
- const labelArr = v.label.split('.')
- labelArr.shift()
- return {
- ...v,
- label: labelArr.join('.')
- }
- }) : allTriggerSeries
- const instance = alertsStore.instance
- const deleting = loading
-
- const write = ({target: {value, name}}) => alertsStore.edit({[name]: value});
- const writeOption = (e, {name, value}) => alertsStore.edit({[name]: value.value});
- const onChangeCheck = ({target: {checked, name}}) => alertsStore.edit({[name]: checked});
-
- useEffect(() => {
- void alertsStore.fetchTriggerOptions();
- }, []);
-
- const writeQueryOption = (e, {name, value}) => {
- const {query} = instance;
- alertsStore.edit({query: {...query, [name]: value}});
- };
-
- const writeQuery = ({target: {value, name}}) => {
- const {query} = instance;
- alertsStore.edit({query: {...query, [name]: value}});
- };
-
- const metric =
- instance && instance.query.left
- ? triggerOptions.find((i) => i.value === instance.query.left)
- : null;
- const unit = metric ? metric.unit : '';
- const isThreshold = instance.detectionMethod === 'threshold';
-
- return (
-
- );
-};
-
-export default observer(AlertForm);
diff --git a/frontend/app/components/Alerts/AlertForm.tsx b/frontend/app/components/Alerts/AlertForm.tsx
new file mode 100644
index 000000000..fefa89ff0
--- /dev/null
+++ b/frontend/app/components/Alerts/AlertForm.tsx
@@ -0,0 +1,462 @@
+import React, { useEffect } from 'react';
+import { Form, Input, SegmentSelection, Checkbox, Icon } from 'UI';
+import { alertConditions as conditions } from 'App/constants';
+import { validateEmail } from 'App/validate';
+import cn from 'classnames';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import Select from 'Shared/Select';
+import { Button } from 'antd';
+import DropdownChips from './DropdownChips';
+import stl from './alertForm.module.css';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
+
+const thresholdOptions = (t: TFunction) => [
+ { label: t('15 minutes'), value: 15 },
+ { label: t('30 minutes'), value: 30 },
+ { label: t('1 hour'), value: 60 },
+ { label: t('2 hours'), value: 120 },
+ { label: t('4 hours'), value: 240 },
+ { label: t('1 day'), value: 1440 },
+];
+
+const changeOptions = (t: TFunction) => [
+ { label: t('change'), value: 'change' },
+ { label: t('% change'), value: 'percent' },
+];
+
+function Circle({ text }: { text: string }) {
+ return (
+
-
-
-
-
- {title}
- {description &&
- {description}
}
- {content}
-
+ {text}
+
+ );
+}
+
+function Section({
+ index,
+ title,
+ description,
+ content,
+}: {
+ index: string;
+ title: string;
+ description?: string;
+ content: any;
+}) {
+ return (
+
+
+ );
+}
+
+function AlertForm(props) {
+ const { t } = useTranslation();
+ const {
+ slackChannels,
+ msTeamsChannels,
+ webhooks,
+ onDelete,
+ style = { height: "calc('100vh - 40px')" },
+ } = props;
+ const { alertsStore, metricStore } = useStore();
+ const { triggerOptions: allTriggerSeries, loading } = alertsStore;
+
+ const triggerOptions =
+ metricStore.instance.series.length > 0
+ ? allTriggerSeries
+ .filter(
+ (s) =>
+ metricStore.instance.series.findIndex(
+ (ms) => ms.seriesId === s.value,
+ ) !== -1,
+ )
+ .map((v) => {
+ const labelArr = v.label.split('.');
+ labelArr.shift();
+ return {
+ ...v,
+ label: labelArr.join('.'),
+ };
+ })
+ : allTriggerSeries;
+ const { instance } = alertsStore;
+ const deleting = loading;
+
+ const write = ({ target: { value, name } }) =>
+ alertsStore.edit({ [name]: value });
+ const writeOption = (e, { name, value }) =>
+ alertsStore.edit({ [name]: value.value });
+ const onChangeCheck = ({ target: { checked, name } }) =>
+ alertsStore.edit({ [name]: checked });
+
+ useEffect(() => {
+ void alertsStore.fetchTriggerOptions();
+ }, []);
+
+ const writeQueryOption = (e, { name, value }) => {
+ const { query } = instance;
+ alertsStore.edit({ query: { ...query, [name]: value } });
+ };
+
+ const writeQuery = ({ target: { value, name } }) => {
+ const { query } = instance;
+ alertsStore.edit({ query: { ...query, [name]: value } });
+ };
+
+ const metric =
+ instance && instance.query.left
+ ? triggerOptions.find((i) => i.value === instance.query.left)
+ : null;
+ const unit = metric ? metric.unit : '';
+ const isThreshold = instance.detectionMethod === 'threshold';
+
+ return (
+
+ );
+}
+
+export default observer(AlertForm);
diff --git a/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
index 50e0c3cf6..096fa9e42 100644
--- a/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
+++ b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
@@ -1,95 +1,92 @@
-import React, {useEffect, useState} from 'react';
-import {SlideModal} from 'UI';
-import {useStore} from 'App/mstore'
-import {observer} from 'mobx-react-lite'
+import React, { useEffect, useState } from 'react';
+import { SlideModal, confirm } from 'UI';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import { SLACK, TEAMS, WEBHOOK } from 'App/constants/schedule';
import AlertForm from '../AlertForm';
-import {SLACK, TEAMS, WEBHOOK} from 'App/constants/schedule';
-import {confirm} from 'UI';
interface Select {
- label: string;
- value: string | number
+ label: string;
+ value: string | number;
}
-
interface Props {
- showModal?: boolean;
- metricId?: number;
- onClose?: () => void;
+ showModal?: boolean;
+ metricId?: number;
+ onClose?: () => void;
}
function AlertFormModal(props: Props) {
- const {alertsStore, settingsStore} = useStore()
- const {metricId = null, showModal = false} = props;
- const [showForm, setShowForm] = useState(false);
- const webhooks = settingsStore.webhooks
- useEffect(() => {
- settingsStore.fetchWebhooks();
- }, []);
+ const { alertsStore, settingsStore } = useStore();
+ const { metricId = null, showModal = false } = props;
+ const [showForm, setShowForm] = useState(false);
+ const { webhooks } = settingsStore;
+ useEffect(() => {
+ settingsStore.fetchWebhooks();
+ }, []);
+ const slackChannels: Select[] = [];
+ const hooks: Select[] = [];
+ const msTeamsChannels: Select[] = [];
- const slackChannels: Select[] = []
- const hooks: Select[] = []
- const msTeamsChannels: Select[] = []
+ webhooks.forEach((hook) => {
+ const option = { value: hook.webhookId, label: hook.name };
+ if (hook.type === SLACK) {
+ slackChannels.push(option);
+ }
+ if (hook.type === WEBHOOK) {
+ hooks.push(option);
+ }
+ if (hook.type === TEAMS) {
+ msTeamsChannels.push(option);
+ }
+ });
- webhooks.forEach((hook) => {
- const option = {value: hook.webhookId, label: hook.name}
- if (hook.type === SLACK) {
- slackChannels.push(option)
- }
- if (hook.type === WEBHOOK) {
- hooks.push(option)
- }
- if (hook.type === TEAMS) {
- msTeamsChannels.push(option)
- }
- })
+ const saveAlert = (instance) => {
+ const wasUpdating = instance.exists();
+ alertsStore.save(instance).then(() => {
+ if (!wasUpdating) {
+ toggleForm(null, false);
+ }
+ if (props.onClose) {
+ props.onClose();
+ }
+ });
+ };
- const saveAlert = (instance) => {
- const wasUpdating = instance.exists();
- alertsStore.save(instance).then(() => {
- if (!wasUpdating) {
- toggleForm(null, false);
- }
- if (props.onClose) {
- props.onClose();
- }
- });
- };
+ const onDelete = async (instance) => {
+ if (
+ await confirm({
+ header: 'Confirm',
+ confirmButton: 'Yes, delete',
+ confirmation: 'Are you sure you want to permanently delete this alert?',
+ })
+ ) {
+ alertsStore.remove(instance.alertId).then(() => {
+ toggleForm(null, false);
+ });
+ }
+ };
- const onDelete = async (instance) => {
- if (
- await confirm({
- header: 'Confirm',
- confirmButton: 'Yes, delete',
- confirmation: `Are you sure you want to permanently delete this alert?`,
- })
- ) {
- alertsStore.remove(instance.alertId).then(() => {
- toggleForm(null, false);
- });
- }
- };
+ const toggleForm = (instance, state) => {
+ if (instance) {
+ alertsStore.init(instance);
+ }
+ return setShowForm(state || !showForm);
+ };
- const toggleForm = (instance, state) => {
- if (instance) {
- alertsStore.init(instance);
- }
- return setShowForm(state ? state : !showForm);
- };
-
- return (
-
+
+
+
+ {title}
+ {description && (
+
+ {description}
+ )}
+ {content}
+
- {textFiled ? (
-
- ) : (
-
- )}
-
+
- {textFiled ? selected.map(renderBadge) : options.filter((i) => selected.includes(i.value)).map(renderBadge)}
-
-
+ {textFiled ? (
+
+ ) : (
+
+ )}
+
+ );
+}
export default DropdownChips;
diff --git a/frontend/app/components/Alerts/DropdownChips/index.js b/frontend/app/components/Alerts/DropdownChips/index.js
index 9b4fbefff..f69098d3b 100644
--- a/frontend/app/components/Alerts/DropdownChips/index.js
+++ b/frontend/app/components/Alerts/DropdownChips/index.js
@@ -1 +1 @@
-export { default } from './DropdownChips'
\ No newline at end of file
+export { default } from './DropdownChips';
diff --git a/frontend/app/components/Alerts/Notifications/Notifications.tsx b/frontend/app/components/Alerts/Notifications/Notifications.tsx
index 7cf82a20b..b6e2f32c3 100644
--- a/frontend/app/components/Alerts/Notifications/Notifications.tsx
+++ b/frontend/app/components/Alerts/Notifications/Notifications.tsx
@@ -7,7 +7,6 @@ import { observer } from 'mobx-react-lite';
import { Badge, Button, Tooltip } from 'antd';
import { BellOutlined } from '@ant-design/icons';
-
const AUTOREFRESH_INTERVAL = 5 * 60 * 1000;
function Notifications() {
@@ -28,16 +27,17 @@ function Notifications() {
}, []);
return (
-
+ {textFiled
+ ? selected.map(renderBadge)
+ : options.filter((i) => selected.includes(i.value)).map(renderBadge)}
+
+ - Co-Browse + {t('Co-Browse')}
+
+
+
-
- )
+ );
}
-export default ChatControls
+export default ChatControls;
diff --git a/frontend/app/components/Assist/ChatControls/index.js b/frontend/app/components/Assist/ChatControls/index.js
index 0b52c7325..c49a375e8 100644
--- a/frontend/app/components/Assist/ChatControls/index.js
+++ b/frontend/app/components/Assist/ChatControls/index.js
@@ -1 +1 @@
-export { default } from './ChatControls'
\ No newline at end of file
+export { default } from './ChatControls';
diff --git a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
index e9e5b8ea2..b7fe24127 100644
--- a/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
+++ b/frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
@@ -1,25 +1,33 @@
import React, { useState, useEffect } from 'react';
-import VideoContainer from '../components/VideoContainer';
import cn from 'classnames';
import Counter from 'App/components/shared/SessionItem/Counter';
-import stl from './chatWindow.module.css';
-import ChatControls from '../ChatControls/ChatControls';
import Draggable from 'react-draggable';
import type { LocalStream } from 'Player';
import { PlayerContext } from 'App/components/Session/playerContext';
+import ChatControls from '../ChatControls/ChatControls';
+import stl from './chatWindow.module.css';
+import VideoContainer from '../components/VideoContainer';
+import { useTranslation } from 'react-i18next';
export interface Props {
- incomeStream: { stream: MediaStream, isAgent: boolean }[] | null;
+ incomeStream: { stream: MediaStream; isAgent: boolean }[] | null;
localStream: LocalStream | null;
userId: string;
isPrestart?: boolean;
endCall: () => void;
}
-function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }: Props) {
- const { player } = React.useContext(PlayerContext)
+function ChatWindow({
+ userId,
+ incomeStream,
+ localStream,
+ endCall,
+ isPrestart,
+}: Props) {
+ const { t } = useTranslation();
+ const { player } = React.useContext(PlayerContext);
- const toggleVideoLocalStream = player.assistManager.toggleVideoLocalStream;
+ const { toggleVideoLocalStream } = player.assistManager;
const [localVideoEnabled, setLocalVideoEnabled] = useState(false);
const [anyRemoteEnabled, setRemoteEnabled] = useState(false);
@@ -27,22 +35,31 @@ function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }:
const onlyLocalEnabled = localVideoEnabled && !anyRemoteEnabled;
useEffect(() => {
- toggleVideoLocalStream(localVideoEnabled)
- }, [localVideoEnabled])
+ toggleVideoLocalStream(localVideoEnabled);
+ }, [localVideoEnabled]);
return (
-
- }>
- {audioEnabled ? 'Mute' : 'Unmute'}
+
+ }
+ >
+
+ {audioEnabled ? 'Mute' : 'Unmute'}
+
-
- }>
- {videoEnabled ? 'Stop Video' : 'Start Video'}
+
@@ -54,7 +95,7 @@ function ChatControls({ stream, endCall, videoEnabled, setVideoEnabled, isPresta
+
+ }
+ >
+
+ {videoEnabled ? 'Stop Video' : 'Start Video'}
+
- Call with {userId ? userId : 'Anonymous User'}
+ {t('Call with')} {userId || t('Anonymous User')}
- {incomeStream && incomeStream.length > 2 ? ' (+ other agents in the call)' : ''} + {incomeStream && incomeStream.length > 2 + ? t(' (+ other agents in the call)') + : ''}
- - {incomeStream && incomeStream.length > 2 ? ' (+ other agents in the call)' : ''} + {incomeStream && incomeStream.length > 2 + ? t(' (+ other agents in the call)') + : ''}
(
-
))
) : (
-
Error obtaining incoming streams
+
+ {t('Error obtaining incoming streams')}
+
)}
-
+
void;
- onSave: (title: string) => void;
+ show: boolean;
+ title: string;
+ closeHandler?: () => void;
+ onSave: (title: string) => void;
}
function EditRecordingModal(props: Props) {
- const { show, closeHandler, title, onSave } = props;
- const [text, setText] = React.useState(title)
+ const { t } = useTranslation();
+ const { show, closeHandler, title, onSave } = props;
+ const [text, setText] = React.useState(title);
- React.useEffect(() => {
- const handleEsc = (e: any) => e.key === 'Escape' && closeHandler?.()
- document.addEventListener("keydown", handleEsc, false);
- return () => {
- document.removeEventListener("keydown", handleEsc, false);
- }
- }, [])
+ React.useEffect(() => {
+ const handleEsc = (e: any) => e.key === 'Escape' && closeHandler?.();
+ document.addEventListener('keydown', handleEsc, false);
+ return () => {
+ document.removeEventListener('keydown', handleEsc, false);
+ };
+ }, []);
- const write = ({ target: { value, name } }: any) => setText(value)
+ const write = ({ target: { value, name } }: any) => setText(value);
- const save = () => {
- onSave(text)
- }
- return useObserver(() => (
-
-
-
+ const save = () => {
+ onSave(text);
+ };
+ return useObserver(() => (
+
+
+
-
-
-
-
-
-
- ));
+
+
+
+
+
+
+ ));
}
export default EditRecordingModal;
diff --git a/frontend/app/components/Assist/RecordingsList/Recordings.tsx b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
index 394db4aac..074386797 100644
--- a/frontend/app/components/Assist/RecordingsList/Recordings.tsx
+++ b/frontend/app/components/Assist/RecordingsList/Recordings.tsx
@@ -1,19 +1,21 @@
import React from 'react';
import { PageTitle } from 'UI';
import Select from 'Shared/Select';
-import RecordingsSearch from './RecordingsSearch';
-import RecordingsList from './RecordingsList';
import { useStore } from 'App/mstore';
import SelectDateRange from 'Shared/SelectDateRange/SelectDateRange';
import { observer } from 'mobx-react-lite';
+import RecordingsList from './RecordingsList';
+import RecordingsSearch from './RecordingsSearch';
+import { useTranslation } from 'react-i18next';
function Recordings() {
+ const { t } = useTranslation();
const { recordingsStore, userStore } = useStore();
const userId = userStore.account.id;
const recordingsOwner = [
- { value: '0', label: 'All Videos' },
- { value: userId, label: 'My Videos' }
+ { value: '0', label: t('All Videos') },
+ { value: userId, label: t('My Videos') },
];
const onDateChange = (e: any) => {
@@ -21,22 +23,29 @@ function Recordings() {
};
return (
-
{ 'Rename' }
-
-
- {t('Rename')}
+
+
+
-
-
-
-
+
+
+
+
-
- (null);
const [isEnabled, setEnabled] = React.useState(false);
@@ -50,7 +52,7 @@ function VideoContainer({
return (
(null);
- const [period, setPeriod] = React.useState(Period({ rangeName: LAST_24_HOURS }));
+ const [period, setPeriod] = React.useState(
+ Period({ rangeName: LAST_24_HOURS }),
+ );
const [membersSort, setMembersSort] = React.useState('sessionsAssisted');
const [tableSort, setTableSort] = React.useState('timestamp');
- const [topMembers, setTopMembers] = React.useState<{ list: Member[]; total: number }>({
+ const [topMembers, setTopMembers] = React.useState<{
+ list: Member[];
+ total: number;
+ }>({
list: [],
total: 0,
});
@@ -68,7 +76,7 @@ function AssistStats() {
const topMembersPr = assistStatsService.getTopMembers({
startTimestamp: usedP.start,
endTimestamp: usedP.end,
- userId: selectedUser ? selectedUser : undefined,
+ userId: selectedUser || undefined,
sort: membersSort,
order: 'desc',
});
@@ -79,7 +87,7 @@ function AssistStats() {
endTimestamp: usedP.end,
sort: tableSort,
order: 'desc',
- userId: selectedUser ? selectedUser : undefined,
+ userId: selectedUser || undefined,
page: 1,
limit: 10,
});
@@ -88,7 +96,7 @@ function AssistStats() {
topMembers.status === 'fulfilled' && setTopMembers(topMembers.value);
graphs.status === 'fulfilled' && setGraphs(graphs.value);
sessions.status === 'fulfilled' && setSessions(sessions.value);
- }
+ },
);
setIsLoading(false);
};
@@ -148,27 +156,31 @@ function AssistStats() {
order: 'desc',
page: 1,
limit: 10000,
- }).then((sessions) => {
- const data = sessions.list.map((s) => ({
- ...s,
- members: `"${s.teamMembers.map((m) => m.name).join(', ')}"`,
- dateStr: `"${formatTimeOrDate(s.timestamp, undefined, true)}"`,
- assistDuration: `"${durationFromMsFormatted(s.assistDuration)}"`,
- callDuration: `"${durationFromMsFormatted(s.callDuration)}"`,
- controlDuration: `"${durationFromMsFormatted(s.controlDuration)}"`,
- }));
- const headers = [
- { label: 'Date', key: 'dateStr' },
- { label: 'Team Members', key: 'members' },
- { label: 'Live Duration', key: 'assistDuration' },
- { label: 'Call Duration', key: 'callDuration' },
- { label: 'Remote Duration', key: 'controlDuration' },
- { label: 'Session ID', key: 'sessionId' }
- ];
+ })
+ .then((sessions) => {
+ const data = sessions.list.map((s) => ({
+ ...s,
+ members: `"${s.teamMembers.map((m) => m.name).join(', ')}"`,
+ dateStr: `"${formatTimeOrDate(s.timestamp, undefined, true)}"`,
+ assistDuration: `"${durationFromMsFormatted(s.assistDuration)}"`,
+ callDuration: `"${durationFromMsFormatted(s.callDuration)}"`,
+ controlDuration: `"${durationFromMsFormatted(s.controlDuration)}"`,
+ }));
+ const headers = [
+ { label: t('Date'), key: 'dateStr' },
+ { label: t('Team Members'), key: 'members' },
+ { label: t('Live Duration'), key: 'assistDuration' },
+ { label: t('Call Duration'), key: 'callDuration' },
+ { label: t('Remote Duration'), key: 'controlDuration' },
+ { label: t('Session ID'), key: 'sessionId' },
+ ];
- exportCSVFile(headers, data, `Assist_Stats_${new Date().toLocaleDateString()}`)
-
- })
+ exportCSVFile(
+ headers,
+ data,
+ `Assist_Stats_${new Date().toLocaleDateString()}`,
+ );
+ });
};
const onUserSelect = (id: any) => {
@@ -191,83 +203,109 @@ function AssistStats() {
order: 'desc',
page: 1,
limit: 10,
- })
+ });
Promise.allSettled([topMembersPr, graphsPr, sessionsPr]).then(
([topMembers, graphs, sessions]) => {
topMembers.status === 'fulfilled' && setTopMembers(topMembers.value);
graphs.status === 'fulfilled' && setGraphs(graphs.value);
sessions.status === 'fulfilled' && setSessions(sessions.value);
- }
+ },
);
setIsLoading(false);
-
};
return (
-
-
+ );
}
export default observer(SessionList);
diff --git a/frontend/app/components/Assist/components/SessionList/index.ts b/frontend/app/components/Assist/components/SessionList/index.ts
index 779c9df2a..7ad26942d 100644
--- a/frontend/app/components/Assist/components/SessionList/index.ts
+++ b/frontend/app/components/Assist/components/SessionList/index.ts
@@ -1 +1 @@
-export { default } from './SessionList';
\ No newline at end of file
+export { default } from './SessionList';
diff --git a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
index 4d8b9ece4..3899d1ea0 100644
--- a/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
+++ b/frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
@@ -1,4 +1,5 @@
import React, { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
interface Props {
stream: MediaStream | null;
@@ -17,6 +18,7 @@ function VideoContainer({
local,
isAgent,
}: Props) {
+ const { t } = useTranslation();
const ref = useRef
+
(PlayerContext);
const { sessionStore, userStore } = useStore();
const permissions = userStore.account.permissions || [];
- const hasPermission = permissions.includes('ASSIST_CALL') || permissions.includes('SERVICE_ASSIST_CALL');
- const isEnterprise = userStore.isEnterprise;
+ const hasPermission =
+ permissions.includes('ASSIST_CALL') ||
+ permissions.includes('SERVICE_ASSIST_CALL');
+ const { isEnterprise } = userStore;
const agentId = userStore.account.id;
- const userDisplayName = sessionStore.current.userDisplayName;
+ const { userDisplayName } = sessionStore.current;
const {
assistManager: {
@@ -81,16 +78,23 @@ function AssistActions({
} = store.get();
const [isPrestart, setPrestart] = useState(false);
- const [incomeStream, setIncomeStream] = useState<{ stream: MediaStream; isAgent: boolean }[] | null>([]);
+ const [incomeStream, setIncomeStream] = useState<
+ { stream: MediaStream; isAgent: boolean }[] | null
+ >([]);
const [localStream, setLocalStream] = useState(null);
- const [callObject, setCallObject] = useState<{ end: () => void } | null>(null);
+ const [callObject, setCallObject] = useState<{ end: () => void } | null>(
+ null,
+ );
- const onCall = calling === CallingState.OnCall || calling === CallingState.Reconnecting;
+ const onCall =
+ calling === CallingState.OnCall || calling === CallingState.Reconnecting;
const callRequesting = calling === CallingState.Connecting;
const cannotCall =
- peerConnectionStatus !== ConnectionStatus.Connected || (isEnterprise && !hasPermission);
+ peerConnectionStatus !== ConnectionStatus.Connected ||
+ (isEnterprise && !hasPermission);
- const remoteRequesting = remoteControlStatus === RemoteControlStatus.Requesting;
+ const remoteRequesting =
+ remoteControlStatus === RemoteControlStatus.Requesting;
const remoteActive = remoteControlStatus === RemoteControlStatus.Enabled;
useEffect(() => {
@@ -122,20 +126,22 @@ function AssistActions({
}
}, [remoteActive]);
- useEffect(() => {
- return callObject?.end();
- }, []);
+ useEffect(() => callObject?.end(), []);
useEffect(() => {
if (peerConnectionStatus == ConnectionStatus.Disconnected) {
- toast.info(`Live session was closed.`);
+ toast.info(t('Live session was closed.'));
}
}, [peerConnectionStatus]);
const addIncomeStream = (stream: MediaStream, isAgent: boolean) => {
setIncomeStream((oldState) => {
if (oldState === null) return [{ stream, isAgent }];
- if (!oldState.find((existingStream) => existingStream.stream.id === stream.id)) {
+ if (
+ !oldState.find(
+ (existingStream) => existingStream.stream.id === stream.id,
+ )
+ ) {
audioContextManager.mergeAudioStreams(stream);
return [...oldState, { stream, isAgent }];
}
@@ -146,10 +152,24 @@ function AssistActions({
const removeIncomeStream = (stream: MediaStream) => {
setIncomeStream((prevState) => {
if (!prevState) return [];
- return prevState.filter((existingStream) => existingStream.stream.id !== stream.id);
+ return prevState.filter(
+ (existingStream) => existingStream.stream.id !== stream.id,
+ );
});
};
+ function onReject() {
+ toast.info(t('Call was rejected.'));
+ }
+
+ function onControlReject() {
+ toast.info(t('Remote control request was rejected by user'));
+ }
+
+ function onControlBusy() {
+ toast.info(t('Remote control busy'));
+ }
+
function call() {
RequestLocalStream()
.then((lStream) => {
@@ -159,12 +179,12 @@ function AssistActions({
lStream,
addIncomeStream,
() => {
- player.assistManager.ping(AssistActionsPing.call.end, agentId)
+ player.assistManager.ping(AssistActionsPing.call.end, agentId);
lStream.stop.apply(lStream);
removeIncomeStream(lStream.stream);
},
onReject,
- onError
+ onError,
);
setCallObject(callPeer());
// if (additionalAgentIds) {
@@ -179,9 +199,9 @@ function AssistActions({
if (
await confirm({
- header: 'Start Call',
- confirmButton: 'Call',
- confirmation: `Are you sure you want to call ${userId ? userId : 'User'}?`,
+ header: t('Start Call'),
+ confirmButton: t('Call'),
+ confirmation: `${t('Are you sure you want to call')} ${userId || t('User')}?`,
})
) {
call(agentIds);
@@ -190,15 +210,15 @@ function AssistActions({
const requestControl = () => {
const onStart = () => {
- player.assistManager.ping(AssistActionsPing.control.start, agentId)
- }
+ player.assistManager.ping(AssistActionsPing.control.start, agentId);
+ };
const onEnd = () => {
- player.assistManager.ping(AssistActionsPing.control.end, agentId)
- }
+ player.assistManager.ping(AssistActionsPing.control.end, agentId);
+ };
setRemoteControlCallbacks({
onReject: onControlReject,
- onStart: onStart,
- onEnd: onEnd,
+ onStart,
+ onEnd,
onBusy: onControlBusy,
});
requestReleaseRemoteControl();
@@ -206,9 +226,9 @@ function AssistActions({
React.useEffect(() => {
if (onCall) {
- player.assistManager.ping(AssistActionsPing.call.start, agentId)
+ player.assistManager.ping(AssistActionsPing.call.start, agentId);
}
- }, [onCall])
+ }, [onCall]);
return (
}
size='small'
>
- Remote Control
+ {t('Remote Control')}
@@ -260,8 +281,8 @@ function AssistActions({
@@ -278,7 +299,7 @@ function AssistActions({
className={onCall ? 'text-red' : isPrestart ? 'text-green' : 'text-main'}
size='small'
>
- {onCall ? 'End' : isPrestart ? 'Join Call' : 'Call'}
+ {onCall ? t('End') : isPrestart ? t('Join Call') : t('Call')}
diff --git a/frontend/app/components/Assist/components/AssistActions/index.ts b/frontend/app/components/Assist/components/AssistActions/index.ts
index 3e5108198..12caa65f5 100644
--- a/frontend/app/components/Assist/components/AssistActions/index.ts
+++ b/frontend/app/components/Assist/components/AssistActions/index.ts
@@ -1 +1 @@
-export { default } from './AssistActions'
\ No newline at end of file
+export { default } from './AssistActions';
diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index 2bf5d2ecc..3a95ee5d1 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -1,72 +1,90 @@
+/* eslint-disable i18next/no-literal-string */
import React, { useEffect } from 'react';
-import { observer } from 'mobx-react-lite'
+import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { Loader, NoContent, Label } from 'UI';
import SessionItem from 'Shared/SessionItem';
import { useModal } from 'App/components/Modal';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { useTranslation } from 'react-i18next';
interface Props {
- loading: boolean;
- list: any;
- session: any;
- userId: any;
+ loading: boolean;
+ list: any;
+ session: any;
+ userId: any;
}
-function SessionList(props: Props) {
- const { hideModal } = useModal();
- const { sessionStore } = useStore();
- const fetchLiveList = sessionStore.fetchLiveSessions;
- const session = sessionStore.current;
- const list = sessionStore.liveSessions.filter((i: any) => i.userId === session.userId && i.sessionId !== session.sessionId);
- const loading = sessionStore.loadingLiveSessions;
- useEffect(() => {
- const params: any = {};
- if (props.session.userId) {
- params.userId = props.session.userId;
- }
- void fetchLiveList(params);
- }, []);
- return (
-
+
+
-
-
{}
+let debounceUpdate: any = () => {};
function RecordingsSearch() {
- const { recordingsStore } = useStore();
- const [query, setQuery] = useState(recordingsStore.search);
- useEffect(() => {
- debounceUpdate = debounce((value: any) => recordingsStore.updateSearch(value), 500);
- }, [])
-
- // @ts-ignore
- const write = ({ target: { value } }) => {
- setQuery(value);
- debounceUpdate(value);
- }
-
- return (
-
@@ -95,14 +101,19 @@ function RecordsListItem(props: Props) {
className="group flex items-center gap-1 cursor-pointer link"
onClick={onRecordClick}
>
-
+
}
subtext={
- Capture and share video recordings of co-browsing sessions with your team for product feedback and training.
+ {t(
+ 'Capture and share video recordings of co-browsing sessions with your team for product feedback and training.',
+ )}
}
@@ -44,8 +48,8 @@ function RecordingsList() {
-
{recordings.map((record: any) => (
@@ -58,8 +62,10 @@ function RecordingsList() {
Name
- Recorded by
+ {t('Name')}
+ {t('Recorded by')}
- Showing {Math.min(length, pageSize)} out of{' '}
- {total} Recording
+ {t('Showing')}{' '}
+ {Math.min(length, pageSize)}{' '}
+ {t('out of')} {total}
+ {t('Recording')}
-
+ const { recordingsStore } = useStore();
+ const [query, setQuery] = useState(recordingsStore.search);
+ useEffect(() => {
+ debounceUpdate = debounce(
+ (value: any) => recordingsStore.updateSearch(value),
+ 500,
);
+ }, []);
+
+ // @ts-ignore
+ const write = ({ target: { value } }) => {
+ setQuery(value);
+ debounceUpdate(value);
+ };
+
+ return (
+
+
+ );
}
export default observer(RecordingsSearch);
diff --git a/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx b/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx
index 3d5f70cc6..5d0764e34 100644
--- a/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx
+++ b/frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx
@@ -6,12 +6,14 @@ import { useStore } from 'App/mstore';
import { toast } from 'react-toastify';
import cn from 'classnames';
import EditRecordingModal from './EditRecordingModal';
+import { useTranslation } from 'react-i18next';
interface Props {
record: IRecord;
}
function RecordsListItem(props: Props) {
+ const { t } = useTranslation();
const { record } = props;
const { recordingsStore, settingsStore } = useStore();
const { timezone } = settingsStore.sessionSettings;
@@ -34,17 +36,19 @@ function RecordsListItem(props: Props) {
const onDelete = () => {
recordingsStore.deleteRecording(record.recordId).then(() => {
recordingsStore.setRecordings(
- recordingsStore.recordings.filter((rec) => rec.recordId !== record.recordId)
+ recordingsStore.recordings.filter(
+ (rec) => rec.recordId !== record.recordId,
+ ),
);
- toast.success('Recording deleted');
+ toast.success(t('Recording deleted'));
});
};
const menuItems = [
- { icon: 'pencil', text: 'Rename', onClick: () => setEdit(true) },
+ { icon: 'pencil', text: t('Rename'), onClick: () => setEdit(true) },
{
icon: 'trash',
- text: 'Delete',
+ text: t('Delete'),
onClick: onDelete,
},
];
@@ -54,9 +58,9 @@ function RecordsListItem(props: Props) {
.updateRecordingName(record.recordId, title)
.then(() => {
setRecordingTitle(title);
- toast.success('Recording name updated');
+ toast.success(t('Recording name updated'));
})
- .catch(() => toast.error("Couldn't update recording name"));
+ .catch(() => toast.error(t("Couldn't update recording name")));
setEdit(false);
};
@@ -78,7 +82,9 @@ function RecordsListItem(props: Props) {
{recordingTitle}
- {durationFromMs(record.duration)}
+
+ {durationFromMs(record.duration)}
+
Play Video
+ {t('Play Video')}
-
- Waiting for {userDisplayName}
+ {t('Waiting for')}{' '}
+ {userDisplayName}
- {WIN_VARIANTS[windowType].text}
+ {WIN_VARIANTS(t)[windowType].text}
@@ -227,7 +247,7 @@ function AssistActions({
size='small'
className={annotating ? 'text-red' : 'text-main'}
>
- Annotate
+ {t('Annotate')}
@@ -241,7 +261,8 @@ function AssistActions({
-
-
-
- }
- >
-
-
-
- {props.userId}'s Live Sessions{' '}
-
- No live sessions found.
-
- {list.map((session: any) => (
-
-
-
+function SessionList(props: Props) {
+ const { t } = useTranslation();
+ const { hideModal } = useModal();
+ const { sessionStore } = useStore();
+ const fetchLiveList = sessionStore.fetchLiveSessions;
+ const session = sessionStore.current;
+ const list = sessionStore.liveSessions.filter(
+ (i: any) =>
+ i.userId === session.userId && i.sessionId !== session.sessionId,
+ );
+ const loading = sessionStore.loadingLiveSessions;
+ useEffect(() => {
+ const params: any = {};
+ if (props.session.userId) {
+ params.userId = props.session.userId;
+ }
+ void fetchLiveList(params);
+ }, []);
+
+ return (
+
- {session.pageTitle && session.pageTitle !== '' && (
-
- ))}
-
-
- {session.pageTitle}
-
- )}
-
+
+
+
+ }
+ >
+
+
+
+ {props.userId}
+ 's
+ {t('Live Sessions')}{' '}
- );
+
+ {t('No live sessions found.')}
+
+
+ {list.map((session: any) => (
+
+
+
+
+ {session.pageTitle && session.pageTitle !== '' && (
+
+ ))}
+
+
+
+ {session.pageTitle}
+
+
+ )}
+
-
+
{isAgent ? (
diff --git a/frontend/app/components/Assist/components/VideoContainer/index.ts b/frontend/app/components/Assist/components/VideoContainer/index.ts
index 546964d7a..00b9cfe75 100644
--- a/frontend/app/components/Assist/components/VideoContainer/index.ts
+++ b/frontend/app/components/Assist/components/VideoContainer/index.ts
@@ -1 +1 @@
-export { default } from './VideoContainer'
\ No newline at end of file
+export { default } from './VideoContainer';
diff --git a/frontend/app/components/Assist/index.ts b/frontend/app/components/Assist/index.ts
index 1c61fa2d8..5e0445422 100644
--- a/frontend/app/components/Assist/index.ts
+++ b/frontend/app/components/Assist/index.ts
@@ -1 +1 @@
-export { default } from './Assist'
\ No newline at end of file
+export { default } from './Assist';
diff --git a/frontend/app/components/AssistStats/AssistStats.tsx b/frontend/app/components/AssistStats/AssistStats.tsx
index b73f38034..9a4ac190a 100644
--- a/frontend/app/components/AssistStats/AssistStats.tsx
+++ b/frontend/app/components/AssistStats/AssistStats.tsx
@@ -13,34 +13,42 @@ import { FilePdfOutlined, ArrowUpOutlined } from '@ant-design/icons';
import Period, { LAST_24_HOURS } from 'Types/app/period';
import SelectDateRange from 'Shared/SelectDateRange/SelectDateRange';
import TeamMembers from 'Components/AssistStats/components/TeamMembers';
-import { durationFromMsFormatted, formatTimeOrDate } from 'App/date'
+import { durationFromMsFormatted, formatTimeOrDate } from 'App/date';
import { exportCSVFile } from 'App/utils';
import { assistStatsService } from 'App/services';
+import { getPdf2 } from 'Components/AssistStats/pdfGenerator';
import UserSearch from './components/UserSearch';
import Chart from './components/Charts';
import StatsTable from './components/Table';
-import { getPdf2 } from "Components/AssistStats/pdfGenerator";
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
-const chartNames = {
- assistTotal: 'Total Live Duration',
- assistAvg: 'Avg Live Duration',
- callTotal: 'Total Call Duration',
- callAvg: 'Avg Call Duration',
- controlTotal: 'Total Remote Duration',
- controlAvg: 'Avg Remote Duration',
-};
+const chartNames = (t: TFunction) => ({
+ assistTotal: t('Total Live Duration'),
+ assistAvg: t('Avg Live Duration'),
+ callTotal: t('Total Call Duration'),
+ callAvg: t('Avg Call Duration'),
+ controlTotal: t('Total Remote Duration'),
+ controlAvg: t('Avg Remote Duration'),
+});
function calculatePercentageDelta(currP: number, prevP: number) {
return ((currP - prevP) / prevP) * 100;
}
function AssistStats() {
+ const { t } = useTranslation();
const [selectedUser, setSelectedUser] = React.useState
- Agent
+ {t('Agent')}
) : null}
-
-
+
+
+
- Co-browsing Reports
+ {t('Co-browsing Reports')}
-
+
+
}
/>
-
- {Object.keys(graphs.currentPeriod).map((i: PeriodKeys) => (
-
-
-
- {chartNames[i]}
-
- No data available
}
+ title={
+
-
- {graphs.currentPeriod[i]
- ? durationFromMsFormatted(graphs.currentPeriod[i])
- : null}
-
- {graphs.previousPeriod[i] ? (
-
- graphs.previousPeriod[i]
+
+
+
+ ))}
+ {Object.keys(graphs.currentPeriod).map((i: PeriodKeys) => (
+
-
- ))}
+
+
-
+
+ {chartNames(t)[i]}
+
+
+ ) : null}
+
+ {graphs.currentPeriod[i]
+ ? durationFromMsFormatted(graphs.currentPeriod[i])
+ : null}
+
+ {graphs.previousPeriod[i] ? (
+
+ />
+ {`${Math.round(
+ calculatePercentageDelta(
+ graphs.currentPeriod[i],
+ graphs.previousPeriod[i],
+ ),
+ )}%`}
+ graphs.previousPeriod[i]
? 'flex items-center gap-1 text-green'
: 'flex items-center gap-2 text-red'
+ }
+ >
+ graphs.previousPeriod[i]
+ ? 0
+ : 180
}
- >
- graphs.previousPeriod[i] ? 0 : 180}
- />
- {`${Math.round(
- calculatePercentageDelta(
- graphs.currentPeriod[i],
- graphs.previousPeriod[i]
- )
- )}%`}
-
- ) : null}
-
+
);
}
diff --git a/frontend/app/components/AssistStats/components/Charts.tsx b/frontend/app/components/AssistStats/components/Charts.tsx
index 665040277..676ea6d2b 100644
--- a/frontend/app/components/AssistStats/components/Charts.tsx
+++ b/frontend/app/components/AssistStats/components/Charts.tsx
@@ -1,13 +1,8 @@
import React from 'react';
import { NoContent } from 'UI';
import { Styles } from 'Components/Dashboard/Widgets/common';
-import {
- AreaChart,
- Area,
- ResponsiveContainer,
- XAxis,
- YAxis,
-} from 'recharts';
+import { AreaChart, Area, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { useTranslation } from 'react-i18next';
interface Props {
data: any;
@@ -15,13 +10,16 @@ interface Props {
}
function Chart(props: Props) {
+ const { t } = useTranslation();
const { data, label } = props;
const gradientDef = Styles.gradientDef();
return (
+
-
+
{t('No data available')}
+ }
show={data && data.length === 0}
style={{ height: '100px' }}
>
@@ -51,7 +49,7 @@ function Chart(props: Props) {
fillOpacity={1}
strokeWidth={2}
strokeOpacity={0.8}
- fill={'url(#colorCount)'}
+ fill="url(#colorCount)"
/>
diff --git a/frontend/app/components/AssistStats/components/Table.tsx b/frontend/app/components/AssistStats/components/Table.tsx
index 01abade37..8875425c9 100644
--- a/frontend/app/components/AssistStats/components/Table.tsx
+++ b/frontend/app/components/AssistStats/components/Table.tsx
@@ -1,14 +1,26 @@
-import { DownOutlined } from '@ant-design/icons';
-import { AssistStatsSession, SessionsResponse } from 'App/services/AssistStatsService';
+import {
+ DownOutlined,
+ CloudDownloadOutlined,
+ TableOutlined,
+} from '@ant-design/icons';
+import {
+ AssistStatsSession,
+ SessionsResponse,
+} from 'App/services/AssistStatsService';
import { numberWithCommas } from 'App/utils';
import React from 'react';
import { Button, Dropdown, Space, Typography, Tooltip } from 'antd';
-import { CloudDownloadOutlined, TableOutlined } from '@ant-design/icons';
import { Loader, Pagination, NoContent } from 'UI';
import PlayLink from 'Shared/SessionItem/PlayLink';
import { recordingsService } from 'App/services';
-import { checkForRecent, durationFromMsFormatted, getDateFromMill } from 'App/date';
+import {
+ checkForRecent,
+ durationFromMsFormatted,
+ getDateFromMill,
+} from 'App/date';
import { useModal } from 'Components/Modal';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
interface Props {
onSort: (v: string) => void;
@@ -20,22 +32,22 @@ interface Props {
}
const PER_PAGE = 10;
-const sortItems = [
+const sortItems = (t: TFunction) => [
{
key: 'timestamp',
- label: 'Newest First',
+ label: t('Newest First'),
},
{
key: 'assist_duration',
- label: 'Live Duration',
+ label: t('Live Duration'),
},
{
key: 'call_duration',
- label: 'Call Duration',
+ label: t('Call Duration'),
},
{
key: 'control_duration',
- label: 'Remote Duration',
+ label: t('Remote Duration'),
},
// {
// key: '5',
@@ -43,23 +55,31 @@ const sortItems = [
// },
];
-function StatsTable({ onSort, isLoading, onPageChange, page, sessions, exportCSV }: Props) {
- const [sortValue, setSort] = React.useState(sortItems[0].label);
+function StatsTable({
+ onSort,
+ isLoading,
+ onPageChange,
+ page,
+ sessions,
+ exportCSV,
+}: Props) {
+ const { t } = useTranslation();
+ const [sortValue, setSort] = React.useState(sortItems(t)[0].label);
const updateRange = ({ key }: { key: string }) => {
- const item = sortItems.find((item) => item.key === key);
- setSort(item?.label || sortItems[0].label);
+ const item = sortItems(t).find((item) => item.key === key);
+ setSort(item?.label || sortItems(t)[0].label);
item?.key && onSort(item.key);
};
return (
-
-
+
+
- Assisted Sessions
+ {t('Assisted Sessions')}
-
-
-
-
- | Date |
- Team Members |
- Live Duration |
- Call Duration |
- Remote Duration |
+
+ | {t('Date')} |
+ {t('Team Members')} |
+ {t('Live Duration')} |
+ {t('Call Duration')} |
+ {t('Remote Duration')} |
{/* BUTTONS */} |
-
-
+ |
- ))}
+ {sessions.list.map((session) => (
+ |
+ ))}
-
+
-
+
No data available
}
+ size="small"
+ title={
+
+ {t('No data available')}
+
+ }
show={sessions.list && sessions.list.length === 0}
style={{ height: '100px' }}
>
- {sessions.list.map((session) => (
-
+
{sessions.total > 0 ? (
- | {checkForRecent(getDateFromMill(session.timestamp)!, 'LLL dd, hh:mm a')} |
+
- |
- Showing {(page - 1) * PER_PAGE + 1} to{' '}
- {(page - 1) * PER_PAGE + sessions.list.length} of{' '}
- {numberWithCommas(sessions.total)} sessions.
+ {t('Showing')}{' '}
+ {(page - 1) * PER_PAGE + 1}
+ {t('to')}
+
+ {(page - 1) * PER_PAGE + sessions.list.length}
+ {' '}
+ {t('of')}{' '}
+
+ {numberWithCommas(sessions.total)}
+ {' '}
+ {t('sessions.')}
) : (
- Showing 0 to 0{' '}
- of 0 sessions.
+ {t('Showing')} 0
+ {t('to')}
+ 0 {t('of')}
+ 0 {t('sessions.')}
)}
+ {checkForRecent(getDateFromMill(session.timestamp)!, 'LLL dd, hh:mm a')}
+
+ |
+ |
@@ -139,7 +177,7 @@ function Row({ session }: { session: AssistStatsSession }) {
{durationFromMsFormatted(session.callDuration)} |
{durationFromMsFormatted(session.controlDuration)} |
- |
{session.teamMembers.map((member) => (
-
{member.name}
+
+ {member.name}
+
))}
+
);
}
-function Cell({ size, children }: { size: number; children?: React.ReactNode }) {
+function Cell({
+ size,
+ children,
+}: {
+ size: number;
+ children?: React.ReactNode;
+}) {
return
{session.recordings?.length > 0 ? (
session.recordings?.length > 1 ? (
- recordingsService.fetchRecording(item.key as unknown as number),
+ recordingsService.fetchRecording(
+ item.key as unknown as number,
+ ),
}}
>
-
) : (
recordingsService.fetchRecording(session.recordings[0].recordId)}
+ className="cursor-pointer"
+ onClick={() =>
+ recordingsService.fetchRecording(
+ session.recordings[0].recordId,
+ )
+ }
>
-
)
) : null}
- {children}
;
}
diff --git a/frontend/app/components/AssistStats/components/TeamMembers.tsx b/frontend/app/components/AssistStats/components/TeamMembers.tsx
index d1440095d..6d61fb69b 100644
--- a/frontend/app/components/AssistStats/components/TeamMembers.tsx
+++ b/frontend/app/components/AssistStats/components/TeamMembers.tsx
@@ -2,26 +2,27 @@ import { DownOutlined, TableOutlined } from '@ant-design/icons';
import { Button, Dropdown, Space, Typography, Tooltip } from 'antd';
import { durationFromMsFormatted } from 'App/date';
import { Member } from 'App/services/AssistStatsService';
-import { getInitials } from 'App/utils';
+import { getInitials, exportCSVFile } from 'App/utils';
+import { TFunction } from 'i18next';
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { Loader, NoContent } from 'UI';
-import { exportCSVFile } from 'App/utils';
-const items = [
+const items = (t: TFunction) => [
{
- label: 'Sessions Assisted',
+ label: t('Sessions Assisted'),
key: 'sessionsAssisted',
},
{
- label: 'Live Duration',
+ label: t('Live Duration'),
key: 'assistDuration',
},
{
- label: 'Call Duration',
+ label: t('Call Duration'),
key: 'callDuration',
},
{
- label: 'Remote Duration',
+ label: t('Remote Duration'),
key: 'controlDuration',
},
];
@@ -37,20 +38,21 @@ function TeamMembers({
onMembersSort: (v: string) => void;
membersSort: string;
}) {
- const [dateRange, setDateRange] = React.useState(items[0].label);
+ const { t } = useTranslation();
+ const [dateRange, setDateRange] = React.useState(items(t)[0].label);
const updateRange = ({ key }: { key: string }) => {
- const item = items.find((item) => item.key === key);
- setDateRange(item?.label || items[0].label);
- onMembersSort(item?.key || items[0].key);
+ const item = items(t).find((item) => item.key === key);
+ setDateRange(item?.label || items(t)[0].label);
+ onMembersSort(item?.key || items(t)[0].key);
};
const onExport = () => {
const headers = [
- { label: 'Team Member', key: 'name' },
- { label: 'Sessions Assisted', key: 'sessionsAssisted' },
- { label: 'Live Duration', key: 'assistDuration' },
- { label: 'Call Duration', key: 'callDuration' },
- { label: 'Remote Duration', key: 'controlDuration' },
+ { label: t('Team Member'), key: 'name' },
+ { label: t('Sessions Assisted'), key: 'sessionsAssisted' },
+ { label: t('Live Duration'), key: 'assistDuration' },
+ { label: t('Call Duration'), key: 'callDuration' },
+ { label: t('Remote Duration'), key: 'controlDuration' },
];
const data = topMembers.list.map((member) => ({
@@ -61,50 +63,73 @@ function TeamMembers({
controlDuration: `"${durationFromMsFormatted(member.controlDuration)}"`,
}));
- exportCSVFile(headers, data, `Team_Members_${new Date().toLocaleDateString()}`);
+ exportCSVFile(
+ headers,
+ data,
+ `Team_Members_${new Date().toLocaleDateString()}`,
+ );
};
return (
-
-
+
- Attach key-value pairs to session replays for enhanced filtering, searching, and identifying relevant user
- sessions.
+ {t('Attach key-value pairs to session replays for enhanced filtering, searching, and identifying relevant user sessions.')}
- Learn more
+ {t('Learn more')}
0 ? '' : 'You\'ve reached the limit of 10 metadata.'}
+ title={
+ remaining > 0 ? '' : t("You've reached the limit of 10 metadata.")
+ }
>
- } type="primary" size='small'
- disabled={remaining === 0}
- onClick={() => handleInit()}>
- Add Metadata
+ }
+ type="primary"
+ size="small"
+ disabled={remaining === 0}
+ onClick={() => handleInit()}
+ >
+ {t('Add Metadata')}
- {/*{remaining === 0 &&
- {remaining === 0 ? 'You have reached the limit of 10 metadata.' : `${remaining}/10 Remaining for this project`}
+ {remaining === 0
+ ? t('You have reached the limit of 10 metadata.')
+ : `${remaining}${t('/10 Remaining for this project')}`}
+
- Team Members
+ {t('Team Members')}
-
+
No data available }
+ size="small"
+ title={
+
diff --git a/frontend/app/components/Client/CustomFields/CustomFields.tsx b/frontend/app/components/Client/CustomFields/CustomFields.tsx
index dd816a2a1..5ce43c0f0 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.tsx
+++ b/frontend/app/components/Client/CustomFields/CustomFields.tsx
@@ -1,20 +1,21 @@
import React, { useEffect, useState } from 'react';
-import CustomFieldForm from './CustomFieldForm';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import { useModal } from 'App/components/Modal';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { List, Space, Typography, Button, Tooltip, Empty } from 'antd';
import { PlusIcon, Tags } from 'lucide-react';
-import {EditOutlined } from '@ant-design/icons';
+import { EditOutlined } from '@ant-design/icons';
import usePageTitle from '@/hooks/usePageTitle';
+import CustomFieldForm from './CustomFieldForm';
+import { useTranslation } from 'react-i18next';
-
-const CustomFields = () => {
+function CustomFields() {
usePageTitle('Metadata - OpenReplay Preferences');
+ const { t } = useTranslation();
const { customFieldStore: store, projectsStore } = useStore();
const currentSite = projectsStore.config.project;
- const { showModal, hideModal } = useModal();
+ const { showModal } = useModal();
const fields = store.list;
const [loading, setLoading] = useState(false);
@@ -27,8 +28,9 @@ const CustomFields = () => {
const handleInit = (field?: any) => {
store.init(field);
- showModal(
+
-
-
+
}
/>
-
+ {t('No data available')}
+
+ }
show={topMembers.list && topMembers.list.length === 0}
style={{ height: '100px' }}
>
{topMembers.list.map((member) => (
-
+
+ showModal(
-
);
@@ -46,11 +101,11 @@ export default class Client extends React.PureComponent {
render() {
const {
match: {
- params: { activeTab }
- }
+ params: { activeTab },
+ },
} = this.props;
return (
-
);
-};
+}
const mapStateToProps = (state) => ({
field: state.getIn(['customFields', 'instance']),
saving: state.getIn(['customFields', 'saveRequest', 'loading']),
- errors: state.getIn(['customFields', 'saveRequest', 'errors'])
+ errors: state.getIn(['customFields', 'saveRequest', 'errors']),
});
export default connect(mapStateToProps, { edit, save })(CustomFieldForm);
diff --git a/frontend/app/components/Client/CustomFields/CustomFieldForm.tsx b/frontend/app/components/Client/CustomFields/CustomFieldForm.tsx
index 82c0372d0..1999e27ad 100644
--- a/frontend/app/components/Client/CustomFields/CustomFieldForm.tsx
+++ b/frontend/app/components/Client/CustomFields/CustomFieldForm.tsx
@@ -1,66 +1,75 @@
import React, { useRef, useState } from 'react';
import { Form, Input } from 'UI';
-import styles from './customFieldForm.module.css';
import { useStore } from 'App/mstore';
import { useModal } from 'Components/Modal';
import { toast } from 'react-toastify';
import { Button, Modal } from 'antd';
import { Trash } from 'UI/Icons';
import { observer } from 'mobx-react-lite';
+import styles from './customFieldForm.module.css';
+import { useTranslation } from 'react-i18next';
interface CustomFieldFormProps {
siteId: string;
}
const CustomFieldForm: React.FC = ({ siteId }) => {
+ const { t } = useTranslation();
const focusElementRef = useRef(null);
const { customFieldStore: store } = useStore();
const field = store.instance;
const { hideModal } = useModal();
const [loading, setLoading] = useState(false);
- const write = ({ target: { value, name } }: any) => store.edit({ [name]: value });
+ const write = ({ target: { value, name } }: any) =>
+ store.edit({ [name]: value });
const exists = field?.exists();
const onDelete = async () => {
Modal.confirm({
- title: 'Metadata',
- content: `Are you sure you want to remove?`,
+ title: t('Metadata'),
+ content: t('Are you sure you want to remove?'),
onOk: async () => {
await store.remove(siteId, field?.index!);
hideModal();
- }
+ },
});
};
const onSave = (field: any) => {
setLoading(true);
- store.save(siteId, field).then((response) => {
- if (!response || !response.errors || response.errors.size === 0) {
- hideModal();
- toast.success('Metadata added successfully!');
- } else {
- toast.error(response.errors[0]);
- }
- }).catch(() => {
- toast.error('An error occurred while saving metadata.');
- }).finally(() => {
- setLoading(false);
- });
+ store
+ .save(siteId, field)
+ .then((response) => {
+ if (!response || !response.errors || response.errors.size === 0) {
+ hideModal();
+ toast.success(t('Metadata added successfully!'));
+ } else {
+ toast.error(response.errors[0]);
+ }
+ })
+ .catch(() => {
+ toast.error(t('An error occurred while saving metadata.'));
+ })
+ .finally(() => {
+ setLoading(false);
+ });
};
return (
-
{getInitials(member.name)}
+
+ {getInitials(member.name)}
+
{member.name}
-
+ {
* For each series, transform its data array to an array of objects
* with `value` and `itemStyle.color` based on the category index.
*/
-export function assignColorsByCategory(
- series: any[],
- categories: string[]
-) {
+export function assignColorsByCategory(series: any[], categories: string[]) {
const categoryColorMap = buildCategoryColorMap(categories);
series.forEach((s, si) => {
@@ -94,7 +91,9 @@ export function customTooltipFormatter(uuid: string) {
const isPrevious = /Previous/.test(seriesName);
const categoryName = (window as any).__yAxisData?.[uuid]?.[dataIndex];
const fullname = isPrevious ? `Previous ${categoryName}` : categoryName;
- const partnerName = isPrevious ? categoryName : `Previous ${categoryName}`;
+ const partnerName = isPrevious
+ ? categoryName
+ : `Previous ${categoryName}`;
const partnerValue = (window as any).__seriesValueMap?.[uuid]?.[
partnerName
];
@@ -279,7 +278,7 @@ export function createSeries(
data: DataProps['data'],
datasetId: string,
dashed: boolean,
- hideFromLegend: boolean
+ hideFromLegend: boolean,
) {
return data.namesMap.filter(Boolean).map((fullName) => {
const baseName = fullName.replace(/^Previous\s+/, '');
diff --git a/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx b/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx
index 634eace5d..756f76009 100644
--- a/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx
+++ b/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx
@@ -1,53 +1,60 @@
import React from 'react';
import { JSONTree } from 'UI';
import { checkForRecent } from 'App/date';
+import { useTranslation } from 'react-i18next';
interface Props {
- audit: any;
+ audit: any;
}
function AuditDetailModal(props: Props) {
- const { audit } = props;
- // const jsonResponse = typeof audit.payload === 'string' ? JSON.parse(audit.payload) : audit.payload;
- // console.log('jsonResponse', jsonResponse)
+ const { t } = useTranslation();
+ const { audit } = props;
+ // const jsonResponse = typeof audit.payload === 'string' ? JSON.parse(audit.payload) : audit.payload;
+ // console.log('jsonResponse', jsonResponse)
- return (
- showModal(
+
+
+ }
+ size="small"
+ show={list.length === 0}
+ >
+
{membersSort === 'sessionsAssisted'
? member.count
: durationFromMsFormatted(member.count)}
@@ -113,10 +138,10 @@ function TeamMembers({
))}
- (undefined);
+function UserSearch({ onUserSelect }: { onUserSelect: (id: any) => void }) {
+ const [selectedValue, setSelectedValue] = useState(
+ undefined,
+ );
const { userStore } = useStore();
const allUsers = userStore.list.map((user) => ({
value: user.userId,
@@ -20,7 +22,7 @@ const UserSearch = ({ onUserSelect }: { onUserSelect: (id: any) => void }) => {
r.map((user: any) => ({
value: user.userId,
label: user.name,
- }))
+ })),
);
});
}
@@ -28,12 +30,16 @@ const UserSearch = ({ onUserSelect }: { onUserSelect: (id: any) => void }) => {
const handleSearch = (value: string) => {
setOptions(
- value ? allUsers.filter((u) => u.label.toLowerCase().includes(value.toLocaleLowerCase())) : []
+ value
+ ? allUsers.filter((u) =>
+ u.label.toLowerCase().includes(value.toLocaleLowerCase()),
+ )
+ : [],
);
};
const onSelect = (value?: string) => {
- onUserSelect(value)
+ onUserSelect(value);
setSelectedValue(allUsers.find((u) => u.value === value)?.label || '');
};
@@ -46,8 +52,8 @@ const UserSearch = ({ onUserSelect }: { onUserSelect: (id: any) => void }) => {
onSearch={handleSearch}
value={selectedValue}
onChange={(e) => {
- setSelectedValue(e)
- if (!e) onUserSelect(undefined)
+ setSelectedValue(e);
+ if (!e) onUserSelect(undefined);
}}
onClear={() => onSelect(undefined)}
onDeselect={() => onSelect(undefined)}
@@ -56,12 +62,12 @@ const UserSearch = ({ onUserSelect }: { onUserSelect: (id: any) => void }) => {
(Math.random().toString(36).substring(7));
+ const chartUuid = React.useRef(
+ Math.random().toString(36).substring(7),
+ );
const chartRef = React.useRef(null);
React.useEffect(() => {
if (!chartRef.current) return;
const chart = echarts.init(chartRef.current);
- const obs = new ResizeObserver(() => chart.resize())
+ const obs = new ResizeObserver(() => chart.resize());
obs.observe(chartRef.current);
const categories = buildCategories(props.data);
const { datasets, series } = buildBarDatasetsAndSeries(props);
- initWindowStorages(chartUuid.current, categories, props.data.chart, props.compData?.chart ?? []);
+ initWindowStorages(
+ chartUuid.current,
+ categories,
+ props.data.chart,
+ props.compData?.chart ?? [],
+ );
series.forEach((s: any) => {
- (window as any).__seriesColorMap[chartUuid.current][s.name] = s.itemStyle?.color ?? '#999';
+ (window as any).__seriesColorMap[chartUuid.current][s.name] =
+ s.itemStyle?.color ?? '#999';
const ds = datasets.find((d) => d.id === s.datasetId);
if (!ds) return;
const yDim = s.encode.y;
@@ -41,11 +45,11 @@ function ORBarChart(props: BarChartProps) {
(window as any).__seriesValueMap[chartUuid.current][s.name] = {};
ds.source.forEach((row: any[]) => {
const rowIdx = row[0]; // 'idx'
- (window as any).__seriesValueMap[chartUuid.current][s.name][rowIdx] = row[yDimIndex];
+ (window as any).__seriesValueMap[chartUuid.current][s.name][rowIdx] =
+ row[yDimIndex];
});
});
-
const xAxis: any = {
type: 'category',
data: categories,
@@ -62,7 +66,9 @@ function ORBarChart(props: BarChartProps) {
...defaultOptions,
legend: {
...defaultOptions.legend,
- data: series.filter((s: any) => !s._hideInLegend).map((s: any) => s.name),
+ data: series
+ .filter((s: any) => !s._hideInLegend)
+ .map((s: any) => s.name),
},
tooltip: {
...defaultOptions.tooltip,
@@ -80,12 +86,14 @@ function ORBarChart(props: BarChartProps) {
});
chart.on('click', (event) => {
const index = event.dataIndex;
- const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[index];
- props.onClick?.({ activePayload: [{ payload: { timestamp }}]})
+ const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[
+ index
+ ];
+ props.onClick?.({ activePayload: [{ payload: { timestamp } }] });
setTimeout(() => {
- props.onSeriesFocus?.(event.seriesName)
- }, 0)
- })
+ props.onSeriesFocus?.(event.seriesName);
+ }, 0);
+ });
return () => {
chart.dispose();
diff --git a/frontend/app/components/Charts/ColumnChart.tsx b/frontend/app/components/Charts/ColumnChart.tsx
index f16992761..5a8f678c5 100644
--- a/frontend/app/components/Charts/ColumnChart.tsx
+++ b/frontend/app/components/Charts/ColumnChart.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { defaultOptions, echarts } from './init';
import { BarChart } from 'echarts/charts';
+import { defaultOptions, echarts } from './init';
import { customTooltipFormatter } from './utils';
-import { buildColumnChart } from './barUtils'
+import { buildColumnChart } from './barUtils';
echarts.use([BarChart]);
@@ -32,7 +32,7 @@ function ColumnChart(props: ColumnChartProps) {
const { data, compData, label } = props;
const chartRef = React.useRef(null);
const chartUuid = React.useRef(
- Math.random().toString(36).substring(7)
+ Math.random().toString(36).substring(7),
);
React.useEffect(() => {
@@ -42,10 +42,14 @@ function ColumnChart(props: ColumnChartProps) {
(window as any).__seriesValueMap[chartUuid.current] = {};
(window as any).__seriesColorMap = (window as any).__seriesColorMap ?? {};
(window as any).__seriesColorMap[chartUuid.current] = {};
- (window as any).__yAxisData = (window as any).__yAxisData ?? {}
+ (window as any).__yAxisData = (window as any).__yAxisData ?? {};
- const { yAxisData, series } = buildColumnChart(chartUuid.current, data, compData);
- (window as any).__yAxisData[chartUuid.current] = yAxisData
+ const { yAxisData, series } = buildColumnChart(
+ chartUuid.current,
+ data,
+ compData,
+ );
+ (window as any).__yAxisData[chartUuid.current] = yAxisData;
chart.setOption({
...defaultOptions,
@@ -89,7 +93,7 @@ function ColumnChart(props: ColumnChartProps) {
chart.on('click', (event) => {
const focusedSeriesName = event.name;
props.onSeriesFocus?.(focusedSeriesName);
- })
+ });
return () => {
chart.dispose();
diff --git a/frontend/app/components/Charts/LineChart.tsx b/frontend/app/components/Charts/LineChart.tsx
index 9155ed92c..93e505b23 100644
--- a/frontend/app/components/Charts/LineChart.tsx
+++ b/frontend/app/components/Charts/LineChart.tsx
@@ -1,8 +1,12 @@
import React from 'react';
-import { echarts, defaultOptions, initWindowStorages } from './init';
-import { customTooltipFormatter, buildCategories, buildDatasetsAndSeries } from './utils'
-import type { DataProps } from './utils'
import { LineChart } from 'echarts/charts';
+import { echarts, defaultOptions, initWindowStorages } from './init';
+import {
+ customTooltipFormatter,
+ buildCategories,
+ buildDatasetsAndSeries,
+} from './utils';
+import type { DataProps } from './utils';
echarts.use([LineChart]);
@@ -16,19 +20,26 @@ interface Props extends DataProps {
}
function ORLineChart(props: Props) {
- const chartUuid = React.useRef(Math.random().toString(36).substring(7));
+ const chartUuid = React.useRef(
+ Math.random().toString(36).substring(7),
+ );
const chartRef = React.useRef(null);
React.useEffect(() => {
if (!chartRef.current) return;
const chart = echarts.init(chartRef.current);
- const obs = new ResizeObserver(() => chart.resize())
+ const obs = new ResizeObserver(() => chart.resize());
obs.observe(chartRef.current);
const categories = buildCategories(props.data);
const { datasets, series } = buildDatasetsAndSeries(props);
- initWindowStorages(chartUuid.current, categories, props.data.chart, props.compData?.chart ?? []);
+ initWindowStorages(
+ chartUuid.current,
+ categories,
+ props.data.chart,
+ props.compData?.chart ?? [],
+ );
series.forEach((s: any) => {
if (props.isArea) {
@@ -37,7 +48,8 @@ function ORLineChart(props: Props) {
} else {
s.areaStyle = null;
}
- (window as any).__seriesColorMap[chartUuid.current][s.name] = s.itemStyle?.color ?? '#999';
+ (window as any).__seriesColorMap[chartUuid.current][s.name] =
+ s.itemStyle?.color ?? '#999';
const datasetId = s.datasetId || 'current';
const ds = datasets.find((d) => d.id === datasetId);
if (!ds) return;
@@ -48,20 +60,23 @@ function ORLineChart(props: Props) {
(window as any).__seriesValueMap[chartUuid.current][s.name] = {};
ds.source.forEach((row: any[]) => {
const rowIdx = row[0];
- (window as any).__seriesValueMap[chartUuid.current][s.name][rowIdx] = row[yDimIndex];
+ (window as any).__seriesValueMap[chartUuid.current][s.name][rowIdx] =
+ row[yDimIndex];
});
});
chart.setOption({
...defaultOptions,
title: {
- text: props.chartName ?? "Line Chart",
+ text: props.chartName ?? 'Line Chart',
show: false,
},
legend: {
...defaultOptions.legend,
// Only show legend for “current” series
- data: series.filter((s: any) => !s._hideInLegend).map((s: any) => s.name),
+ data: series
+ .filter((s: any) => !s._hideInLegend)
+ .map((s: any) => s.name),
},
xAxis: {
type: 'category',
@@ -75,7 +90,7 @@ function ORLineChart(props: Props) {
nameTextStyle: {
padding: [0, 0, 0, 15],
},
- minInterval: 1
+ minInterval: 1,
},
tooltip: {
...defaultOptions.tooltip,
@@ -91,12 +106,14 @@ function ORLineChart(props: Props) {
});
chart.on('click', (event) => {
const index = event.dataIndex;
- const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[index];
- props.onClick?.({ activePayload: [{ payload: { timestamp }}]})
+ const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[
+ index
+ ];
+ props.onClick?.({ activePayload: [{ payload: { timestamp } }] });
setTimeout(() => {
- props.onSeriesFocus?.(event.seriesName)
- }, 0)
- })
+ props.onSeriesFocus?.(event.seriesName);
+ }, 0);
+ });
return () => {
chart.dispose();
diff --git a/frontend/app/components/Charts/PieChart.tsx b/frontend/app/components/Charts/PieChart.tsx
index 86a5c9ade..eb107253b 100644
--- a/frontend/app/components/Charts/PieChart.tsx
+++ b/frontend/app/components/Charts/PieChart.tsx
@@ -1,7 +1,11 @@
import React, { useEffect, useRef } from 'react';
import { PieChart as EchartsPieChart } from 'echarts/charts';
import { echarts, defaultOptions } from './init';
-import { buildPieData, pieTooltipFormatter, pickColorByIndex } from './pieUtils';
+import {
+ buildPieData,
+ pieTooltipFormatter,
+ pickColorByIndex,
+} from './pieUtils';
echarts.use([EchartsPieChart]);
@@ -28,7 +32,8 @@ function PieChart(props: PieChartProps) {
useEffect(() => {
if (!chartRef.current) return;
if (!data.chart || data.chart.length === 0) {
- chartRef.current.innerHTML = ` = (props) => {
+ const { t } = useTranslation();
const { data, height = 240, onChartClick, isUngrouped } = props;
const chartRef = React.useRef(null);
@@ -44,8 +46,8 @@ const EChartsSankey: React.FC = (props) => {
React.useEffect(() => {
if (!chartRef.current || data.nodes.length === 0 || data.links.length === 0) return;
- let finalNodes = data.nodes;
- let finalLinks = data.links;
+ const finalNodes = data.nodes;
+ const finalLinks = data.links;
const chart = echarts.init(chartRef.current);
@@ -77,8 +79,8 @@ const EChartsSankey: React.FC = (props) => {
computedName === 'Others'
? 'rgba(34,44,154,.9)'
: n.eventType === 'DROP'
- ? '#B5B7C8'
- : '#394eff';
+ ? '#B5B7C8'
+ : '#394eff';
return {
name: computedName,
@@ -94,9 +96,8 @@ const EChartsSankey: React.FC = (props) => {
return (
getEventPriority(a.type || '') - getEventPriority(b.type || '')
);
- } else {
- return (a.depth as number) - (b.depth as number);
}
+ return (a.depth as number) - (b.depth as number);
});
const echartLinks = filteredLinks.map((l) => ({
@@ -158,22 +159,23 @@ const EChartsSankey: React.FC = (props) => {
maxWidth: 30,
distance: 3,
offset: [-20, 0],
- formatter: function (params: any) {
+ formatter(params: any) {
const nodeVal = params.value;
const percentage = startNodeValue
- ? ((nodeVal / startNodeValue) * 100).toFixed(1) + '%'
+ ? `${((nodeVal / startNodeValue) * 100).toFixed(1)}%`
: '0%';
const maxLen = 20;
const safeName =
params.name.length > maxLen
- ? params.name.slice(0, maxLen / 2 - 2) +
- '...' +
- params.name.slice(-(maxLen / 2 - 2))
+ ? `${params.name.slice(
+ 0,
+ maxLen / 2 - 2,
+ )}...${params.name.slice(-(maxLen / 2 - 2))}`
: params.name;
const nodeType = params.data.type;
- const icon = getIcon(nodeType)
+ const icon = getIcon(nodeType);
return (
`${icon}{header| ${safeName}}\n` +
`{body|}{percentage|${percentage}} {sessions|${nodeVal}}`
@@ -208,46 +210,52 @@ const EChartsSankey: React.FC = (props) => {
},
clickIcon: {
backgroundColor: {
- image: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-pointer%22%3E%3Cpath%20d%3D%22M22%2014a8%208%200%200%201-8%208%22%2F%3E%3Cpath%20d%3D%22M18%2011v-1a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%2F%3E%3Cpath%20d%3D%22M14%2010V9a2%202%200%200%200-2-2a2%202%200%200%200-2%202v1%22%2F%3E%3Cpath%20d%3D%22M10%209.5V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v10%22%2F%3E%3Cpath%20d%3D%22M18%2011a2%202%200%201%201%204%200v3a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%2F%3E%3C%2Fsvg%3E',
+ image:
+ 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-pointer%22%3E%3Cpath%20d%3D%22M22%2014a8%208%200%200%201-8%208%22%2F%3E%3Cpath%20d%3D%22M18%2011v-1a2%202%200%200%200-2-2a2%202%200%200%200-2%202%22%2F%3E%3Cpath%20d%3D%22M14%2010V9a2%202%200%200%200-2-2a2%202%200%200%200-2%202v1%22%2F%3E%3Cpath%20d%3D%22M10%209.5V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v10%22%2F%3E%3Cpath%20d%3D%22M18%2011a2%202%200%201%201%204%200v3a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%22%2F%3E%3C%2Fsvg%3E',
},
height: 20,
width: 14,
},
locationIcon: {
backgroundColor: {
- image: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-navigation%22%3E%3Cpolygon%20points%3D%223%2011%2022%202%2013%2021%2011%2013%203%2011%22%2F%3E%3C%2Fsvg%3E',
+ image:
+ 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-navigation%22%3E%3Cpolygon%20points%3D%223%2011%2022%202%2013%2021%2011%2013%203%2011%22%2F%3E%3C%2Fsvg%3E',
},
height: 20,
width: 14,
},
inputIcon: {
backgroundColor: {
- image: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-rectangle-ellipsis%22%3E%3Crect%20width%3D%2220%22%20height%3D%2212%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2012h.01%22%2F%3E%3Cpath%20d%3D%22M17%2012h.01%22%2F%3E%3Cpath%20d%3D%22M7%2012h.01%22%2F%3E%3C%2Fsvg%3E',
+ image:
+ 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-rectangle-ellipsis%22%3E%3Crect%20width%3D%2220%22%20height%3D%2212%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2012h.01%22%2F%3E%3Cpath%20d%3D%22M17%2012h.01%22%2F%3E%3Cpath%20d%3D%22M7%2012h.01%22%2F%3E%3C%2Fsvg%3E',
},
height: 20,
width: 14,
},
customEventIcon: {
backgroundColor: {
- image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUiPjxwb2x5bGluZSBwb2ludHM9IjE2IDE4IDIyIDEyIDE2IDYiLz48cG9seWxpbmUgcG9pbnRzPSI4IDYgMiAxMiA4IDE4Ii8+PC9zdmc+'
+ image:
+ 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUiPjxwb2x5bGluZSBwb2ludHM9IjE2IDE4IDIyIDEyIDE2IDYiLz48cG9seWxpbmUgcG9pbnRzPSI4IDYgMiAxMiA4IDE4Ii8+PC9zdmc+',
},
height: 20,
width: 14,
},
dropEventIcon: {
backgroundColor: {
- image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNpcmNsZS1hcnJvdy1kb3duIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiA4djgiLz48cGF0aCBkPSJtOCAxMiA0IDQgNC00Ii8+PC9zdmc+',
+ image:
+ 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNpcmNsZS1hcnJvdy1kb3duIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiA4djgiLz48cGF0aCBkPSJtOCAxMiA0IDQgNC00Ii8+PC9zdmc+',
},
height: 20,
width: 14,
},
groupIcon: {
backgroundColor: {
- image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvbXBvbmVudCI+PHBhdGggZD0iTTE1LjUzNiAxMS4yOTNhMSAxIDAgMCAwIDAgMS40MTRsMi4zNzYgMi4zNzdhMSAxIDAgMCAwIDEuNDE0IDBsMi4zNzctMi4zNzdhMSAxIDAgMCAwIDAtMS40MTRsLTIuMzc3LTIuMzc3YTEgMSAwIDAgMC0xLjQxNCAweiIvPjxwYXRoIGQ9Ik0yLjI5NyAxMS4yOTNhMSAxIDAgMCAwIDAgMS40MTRsMi4zNzcgMi4zNzdhMSAxIDAgMCAwIDEuNDE0IDBsMi4zNzctMi4zNzdhMSAxIDAgMCAwIDAtMS40MTRMNi4wODggOC45MTZhMSAxIDAgMCAwLTEuNDE0IDB6Ii8+PHBhdGggZD0iTTguOTE2IDE3LjkxMmExIDEgMCAwIDAgMCAxLjQxNWwyLjM3NyAyLjM3NmExIDEgMCAwIDAgMS40MTQgMGwyLjM3Ny0yLjM3NmExIDEgMCAwIDAgMC0xLjQxNWwtMi4zNzctMi4zNzZhMSAxIDAgMCAwLTEuNDE0IDB6Ii8+PHBhdGggZD0iTTguOTE2IDQuNjc0YTEgMSAwIDAgMCAwIDEuNDE0bDIuMzc3IDIuMzc2YTEgMSAwIDAgMCAxLjQxNCAwbDIuMzc3LTIuMzc2YTEgMSAwIDAgMCAwLTEuNDE0bC0yLjM3Ny0yLjM3N2ExIDEgMCAwIDAtMS40MTQgMHoiLz48L3N2Zz4=',
+ image:
+ 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvbXBvbmVudCI+PHBhdGggZD0iTTE1LjUzNiAxMS4yOTNhMSAxIDAgMCAwIDAgMS40MTRsMi4zNzYgMi4zNzdhMSAxIDAgMCAwIDEuNDE0IDBsMi4zNzctMi4zNzdhMSAxIDAgMCAwIDAtMS40MTRsLTIuMzc3LTIuMzc3YTEgMSAwIDAgMC0xLjQxNCAweiIvPjxwYXRoIGQ9Ik0yLjI5NyAxMS4yOTNhMSAxIDAgMCAwIDAgMS40MTRsMi4zNzcgMi4zNzdhMSAxIDAgMCAwIDEuNDE0IDBsMi4zNzctMi4zNzdhMSAxIDAgMCAwIDAtMS40MTRMNi4wODggOC45MTZhMSAxIDAgMCAwLTEuNDE0IDB6Ii8+PHBhdGggZD0iTTguOTE2IDE3LjkxMmExIDEgMCAwIDAgMCAxLjQxNWwyLjM3NyAyLjM3NmExIDEgMCAwIDAgMS40MTQgMGwyLjM3Ny0yLjM3NmExIDEgMCAwIDAgMC0xLjQxNWwtMi4zNzctMi4zNzZhMSAxIDAgMCAwLTEuNDE0IDB6Ii8+PHBhdGggZD0iTTguOTE2IDQuNjc0YTEgMSAwIDAgMCAwIDEuNDE0bDIuMzc3IDIuMzc2YTEgMSAwIDAgMCAxLjQxNCAwbDIuMzc3LTIuMzc2YTEgMSAwIDAgMCAwLTEuNDE0bC0yLjM3Ny0yLjM3N2ExIDEgMCAwIDAtMS40MTQgMHoiLz48L3N2Zz4=',
},
height: 20,
width: 14,
- }
+ },
},
},
tooltip: {
@@ -302,7 +310,7 @@ const EChartsSankey: React.FC = (props) => {
const originalNodes = [...echartNodes];
const originalLinks = [...echartLinks];
- chart.on('mouseover', function (params: any) {
+ chart.on('mouseover', (params: any) => {
if (params.dataType === 'node') {
const hoveredIndex = params.dataIndex;
const connectedChain = getConnectedChain(hoveredIndex);
@@ -345,7 +353,7 @@ const EChartsSankey: React.FC = (props) => {
}
});
- chart.on('mouseout', function (params: any) {
+ chart.on('mouseout', (params: any) => {
if (params.dataType === 'node') {
chart.setOption({
series: [
@@ -358,7 +366,7 @@ const EChartsSankey: React.FC = (props) => {
}
});
- chart.on('click', function (params: any) {
+ chart.on('click', (params: any) => {
if (!onChartClick) return;
const unsupported = ['other', 'drop'];
@@ -372,7 +380,7 @@ const EChartsSankey: React.FC = (props) => {
}
filters.push({
operator: 'is',
- type: type,
+ type,
value: [node.name],
isEvent: true,
});
@@ -456,25 +464,28 @@ const EChartsSankey: React.FC = (props) => {
}
return (
-
@@ -53,7 +53,7 @@ const shortenString = (str: string) => {
str.length > limit
? `${str.slice(0, leftPart)}...${str.slice(
str.length - rightPart,
- str.length
+ str.length,
)}`
: str;
@@ -73,7 +73,7 @@ export const getEventPriority = (type: string): number => {
export const getNodeName = (
eventType: string,
- nodeName: string | null
+ nodeName: string | null,
): string => {
if (!nodeName) {
return eventType.charAt(0) + eventType.slice(1).toLowerCase();
diff --git a/frontend/app/components/Charts/utils.ts b/frontend/app/components/Charts/utils.ts
index 8a5454991..c20733dcc 100644
--- a/frontend/app/components/Charts/utils.ts
+++ b/frontend/app/components/Charts/utils.ts
@@ -52,10 +52,7 @@ function buildCategoryColorMap(categories: string[]): Record
+
);
diff --git a/frontend/app/components/AssistStats/components/UserSearch.tsx b/frontend/app/components/AssistStats/components/UserSearch.tsx
index 3e9baac1a..f2ad84a96 100644
--- a/frontend/app/components/AssistStats/components/UserSearch.tsx
+++ b/frontend/app/components/AssistStats/components/UserSearch.tsx
@@ -4,8 +4,10 @@ import type { SelectProps } from 'antd/es/select';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
-const UserSearch = ({ onUserSelect }: { onUserSelect: (id: any) => void }) => {
- const [selectedValue, setSelectedValue] = useState
{isLoading || topMembers.list.length === 0
? ''
- : `Showing 1 to ${topMembers.total} of the total`}
+ : `${t('Showing 1 to')} ${topMembers.total} ${t('of the total')}`}
No data available
`;
+ chartRef.current.innerHTML =
+ 'No data available
';
return;
}
@@ -36,7 +41,8 @@ function PieChart(props: PieChartProps) {
const pieData = buildPieData(data.chart, data.namesMap);
if (!pieData.length) {
- chartRef.current.innerHTML = `No data available
`;
+ chartRef.current.innerHTML =
+ 'No data available
';
return;
}
@@ -75,28 +81,24 @@ function PieChart(props: PieChartProps) {
name: label ?? 'Data',
radius: [50, 100],
center: ['50%', '55%'],
- data: pieData.map((d, idx) => {
- return {
- name: d.name,
- value: d.value,
- label: {
- show: false, //d.value / largestVal >= 0.03,
- position: 'outside',
- formatter: (params: any) => {
- return params.value;
- },
- },
- labelLine: {
- show: false, // d.value / largestVal >= 0.03,
- length: 10,
- length2: 20,
- lineStyle: { color: '#3EAAAF' },
- },
- itemStyle: {
- color: pickColorByIndex(idx),
- },
- };
- }),
+ data: pieData.map((d, idx) => ({
+ name: d.name,
+ value: d.value,
+ label: {
+ show: false, // d.value / largestVal >= 0.03,
+ position: 'outside',
+ formatter: (params: any) => params.value,
+ },
+ labelLine: {
+ show: false, // d.value / largestVal >= 0.03,
+ length: 10,
+ length2: 20,
+ lineStyle: { color: '#3EAAAF' },
+ },
+ itemStyle: {
+ color: pickColorByIndex(idx),
+ },
+ })),
emphasis: {
scale: true,
scaleSize: 4,
@@ -106,11 +108,11 @@ function PieChart(props: PieChartProps) {
};
chartInstance.setOption(option);
- const obs = new ResizeObserver(() => chartInstance.resize())
+ const obs = new ResizeObserver(() => chartInstance.resize());
obs.observe(chartRef.current);
- chartInstance.on('click', function (params) {
- const focusedSeriesName = params.name
+ chartInstance.on('click', (params) => {
+ const focusedSeriesName = params.name;
props.onSeriesFocus?.(focusedSeriesName);
});
@@ -121,7 +123,10 @@ function PieChart(props: PieChartProps) {
}, [data, label, onClick, inGrid]);
return (
-
+
);
}
diff --git a/frontend/app/components/Charts/SankeyChart.tsx b/frontend/app/components/Charts/SankeyChart.tsx
index 4618d709d..9f2ca31c4 100644
--- a/frontend/app/components/Charts/SankeyChart.tsx
+++ b/frontend/app/components/Charts/SankeyChart.tsx
@@ -1,9 +1,10 @@
import React from 'react';
-import { echarts, defaultOptions } from './init';
import { SankeyChart } from 'echarts/charts';
-import { sankeyTooltip, getEventPriority, getNodeName } from './sankeyUtils';
import { NoContent } from 'App/components/ui';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { sankeyTooltip, getEventPriority, getNodeName } from './sankeyUtils';
+import { echarts, defaultOptions } from './init';
+import { useTranslation } from 'react-i18next';
echarts.use([SankeyChart]);
@@ -36,6 +37,7 @@ interface Props {
}
const EChartsSankey: React.FC
-
+ >,
- namesMap: string[]
+ namesMap: string[],
) {
const result: { name: string; value: number }[] = namesMap.map((name) => {
let sum = 0;
@@ -28,4 +27,4 @@ export function pieTooltipFormatter(params: any) {
export function pickColorByIndex(idx: number) {
return colors[idx % colors.length];
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/Charts/sankeyUtils.ts b/frontend/app/components/Charts/sankeyUtils.ts
index a4e0826af..56b9947c0 100644
--- a/frontend/app/components/Charts/sankeyUtils.ts
+++ b/frontend/app/components/Charts/sankeyUtils.ts
@@ -1,6 +1,6 @@
export function sankeyTooltip(
echartNodes: any[],
- nodeValues: Record
+ nodeValues: Record,
) {
return (params: any) => {
if ('source' in params.data && 'target' in params.data) {
@@ -25,8 +25,8 @@ export function sankeyTooltip(
+
);
};
function getIcon(type: string) {
if (type === 'LOCATION') {
- return '{locationIcon|}'
+ return '{locationIcon|}';
}
if (type === 'INPUT') {
- return '{inputIcon|}'
+ return '{inputIcon|}';
}
if (type === 'CUSTOM_EVENT') {
- return '{customEventIcon|}'
+ return '{customEventIcon|}';
}
if (type === 'CLICK') {
return '{clickIcon|}';
@@ -485,7 +496,7 @@ function getIcon(type: string) {
if (type === 'OTHER') {
return '{groupIcon|}';
}
- return ''
+ return '';
}
export default EChartsSankey;
diff --git a/frontend/app/components/Charts/barUtils.ts b/frontend/app/components/Charts/barUtils.ts
index 86c55a95d..1912cd4fd 100644
--- a/frontend/app/components/Charts/barUtils.ts
+++ b/frontend/app/components/Charts/barUtils.ts
@@ -1,5 +1,9 @@
import type { DataProps, DataItem } from './utils';
-import { createDataset, assignColorsByBaseName, assignColorsByCategory } from './utils';
+import {
+ createDataset,
+ assignColorsByBaseName,
+ assignColorsByCategory,
+} from './utils';
export function createBarSeries(
data: DataProps['data'],
@@ -13,7 +17,9 @@ export function createBarSeries(
const encode = { x: 'idx', y: fullName };
const borderRadius = [6, 6, 0, 0];
- const decal = dashed ? { symbol: 'line', symbolSize: 10, rotation: 1 } : { symbol: 'none' };
+ const decal = dashed
+ ? { symbol: 'line', symbolSize: 10, rotation: 1 }
+ : { symbol: 'none' };
return {
name: fullName,
_baseName: baseName,
@@ -47,7 +53,6 @@ export function buildBarDatasetsAndSeries(props: DataProps) {
return { datasets, series };
}
-
// START GEN
function sumSeries(chart: DataItem[], seriesName: string): number {
return chart.reduce((acc, row) => acc + (Number(row[seriesName]) || 0), 0);
@@ -62,7 +67,7 @@ function sumSeries(chart: DataItem[], seriesName: string): number {
export function buildColumnChart(
chartUuid: string,
data: DataProps['data'],
- compData: DataProps['compData']
+ compData: DataProps['compData'],
) {
const categories = data.namesMap.filter(Boolean);
@@ -114,7 +119,9 @@ export function buildColumnChart(
};
}
- const series = previousSeries ? [currentSeries, previousSeries] : [currentSeries];
+ const series = previousSeries
+ ? [currentSeries, previousSeries]
+ : [currentSeries];
assignColorsByCategory(series, categories);
diff --git a/frontend/app/components/Charts/init.ts b/frontend/app/components/Charts/init.ts
index 6544dece3..3869ab4ca 100644
--- a/frontend/app/components/Charts/init.ts
+++ b/frontend/app/components/Charts/init.ts
@@ -18,7 +18,7 @@ echarts.use([
LegendComponent,
// TransformComponent,
SVGRenderer,
- ToolboxComponent
+ ToolboxComponent,
]);
const defaultOptions = {
@@ -38,9 +38,9 @@ const defaultOptions = {
type: 'cross',
snap: true,
label: {
- backgroundColor: '#6a7985'
+ backgroundColor: '#6a7985',
},
- }
+ },
},
grid: {
bottom: 20,
@@ -56,18 +56,23 @@ const defaultOptions = {
feature: {
saveAsImage: {
pixelRatio: 1.5,
- }
- }
+ },
+ },
},
legend: {
type: 'plain',
show: true,
top: 10,
- icon: 'pin'
+ icon: 'pin',
},
-}
+};
-export function initWindowStorages(chartUuid: string, categories: string[] = [], chartArr: any[] = [], compChartArr: any[] = []) {
+export function initWindowStorages(
+ chartUuid: string,
+ categories: string[] = [],
+ chartArr: any[] = [],
+ compChartArr: any[] = [],
+) {
(window as any).__seriesValueMap = (window as any).__seriesValueMap ?? {};
(window as any).__seriesColorMap = (window as any).__seriesColorMap ?? {};
(window as any).__timestampMap = (window as any).__timestampMap ?? {};
@@ -84,11 +89,15 @@ export function initWindowStorages(chartUuid: string, categories: string[] = [],
(window as any).__categoryMap[chartUuid] = categories;
}
if (!(window as any).__timestampMap[chartUuid]) {
- (window as any).__timestampMap[chartUuid] = chartArr.map((item) => item.timestamp);
+ (window as any).__timestampMap[chartUuid] = chartArr.map(
+ (item) => item.timestamp,
+ );
}
if (!(window as any).__timestampCompMap[chartUuid]) {
- (window as any).__timestampCompMap[chartUuid] = compChartArr.map((item) => item.timestamp);
+ (window as any).__timestampCompMap[chartUuid] = compChartArr.map(
+ (item) => item.timestamp,
+ );
}
}
-export { echarts, defaultOptions };
\ No newline at end of file
+export { echarts, defaultOptions };
diff --git a/frontend/app/components/Charts/pieUtils.ts b/frontend/app/components/Charts/pieUtils.ts
index 2c5426cf4..96567b0ec 100644
--- a/frontend/app/components/Charts/pieUtils.ts
+++ b/frontend/app/components/Charts/pieUtils.ts
@@ -1,10 +1,9 @@
-import { colors } from './utils';
import { numberWithCommas } from 'App/utils';
-
+import { colors } from './utils';
export function buildPieData(
chart: Array
${params.data.value} ( ${params.data.percentage.toFixed(
- 2
- )}% )
+ 2,
+ )}% )
Sessions
-
-
-
- }
- size="small"
- show={list.length === 0}
- >
- Audit Details
-
-
+ return (
+ { 'URL'}
-{ audit.endPoint }
-
-
-
-
-
-
- Username
- {audit.username}
-
-
- Created At
- {audit.createdAt && checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}
-
-
-
- { audit.payload && (
-
-
- Action
- {audit.action}
-
-
- Method
- {audit.method}
-
-
- )}
- Payload
-
+
+ );
}
-export default AuditDetailModal;
\ No newline at end of file
+export default AuditDetailModal;
diff --git a/frontend/app/components/Client/Audit/AuditDetailModal/index.ts b/frontend/app/components/Client/Audit/AuditDetailModal/index.ts
index fcf6bb2b4..9fe899989 100644
--- a/frontend/app/components/Client/Audit/AuditDetailModal/index.ts
+++ b/frontend/app/components/Client/Audit/AuditDetailModal/index.ts
@@ -1 +1 @@
-export { default } from './AuditDetailModal';
\ No newline at end of file
+export { default } from './AuditDetailModal';
diff --git a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
index 43ba629e3..c9a38c8ef 100644
--- a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
+++ b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
@@ -3,73 +3,78 @@ import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { Loader, Pagination, NoContent } from 'UI';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import AuditDetailModal from '../AuditDetailModal';
import AuditListItem from '../AuditListItem';
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { useTranslation } from 'react-i18next';
-interface Props {
-
-}
+interface Props {}
function AuditList(props: Props) {
- const { auditStore } = useStore();
- const loading = useObserver(() => auditStore.isLoading);
- const list = useObserver(() => auditStore.list);
- const searchQuery = useObserver(() => auditStore.searchQuery);
- const page = useObserver(() => auditStore.page);
- const order = useObserver(() => auditStore.order);
- const period = useObserver(() => auditStore.period);
- const { showModal } = useModal();
-
- useEffect(() => {
- const { startTimestamp, endTimestamp } = period.toTimestamps();
- auditStore.fetchAudits({
- page: auditStore.page,
- limit: auditStore.pageSize,
- query: auditStore.searchQuery,
- order: auditStore.order,
- startDate: startTimestamp,
- endDate: endTimestamp,
- });
- }, [page, searchQuery, order, period]);
+ const { t } = useTranslation();
+ const { auditStore } = useStore();
+ const loading = useObserver(() => auditStore.isLoading);
+ const list = useObserver(() => auditStore.list);
+ const searchQuery = useObserver(() => auditStore.searchQuery);
+ const page = useObserver(() => auditStore.page);
+ const order = useObserver(() => auditStore.order);
+ const period = useObserver(() => auditStore.period);
+ const { showModal } = useModal();
- return useObserver(() => (
- {t('Audit Details')}
+
+
+ {t('URL')}
+
+ {audit.endPoint}
- );
+
+
+
+
+
+
+ {t('Username')}
+ {audit.username}
+
+
+ {t('Created At')}
+
+ {audit.createdAt &&
+ checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}
+
+
+
+
+ {audit.payload && (
+
+
+ {t('Action')}
+ {audit.action}
+
+
+ {t('Method')}
+ {audit.method}
+
+
+ )}
+ {t('Payload')}
+ No data available
-
-
+ useEffect(() => {
+ const { startTimestamp, endTimestamp } = period.toTimestamps();
+ auditStore.fetchAudits({
+ page: auditStore.page,
+ limit: auditStore.pageSize,
+ query: auditStore.searchQuery,
+ order: auditStore.order,
+ startDate: startTimestamp,
+ endDate: endTimestamp,
+ });
+ }, [page, searchQuery, order, period]);
- {list.map((item, index) => (
- Name
- Action
- Time
-
- auditStore.updateKey('page', page)}
- limit={auditStore.pageSize}
- debounceRequest={200}
- />
-
-
-
- ));
+ return useObserver(() => (
+ {t('No data available')}
+
+
+
+ {list.map((item, index) => (
+ {t('Name')}
+ {t('Action')}
+ {t('Time')}
+
+ auditStore.updateKey('page', page)}
+ limit={auditStore.pageSize}
+ debounceRequest={200}
+ />
+
+
+
+ ));
}
-export default AuditList;
\ No newline at end of file
+export default AuditList;
diff --git a/frontend/app/components/Client/Audit/AuditList/index.ts b/frontend/app/components/Client/Audit/AuditList/index.ts
index 2e6bc3739..6f70bca2f 100644
--- a/frontend/app/components/Client/Audit/AuditList/index.ts
+++ b/frontend/app/components/Client/Audit/AuditList/index.ts
@@ -1 +1 @@
-export { default } from './AuditList'
\ No newline at end of file
+export { default } from './AuditList';
diff --git a/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx b/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx
index 2c9792d33..064532a89 100644
--- a/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx
+++ b/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx
@@ -2,18 +2,26 @@ import React from 'react';
import { checkForRecent } from 'App/date';
interface Props {
- audit: any;
- onShowDetails: () => void;
+ audit: any;
+ onShowDetails: () => void;
}
function AuditListItem(props: Props) {
- const { audit, onShowDetails } = props;
- return (
-
-
- );
+ const { audit, onShowDetails } = props;
+ return (
+ {audit.username}
- {audit.action}
- {audit.createdAt && checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}
-
+
+ );
}
-export default AuditListItem;
\ No newline at end of file
+export default AuditListItem;
diff --git a/frontend/app/components/Client/Audit/AuditListItem/index.ts b/frontend/app/components/Client/Audit/AuditListItem/index.ts
index 821ee9639..dbd6b2a5f 100644
--- a/frontend/app/components/Client/Audit/AuditListItem/index.ts
+++ b/frontend/app/components/Client/Audit/AuditListItem/index.ts
@@ -1 +1 @@
-export { default } from './AuditListItem';
\ No newline at end of file
+export { default } from './AuditListItem';
diff --git a/frontend/app/components/Client/Audit/AuditSearchField/AuditSearchField.tsx b/frontend/app/components/Client/Audit/AuditSearchField/AuditSearchField.tsx
index 93adf3d3e..7272370c6 100644
--- a/frontend/app/components/Client/Audit/AuditSearchField/AuditSearchField.tsx
+++ b/frontend/app/components/Client/Audit/AuditSearchField/AuditSearchField.tsx
@@ -2,33 +2,37 @@ import React, { useEffect } from 'react';
import { Icon, Input } from 'UI';
import { debounce } from 'App/utils';
-let debounceUpdate: any = () => {}
+let debounceUpdate: any = () => {};
interface Props {
- onChange: (value: string) => void;
+ onChange: (value: string) => void;
}
function AuditSearchField(props: Props) {
- const { onChange } = props;
-
- useEffect(() => {
- debounceUpdate = debounce((value) => onChange(value), 500);
- }, [])
+ const { onChange } = props;
- const write = ({ target: { name, value } }) => {
- debounceUpdate(value);
- }
+ useEffect(() => {
+ debounceUpdate = debounce((value) => onChange(value), 500);
+ }, []);
- return (
- {audit.username}
+
+ {audit.action}
+
+
+ {audit.createdAt &&
+ checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}
+
+
-
- );
+ const write = ({ target: { name, value } }) => {
+ debounceUpdate(value);
+ };
+
+ return (
+
+
+ );
}
-export default AuditSearchField;
\ No newline at end of file
+export default AuditSearchField;
diff --git a/frontend/app/components/Client/Audit/AuditSearchField/index.ts b/frontend/app/components/Client/Audit/AuditSearchField/index.ts
index 646947095..ac0f6c188 100644
--- a/frontend/app/components/Client/Audit/AuditSearchField/index.ts
+++ b/frontend/app/components/Client/Audit/AuditSearchField/index.ts
@@ -1 +1 @@
-export { default } from './AuditSearchField';
\ No newline at end of file
+export { default } from './AuditSearchField';
diff --git a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
index 1fde1ff31..41852e31e 100644
--- a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
+++ b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
@@ -1,77 +1,91 @@
import React, { useEffect } from 'react';
import { PageTitle, Icon } from 'UI';
-import { Button } from 'antd'
-import AuditList from '../AuditList';
-import AuditSearchField from '../AuditSearchField';
+import { Button } from 'antd';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import Select from 'Shared/Select';
import SelectDateRange from 'Shared/SelectDateRange';
import { numberWithCommas } from 'App/utils';
import withPageTitle from 'HOCs/withPageTitle';
+import AuditSearchField from '../AuditSearchField';
+import AuditList from '../AuditList';
+import { useTranslation } from 'react-i18next';
function AuditView() {
- const { auditStore } = useStore();
- const order = useObserver(() => auditStore.order);
- const total = useObserver(() => numberWithCommas(auditStore.total));
+ const { t } = useTranslation();
+ const { auditStore } = useStore();
+ const order = useObserver(() => auditStore.order);
+ const total = useObserver(() => numberWithCommas(auditStore.total));
- useEffect(() => {
- return () => {
- auditStore.updateKey('searchQuery', '');
- }
- }, [])
+ useEffect(
+ () => () => {
+ auditStore.updateKey('searchQuery', '');
+ },
+ [],
+ );
- const exportToCsv = () => {
- auditStore.exportToCsv();
- }
+ const exportToCsv = () => {
+ auditStore.exportToCsv();
+ };
- const onChange = (data) => {
- auditStore.setDateRange(data);
- }
+ const onChange = (data) => {
+ auditStore.setDateRange(data);
+ };
- return useObserver(() => (
-
-
+ ));
}
-export default withPageTitle('Audit Trail - OpenReplay Preferences')(AuditView);
\ No newline at end of file
+export default withPageTitle('Audit Trail - OpenReplay Preferences')(AuditView);
diff --git a/frontend/app/components/Client/Audit/AuditView/index.ts b/frontend/app/components/Client/Audit/AuditView/index.ts
index ba32b1be0..fcaf5cf0c 100644
--- a/frontend/app/components/Client/Audit/AuditView/index.ts
+++ b/frontend/app/components/Client/Audit/AuditView/index.ts
@@ -1 +1 @@
-export { default } from './AuditView'
\ No newline at end of file
+export { default } from './AuditView';
diff --git a/frontend/app/components/Client/Client.tsx b/frontend/app/components/Client/Client.tsx
index 06991988d..cf41335a9 100644
--- a/frontend/app/components/Client/Client.tsx
+++ b/frontend/app/components/Client/Client.tsx
@@ -3,6 +3,8 @@ import { withRouter } from 'react-router-dom';
import { Switch, Route, Redirect } from 'react-router';
import { CLIENT_TABS, client as clientRoute } from 'App/routes';
+import SessionsListingSettings from 'Components/Client/SessionsListingSettings';
+import Modules from 'Components/Client/Modules';
import ProfileSettings from './ProfileSettings';
import Integrations from './Integrations';
import UserView from './Users/UsersView';
@@ -13,8 +15,6 @@ import CustomFields from './CustomFields';
import Webhooks from './Webhooks';
import Notifications from './Notifications';
import Roles from './Roles';
-import SessionsListingSettings from 'Components/Client/SessionsListingSettings';
-import Modules from 'Components/Client/Modules';
@withRouter
export default class Client extends React.PureComponent {
@@ -28,17 +28,72 @@ export default class Client extends React.PureComponent {
renderActiveTab = () => (
-
- Audit Trail
- {total}
-
- } />
-
- {
- auditStore.updateKey('searchQuery', value);
- auditStore.updateKey('page', 1)
- } }/>
-
+ return useObserver(() => (
+
-
-
-
-
- } className="ml-3" onClick={exportToCsv}>
- Export to CSV
-
-
-
+
+
+
+
+ {t('Audit Trail')}
+ {total}
-
-
+ {
+ auditStore.updateKey('searchQuery', value);
+ auditStore.updateKey('page', 1);
+ }}
+ />
+
- ));
+
+
+
+
+
+ }
+ className="ml-3"
+ onClick={exportToCsv}
+ >
+ {t('Export to CSV')}
+
+
+
{activeTab && this.renderActiveTab()}
);
diff --git a/frontend/app/components/Client/CustomFields/CustomFieldForm.js b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
index 19cf244d2..2c42e3d3e 100644
--- a/frontend/app/components/Client/CustomFields/CustomFieldForm.js
+++ b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
@@ -4,7 +4,9 @@ import { edit, save } from 'Duck/customField';
import { Form, Input, Button } from 'UI';
import styles from './customFieldForm.module.css';
-const CustomFieldForm = ({ field, saving, errors, edit, save, onSave, onClose, onDelete }) => {
+function CustomFieldForm({
+ field, saving, errors, edit, save, onSave, onClose, onDelete,
+}) {
const focusElementRef = useRef(null);
const setFocus = () => focusElementRef.current.focus();
@@ -15,10 +17,14 @@ const CustomFieldForm = ({ field, saving, errors, edit, save, onSave, onClose, o
return (
-
-
+
{exists ? 'Update' : 'Add'} Metadata Field
++ {exists ? 'Update' : 'Add'} + {' '} + Metadata Field +
-
- } data-hidden={!exists} onClick={onDelete}>
+ }
+ data-hidden={!exists}
+ onClick={onDelete}
+ />
{exists ? 'Update' : 'Add'} Metadata Field
++ {exists ? t('Update') : 'Add'} {t('Metadata Field')} +
field.index !== 0 && onEdit(field)}
>
{field.key}
-
- } />
+
);
-};
+}
export default ListItem;
diff --git a/frontend/app/components/Client/CustomFields/index.js b/frontend/app/components/Client/CustomFields/index.js
index 2b1c8b48b..8519422a1 100644
--- a/frontend/app/components/Client/CustomFields/index.js
+++ b/frontend/app/components/Client/CustomFields/index.js
@@ -1 +1 @@
-export { default } from './CustomFields';
\ No newline at end of file
+export { default } from './CustomFields';
diff --git a/frontend/app/components/Client/DebugLog.tsx b/frontend/app/components/Client/DebugLog.tsx
index 0a5f8f292..84c8ce18f 100644
--- a/frontend/app/components/Client/DebugLog.tsx
+++ b/frontend/app/components/Client/DebugLog.tsx
@@ -1,33 +1,36 @@
-import React from 'react'
-import { KEY, options } from 'App/dev/console'
+import React from 'react';
+import { KEY, options } from 'App/dev/console';
import { Switch } from 'UI';
+import { useTranslation } from 'react-i18next';
function getDefaults() {
- const storedString = localStorage.getItem(KEY)
+ const storedString = localStorage.getItem(KEY);
if (storedString) {
- const storedOptions = JSON.parse(storedString)
- return storedOptions.verbose
- } else {
- return false
+ const storedOptions = JSON.parse(storedString);
+ return storedOptions.verbose;
}
+ return false;
}
function DebugLog() {
- const [showLogs, setShowLogs] = React.useState(getDefaults)
+ const { t } = useTranslation();
+ const [showLogs, setShowLogs] = React.useState(getDefaults);
const onChange = (checked: boolean) => {
- setShowLogs(checked)
- options.logStuff(checked)
- }
+ setShowLogs(checked);
+ options.logStuff(checked);
+ };
return (
+ } />
- ('datadog', siteId, initialValues);
- const { values, errors, handleChange, hasErrors, checkErrors } = useForm(data, {
- site: {
- required: true,
+ const { values, errors, handleChange, hasErrors, checkErrors } = useForm(
+ data,
+ {
+ site: {
+ required: true,
+ },
+ api_key: {
+ required: true,
+ },
+ app_key: {
+ required: true,
+ },
},
- api_key: {
- required: true,
- },
- app_key: {
- required: true,
- },
- });
+ );
const exists = Boolean(data.api_key);
const save = async () => {
@@ -59,7 +64,7 @@ const DatadogFormModal = ({
try {
await saveMutation.mutateAsync({ values, siteId, exists });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -68,7 +73,7 @@ const DatadogFormModal = ({
try {
await removeMutation.mutateAsync({ siteId });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -83,20 +88,20 @@ const DatadogFormModal = ({
description="Incorporate DataDog to visualize backend errors alongside session replay, for easy troubleshooting."
/>
('dynatrace', siteId, initialValues);
- const { values, errors, handleChange, hasErrors, checkErrors } = useForm(data, {
- environment: {
- required: true,
+ const { values, errors, handleChange, hasErrors, checkErrors } = useForm(
+ data,
+ {
+ environment: {
+ required: true,
+ },
+ client_id: {
+ required: true,
+ },
+ client_secret: {
+ required: true,
+ },
+ resource: {
+ required: true,
+ },
},
- client_id: {
- required: true,
- },
- client_secret: {
- required: true,
- },
- resource: {
- required: true,
- },
- });
+ );
const exists = Boolean(data.client_id);
const save = async () => {
@@ -62,7 +67,7 @@ const DynatraceFormModal = ({
try {
await saveMutation.mutateAsync({ values, siteId, exists });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -71,7 +76,7 @@ const DynatraceFormModal = ({
try {
await removeMutation.mutateAsync({ siteId });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -81,33 +86,40 @@ const DynatraceFormModal = ({
style={{ width: '350px' }}
>
('elasticsearch', siteId, initialValues);
- const { values, errors, handleChange, hasErrors, checkErrors } = useForm(data, {
- url: {
- required: true,
+ const { values, errors, handleChange, hasErrors, checkErrors } = useForm(
+ data,
+ {
+ url: {
+ required: true,
+ },
+ api_key_id: {
+ required: true,
+ },
+ api_key: {
+ required: true,
+ },
},
- api_key_id: {
- required: true,
- },
- api_key: {
- required: true,
- },
- });
+ );
const exists = Boolean(data.api_key_id);
const save = async () => {
@@ -60,7 +65,7 @@ function ElasticsearchForm({
try {
await saveMutation.mutateAsync({ values, siteId, exists });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -69,7 +74,7 @@ function ElasticsearchForm({
try {
await removeMutation.mutateAsync({ siteId });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -81,24 +86,26 @@ function ElasticsearchForm({
Player Debug Logs
-Show debug information in browser console.
-
+
- )
+ );
}
-export default DebugLog
\ No newline at end of file
+export default DebugLog;
diff --git a/frontend/app/components/Client/Integrations/Backend/DatadogForm/DatadogFormModal.tsx b/frontend/app/components/Client/Integrations/Backend/DatadogForm/DatadogFormModal.tsx
index 2910621d0..c5962d7bd 100644
--- a/frontend/app/components/Client/Integrations/Backend/DatadogForm/DatadogFormModal.tsx
+++ b/frontend/app/components/Client/Integrations/Backend/DatadogForm/DatadogFormModal.tsx
@@ -10,6 +10,7 @@ import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModa
import { Loader } from 'UI';
import DocLink from 'Shared/DocLink/DocLink';
+import { useTranslation } from 'react-i18next';
interface DatadogConfig {
site: string;
@@ -23,15 +24,16 @@ const initialValues = {
app_key: '',
};
-const DatadogFormModal = ({
+function DatadogFormModal({
onClose,
integrated,
}: {
onClose: () => void;
integrated: boolean;
-}) => {
+}) {
+ const { t } = useTranslation();
const { integrationsStore } = useStore();
- const siteId = integrationsStore.integrations.siteId;
+ const { siteId } = integrationsStore.integrations;
const {
data = initialValues,
@@ -39,17 +41,20 @@ const DatadogFormModal = ({
saveMutation,
removeMutation,
} = useIntegration{t('Player Debug Logs')}
+
+ {t('Show debug information in browser console.')}
+
+
-
);
-};
+}
DatadogFormModal.displayName = 'DatadogForm';
diff --git a/frontend/app/components/Client/Integrations/Backend/DynatraceForm/DynatraceFormModal.tsx b/frontend/app/components/Client/Integrations/Backend/DynatraceForm/DynatraceFormModal.tsx
index 325fd6079..6b01bc274 100644
--- a/frontend/app/components/Client/Integrations/Backend/DynatraceForm/DynatraceFormModal.tsx
+++ b/frontend/app/components/Client/Integrations/Backend/DynatraceForm/DynatraceFormModal.tsx
@@ -10,6 +10,7 @@ import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModa
import { Loader } from 'UI';
import DocLink from 'Shared/DocLink/DocLink';
+import { useTranslation } from 'react-i18next';
interface DynatraceConfig {
environment: string;
@@ -24,35 +25,39 @@ const initialValues = {
client_secret: '',
resource: '',
};
-const DynatraceFormModal = ({
+function DynatraceFormModal({
onClose,
integrated,
}: {
onClose: () => void;
integrated: boolean;
-}) => {
+}) {
+ const { t } = useTranslation();
const { integrationsStore } = useStore();
- const siteId = integrationsStore.integrations.siteId;
+ const { siteId } = integrationsStore.integrations;
const {
data = initialValues,
isPending,
saveMutation,
removeMutation,
} = useIntegrationHow it works?
+ {t('How it works?')}
-
-
- Generate Datadog API Key & Application Key -
- Enter the API key below -
- Propagate openReplaySessionToken +
- {t('Generate Datadog API Key & Application Key')} +
- {t('Enter the API key below')} +
- {t('Propagate openReplaySessionToken')}
+
{integrated && (
)}
@@ -137,7 +142,7 @@ const DatadogFormModal = ({
-
);
-};
+}
DynatraceFormModal.displayName = 'DynatraceFormModal';
diff --git a/frontend/app/components/Client/Integrations/Backend/ElasticForm/ElasticFormModal.tsx b/frontend/app/components/Client/Integrations/Backend/ElasticForm/ElasticFormModal.tsx
index f86dfbd79..4c5009ba9 100644
--- a/frontend/app/components/Client/Integrations/Backend/ElasticForm/ElasticFormModal.tsx
+++ b/frontend/app/components/Client/Integrations/Backend/ElasticForm/ElasticFormModal.tsx
@@ -10,6 +10,7 @@ import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModa
import { Loader } from 'UI';
import DocLink from 'Shared/DocLink/DocLink';
+import { useTranslation } from 'react-i18next';
interface ElasticConfig {
url: string;
@@ -32,25 +33,29 @@ function ElasticsearchForm({
onClose: () => void;
integrated: boolean;
}) {
+ const { t } = useTranslation();
const { integrationsStore } = useStore();
- const siteId = integrationsStore.integrations.siteId;
+ const { siteId } = integrationsStore.integrations;
const {
data = initialValues,
isPending,
saveMutation,
removeMutation,
} = useIntegrationHow it works?
+ {t('How it works?')}
- - Enter your Environment ID, Client ID, Client Secret, and Account URN - in the form below. + {t( + 'Enter your Environment ID, Client ID, Client Secret, and Account URN in the form below.', + )}
- - Create a custom Log attribute openReplaySessionToken in Dynatrace. + {t( + 'Create a custom Log attribute openReplaySessionToken in Dynatrace.', + )}
- - Propagate openReplaySessionToken in your application's backend logs. + {t( + "Propagate openReplaySessionToken in your application's backend logs.", + )}
+
{integrated && (
)}
@@ -156,7 +168,7 @@ const DynatraceFormModal = ({
-
How it works?
+ {t('How it works?')}
-
-
- Create a new Elastic API key -
- Enter the API key below -
- Propagate openReplaySessionToken +
- {t('Create a new Elastic API key')} +
- {t('Enter the API key below')} +
- {t('Propagate openReplaySessionToken')}
+ ('sentry', siteId, initialValues);
- const { values, errors, handleChange, hasErrors, checkErrors, } = useForm(data, {
- url: {
- required: false,
+ const { values, errors, handleChange, hasErrors, checkErrors } = useForm(
+ data,
+ {
+ url: {
+ required: false,
+ },
+ organization_slug: {
+ required: true,
+ },
+ project_slug: {
+ required: true,
+ },
+ token: {
+ required: true,
+ },
},
- organization_slug: {
- required: true,
- },
- project_slug: {
- required: true,
- },
- token: {
- required: true,
- },
- });
+ );
const exists = Boolean(data.token);
const save = async () => {
@@ -63,7 +68,7 @@ function SentryForm({
try {
await saveMutation.mutateAsync({ values, siteId, exists });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -72,7 +77,7 @@ function SentryForm({
try {
await removeMutation.mutateAsync({ siteId });
} catch (e) {
- console.error(e)
+ console.error(e);
}
onClose();
};
@@ -87,28 +92,28 @@ function SentryForm({
description="Integrate Sentry with session replays to seamlessly observe backend errors."
/>
{integrated && (
)}
diff --git a/frontend/app/components/Client/Integrations/Backend/SentryForm/SentryFormModal.tsx b/frontend/app/components/Client/Integrations/Backend/SentryForm/SentryFormModal.tsx
index 76b427bfd..01d416fdf 100644
--- a/frontend/app/components/Client/Integrations/Backend/SentryForm/SentryFormModal.tsx
+++ b/frontend/app/components/Client/Integrations/Backend/SentryForm/SentryFormModal.tsx
@@ -10,6 +10,7 @@ import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModa
import { Loader } from 'UI';
import { toast } from 'react-toastify';
import DocLink from 'Shared/DocLink/DocLink';
+import { useTranslation } from 'react-i18next';
interface SentryConfig {
url: string;
@@ -32,28 +33,32 @@ function SentryForm({
onClose: () => void;
integrated: boolean;
}) {
+ const { t } = useTranslation();
const { integrationsStore } = useStore();
- const siteId = integrationsStore.integrations.siteId;
+ const { siteId } = integrationsStore.integrations;
const {
data = initialValues,
isPending,
saveMutation,
removeMutation,
} = useIntegration
-
How it works?
+ {t('How it works?')}
-
-
- Generate Sentry Auth Token -
- Enter the token below -
- Propagate openReplaySessionToken +
- {t('Generate Sentry Auth Token')} +
- {t('Enter the token below')} +
- {t('Propagate openReplaySessionToken')}
+ ) => void;
autoFocus?: boolean;
@@ -30,4 +30,4 @@ export function FormField({
);
}
-export default FormField;
\ No newline at end of file
+export default FormField;
diff --git a/frontend/app/components/Client/Integrations/GithubForm.js b/frontend/app/components/Client/Integrations/GithubForm.js
deleted file mode 100644
index b54343c5f..000000000
--- a/frontend/app/components/Client/Integrations/GithubForm.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import IntegrationForm from './IntegrationForm';
-import DocLink from 'Shared/DocLink/DocLink';
-import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
-
-const GithubForm = (props) => (
-
{integrated && (
)}
diff --git a/frontend/app/components/Client/Integrations/FormField.tsx b/frontend/app/components/Client/Integrations/FormField.tsx
index e6e17ea2f..96b93051a 100644
--- a/frontend/app/components/Client/Integrations/FormField.tsx
+++ b/frontend/app/components/Client/Integrations/FormField.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Input } from 'antd'
+import React from 'react';
+import { Input } from 'antd';
export function FormField({
label,
@@ -10,7 +10,7 @@ export function FormField({
errors,
}: {
label: string;
- name: string
+ name: string;
value: string;
onChange: (e: React.ChangeEvent
-
-);
-
-GithubForm.displayName = 'GithubForm';
-
-export default GithubForm;
diff --git a/frontend/app/components/Client/Integrations/GithubForm.tsx b/frontend/app/components/Client/Integrations/GithubForm.tsx
new file mode 100644
index 000000000..d8d1f4d4c
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/GithubForm.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import DocLink from 'Shared/DocLink/DocLink';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
+import IntegrationForm from './IntegrationForm';
+import { useTranslation } from 'react-i18next';
+
+function GithubForm(props) {
+ const { t } = useTranslation();
+ return (
+
-
- Integrate GitHub with OpenReplay and create issues directly from the recording page.
-
-
-
+
+ );
+}
+
+GithubForm.displayName = 'GithubForm';
+
+export default GithubForm;
diff --git a/frontend/app/components/Client/Integrations/IntegrationFilters.tsx b/frontend/app/components/Client/Integrations/IntegrationFilters.tsx
index 898d38587..b1cf3ffcf 100644
--- a/frontend/app/components/Client/Integrations/IntegrationFilters.tsx
+++ b/frontend/app/components/Client/Integrations/IntegrationFilters.tsx
@@ -4,7 +4,6 @@ import React from 'react';
import { Icon } from 'UI';
-
interface Props {
onChange: any;
activeItem: string;
@@ -14,23 +13,22 @@ interface Props {
const allItem = { key: 'all', title: 'All' };
function IntegrationFilters(props: Props) {
-
const segmentItems = [allItem, ...props.filters].map((item: any) => ({
key: item.key,
value: item.key,
label: (
-
+
+
+ {t(
+ 'Integrate GitHub with OpenReplay and create issues directly from the recording page.',
+ )}
+
+
+
+
- {item.icon ?
+ {item.icon ?
),
- }))
+ }));
const onChange = (val) => {
- props.onChange(val)
- }
+ props.onChange(val);
+ };
return (
- {item.title}
+
{
@@ -30,19 +32,21 @@ function IntegrationForm(props: any) {
const save = () => {
const { name, customPath } = props;
- onSave(customPath || name).then(() => {
- fetchList();
- props.onClose();
- }).catch(async (error) => {
- if (error.response) {
- const errorResponse = await error.response.json();
- if (errorResponse.errors && Array.isArray(errorResponse.errors)) {
- toast.error(errorResponse.errors.map((e: any) => e).join(', '));
- } else {
- toast.error('Failed to save integration');
+ onSave(customPath || name)
+ .then(() => {
+ fetchList();
+ props.onClose();
+ })
+ .catch(async (error) => {
+ if (error.response) {
+ const errorResponse = await error.response.json();
+ if (errorResponse.errors && Array.isArray(errorResponse.errors)) {
+ toast.error(errorResponse.errors.map((e: any) => e).join(', '));
+ } else {
+ toast.error(t('Failed to save integration'));
+ }
}
- }
- });
+ });
};
const remove = () => {
@@ -91,7 +95,7 @@ function IntegrationForm(props: any) {
autoFocus={autoFocus}
/>
- ))
+ )),
)}
{integrated && (
)}
diff --git a/frontend/app/components/Client/Integrations/IntegrationItem.tsx b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
index 4c4e4db5e..2c011c92b 100644
--- a/frontend/app/components/Client/Integrations/IntegrationItem.tsx
+++ b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
-import stl from './integrationItem.module.css';
-import { Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
interface Props {
integration: any;
@@ -12,32 +11,50 @@ interface Props {
useIcon?: boolean;
}
-const IntegrationItem = (props: Props) => {
+function IntegrationItem(props: Props) {
+ const { t } = useTranslation();
const { integration, integrated, hide = false, useIcon } = props;
return hide ? null : (
props.onClick(e)}
style={{ height: '136px' }}
>
-
+
);
-};
+}
export default IntegrationItem;
diff --git a/frontend/app/components/Client/Integrations/IntegrationModalCard.tsx b/frontend/app/components/Client/Integrations/IntegrationModalCard.tsx
index 37ff588f0..1ac2fe6e8 100644
--- a/frontend/app/components/Client/Integrations/IntegrationModalCard.tsx
+++ b/frontend/app/components/Client/Integrations/IntegrationModalCard.tsx
@@ -11,16 +11,24 @@ interface Props {
function IntegrationModalCard(props: Props) {
const { title, icon, description, useIcon } = props;
return (
- ) => {
edit(instance);
@@ -22,12 +24,11 @@ function TeamsChannelList(props: { onEdit: () => void }) {
title={
))) // check list of available options below
-);`
- const usageCjs = `import { applyMiddleware, createStore } from 'redux';
-import OpenReplay from '@openreplay/tracker/cjs';
-import trackerRedux from '@openreplay/tracker-redux/cjs';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-//...
-function SomeFunctionalComponent() {
- useEffect(() => { // or componentDidMount in case of Class approach
- tracker.start()
- }, [])
-//...
-const store = createStore(
- reducer,
- applyMiddleware(tracker.use(trackerRedux())) // check list of available options below
- );
-}`
- return (
- ))) // check list of available options below
+);`;
+ const usageCjs = `import { applyMiddleware, createStore } from 'redux';
+import OpenReplay from '@openreplay/tracker/cjs';
+import trackerRedux from '@openreplay/tracker-redux/cjs';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+//...
+function SomeFunctionalComponent() {
+ useEffect(() => { // or componentDidMount in case of Class approach
+ tracker.start()
+ }, [])
+//...
+const store = createStore(
+ reducer,
+ applyMiddleware(tracker.use(trackerRedux())) // check list of available options below
+ );
+}`;
+ return (
+ ))] // check list of available options below
-});`
+});`;
const usageCjs = `import Vuex from 'vuex'
import OpenReplay from '@openreplay/tracker/cjs';
import trackerVuex from '@openreplay/tracker-vuex/cjs';
@@ -41,45 +45,49 @@ const store = new Vuex.Store({
//...
plugins: [tracker.use(trackerVuex())] // check list of available options below
});
-}`
+}`;
return (
-
- {useIcon ? ![integration]({"/assets/")
}
+ {useIcon ? (
+ 
+ )}
-
+ )}
-
{integrated && (
- {integration.title}
-{integration.subtitle && integration.subtitle}
+
+
{integration.title}
++ {integration.subtitle && integration.subtitle} +
-
+
+
)}
-
+ );
+}
+
+export default observer(SlackChannelList);
diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/index.js b/frontend/app/components/Client/Integrations/SlackChannelList/index.js
index d9709c104..9056062a5 100644
--- a/frontend/app/components/Client/Integrations/SlackChannelList/index.js
+++ b/frontend/app/components/Client/Integrations/SlackChannelList/index.js
@@ -1 +1 @@
-export { default } from './SlackChannelList'
\ No newline at end of file
+export { default } from './SlackChannelList';
diff --git a/frontend/app/components/Client/Integrations/SlackForm.tsx b/frontend/app/components/Client/Integrations/SlackForm.tsx
index 4c7e97209..ecc3487e6 100644
--- a/frontend/app/components/Client/Integrations/SlackForm.tsx
+++ b/frontend/app/components/Client/Integrations/SlackForm.tsx
@@ -1,48 +1,58 @@
import React, { useEffect } from 'react';
-import SlackChannelList from './SlackChannelList/SlackChannelList';
-import SlackAddForm from './SlackAddForm';
import { Icon } from 'UI';
import { Button } from 'antd';
-import { observer } from 'mobx-react-lite'
-import { useStore } from 'App/mstore'
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import SlackAddForm from './SlackAddForm';
+import SlackChannelList from './SlackChannelList/SlackChannelList';
+import { useTranslation } from 'react-i18next';
-const SlackForm = () => {
- const { integrationsStore } = useStore();
- const init = integrationsStore.slack.init;
- const fetchList = integrationsStore.slack.fetchIntegrations;
- const [active, setActive] = React.useState(false);
+function SlackForm() {
+ const { t } = useTranslation();
+ const { integrationsStore } = useStore();
+ const { init } = integrationsStore.slack;
+ const fetchList = integrationsStore.slack.fetchIntegrations;
+ const [active, setActive] = React.useState(false);
- const onEdit = () => {
- setActive(true);
- };
+ const onEdit = () => {
+ setActive(true);
+ };
- const onNew = () => {
- setActive(true);
- init({});
- }
+ const onNew = () => {
+ setActive(true);
+ init({});
+ };
- useEffect(() => {
- void fetchList();
- }, []);
+ useEffect(() => {
+ void fetchList();
+ }, []);
- return (
-
- {useIcon ? ('all');
useEffect(() => {
- const list = integrationsStore.integrations.integratedServices
- .map((item: any) => item.name);
+ const list = integrationsStore.integrations.integratedServices.map(
+ (item: any) => item.name,
+ );
setIntegratedList(list);
}, [storeIntegratedList]);
@@ -86,7 +90,7 @@ function Integrations(props: Props) {
siteId,
onClose: hideModal,
}),
- { right: true, width }
+ { right: true, width },
);
};
@@ -94,7 +98,7 @@ function Integrations(props: Props) {
setActiveFilter(key);
};
- const filteredIntegrations = integrations.filter((cat: any) => {
+ const filteredIntegrations = integrations(t).filter((cat: any) => {
if (activeFilter === 'all') {
return true;
}
@@ -102,7 +106,7 @@ function Integrations(props: Props) {
return cat.key === activeFilter;
});
- const filters = integrations.map((cat: any) => ({
+ const filters = integrations(t).map((cat: any) => ({
key: cat.key,
title: cat.title,
label: cat.title,
@@ -110,7 +114,7 @@ function Integrations(props: Props) {
}));
const allIntegrations = filteredIntegrations.flatMap(
- (cat) => cat.integrations
+ (cat) => cat.integrations,
);
const onChangeSelect = ({ value }: any) => {
@@ -120,8 +124,8 @@ function Integrations(props: Props) {
return (
<>
- );
-}
-
-export default observer(SlackChannelList);
diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.tsx b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.tsx
new file mode 100644
index 000000000..cb138096d
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { NoContent } from 'UI';
+import DocLink from 'Shared/DocLink/DocLink';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
+
+function SlackChannelList(props) {
+ const { t } = useTranslation();
+ const { integrationsStore } = useStore();
+ const { list } = integrationsStore.slack;
+ const { edit } = integrationsStore.slack;
+
+ const onEdit = (instance) => {
+ edit(instance.toData());
+ props.onEdit();
+ };
+
+ return (
+
+
);
}
-export default IntegrationModalCard;
\ No newline at end of file
+export default IntegrationModalCard;
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index b00e5a0b7..5e9026a52 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -28,6 +28,8 @@ import PiniaDoc from './Tracker/PiniaDoc';
import ReduxDoc from './Tracker/ReduxDoc';
import VueDoc from './Tracker/VueDoc';
import ZustandDoc from './Tracker/ZustandDoc';
+import { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
interface Props {
siteId: string;
@@ -35,9 +37,10 @@ interface Props {
}
function Integrations(props: Props) {
+ const { t } = useTranslation();
const { integrationsStore, projectsStore } = useStore();
const initialSiteId = projectsStore.siteId;
- const siteId = integrationsStore.integrations.siteId;
+ const { siteId } = integrationsStore.integrations;
const fetchIntegrationList = integrationsStore.integrations.fetchIntegrations;
const storeIntegratedList = integrationsStore.integrations.list;
const { hideHeader = false } = props;
@@ -46,8 +49,9 @@ function Integrations(props: Props) {
const [activeFilter, setActiveFilter] = useState
+ {useIcon ? (
+ 
+ )}
+ )}
-
{title}
+{title}
{description}
-
- {!hideHeader && Integrations
} />}
+
+ {!hideHeader && {t('Integrations')}
} />}
+
-
diff --git a/frontend/app/components/Client/Integrations/SlackAddForm/index.js b/frontend/app/components/Client/Integrations/SlackAddForm/index.js
index beb10bb6d..33b9a4b2f 100644
--- a/frontend/app/components/Client/Integrations/SlackAddForm/index.js
+++ b/frontend/app/components/Client/Integrations/SlackAddForm/index.js
@@ -1 +1 @@
-export { default } from './SlackAddForm'
\ No newline at end of file
+export { default } from './SlackAddForm';
diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
deleted file mode 100644
index db53d3100..000000000
--- a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { NoContent } from 'UI';
-import DocLink from 'Shared/DocLink/DocLink';
-import { observer } from 'mobx-react-lite'
-import { useStore } from 'App/mstore'
-
-function SlackChannelList(props) {
- const { integrationsStore } = useStore();
- const list = integrationsStore.slack.list;
- const edit = integrationsStore.slack.edit;
-
- const onEdit = (instance) => {
- edit(instance.toData());
- props.onEdit();
- };
-
- return (
-
{allIntegrations.map((integration, i) => (
- cat.integrations.includes(integration)
+ cat.integrations.includes(integration),
)?.title === 'Plugins'
? 500
- : 350
+ : 350,
)
}
hide={
@@ -167,31 +169,34 @@ function Integrations(props: Props) {
}
export default withPageTitle('Integrations - OpenReplay Preferences')(
- observer(Integrations)
+ observer(Integrations),
);
-const integrations = [
+const integrations = (t: TFunction) => [
{
- title: 'Issue Reporting',
+ title: t('Issue Reporting'),
key: 'issue-reporting',
- description:
+ description: t(
'Seamlessly report issues or share issues with your team right from OpenReplay.',
+ ),
isProject: false,
icon: 'exclamation-triangle',
integrations: [
{
- title: 'Jira',
- subtitle:
+ title: t('Jira'),
+ subtitle: t(
'Integrate Jira with OpenReplay to enable the creation of a new ticket directly from a session.',
+ ),
slug: 'jira',
category: 'Errors',
icon: 'integrations/jira',
component:
- Sync your backend errors with sessions replays and see what happened
- front-to-back.
+ {t(
+ 'Sync your backend errors with sessions replays and see what happened front-to-back.',
+ )}
),
integrations: [
{
- title: 'Sentry',
- subtitle:
+ title: t('Sentry'),
+ subtitle: t(
'Integrate Sentry with session replays to seamlessly observe backend errors.',
+ ),
slug: 'sentry',
icon: 'integrations/sentry',
component:
- Plugins capture your application’s store, monitor queries, track
- performance issues and even assist your end user through live sessions.
+ {t(
+ 'Plugins capture your application’s store, monitor queries, track performance issues and even assist your end user through live sessions.',
+ )}
),
- description:
+ description: t(
"Reproduce issues as if they happened in your own browser. Plugins help capture your application's store, HTTP requeets, GraphQL queries, and more.",
+ ),
integrations: [
{
- title: 'Redux',
- subtitle:
+ title: t('Redux'),
+ subtitle: t(
'Capture Redux actions/state and inspect them later on while replaying session recordings.',
+ ),
icon: 'integrations/redux',
component:
);
-};
+}
ProfilerDoc.displayName = 'ProfilerDoc';
diff --git a/frontend/app/components/Client/Integrations/ProfilerDoc/index.js b/frontend/app/components/Client/Integrations/ProfilerDoc/index.js
index 5a3da5d09..3a5655ce7 100644
--- a/frontend/app/components/Client/Integrations/ProfilerDoc/index.js
+++ b/frontend/app/components/Client/Integrations/ProfilerDoc/index.js
@@ -1 +1 @@
-export { default } from './ProfilerDoc'
\ No newline at end of file
+export { default } from './ProfilerDoc';
diff --git a/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js b/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.tsx
similarity index 62%
rename from frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js
rename to frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.tsx
index 79feddbc3..74203a900 100644
--- a/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.js
+++ b/frontend/app/components/Client/Integrations/SlackAddForm/SlackAddForm.tsx
@@ -1,25 +1,24 @@
import React from 'react';
import { Form, Input, Message, confirm } from 'UI';
-import { Button } from 'antd'
-import { observer } from 'mobx-react-lite'
-import { useStore } from 'App/mstore'
+import { Button } from 'antd';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
function SlackAddForm(props) {
+ const { t } = useTranslation();
const { onClose } = props;
const { integrationsStore } = useStore();
- const instance = integrationsStore.slack.instance;
+ const { instance } = integrationsStore.slack;
const saving = integrationsStore.slack.loading;
- const errors = integrationsStore.slack.errors;
- const edit = integrationsStore.slack.edit;
+ const { errors } = integrationsStore.slack;
+ const { edit } = integrationsStore.slack;
const onSave = integrationsStore.slack.saveIntegration;
- const update = integrationsStore.slack.update;
- const init = integrationsStore.slack.init;
+ const { update } = integrationsStore.slack;
+ const { init } = integrationsStore.slack;
const onRemove = integrationsStore.slack.removeInt;
-
- React.useEffect(() => {
- return () => init({})
- }, [])
+ React.useEffect(() => () => init({}), []);
const save = () => {
if (instance.exists()) {
@@ -32,9 +31,11 @@ function SlackAddForm(props) {
const remove = async (id) => {
if (
await confirm({
- header: 'Confirm',
- confirmButton: 'Yes, delete',
- confirmation: `Are you sure you want to permanently delete this channel?`,
+ header: t('Confirm'),
+ confirmButton: t('Yes, delete'),
+ confirmation: t(
+ 'Are you sure you want to permanently delete this channel?',
+ ),
})
) {
await onRemove(id);
@@ -43,27 +44,27 @@ function SlackAddForm(props) {
};
const write = ({ target: { name, value } }) => edit({ [name]: value });
-
+
return (
-
- );
-};
-
-JiraForm.displayName = 'JiraForm';
-
-export default JiraForm;
diff --git a/frontend/app/components/Client/Integrations/JiraForm/JiraForm.tsx b/frontend/app/components/Client/Integrations/JiraForm/JiraForm.tsx
new file mode 100644
index 000000000..5e10ff540
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/JiraForm/JiraForm.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import DocLink from 'Shared/DocLink/DocLink';
+import { useModal } from 'App/components/Modal';
+import IntegrationModalCard from 'Components/Client/Integrations/IntegrationModalCard';
+import IntegrationForm from '../IntegrationForm';
+import { useTranslation } from 'react-i18next';
+
+function JiraForm(props) {
+ const { t } = useTranslation();
+ const { hideModal } = useModal();
+ return (
+
-
-
-
- How it works?
- -
-
- Create a new API token -
- Enter the token below -
-
-
+
+ );
+}
+
+JiraForm.displayName = 'JiraForm';
+
+export default JiraForm;
diff --git a/frontend/app/components/Client/Integrations/JiraForm/index.js b/frontend/app/components/Client/Integrations/JiraForm/index.js
index d914b3234..8f007bd52 100644
--- a/frontend/app/components/Client/Integrations/JiraForm/index.js
+++ b/frontend/app/components/Client/Integrations/JiraForm/index.js
@@ -1 +1 @@
-export { default } from './JiraForm';
\ No newline at end of file
+export { default } from './JiraForm';
diff --git a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.tsx
similarity index 58%
rename from frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
rename to frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.tsx
index 171224871..eb6013a7c 100644
--- a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
+++ b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.tsx
@@ -1,16 +1,20 @@
-import { useStore } from "App/mstore";
+import { useStore } from 'App/mstore';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { CodeBlock } from 'UI';
import DocLink from 'Shared/DocLink/DocLink';
import ToggleContent from 'Shared/ToggleContent';
+import { useTranslation } from 'react-i18next';
-const ProfilerDoc = () => {
+function ProfilerDoc() {
+ const { t } = useTranslation();
const { integrationsStore, projectsStore } = useStore();
const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
const usage = `import OpenReplay from '@openreplay/tracker';
import trackerProfiler from '@openreplay/tracker-profiler';
@@ -48,43 +52,45 @@ const fn = profiler('call_name')(() => {
className="bg-white h-screen overflow-y-auto"
style={{ width: '500px' }}
>
-
+
+
+ {t('How it works?')}
+ -
+
- {t('Create a new API token')} +
- {t('Enter the token below')} +
+
+ Profiler
+{t('Profiler')}
- The profiler plugin allows you to measure your JS functions'
- performance and capture both arguments and result for each function
- call.
+ {t(
+ 'The profiler plugin allows you to measure your JS functions performance and capture both arguments and result for each function call',
+ )}
+ .
- Installation
+ {t('Installation')}
Usage
+ {t('Usage')}
- Initialize the tracker and load the plugin into it. Then decorate any - function inside your code with the generated function. + {t( + 'Initialize the tracker and load the plugin into it. Then decorate any function inside your code with the generated function.', + )}
-Usage
+ {t('Usage')}
-
-
- }
- size="small"
- show={list.length === 0}
- >
- {list.map((c) => (
-
- Integrate Slack with OpenReplay and share insights with the rest of the team, directly from the recording page.
-
- onEdit(c)}
- >
-
- ))}
-
-
-
- {c.name}
- {c.endpoint}
-
+
+
+ }
+ size="small"
+ show={list.length === 0}
+ >
+ {list.map((c) => (
+
+ {t('Integrate Slack with OpenReplay and share insights with the rest of the team, directly from the recording page.')}
+
+ onEdit(c)}
+ >
+
+ ))}
+
+
+
+ {c.name}
+
+ {c.endpoint}
+
+
- {active && (
-
diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
index 131a404c8..ce7dee91d 100644
--- a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
@@ -5,11 +5,13 @@ import { useStore } from 'App/mstore';
import { NoContent } from 'UI';
import DocLink from 'Shared/DocLink/DocLink';
+import { useTranslation } from 'react-i18next';
function TeamsChannelList(props: { onEdit: () => void }) {
+ const { t } = useTranslation();
const { integrationsStore } = useStore();
- const list = integrationsStore.msteams.list;
- const edit = integrationsStore.msteams.edit;
+ const { list } = integrationsStore.msteams;
+ const { edit } = integrationsStore.msteams;
const onEdit = (instance: Record
- setActive(false)} />
-
- )}
-
-
+ return (
+
-
- Slack
- } onClick={onNew}/> -
+ {active && (
+
+ );
+}
SlackForm.displayName = 'SlackForm';
-export default observer(SlackForm);
\ No newline at end of file
+export default observer(SlackForm);
diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
index 9341b08ef..8061740a8 100644
--- a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
@@ -3,26 +3,26 @@ import React from 'react';
import { useStore } from 'App/mstore';
import { confirm, Form, Input, Message } from 'UI';
-import { Button } from 'antd'
+import { Button } from 'antd';
+import { useTranslation } from 'react-i18next';
interface Props {
onClose: () => void;
}
function TeamsAddForm({ onClose }: Props) {
+ const { t } = useTranslation();
const { integrationsStore } = useStore();
- const instance = integrationsStore.msteams.instance;
+ const { instance } = integrationsStore.msteams;
const saving = integrationsStore.msteams.loading;
- const errors = integrationsStore.msteams.errors;
- const edit = integrationsStore.msteams.edit;
+ const { errors } = integrationsStore.msteams;
+ const { edit } = integrationsStore.msteams;
const onSave = integrationsStore.msteams.saveIntegration;
- const init = integrationsStore.msteams.init;
+ const { init } = integrationsStore.msteams;
const onRemove = integrationsStore.msteams.removeInt;
- const update = integrationsStore.msteams.update;
+ const { update } = integrationsStore.msteams;
- React.useEffect(() => {
- return () => init({});
- }, []);
+ React.useEffect(() => () => init({}), []);
const save = () => {
if (instance?.exists()) {
@@ -39,9 +39,11 @@ function TeamsAddForm({ onClose }: Props) {
const remove = async (id: string) => {
if (
await confirm({
- header: 'Confirm',
- confirmButton: 'Yes, delete',
- confirmation: `Are you sure you want to permanently delete this channel?`
+ header: t('Confirm'),
+ confirmButton: t('Yes, delete'),
+ confirmation: t(
+ 'Are you sure you want to permanently delete this channel?',
+ ),
})
) {
void onRemove(id).then(onClose);
@@ -49,8 +51,8 @@ function TeamsAddForm({ onClose }: Props) {
};
const write = ({
- target: { name, value }
- }: {
+ target: { name, value },
+ }: {
target: { name: string; value: string };
}) => edit({ [name]: value });
@@ -58,22 +60,22 @@ function TeamsAddForm({ onClose }: Props) {
+ setActive(false)} />
- );
-};
+ )}
+
+
+
+
+ {t('Slack')}
+ } + onClick={onNew} + /> +
- Integrate MS Teams with OpenReplay and share insights with the
- rest of the team, directly from the recording page.
+ {t('Integrate MS Teams with OpenReplay and share insights with the rest of the team, directly from the recording page.')}
- {active && (
- )); // check list of available options below
-tracker.start();
-`
-
- const mobxUsageCjs = `import OpenReplay from '@openreplay/tracker/cjs';
-import trackerMobX from '@openreplay/tracker-mobx/cjs';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-tracker.use(trackerMobX()); // check list of available options below
-//...
-function SomeFunctionalComponent() {
- useEffect(() => { // or componentDidMount in case of Class approach
- tracker.start()
- }, [])
-}`
-
- return (
- )); // check list of available options below
+tracker.start();
+`;
+
+ const mobxUsageCjs = `import OpenReplay from '@openreplay/tracker/cjs';
+import trackerMobX from '@openreplay/tracker-mobx/cjs';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+tracker.use(trackerMobX()); // check list of available options below
+//...
+function SomeFunctionalComponent() {
+ useEffect(() => { // or componentDidMount in case of Class approach
+ tracker.start()
+ }, [])
+}`;
+
+ return (
+ ))]; // check list of available options below
-//...
-@NgModule({
- imports: [StoreModule.forRoot(reducers, { metaReducers })]
-})
-export class AppModule {}`
- const usageCjs = `import { StoreModule } from '@ngrx/store';
-import { reducers } from './reducers';
-import OpenReplay from '@openreplay/tracker/cjs';
-import trackerNgRx from '@openreplay/tracker-ngrx/cjs';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-//...
-function SomeFunctionalComponent() {
- useEffect(() => { // or componentDidMount in case of Class approach
- tracker.start()
- }, [])
-//...
-const metaReducers = [tracker.use(trackerNgRx())]; // check list of available options below
-//...
- @NgModule({
- imports: [StoreModule.forRoot(reducers, { metaReducers })]
- })
- export class AppModule {}
-}`
- return (
- ))]; // check list of available options below
+//...
+@NgModule({
+ imports: [StoreModule.forRoot(reducers, { metaReducers })]
+})
+export class AppModule {}`;
+ const usageCjs = `import { StoreModule } from '@ngrx/store';
+import { reducers } from './reducers';
+import OpenReplay from '@openreplay/tracker/cjs';
+import trackerNgRx from '@openreplay/tracker-ngrx/cjs';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+//...
+function SomeFunctionalComponent() {
+ useEffect(() => { // or componentDidMount in case of Class approach
+ tracker.start()
+ }, [])
+//...
+const metaReducers = [tracker.use(trackerNgRx())]; // check list of available options below
+//...
+ @NgModule({
+ imports: [StoreModule.forRoot(reducers, { metaReducers })]
+ })
+ export class AppModule {}
+}`;
+ return (
+
);
-};
+}
PiniaDoc.displayName = 'PiniaDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/index.js
index 730c76beb..95010dbc2 100644
--- a/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/index.js
@@ -1 +1 @@
-export { default } from './PiniaDoc'
+export { default } from './PiniaDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.js b/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.js
deleted file mode 100644
index 5c69bec47..000000000
--- a/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useStore } from "App/mstore";
-import React from 'react';
-import { CodeBlock } from 'UI'
-import ToggleContent from 'Components/shared/ToggleContent';
-import DocLink from 'Shared/DocLink/DocLink';
-import { observer } from 'mobx-react-lite'
-
-const ReduxDoc = () => {
- const { integrationsStore, projectsStore } = useStore();
- const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
-
- const usage = `import { applyMiddleware, createStore } from 'redux';
-import OpenReplay from '@openreplay/tracker';
-import trackerRedux from '@openreplay/tracker-redux';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-tracker.start()
-//...
-const store = createStore(
- reducer,
- applyMiddleware(tracker.use(trackerRedux(
- setActive(false)} />
-
- )}
-
-
+ return (
+
-
- Microsoft Teams
- } type="text" onClick={onNew}/> -
+ {active && (
+
+ );
+}
MSTeams.displayName = 'MSTeams';
diff --git a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistDoc.js b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistDoc.js
deleted file mode 100644
index 1165af6ec..000000000
--- a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistDoc.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useStore } from "App/mstore";
-import React from 'react';
-import DocLink from 'Shared/DocLink/DocLink';
-import AssistScript from './AssistScript';
-import AssistNpm from './AssistNpm';
-import { Tabs, CodeBlock } from 'UI';
-import { useState } from 'react';
-import { observer } from 'mobx-react-lite'
-
-const NPM = 'NPM';
-const SCRIPT = 'SCRIPT';
-const TABS = [
- { key: SCRIPT, text: SCRIPT },
- { key: NPM, text: NPM },
-];
-
-const AssistDoc = () => {
- const { integrationsStore, projectsStore } = useStore();
- const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
- const [activeTab, setActiveTab] = useState(SCRIPT);
-
- const renderActiveTab = () => {
- switch (activeTab) {
- case SCRIPT:
- return
+ setActive(false)} />
- );
-};
+ )}
+
+
+
+
+ {t('Microsoft Teams')}
+ } + type="text" + onClick={onNew} + /> +
-
- );
-};
-
-AssistDoc.displayName = 'AssistDoc';
-
-export default observer(AssistDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistDoc.tsx
new file mode 100644
index 000000000..c2b1f6d2b
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistDoc.tsx
@@ -0,0 +1,75 @@
+import { useStore } from 'App/mstore';
+import React, { useState } from 'react';
+import DocLink from 'Shared/DocLink/DocLink';
+import { Tabs, CodeBlock } from 'UI';
+import { observer } from 'mobx-react-lite';
+import AssistScript from './AssistScript';
+import AssistNpm from './AssistNpm';
+import { useTranslation } from 'react-i18next';
+
+const NPM = 'NPM';
+const SCRIPT = 'SCRIPT';
+const TABS = [
+ { key: SCRIPT, text: SCRIPT },
+ { key: NPM, text: NPM },
+];
+
+function AssistDoc() {
+ const { t } = useTranslation();
+ const { integrationsStore, projectsStore } = useStore();
+ const sites = projectsStore.list;
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
+ const [activeTab, setActiveTab] = useState(SCRIPT);
+
+ const renderActiveTab = () => {
+ switch (activeTab) {
+ case SCRIPT:
+ return Assist
-
- setActiveTab(tab)} />
-
-
-
- OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them
- without requiring any 3rd-party screen sharing software.
-
-
- Installation
- Usage
- {renderActiveTab()}
-
-
+
+ );
+}
+
+AssistDoc.displayName = 'AssistDoc';
+
+export default observer(AssistDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx
index 00fe1cb26..30893ba95 100644
--- a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx
+++ b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx
@@ -3,8 +3,10 @@ import React from 'react';
import { CodeBlock } from 'UI';
import ToggleContent from 'Shared/ToggleContent';
+import { useTranslation } from 'react-i18next';
function AssistNpm(props) {
+ const { t } = useTranslation();
const usage = `import OpenReplay from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
const tracker = new OpenReplay({
@@ -56,21 +58,23 @@ type ButtonOptions = HTMLButtonElement | string | {
innerHTML?: string, // to pass an svg string or text
style?: StyleObject, // style object (i.e {color: 'red', borderRadius: '10px'})
}
-`
+`;
return (
{t('Assist')}
+
+ setActiveTab(tab)}
+ />
+
+
+
+ {t(
+ 'OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.',
+ )}
+
+
+ {t('Installation')}
+ {t('Usage')}
+ {renderActiveTab()}
+
+ - Initialize the tracker then load the @openreplay/tracker-assist plugin. + {t( + 'Initialize the tracker then load the @openreplay/tracker-assist plugin.', + )}
-Usage
+ {t('Usage')}
Options
+ {t('Options')}
-
);
}
-export default AssistScript;
\ No newline at end of file
+export default AssistScript;
diff --git a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/index.js
index 6086d5389..8d1c447e9 100644
--- a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/index.js
@@ -1 +1 @@
-export { default } from './AssistDoc'
\ No newline at end of file
+export { default } from './AssistDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.js b/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.js
deleted file mode 100644
index 889ecfd1f..000000000
--- a/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useStore } from "App/mstore";
-import React from 'react';
-import { CodeBlock } from "UI";
-import DocLink from 'Shared/DocLink/DocLink';
-import ToggleContent from 'Shared/ToggleContent';
-import { observer } from 'mobx-react-lite'
-
-const GraphQLDoc = () => {
- const { integrationsStore, projectsStore } = useStore();
- const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
- const usage = `import OpenReplay from '@openreplay/tracker';
-import trackerGraphQL from '@openreplay/tracker-graphql';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-tracker.start()
-//...
-export const recordGraphQL = tracker.use(trackerGraphQL());`
- const usageCjs = `import OpenReplay from '@openreplay/tracker/cjs';
-import trackerGraphQL from '@openreplay/tracker-graphql/cjs';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-//...
-function SomeFunctionalComponent() {
- useEffect(() => { // or componentDidMount in case of Class approach
- tracker.start()
- }, [])
-}
-//...
-export const recordGraphQL = tracker.use(trackerGraphQL());`
- return (
- If your OpenReplay tracker is set up using the JS snippet, then simply replace the .../openreplay.js occurrence with .../openreplay-assist.js. Below is an example of how the script should like after the change:
++ {t( + 'If your OpenReplay tracker is set up using the JS snippet, then simply replace the .../openreplay.js occurrence with .../openreplay-assist.js. Below is an example of how the script should like after the change:', + )} +
-
-
- );
-};
-
-GraphQLDoc.displayName = 'GraphQLDoc';
-
-export default observer(GraphQLDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx
new file mode 100644
index 000000000..e47ab0c4a
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx
@@ -0,0 +1,91 @@
+import { useStore } from 'App/mstore';
+import React from 'react';
+import { CodeBlock } from 'UI';
+import DocLink from 'Shared/DocLink/DocLink';
+import ToggleContent from 'Shared/ToggleContent';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+
+function GraphQLDoc() {
+ const { t } = useTranslation();
+ const { integrationsStore, projectsStore } = useStore();
+ const sites = projectsStore.list;
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
+ const usage = `import OpenReplay from '@openreplay/tracker';
+import trackerGraphQL from '@openreplay/tracker-graphql';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+tracker.start()
+//...
+export const recordGraphQL = tracker.use(trackerGraphQL());`;
+ const usageCjs = `import OpenReplay from '@openreplay/tracker/cjs';
+import trackerGraphQL from '@openreplay/tracker-graphql/cjs';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+//...
+function SomeFunctionalComponent() {
+ useEffect(() => { // or componentDidMount in case of Class approach
+ tracker.start()
+ }, [])
+}
+//...
+export const recordGraphQL = tracker.use(trackerGraphQL());`;
+ return (
+ GraphQL
-
-
- - This plugin allows you to capture GraphQL requests and inspect them later on while replaying session recordings. This is very - useful for understanding and fixing issues. -
-GraphQL plugin is compatible with Apollo and Relay implementations.
- -Installation
- Usage
- - The plugin call will return the function, which receives four variables operationKind, operationName, variables and result. It - returns result without changes. -
- - - -
+
+ );
+}
+
+GraphQLDoc.displayName = 'GraphQLDoc';
+
+export default observer(GraphQLDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/index.js
index 6fe38bba7..f7317d7d4 100644
--- a/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/index.js
@@ -1 +1 @@
-export { default } from './GraphQLDoc'
\ No newline at end of file
+export { default } from './GraphQLDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.js b/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.js
deleted file mode 100644
index 2541aae2b..000000000
--- a/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import ToggleContent from 'Shared/ToggleContent';
-import DocLink from 'Shared/DocLink/DocLink';
-import { CodeBlock } from "UI";
-import { useStore } from 'App/mstore';
-import { observer } from 'mobx-react-lite';
-
-const MobxDoc = () => {
- const { integrationsStore, projectsStore } = useStore();
- const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
-
- const mobxUsage = `import OpenReplay from '@openreplay/tracker';
-import trackerMobX from '@openreplay/tracker-mobx';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-tracker.use(trackerMobX({t('GraphQL')}
+
+
+ + {t( + 'This plugin allows you to capture GraphQL requests and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.', + )} +
++ {t( + 'GraphQL plugin is compatible with Apollo and Relay implementations.', + )} +
+ +{t('Installation')}
+ {t('Usage')}
+ + {t( + 'The plugin call will return the function, which receives four variables operationKind, operationName, variables and result. It returns result without changes.', + )} +
+ + + +
-
- );
-};
-
-MobxDoc.displayName = 'MobxDoc';
-
-export default observer(MobxDoc)
diff --git a/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx
new file mode 100644
index 000000000..e31a25b86
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import ToggleContent from 'Shared/ToggleContent';
+import DocLink from 'Shared/DocLink/DocLink';
+import { CodeBlock } from 'UI';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+
+function MobxDoc() {
+ const { t } = useTranslation();
+ const { integrationsStore, projectsStore } = useStore();
+ const sites = projectsStore.list;
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
+
+ const mobxUsage = `import OpenReplay from '@openreplay/tracker';
+import trackerMobX from '@openreplay/tracker-mobx';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+tracker.use(trackerMobX(MobX
-
-
-
- This plugin allows you to capture MobX events and inspect them later on while replaying session recordings. This is very useful
- for understanding and fixing issues.
-
-
- Installation
- Usage
- - Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated middleware into your Redux - chain. -
- - -Usage
-
+
+ );
+}
+
+MobxDoc.displayName = 'MobxDoc';
+
+export default observer(MobxDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/MobxDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/MobxDoc/index.js
index 51b6dedae..ed631b7b7 100644
--- a/frontend/app/components/Client/Integrations/Tracker/MobxDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/MobxDoc/index.js
@@ -1 +1 @@
-export { default } from './MobxDoc'
\ No newline at end of file
+export { default } from './MobxDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.js b/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.js
deleted file mode 100644
index f960918b6..000000000
--- a/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useStore } from "App/mstore";
-import React from 'react';
-import { CodeBlock } from "UI";
-import ToggleContent from 'Shared/ToggleContent';
-import DocLink from 'Shared/DocLink/DocLink';
-import { observer } from 'mobx-react-lite'
-
-const NgRxDoc = () => {
- const { integrationsStore, projectsStore } = useStore();
- const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
- const usage = `import { StoreModule } from '@ngrx/store';
-import { reducers } from './reducers';
-import OpenReplay from '@openreplay/tracker';
-import trackerNgRx from '@openreplay/tracker-ngrx';
-//...
-const tracker = new OpenReplay({
- projectKey: '${projectKey}'
-});
-tracker.start()
-//...
-const metaReducers = [tracker.use(trackerNgRx({t('MobX')}
+
+
+
+ {t(
+ 'This plugin allows you to capture MobX events and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.',
+ )}
+
+
+ {t('Installation')}
+ {t('Usage')}
+ + {t( + 'Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated middleware into your Redux chain.', + )} +
+ + +{t('Usage')}
+
-
- );
-};
-
-NgRxDoc.displayName = 'NgRxDoc';
-
-export default observer(NgRxDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx
new file mode 100644
index 000000000..d1401899f
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx
@@ -0,0 +1,100 @@
+import { useStore } from 'App/mstore';
+import React from 'react';
+import { CodeBlock } from 'UI';
+import ToggleContent from 'Shared/ToggleContent';
+import DocLink from 'Shared/DocLink/DocLink';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+
+function NgRxDoc() {
+ const { t } = useTranslation();
+ const { integrationsStore, projectsStore } = useStore();
+ const sites = projectsStore.list;
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
+ const usage = `import { StoreModule } from '@ngrx/store';
+import { reducers } from './reducers';
+import OpenReplay from '@openreplay/tracker';
+import trackerNgRx from '@openreplay/tracker-ngrx';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+tracker.start()
+//...
+const metaReducers = [tracker.use(trackerNgRx(NgRx
-
-
-
- This plugin allows you to capture NgRx actions/state and inspect them later on while replaying session recordings. This is very
- useful for understanding and fixing issues.
-
-
- Installation
- Usage
- Add the generated meta-reducer into your imports. See NgRx documentation for more details.
- - -Usage
-
+
+ );
+}
+
+NgRxDoc.displayName = 'NgRxDoc';
+
+export default observer(NgRxDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/index.js
index 65f97eed5..12044446b 100644
--- a/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/index.js
@@ -1 +1 @@
-export { default } from './NgRxDoc'
\ No newline at end of file
+export { default } from './NgRxDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx
index b63b50fba..8c18077f2 100644
--- a/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx
+++ b/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx
@@ -6,11 +6,13 @@ import ToggleContent from 'Components/shared/ToggleContent';
import { CodeBlock } from 'UI';
import DocLink from 'Shared/DocLink/DocLink';
+import { useTranslation } from 'react-i18next';
-const PiniaDoc = () => {
+function PiniaDoc() {
+ const { t } = useTranslation();
const { integrationsStore, projectsStore } = useStore();
const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId;
+ const { siteId } = integrationsStore.integrations;
const projectKey = siteId
? sites.find((site) => site.id === siteId)?.projectKey
: sites[0]?.projectKey;
@@ -67,43 +69,43 @@ piniaStorePlugin(examplePiniaStore)
className="bg-white h-screen overflow-y-auto"
style={{ width: '500px' }}
>
- {t('NgRx')}
+
+
+
+ {t(
+ 'This plugin allows you to capture NgRx actions/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.',
+ )}
+
+
+ {t('Installation')}
+ {t('Usage')}
+ + {t( + 'Add the generated meta-reducer into your imports. See NgRx documentation for more details.', + )} +
+ + +{t('Usage')}
+ VueX
+{t('Pinia')}
- This plugin allows you to capture Pinia mutations + state and inspect
- them later on while replaying session recordings. This is very useful
- for understanding and fixing issues.
+ {t(
+ 'This plugin allows you to capture Pinia mutations + state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.',
+ )}
- Installation
+ {t('Installation')}
Usage
+ {t('Usage')}
- Initialize the @openreplay/tracker package as usual and load the - plugin into it. Then put the generated plugin into your plugins field - of your store. + {t( + 'Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated plugin into your plugins field of your store.', + )}
-
- );
-};
-
-ReduxDoc.displayName = 'ReduxDoc';
-
-export default observer(ReduxDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx
new file mode 100644
index 000000000..35c2ad37a
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx
@@ -0,0 +1,94 @@
+import { useStore } from 'App/mstore';
+import React from 'react';
+import { CodeBlock } from 'UI';
+import ToggleContent from 'Components/shared/ToggleContent';
+import DocLink from 'Shared/DocLink/DocLink';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+
+function ReduxDoc() {
+ const { t } = useTranslation();
+ const { integrationsStore, projectsStore } = useStore();
+ const sites = projectsStore.list;
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
+
+ const usage = `import { applyMiddleware, createStore } from 'redux';
+import OpenReplay from '@openreplay/tracker';
+import trackerRedux from '@openreplay/tracker-redux';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+tracker.start()
+//...
+const store = createStore(
+ reducer,
+ applyMiddleware(tracker.use(trackerRedux(Redux
- -
-
-
- This plugin allows you to capture Redux actions/state and inspect them later on while replaying session recordings. This is very
- useful for understanding and fixing issues.
-
-
- Installation
- Usage
- Initialize the tracker then put the generated middleware into your Redux chain.
- -
+
+ );
+}
+
+ReduxDoc.displayName = 'ReduxDoc';
+
+export default observer(ReduxDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/index.js
index 3c6245bd8..76c8271d4 100644
--- a/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/index.js
@@ -1 +1 @@
-export { default } from './ReduxDoc'
\ No newline at end of file
+export { default } from './ReduxDoc.tsx';
diff --git a/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.js b/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.tsx
similarity index 52%
rename from frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.js
rename to frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.tsx
index f9e23c67a..b32e9f1f4 100644
--- a/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.js
+++ b/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.tsx
@@ -1,15 +1,19 @@
-import { useStore } from "App/mstore";
+import { useStore } from 'App/mstore';
import React from 'react';
-import { CodeBlock } from "UI";
+import { CodeBlock } from 'UI';
import ToggleContent from 'Components/shared/ToggleContent';
import DocLink from 'Shared/DocLink/DocLink';
import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
-const VueDoc = () => {
+function VueDoc() {
+ const { t } = useTranslation();
const { integrationsStore, projectsStore } = useStore();
const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
const usage = `import Vuex from 'vuex'
import OpenReplay from '@openreplay/tracker';
@@ -23,7 +27,7 @@ tracker.start()
const store = new Vuex.Store({
//...
plugins: [tracker.use(trackerVuex({t('Redux')}
+ +
+
+
+ {t(
+ 'This plugin allows you to capture Redux actions/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.',
+ )}
+
+
+ {t('Installation')}
+ {t('Usage')}
+ + {t( + 'Initialize the tracker then put the generated middleware into your Redux chain.', + )} +
+ +
- = {
export async function getIntegrationData(
name: ServiceName,
- projectId: string
+ projectId: string,
): Promise {
const r = await client.get(
- `/integrations/v1/integrations/${name}/${projectId}`
+ `/integrations/v1/integrations/${name}/${projectId}`,
);
return r.json();
}
@@ -23,7 +23,7 @@ export async function getIntegrationData(
export function useIntegration(
name: ServiceName,
projectId: string,
- initialValues: T
+ initialValues: T,
) {
const { data, isPending } = useQuery({
queryKey: ['integrationData', name],
@@ -36,12 +36,12 @@ export function useIntegration(
},
initialData: initialValues,
retry: (failureCount, error) => {
- const status = error.status || error.response.status
+ const status = error.status || error.response.status;
if (status === 404) {
return false;
}
return failureCount < 4;
- }
+ },
});
const saveMutation = useMutation({
@@ -72,13 +72,13 @@ export async function saveIntegration(
name: string,
data: T,
projectId: string,
- exists?: boolean
+ exists?: boolean,
) {
const method = exists ? 'patch' : 'post';
try {
const r = await client[method](
`/integrations/v1/integrations/${name}/${projectId}`,
- { data }
+ { data },
);
if (r.ok) {
toast.success(`${name} integration saved`);
@@ -99,7 +99,7 @@ export async function saveIntegration(
export async function removeIntegration(name: string, projectId: string) {
try {
const r = await client.delete(
- `/integrations/v1/integrations/${name}/${projectId}`
+ `/integrations/v1/integrations/${name}/${projectId}`,
);
if (r.ok) {
toast.success(`${name} integration removed`);
diff --git a/frontend/app/components/Client/Integrations/index.js b/frontend/app/components/Client/Integrations/index.js
index 1a6b7f6cb..033519dfa 100644
--- a/frontend/app/components/Client/Integrations/index.js
+++ b/frontend/app/components/Client/Integrations/index.js
@@ -1 +1 @@
-export { default } from './Integrations';
\ No newline at end of file
+export { default } from './Integrations';
diff --git a/frontend/app/components/Client/Modules/ModuleCard.tsx b/frontend/app/components/Client/Modules/ModuleCard.tsx
index f6d6cadc6..72437062a 100644
--- a/frontend/app/components/Client/Modules/ModuleCard.tsx
+++ b/frontend/app/components/Client/Modules/ModuleCard.tsx
@@ -3,7 +3,6 @@ import { Icon } from 'UI';
import { Switch } from 'antd';
import { Module } from 'Components/Client/Modules/index';
-
interface Props {
module: Module;
onToggle: (module: Module) => void;
@@ -12,22 +11,26 @@ interface Props {
function ModuleCard(props: Props) {
const { module } = props;
return (
-
VueX
+
+
);
-};
+}
VueDoc.displayName = 'VueDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/VueDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/VueDoc/index.js
index 555e8acfb..b50d6d1dd 100644
--- a/frontend/app/components/Client/Integrations/Tracker/VueDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/VueDoc/index.js
@@ -1 +1 @@
-export { default } from './VueDoc'
\ No newline at end of file
+export { default } from './VueDoc';
diff --git a/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.js b/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.js
deleted file mode 100644
index eb7dcd091..000000000
--- a/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useStore } from "App/mstore";
-import React from 'react';
-import { CodeBlock } from "UI";
-import ToggleContent from 'Components//shared/ToggleContent';
-import DocLink from 'Shared/DocLink/DocLink';
-import { observer } from 'mobx-react-lite'
-
-const ZustandDoc = (props) => {
- const { integrationsStore, projectsStore } = useStore();
- const sites = projectsStore.list;
- const siteId = integrationsStore.integrations.siteId
- const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey
-
- const usage = `import create from "zustand";
-import Tracker from '@openreplay/tracker';
-import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand';
-
-
-const tracker = new Tracker({
- projectKey: ${projectKey},
-});
-
-// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
-// cast type to new one
-// but this seems to not be required and everything is working as is
-const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
-
-
-const useBearStore = create(
- zustandPlugin((set: any) => ({
- bears: 0,
- increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
- removeAllBears: () => set({ bears: 0 }),
- }),
- // store name is optional
- // and is randomly generated if undefined
- 'bear_store'
- )
-)
-`
- const usageCjs =`import create from "zustand";
-import Tracker from '@openreplay/tracker/cjs';
-import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand/cjs';
-
-
-const tracker = new Tracker({
- projectKey: ${projectKey},
-});
-
-// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
-// cast type to new one
-// but this seems to not be required and everything is working as is
-const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
-
-
-const useBearStore = create(
- zustandPlugin((set: any) => ({
- bears: 0,
- increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
- removeAllBears: () => set({ bears: 0 }),
- }),
- // store name is optional
- // and is randomly generated if undefined
- 'bear_store'
- )
-)`
- return (
- {t('VueX')}
- This plugin allows you to capture VueX mutations/state and inspect them later on while
- replaying session recordings. This is very useful for understanding and fixing issues.
+ {t(
+ 'This plugin allows you to capture VueX mutations/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.',
+ )}
- Installation
- {t('Installation')}
+ Usage
+ {t('Usage')}
- Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put - the generated plugin into your plugins field of your store. + {t( + 'Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated plugin into your plugins field of your store.', + )}
-
- );
-};
-
-ZustandDoc.displayName = 'ZustandDoc';
-
-export default observer(ZustandDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.tsx
new file mode 100644
index 000000000..b25f40dd6
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.tsx
@@ -0,0 +1,116 @@
+import { useStore } from 'App/mstore';
+import React from 'react';
+import { CodeBlock } from 'UI';
+import ToggleContent from 'Components//shared/ToggleContent';
+import DocLink from 'Shared/DocLink/DocLink';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+
+function ZustandDoc(props) {
+ const { t } = useTranslation();
+ const { integrationsStore, projectsStore } = useStore();
+ const sites = projectsStore.list;
+ const { siteId } = integrationsStore.integrations;
+ const projectKey = siteId
+ ? sites.find((site) => site.id === siteId)?.projectKey
+ : sites[0]?.projectKey;
+
+ const usage = `import create from "zustand";
+import Tracker from '@openreplay/tracker';
+import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand';
+
+
+const tracker = new Tracker({
+ projectKey: ${projectKey},
+});
+
+// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
+// cast type to new one
+// but this seems to not be required and everything is working as is
+const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
+
+
+const useBearStore = create(
+ zustandPlugin((set: any) => ({
+ bears: 0,
+ increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
+ removeAllBears: () => set({ bears: 0 }),
+ }),
+ // store name is optional
+ // and is randomly generated if undefined
+ 'bear_store'
+ )
+)
+`;
+ const usageCjs = `import create from "zustand";
+import Tracker from '@openreplay/tracker/cjs';
+import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand/cjs';
+
+
+const tracker = new Tracker({
+ projectKey: ${projectKey},
+});
+
+// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
+// cast type to new one
+// but this seems to not be required and everything is working as is
+const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
+
+
+const useBearStore = create(
+ zustandPlugin((set: any) => ({
+ bears: 0,
+ increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
+ removeAllBears: () => set({ bears: 0 }),
+ }),
+ // store name is optional
+ // and is randomly generated if undefined
+ 'bear_store'
+ )
+)`;
+ return (
+ Zustand
-
-
-
- This plugin allows you to capture Zustand mutations/state and inspect them later on while replaying session recordings. This is very
- useful for understanding and fixing issues.
-
-
- Installation
- Usage
- - Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated plugin into your plugins - field of your store. -
- - -
+
+ );
+}
+
+ZustandDoc.displayName = 'ZustandDoc';
+
+export default observer(ZustandDoc);
diff --git a/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/index.js b/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/index.js
index f7061eb7a..d0e1674b3 100644
--- a/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/index.js
+++ b/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/index.js
@@ -1 +1 @@
-export { default } from './ZustandDoc'
+export { default } from './ZustandDoc';
diff --git a/frontend/app/components/Client/Integrations/apiMethods.ts b/frontend/app/components/Client/Integrations/apiMethods.ts
index 3924a068b..6d70fdd94 100644
--- a/frontend/app/components/Client/Integrations/apiMethods.ts
+++ b/frontend/app/components/Client/Integrations/apiMethods.ts
@@ -12,10 +12,10 @@ export const serviceNames: Record{t('Zustand')}
+
+
+
+ {t(
+ 'This plugin allows you to capture Zustand mutations/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.',
+ )}
+
+
+ {t('Installation')}
+ {t('Usage')}
+ + {t( + 'Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated plugin into your plugins field of your store.', + )} +
+ + +
-
-
+
+
-
-
- ([]);
@@ -24,36 +26,51 @@ function Modules() {
status: isEnabled,
});
updateModule(module.key);
- toast.success(`Module ${module.label} ${!isEnabled ? 'enabled' : 'disabled'}`);
+ toast.success(
+ `${t('Module')} ${module.label} ${!isEnabled ? t('enabled') : t('disabled')}`,
+ );
} catch (err) {
console.error(err);
- toast.error(`Failed to ${module.isEnabled ? 'disable' : 'enable'} module ${module.label}`);
+ toast.error(
+ `${t('Failed to')} ${module.isEnabled ? t('disable') : t('enable')} module ${module.label}`,
+ );
module.isEnabled = !module.isEnabled;
setModulesState((prevState) => [...prevState]);
}
};
useEffect(() => {
- list.forEach((module) => {
+ list(t).forEach((module) => {
module.isEnabled = modules.includes(module.key);
});
- setModulesState(list.filter((module) => !module.hidden && (!module.enterprise || isEnterprise)));
- }, [modules]);
-
+ setModulesState(
+ list(t).filter(
+ (module) => !module.hidden && (!module.enterprise || isEnterprise),
+ ),
+ );
+ }, [modules, i18n.language]);
return (
{module.label}
-{module.description}
+
+
);
}
-export default ModuleCard;
\ No newline at end of file
+export default ModuleCard;
diff --git a/frontend/app/components/Client/Modules/Modules.tsx b/frontend/app/components/Client/Modules/Modules.tsx
index 2767ff76f..cca204eef 100644
--- a/frontend/app/components/Client/Modules/Modules.tsx
+++ b/frontend/app/components/Client/Modules/Modules.tsx
@@ -1,15 +1,17 @@
import React, { useEffect } from 'react';
import ModuleCard from 'Components/Client/Modules/ModuleCard';
-import { modules as list } from './';
import withPageTitle from 'HOCs/withPageTitle';
import { userService } from 'App/services';
import { toast } from 'react-toastify';
-import { useStore } from "App/mstore";
+import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
+import { modules as list } from '.';
+import { useTranslation } from 'react-i18next';
function Modules() {
+ const { t, i18n } = useTranslation();
const { userStore } = useStore();
- const updateModule = userStore.updateModule;
+ const { updateModule } = userStore;
const modules = userStore.account.settings?.modules ?? [];
const isEnterprise = userStore.account.edition === 'ee';
const [modulesState, setModulesState] = React.useState
+
- {module.label}
+{module.description}
- props.onToggle(module)} />
+
+ props.onToggle(module)}
+ />
-
-
Modules
--
-
- OpenReplay's modules are a collection of advanced features that provide enhanced functionality. -
- Easily enable any desired module within the user interface to access its capabilities +
- + {t( + "OpenReplay's modules are a collection of advanced features that provide enhanced functionality.", + )} + +
- + {t( + 'Easily enable any desired module within the user interface to access its capabilities', + )} +
+
- {t('Modules')}
+-
+
+
{modulesState.map((module) => (
-
+
+
+ {gradientDef}
+ Styles.tickFormatter(val)}
+ label={{
+ ...Styles.axisLabelLeft,
+ value: 'Page Response Time (ms)',
+ }}
+ />
+
+
+
+
+ );
}
export default withRequest({
- dataName: "options",
+ dataName: 'options',
initialData: [],
- dataWrapper: data => data,
+ dataWrapper: (data) => data,
loadingName: 'optionsLoading',
- requestName: "fetchOptions",
- endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
- method: 'GET'
-})(ResponseTime)
+ requestName: 'fetchOptions',
+ endpoint: `/dashboard/${toUnderscore(WIDGET_KEY)}/search`,
+ method: 'GET',
+})(ResponseTime);
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/index.ts
index 95effcb83..c4228f56e 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/index.ts
@@ -1 +1 @@
-export { default } from './ResponseTime'
\ No newline at end of file
+export { default } from './ResponseTime';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
index d167137cb..ff23d9c3c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
@@ -1,21 +1,27 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles, AvgLabel } from '../../common';
import {
- ComposedChart, Bar, BarChart, CartesianGrid, ResponsiveContainer,
- XAxis, YAxis, ReferenceLine, Tooltip
+ ComposedChart,
+ Bar,
+ BarChart,
+ CartesianGrid,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+ ReferenceLine,
+ Tooltip,
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Styles, AvgLabel } from '../../common';
-
-const PercentileLine = props => {
+function PercentileLine(props) {
const {
viewBox: { x, y },
xoffset,
yheight,
height,
- label
+ label,
} = props;
return (
);
-};
+}
interface Props {
- data: any
+ data: any;
}
function ResponseTimeDistribution(props: Props) {
- const { data } = props;
- const colors = Styles.colors;
+ const { data } = props;
+ const { colors } = Styles;
- return (
-
-
+
- }
- show={ data.chart.length === 0 }
- style={ { height: '240px' } }
- >
-
-
+
- }
- size="small"
- show={ metric.data.chart.length === 0 }
- style={ { height: '240px' } }
- >
-
-
-
-
-
- );
+ }
+ size="small"
+ show={metric.data.chart.length === 0}
+ style={{ height: '240px' }}
+ >
+
+
+
+
+
+ );
}
export default SessionsAffectedByJSErrors;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/index.ts
index b160b1af1..2af7f10db 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/index.ts
@@ -1 +1 @@
-export { default } from './SessionsAffectedByJSErrors'
\ No newline at end of file
+export { default } from './SessionsAffectedByJSErrors';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
index 08717ff1f..31461cf31 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
@@ -1,62 +1,70 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles } from '../../common';
-import {
- AreaChart, Area,
- CartesianGrid, Tooltip,
- ResponsiveContainer,
- XAxis, YAxis
- } from 'recharts';
+import {
+ AreaChart,
+ Area,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Styles } from '../../common';
interface Props {
- data: any
- metric?: any
+ data: any;
+ metric?: any;
}
function SessionsImpactedBySlowRequests(props: Props) {
- const { data, metric } = props;
- const gradientDef = Styles.gradientDef();
+ const { data, metric } = props;
+ const gradientDef = Styles.gradientDef();
- return (
-
-
- }
- size="small"
- show={ metric.data.chart.length === 0 }
- >
-
-
- {gradientDef}
- Styles.tickFormatter(val)}
- label={{ ...Styles.axisLabelLeft, value: "Number of Sessions" }}
- />
-
-
-
- );
+ return (
+
+
+ }
+ size="small"
+ show={metric.data.chart.length === 0}
+ >
+
+
+ {gradientDef}
+ Styles.tickFormatter(val)}
+ label={{ ...Styles.axisLabelLeft, value: 'Number of Sessions' }}
+ />
+
+
+
+ );
}
export default SessionsImpactedBySlowRequests;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/index.ts
index d950b82ae..7e4adcc74 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/index.ts
@@ -1 +1 @@
-export { default } from './SessionsImpactedBySlowRequests'
\ No newline at end of file
+export { default } from './SessionsImpactedBySlowRequests';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.js
deleted file mode 100644
index 0894e7426..000000000
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import stl from './Bar.module.css'
-// import { Styles } from '../common'
-import { TextEllipsis } from 'UI';
-
-const Bar = ({ className = '', versions = [], width = 0, avg, domain, colors }) => {
- return (
-
- )
-}
-
-export default Bar
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.tsx
new file mode 100644
index 000000000..102f1cbcd
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { TextEllipsis } from 'UI';
+import stl from './Bar.module.css';
+import { useTranslation } from 'react-i18next';
+// import { Styles } from '../common'
+
+function Bar({
+ className = '',
+ versions = [],
+ width = 0,
+ avg,
+ domain,
+ colors,
+}) {
+ const { t } = useTranslation();
+ return (
+
+ );
+}
+
+export default Bar;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
index 3b32f62e5..126db532e 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles } from '../../common';
-import Bar from './Bar';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Styles } from '../../common';
+import Bar from './Bar';
interface Props {
data: any;
@@ -13,24 +13,26 @@ function SessionsPerBrowser(props: Props) {
const { data } = props;
const firstAvg = data.chart[0] && data.chart[0].count;
- const getVersions = item => {
- return Object.keys(item)
- .filter(i => i !== 'browser' && i !== 'count' && i !== 'time' && i !== 'timestamp')
- .map(i => ({ key: 'v' + i, value: item[i] }));
- };
+ const getVersions = (item) =>
+ Object.keys(item)
+ .filter(
+ (i) =>
+ i !== 'browser' && i !== 'count' && i !== 'time' && i !== 'timestamp',
+ )
+ .map((i) => ({ key: `v${i}`, value: item[i] }));
return (
-
+
- )
+ );
}
-export default Bar
\ No newline at end of file
+export default Bar;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
index 1c9e75c8e..7c31b18e6 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
@@ -15,8 +15,8 @@ function SlowestDomains(props: Props) {
const list = data.chart.slice(0, 4).map((item: any) => ({
name: item.domain,
icon:
+
+ }
+ >
+
+ {gradientDef}
+ Styles.tickFormatter(val)}
+ label={{ ...Styles.axisLabelLeft, value: 'Time to Render (ms)' }}
+ />
+
+
+
+
+ );
}
export default withRequest({
- dataName: "options",
+ dataName: 'options',
initialData: [],
- dataWrapper: data => data,
+ dataWrapper: (data) => data,
loadingName: 'optionsLoading',
- requestName: "fetchOptions",
- endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
- method: 'GET'
-})(TimeToRender)
+ requestName: 'fetchOptions',
+ endpoint: `/dashboard/${toUnderscore(WIDGET_KEY)}/search`,
+ method: 'GET',
+})(TimeToRender);
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/index.ts
index 0e806bf6d..9c4c77c12 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/index.ts
@@ -1 +1 @@
-export { default } from './TimeToRender'
\ No newline at end of file
+export { default } from './TimeToRender';
diff --git a/frontend/app/components/Dashboard/Widgets/common/AvgLabel.js b/frontend/app/components/Dashboard/Widgets/common/AvgLabel.js
index 70be2ea8f..087e3b3e0 100644
--- a/frontend/app/components/Dashboard/Widgets/common/AvgLabel.js
+++ b/frontend/app/components/Dashboard/Widgets/common/AvgLabel.js
@@ -1,7 +1,8 @@
-import React from 'react'
+import React from 'react';
import { numberWithCommas } from 'App/utils';
-const AvgLabel = ({ className = '', text, count, unit}) =>
+function AvgLabel({ className = '', text, count, unit }) {
+ return (
-
-
+
}
/>
);
}
-export default observer(ApiKeySettings);
\ No newline at end of file
+export default observer(ApiKeySettings);
diff --git a/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx b/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx
index 207525f34..f19b8d53a 100644
--- a/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx
+++ b/frontend/app/components/Client/ProfileSettings/ChangePassword.tsx
@@ -1,34 +1,44 @@
import React, { useState, useCallback } from 'react';
import { Message, Form, Input } from 'UI';
-import { Button } from 'antd'
-import styles from './profileSettings.module.css';
+import { Button } from 'antd';
import { validatePassword } from 'App/validate';
import { PASSWORD_POLICY } from 'App/constants';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
+import styles from './profileSettings.module.css';
+import { useTranslation } from 'react-i18next';
-const ERROR_DOESNT_MATCH = 'Passwords don\'t match';
+const ERROR_DOESNT_MATCH = (t) => "Passwords don't match";
const MIN_LENGTH = 8;
-const ChangePassword = () => {
+function ChangePassword() {
+ const { t } = useTranslation();
const { userStore } = useStore();
- const updatePassword = userStore.updatePassword;
+ const { updatePassword } = userStore;
const passwordErrors = userStore.updatePasswordRequest.errors;
- const loading = userStore.updatePasswordRequest.loading;
+ const { loading } = userStore.updatePasswordRequest;
const [oldPassword, setOldPassword] = useState('');
- const [newPassword, setNewPassword] = useState<{ value: string; error: boolean }>({
+ const [newPassword, setNewPassword] = useState<{
+ value: string;
+ error: boolean;
+ }>({
value: '',
- error: false
+ error: false,
});
- const [newPasswordRepeat, setNewPasswordRepeat] = useState<{ value: string; error: boolean }>({
+ const [newPasswordRepeat, setNewPasswordRepeat] = useState<{
+ value: string;
+ error: boolean;
+ }>({
value: '',
- error: false
+ error: false,
});
const [show, setShow] = useState(false);
- const checkDoesntMatch = useCallback((newPassword: string, newPasswordRepeat: string) => {
- return newPasswordRepeat.length > 0 && newPasswordRepeat !== newPassword;
- }, []);
+ const checkDoesntMatch = useCallback(
+ (newPassword: string, newPasswordRepeat: string) =>
+ newPasswordRepeat.length > 0 && newPasswordRepeat !== newPassword,
+ [],
+ );
const isSubmitDisabled = useCallback(() => {
if (
@@ -53,17 +63,17 @@ const ChangePassword = () => {
updatePassword({
oldPassword,
- newPassword: newPassword.value
- }).then(() => {
- setShow(false);
- setOldPassword('');
- setNewPassword({ value: '', error: false });
- setNewPasswordRepeat({ value: '', error: false });
- }).catch((e) => {
-
- });
+ newPassword: newPassword.value,
+ })
+ .then(() => {
+ setShow(false);
+ setOldPassword('');
+ setNewPassword({ value: '', error: false });
+ setNewPasswordRepeat({ value: '', error: false });
+ })
+ .catch((e) => {});
},
- [isSubmitDisabled, oldPassword, newPassword, updatePassword]
+ [isSubmitDisabled, oldPassword, newPassword, updatePassword],
);
return show ? (
@@ -75,7 +85,9 @@ const ChangePassword = () => {
name="oldPassword"
value={oldPassword}
type="password"
- onChange={(e: React.ChangeEvent) => setOldPassword(e.target.value)}
+ onChange={(e: React.ChangeEvent) =>
+ setOldPassword(e.target.value)
+ }
/>
@@ -94,14 +106,17 @@ const ChangePassword = () => {
/>
-
+
) => {
const newValue = e.target.value;
@@ -115,15 +130,23 @@ const ChangePassword = () => {
{err}
))}
-
- {ERROR_DOESNT_MATCH}
+
+ {ERROR_DOESNT_MATCH(t)}
- {PASSWORD_POLICY}
+ {PASSWORD_POLICY(t)}
{t('Account')}
} />
{
+ {'Weekly Report'}
}
+
{t('Weekly Report')}
+
-
);
}
-export default withPageTitle('Weekly Report - OpenReplay Preferences')(observer(Notifications))
\ No newline at end of file
+export default withPageTitle('Weekly Report - OpenReplay Preferences')(
+ observer(Notifications),
+);
diff --git a/frontend/app/components/Client/Notifications/index.js b/frontend/app/components/Client/Notifications/index.js
index 1dc1a1351..7e9063f3a 100644
--- a/frontend/app/components/Client/Notifications/index.js
+++ b/frontend/app/components/Client/Notifications/index.js
@@ -1 +1 @@
-export { default } from './Notifications'
\ No newline at end of file
+export { default } from './Notifications';
diff --git a/frontend/app/components/Client/ProfileSettings/Api.js b/frontend/app/components/Client/ProfileSettings/Api.tsx
similarity index 55%
rename from frontend/app/components/Client/ProfileSettings/Api.js
rename to frontend/app/components/Client/ProfileSettings/Api.tsx
index 47e5c10dc..75e24b26c 100644
--- a/frontend/app/components/Client/ProfileSettings/Api.js
+++ b/frontend/app/components/Client/ProfileSettings/Api.tsx
@@ -1,26 +1,28 @@
import React from 'react';
-import { observer } from 'mobx-react-lite'
+import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { CopyButton, Form, Input } from 'UI';
+import { useTranslation } from 'react-i18next';
function ApiKeySettings() {
+ const { t } = useTranslation();
const { userStore } = useStore();
- const apiKey = userStore.account.apiKey;
+ const { apiKey } = userStore.account;
return (
Weekly project summary
- Receive weekly report for each project on email.
-
+
{t('Weekly project summary')}
+
+ {t('Receive weekly report for each project on email.')}
+
+
-
) : (
setShow(true)}>
-
+
);
-};
+}
export default observer(ChangePassword);
diff --git a/frontend/app/components/Client/ProfileSettings/Licenses.js b/frontend/app/components/Client/ProfileSettings/Licenses.js
deleted file mode 100644
index a071b2b79..000000000
--- a/frontend/app/components/Client/ProfileSettings/Licenses.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import { useStore } from 'App/mstore'
-
-function Licenses() {
- const { userStore } = useStore()
- const account = userStore.account
- return (
-
-
- )
-}
-
-export default observer(Licenses)
diff --git a/frontend/app/components/Client/ProfileSettings/Licenses.tsx b/frontend/app/components/Client/ProfileSettings/Licenses.tsx
new file mode 100644
index 000000000..061018a2f
--- /dev/null
+++ b/frontend/app/components/Client/ProfileSettings/Licenses.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
+
+function Licenses() {
+ const { t } = useTranslation();
+ const { userStore } = useStore();
+ const { account } = userStore;
+ return (
+ {account.license}
- {account.expirationDate && (
-
- (Expires on {account.expirationDate.toFormat('LLL dd, yyyy')})
-
- )}
-
+
+ );
+}
+
+export default observer(Licenses);
diff --git a/frontend/app/components/Client/ProfileSettings/OptOut.js b/frontend/app/components/Client/ProfileSettings/OptOut.js
index 5fe44c0d1..25f09a0f0 100644
--- a/frontend/app/components/Client/ProfileSettings/OptOut.js
+++ b/frontend/app/components/Client/ProfileSettings/OptOut.js
@@ -6,17 +6,21 @@ import { toast } from 'react-toastify';
function OptOut() {
const { userStore } = useStore();
- const updateClient = userStore.updateClient;
+ const { updateClient } = userStore;
const [optOut, setOptOut] = React.useState(userStore.account.optOut);
const onChange = () => {
setOptOut(!optOut);
- void updateClient({ optOut: !optOut }).then(() => {
- toast('Account settings updated successfully', { type: 'success' });
- }).catch((e) => {
- toast(e.message || 'Failed to update account settings', { type: 'error' });
- setOptOut(optOut);
- });
+ void updateClient({ optOut: !optOut })
+ .then(() => {
+ toast('Account settings updated successfully', { type: 'success' });
+ })
+ .catch((e) => {
+ toast(e.message || 'Failed to update account settings', {
+ type: 'error',
+ });
+ setOptOut(optOut);
+ });
};
return (
diff --git a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js b/frontend/app/components/Client/ProfileSettings/ProfileSettings.tsx
similarity index 60%
rename from frontend/app/components/Client/ProfileSettings/ProfileSettings.js
rename to frontend/app/components/Client/ProfileSettings/ProfileSettings.tsx
index 1da280a01..ab7c31460 100644
--- a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
+++ b/frontend/app/components/Client/ProfileSettings/ProfileSettings.tsx
@@ -1,5 +1,8 @@
import React from 'react';
import withPageTitle from 'HOCs/withPageTitle';
+import { PageTitle } from 'UI';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
import Settings from './Settings';
import ChangePassword from './ChangePassword';
import styles from './profileSettings.module.css';
@@ -7,21 +10,24 @@ import Api from './Api';
import TenantKey from './TenantKey';
import OptOut from './OptOut';
import Licenses from './Licenses';
-import { PageTitle } from 'UI';
-import { observer } from 'mobx-react-lite';
-import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
function ProfileSettings() {
+ const { t } = useTranslation();
const { userStore } = useStore();
- const account = userStore.account;
- const isEnterprise = userStore.isEnterprise;
+ const { account } = userStore;
+ const { isEnterprise } = userStore;
return (
{account.license}
+ {account.expirationDate && (
+
+ ({t('Expires on')}
+ {account.expirationDate.toFormat('LLL dd, yyyy')})
+
+ )}
+
- Account
} />
+
-
{'Profile'}
-{'Your email address is your identity on OpenReplay and is used to login.'}
+ {t('Profile')}
+
+ {t(
+ 'Your email address is your identity on OpenReplay and is used to login.',
+ )}
+
-
{'Change Password'}
-{'Updating your password from time to time enhances your account’s security.'}
+ {t('Change Password')}
+
+ {t('Updating your password from time to time enhances your account’s security.')}
+
-
{'Organization API Key'}
-{'Your API key gives you access to an extra set of services.'}
+ {t('Organization API Key')}
+
+ {t('Your API key gives you access to an extra set of services.')}
+
-
{'Tenant Key'}
-{'For SSO (SAML) authentication.'}
+ {t('Tenant Key')}
+
+ {t('For SSO (SAML) authentication.')}
+
-
{'Data Collection'}
+{t('Data Collection')}
- {'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.'}
+ {t('Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.')}
@@ -94,8 +106,10 @@ function ProfileSettings() {
-
-
- { copied ? 'Copied' : 'Copy' }
-
- }
- />
-
- );
-}
-
-export default observer(TenantKey);
diff --git a/frontend/app/components/Client/ProfileSettings/TenantKey.tsx b/frontend/app/components/Client/ProfileSettings/TenantKey.tsx
new file mode 100644
index 000000000..f6f159c4d
--- /dev/null
+++ b/frontend/app/components/Client/ProfileSettings/TenantKey.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import copy from 'copy-to-clipboard';
+import { Form, Input } from 'UI';
+import { Button } from 'antd';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
+
+function TenantKey() {
+ const { t } = useTranslation();
+ const [copied, setCopied] = React.useState(false);
+ const { userStore } = useStore();
+ const { tenantKey } = userStore.account;
+
+ const copyHandler = () => {
+ setCopied(true);
+ copy(tenantKey);
+ setTimeout(() => {
+ setCopied(false);
+ }, 1000);
+ };
+ return (
+
+
+
+ {copied ? t('Copied') : t('Copy')}
+
+ }
+ />
+
+ );
+}
+
+export default observer(TenantKey);
diff --git a/frontend/app/components/Client/Projects/ProjectCaptureRate.tsx b/frontend/app/components/Client/Projects/ProjectCaptureRate.tsx
index f0464ab2a..9871cd138 100644
--- a/frontend/app/components/Client/Projects/ProjectCaptureRate.tsx
+++ b/frontend/app/components/Client/Projects/ProjectCaptureRate.tsx
@@ -7,18 +7,20 @@ import { Conditions } from '@/mstore/types/FeatureFlag';
import { useStore } from '@/mstore';
import Project from '@/mstore/types/project';
import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
interface Props {
project: Project;
}
function ProjectCaptureRate(props: Props) {
+ const { t } = useTranslation();
const [conditions, setConditions] = React.useState([]);
const { projectId, platform } = props.project;
const isMobile = platform !== 'web';
const { settingsStore, userStore, customFieldStore } = useStore();
const isAdmin = userStore.account.admin || userStore.account.superAdmin;
- const isEnterprise = userStore.isEnterprise;
+ const { isEnterprise } = userStore;
const [changed, setChanged] = useState(false);
const {
sessionSettings: {
@@ -26,11 +28,11 @@ function ProjectCaptureRate(props: Props) {
changeCaptureRate,
conditionalCapture,
changeConditionalCapture,
- captureConditions
+ captureConditions,
},
loadingCaptureRate,
updateCaptureConditions,
- fetchCaptureConditions
+ fetchCaptureConditions,
} = settingsStore;
useEffect(() => {
@@ -38,7 +40,7 @@ function ProjectCaptureRate(props: Props) {
setChanged(false);
const fetchData = async () => {
if (isEnterprise) {
- await customFieldStore.fetchListActive(projectId + '');
+ await customFieldStore.fetchListActive(`${projectId}`);
}
void fetchCaptureConditions(projectId);
};
@@ -47,7 +49,11 @@ function ProjectCaptureRate(props: Props) {
}, [projectId]);
useEffect(() => {
- setConditions(captureConditions.map((condition: any) => new Conditions(condition, true, isMobile)));
+ setConditions(
+ captureConditions.map(
+ (condition: any) => new Conditions(condition, true, isMobile),
+ ),
+ );
}, [captureConditions]);
const onCaptureRateChange = (input: string) => {
@@ -67,27 +73,36 @@ function ProjectCaptureRate(props: Props) {
const onUpdate = () => {
updateCaptureConditions(projectId!, {
rate: parseInt(captureRate, 10),
- conditionalCapture: conditionalCapture,
- conditions: isEnterprise ? conditions.map((c) => c.toCaptureCondition()) : []
+ conditionalCapture,
+ conditions: isEnterprise
+ ? conditions.map((c) => c.toCaptureCondition())
+ : [],
});
setChanged(false);
};
- const updateDisabled = !changed || !isAdmin || (isEnterprise && (conditionalCapture && conditions.length === 0));
+ const updateDisabled =
+ !changed ||
+ !isAdmin ||
+ (isEnterprise && conditionalCapture && conditions.length === 0);
return (
-
+
- Define percentage of sessions you want to capture
+
+ {t('Define percentage of sessions you want to capture')}
+
-
@@ -95,9 +110,11 @@ function ProjectCaptureRate(props: Props) {
= {};
-inputModeOptions.forEach((o, i) => (inputModeOptionsMap[o.value] = i));
-
interface Props {
project: Project;
}
const ProjectCodeSnippet: React.FC = (props) => {
+ const { t } = useTranslation();
const { projectsStore } = useStore();
- const siteId = projectsStore.siteId;
+ const { siteId } = projectsStore;
const site = props.project;
const gdpr = site.gdpr as GDPR;
const sites = projectsStore.list;
- const editGDPR = projectsStore.editGDPR;
+ const { editGDPR } = projectsStore;
const onSaveGDPR = projectsStore.saveGDPR;
const init = projectsStore.initProject;
const [changed, setChanged] = useState(false);
@@ -77,17 +77,17 @@ const ProjectCodeSnippet: React.FC = (props) => {
= (props) => {
onChange={(e) => onChangeOption('maskNumbers', e.target.checked)}
className="mr-2"
>
- Do not record any numeric text
+ {t('Do not record any numeric text')}
@@ -108,18 +108,31 @@ const ProjectCodeSnippet: React.FC = (props) => {
onChange={(e) => onChangeOption('maskEmails', e.target.checked)}
className="mr-2"
>
- Do not record email addresses
+ {t('Do not record email addresses')}
- (new Project(props.project || {}));
- const loading = projectsStore.loading;
+ const [project, setProject] = React.useState(
+ new Project(props.project || {}),
+ );
+ const { loading } = projectsStore;
const canDelete = projectsStore.list.length > 1;
// const pathname = window.location.pathname;
const mstore = useStore();
const { modal } = App.useApp();
- const handleEdit = ({ target: { name, value } }: ChangeEvent) => {
- setProject((prev: Project) => (new Project({ ...prev, [name]: value })));
+ const handleEdit = ({
+ target: { name, value },
+ }: ChangeEvent) => {
+ setProject((prev: Project) => new Project({ ...prev, [name]: value }));
};
const onSubmit = (e: FormEvent) => {
@@ -32,17 +38,19 @@ function ProjectForm(props: Props) {
projectsStore
.updateProject(project.id, project)
.then((response: any) => {
- toast.success('Project updated successfully');
+ toast.success(t('Project updated successfully'));
onClose?.(null);
})
.catch((error: Error) => {
- toast.error(error.message || 'An error occurred while updating the project');
+ toast.error(
+ error.message || t('An error occurred while updating the project'),
+ );
});
} else {
projectsStore
.save(project!)
.then((resp: Project) => {
- toast.success('Project created successfully');
+ toast.success(t('Project created successfully'));
onClose?.(resp);
// mstore.searchStore.clearSearch();
@@ -52,24 +60,34 @@ function ProjectForm(props: Props) {
projectsStore.setConfigProject(parseInt(resp.id!));
})
.catch((error: Error) => {
- toast.error(error.message || 'An error occurred while creating the project');
+ toast.error(
+ error.message || t('An error occurred while creating the project'),
+ );
});
}
};
const handleRemove = async () => {
modal.confirm({
- title: 'Project Deletion Alert',
- content: 'Are you sure you want to delete this project? Deleting it will permanently remove the project, along with all associated sessions and data.',
+ title: t('Project Deletion Alert'),
+ content: t(
+ 'Are you sure you want to delete this project? Deleting it will permanently remove the project, along with all associated sessions and data.',
+ ),
onOk: () => {
- projectsStore.removeProject(project.id!).then(() => {
- if (onClose) {
- onClose(null);
- }
- }).catch((error: Error) => {
- toast.error(error.message || 'An error occurred while deleting the project');
- });
- }
+ projectsStore
+ .removeProject(project.id!)
+ .then(() => {
+ if (onClose) {
+ onClose(null);
+ }
+ })
+ .catch((error: Error) => {
+ toast.error(
+ error.message ||
+ t('An error occurred while deleting the project'),
+ );
+ });
+ },
});
};
@@ -89,13 +107,13 @@ function ProjectForm(props: Props) {
initialValues={{ ...project }}
>
-
+
{
// projectsStore.editInstance({ platform: value });
- setProject((prev: Project) => (new Project({ ...prev, platform: value })));
+ setProject(
+ (prev: Project) => new Project({ ...prev, platform: value }),
+ );
}}
/>
@@ -133,18 +153,18 @@ function ProjectForm(props: Props) {
loading={loading}
// disabled={!project.validate}
>
- {project.exists() ? 'Save' : 'Add'}
+ {project.exists() ? t('Save') : t('Add')}
{project.exists() && (
-
+
- }
- show={ metric.data.chart.length === 0 }
- style={ { height: '240px' } }
- >
-
-
- Styles.tickFormatter(val)}
- label={{ ...Styles.axisLabelLeft, value: "Number of Errors" }}
- allowDecimals={false}
- />
-
-
-
-
-
- );
+ }
+ show={metric.data.chart.length === 0}
+ style={{ height: '240px' }}
+ >
+
+
+ Styles.tickFormatter(val)}
+ label={{ ...Styles.axisLabelLeft, value: 'Number of Errors' }}
+ allowDecimals={false}
+ />
+
+
+
+
+ );
}
export default ErrorsByType;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/index.ts
index f889ccec7..53f976df3 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/index.ts
@@ -1 +1 @@
-export { default } from './ErrorsByType'
\ No newline at end of file
+export { default } from './ErrorsByType';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/Bar.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/Bar.tsx
index 163c7d0a5..9ba177c32 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/Bar.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/Bar.tsx
@@ -1,18 +1,21 @@
-import React from 'react'
-import stl from './bar.module.css'
+import React from 'react';
+import stl from './bar.module.css';
-const Bar = ({ className = '', width = 0, avg, domain, color }) => {
+function Bar({ className = '', width = 0, avg, domain, color }) {
return (
-
- {gradientDef}
- Styles.tickFormatter(val)}
- label={{ ...Styles.axisLabelLeft, value: "Frames Per Second" }}
- />
-
-
-
-
- );
+ }
+ show={metric.data.chart.length === 0}
+ >
+ <>
+
+
+ {gradientDef}
+ Styles.tickFormatter(val)}
+ label={{ ...Styles.axisLabelLeft, value: 'Frames Per Second' }}
+ />
+
+
+
+
+ );
}
export default FPS;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/index.ts
index 85a43ba5e..55394ee20 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/index.ts
@@ -1 +1 @@
-export { default } from './FPS'
\ No newline at end of file
+export { default } from './FPS';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
index e12061997..e885dc9c2 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
@@ -1,70 +1,78 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles, AvgLabel } from '../../common';
-import {
- AreaChart, Area,
- CartesianGrid, Tooltip,
- ResponsiveContainer,
- XAxis, YAxis
- } from 'recharts';
+import {
+ AreaChart,
+ Area,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Styles, AvgLabel } from '../../common';
interface Props {
- data: any
- metric?: any
+ data: any;
+ metric?: any;
}
function MemoryConsumption(props: Props) {
- const { data, metric } = props;
- const gradientDef = Styles.gradientDef();
- // covert the data to mb
- const avgValue = Math.round(data.value / 1024 / 1024);
+ const { data, metric } = props;
+ const gradientDef = Styles.gradientDef();
+ // covert the data to mb
+ const avgValue = Math.round(data.value / 1024 / 1024);
- return (
-
-
+
- }
- >
- <>
-
-
- {gradientDef}
- Styles.tickFormatter(val)}
- label={{ ...Styles.axisLabelLeft, value: "JS Heap Size (mb)" }}
- />
-
-
-
-
- );
+ }
+ >
+ <>
+
+
+ {gradientDef}
+ Styles.tickFormatter(val)}
+ label={{ ...Styles.axisLabelLeft, value: 'JS Heap Size (mb)' }}
+ />
+
+
+
+
+ );
}
export default MemoryConsumption;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/index.ts
index 7d426259c..9e6644855 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/index.ts
@@ -1 +1 @@
-export { default } from './MemoryConsumption'
\ No newline at end of file
+export { default } from './MemoryConsumption';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
index 83b78cc81..3c4bb2b45 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
@@ -1,89 +1,106 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles, AvgLabel } from '../../common';
-import { withRequest } from 'HOCs'
-import {
- AreaChart, Area,
- CartesianGrid, Tooltip,
- ResponsiveContainer,
- XAxis, YAxis
- } from 'recharts';import { toUnderscore } from 'App/utils';
+import { withRequest } from 'HOCs';
+import {
+ AreaChart,
+ Area,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from 'recharts';
+import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Styles, AvgLabel } from '../../common';
const WIDGET_KEY = 'pagesResponseTime';
interface Props {
- data: any
- optionsLoading: any
- fetchOptions: any
- options: any
- metric?: any
+ data: any;
+ optionsLoading: any;
+ fetchOptions: any;
+ options: any;
+ metric?: any;
}
function ResponseTime(props: Props) {
- const { data, metric } = props;
- const gradientDef = Styles.gradientDef();
+ const { data, metric } = props;
+ const gradientDef = Styles.gradientDef();
- return (
-
-
+
- }
- show={ metric.data.chart.length === 0 }
- >
- <>
-
-
{'License'}
-{'License key and expiration date.'}
+ {t('License')}
+
+ {t('License key and expiration date.')}
+
- The code snippet below changes based on the selected data recording options and should be used for implementation.
+
-
+ {t(
+ 'The code snippet below changes based on the selected data recording options and should be used for implementation.',
+ )}
+
@@ -130,56 +143,62 @@ const ProjectCodeSnippet: React.FC = (props) => {
onChange={() => setAssistEnabled(!isAssistEnabled)}
size="small"
/>
- Enable
+ {t('Enable')}
- OpenReplay Assist allows you to support your users by seeing their
- live screen and instantly hopping on call (WebRTC) with them without
- requiring any 3rd-party screen sharing software.
+ {t(
+ 'OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.',
+ )}
-
);
};
-export default observer(ProjectCodeSnippet);
\ No newline at end of file
+export default observer(ProjectCodeSnippet);
diff --git a/frontend/app/components/Client/Projects/ProjectForm.tsx b/frontend/app/components/Client/Projects/ProjectForm.tsx
index 879260022..f2ac053c4 100644
--- a/frontend/app/components/Client/Projects/ProjectForm.tsx
+++ b/frontend/app/components/Client/Projects/ProjectForm.tsx
@@ -5,6 +5,7 @@ import { projectStore, useStore } from '@/mstore';
import { App, Segmented, Form, Input, Button, Tooltip } from 'antd';
import { toast } from 'react-toastify';
import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
interface Props {
project?: Project;
@@ -12,18 +13,23 @@ interface Props {
}
function ProjectForm(props: Props) {
+ const { t } = useTranslation();
const [form] = Form.useForm();
const { onClose } = props;
const { projectsStore } = useStore();
- const [project, setProject] = React.useState
-
-
-
-
+
-
-
+
-
- {''}
- {' tag of your page.'}
+
+ {' '}
+ {''}{' '}
+
+ {t('tag of your page.')}
- Paste this snippet {'before the '}
-
+ {t('Paste this snippet')}
+ {t('before the')}
+
+
- {showLoader ? (
-
-
- ) : (
-
+ {showLoader ? (
+
+
+
+ ) : (
+
-
- )
+ );
}
-export default Bar
\ No newline at end of file
+export default Bar;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
index 51d4c4e31..403e580b4 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
@@ -15,7 +15,7 @@ function ErrorsPerDomain(props: Props) {
name: item.domain,
icon: 0 ? width : 5 }%`, backgroundColor: color }}>
+ 0 ? width : 5}%`, backgroundColor: color }}
+ />
{`${avg}`}
{domain}
-
+
+
}
>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/index.ts
index d08e3867b..3a60d15c0 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/index.ts
@@ -1 +1 @@
-export { default } from './ErrorsPerDomain'
\ No newline at end of file
+export { default } from './ErrorsPerDomain';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
index fe710a827..93de5b764 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
@@ -1,67 +1,75 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles, AvgLabel } from '../../common';
-import {
- AreaChart, Area,
- CartesianGrid, Tooltip,
- ResponsiveContainer,
- XAxis, YAxis
- } from 'recharts';
+import {
+ AreaChart,
+ Area,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Styles, AvgLabel } from '../../common';
interface Props {
- data: any
- metric?: any
+ data: any;
+ metric?: any;
}
function FPS(props: Props) {
- const { data, metric } = props;
- const gradientDef = Styles.gradientDef();
+ const { data, metric } = props;
+ const gradientDef = Styles.gradientDef();
- return (
-
-
+
- }
- show={ metric.data.chart.length === 0 }
- >
- <>
-
-
-
+
+
-
-
+
+
- {/*
+ <>
+
-
- {gradientDef}
- Styles.tickFormatter(val)}
- label={{ ...Styles.axisLabelLeft, value: "Page Response Time (ms)" }}
- />
-
-
-
-
- );
+
+
+ {/*
-
-
-
-
-
- 'Page Response Time: ' + val} />
- { data.percentiles && data.percentiles.map((item: any, i: number) => (
-
+
+
+
+
+
+
+
+ );
}
export default ResponseTimeDistribution;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/index.ts
index 163efa255..2ddc12a3c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/index.ts
@@ -1 +1 @@
-export { default } from './ResponseTimeDistribution'
\ No newline at end of file
+export { default } from './ResponseTimeDistribution';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
index a60fb9803..1c28b9a66 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
@@ -1,54 +1,66 @@
import React from 'react';
import { NoContent } from 'UI';
+import {
+ BarChart,
+ Bar,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from 'recharts';
+import { NO_METRIC_DATA } from 'App/constants/messages';
+import { InfoCircleOutlined } from '@ant-design/icons';
import { Styles } from '../../common';
-import {
- BarChart, Bar, CartesianGrid, Tooltip,
- Legend, ResponsiveContainer,
- XAxis, YAxis
- } from 'recharts';
- import { NO_METRIC_DATA } from 'App/constants/messages';
- import { InfoCircleOutlined } from '@ant-design/icons';
interface Props {
- data: any
- metric?: any
+ data: any;
+ metric?: any;
}
function SessionsAffectedByJSErrors(props: Props) {
- const { data, metric } = props;
- return (
-
+
+
+
+
+ `Page Response Time: ${val}`}
+ />
+ {data.percentiles &&
+ data.percentiles.map((item: any, i: number) => (
+
-
-
-
-
-
-
-
- );
+ }
+ // allowDecimals={false}
+ x={item.responseTime}
+ strokeWidth={0}
+ strokeOpacity={1}
+ />
+ ))}
+
-
-
-
-
- {versions.map((v, i) => {
- const w = (v.value * 100)/ avg;
- return (
-
- )
- })}
-
-
-
- } />
- Version: {v.key}
- Sessions: {v.value}
-
- {`${avg}`}
-
- {domain}
-
+
+
+
+
+ {versions.map((v, i) => {
+ const w = (v.value * 100) / avg;
+ return (
+
+ );
+ })}
+
+
+
+ }
+ />
+
+ {t('Version:')}
+ {v.key}
+
+
+ {t('Sessions:')}
+ {v.value}
+
+
+ {`${avg}`}
+
+ {domain}
+
+
}
show={data.chart.length === 0}
style={{ minHeight: 220 }}
>
- {data.chart.map((item, i) =>
+ {data.chart.map((item, i) => (
);
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/index.ts
index 06f0656a1..facd495bd 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/index.ts
@@ -1 +1 @@
-export { default } from './SessionsPerBrowser'
\ No newline at end of file
+export { default } from './SessionsPerBrowser';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/Bar.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/Bar.tsx
index 179bca846..c5f6bac1a 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/Bar.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/Bar.tsx
@@ -1,19 +1,24 @@
-import React from 'react'
-import stl from './Bar.module.css'
+import React from 'react';
+import stl from './Bar.module.css';
+import { useTranslation } from 'react-i18next';
-const Bar = ({ className = '', width = 0, avg, domain, color }) => {
+function Bar({ className = '', width = 0, avg, domain, color }) {
+ const { t } = useTranslation();
return (
-
+
{avg}
- ms
+ {t('ms')}
{domain}
-
+
+
}
>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/index.ts
index 311262347..87f1e002a 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/index.ts
@@ -1 +1 @@
-export { default } from './SlowestDomains'
\ No newline at end of file
+export { default } from './SlowestDomains';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.tsx
similarity index 50%
rename from frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js
rename to frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.tsx
index 707f21eb9..3d7b588fa 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.tsx
@@ -1,21 +1,28 @@
import React from 'react';
-import { Styles } from '../../common';
import cn from 'classnames';
+import { Styles } from '../../common';
import stl from './scale.module.css';
+import { useTranslation } from 'react-i18next';
function Scale({ colors }) {
- const lastIndex = (Styles.compareColors.length - 1);
+ const { t } = useTranslation();
+ const lastIndex = Styles.compareColors.length - 1;
return (
-
- }>
+
{Styles.compareColors.map((c, i) => (
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
index 039d02e04..ae343f7c5 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
@@ -1,21 +1,23 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles, AvgLabel } from '../../common';
-import Scale from './Scale';
import { observer } from 'mobx-react-lite';
import { numberWithCommas, positionOfTheNumber } from 'App/utils';
import WorldMap from '@svg-maps/world';
import { SVGMap } from 'react-svg-map';
-import stl from './SpeedIndexByLocation.module.css';
import cn from 'classnames';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import stl from './SpeedIndexByLocation.module.css';
+import Scale from './Scale';
+import { Styles, AvgLabel } from '../../common';
+import { useTranslation } from 'react-i18next';
interface Props {
data?: any;
}
function SpeedIndexByLocation(props: Props) {
+ const { t } = useTranslation();
const { data } = props;
const wrapper: any = React.useRef(null);
const [tooltipStyle, setTooltipStyle] = React.useState({ display: 'none' });
@@ -23,8 +25,14 @@ function SpeedIndexByLocation(props: Props) {
const dataMap: any = React.useMemo(() => {
const _data: any = {};
- const max = data.chart?.reduce((acc: any, item: any) => Math.max(acc, item.value), 0);
- const min = data.chart?.reduce((acc: any, item: any) => Math.min(acc, item.value), 0);
+ const max = data.chart?.reduce(
+ (acc: any, item: any) => Math.max(acc, item.value),
+ 0,
+ );
+ const min = data.chart?.reduce(
+ (acc: any, item: any) => Math.min(acc, item.value),
+ 0,
+ );
data.chart?.forEach((item: any) => {
if (!item || !item.userCountry) {
return;
@@ -37,7 +45,7 @@ function SpeedIndexByLocation(props: Props) {
const getLocationClassName = (location: any) => {
const i = dataMap[location.id] ? dataMap[location.id].perNumber : 0;
- const cls = stl['heat_index' + i];
+ const cls = stl[`heat_index${i}`];
return cn(stl.location, cls);
};
@@ -63,29 +71,33 @@ function SpeedIndexByLocation(props: Props) {
const tooltipStyle = {
display: 'block',
top: event.clientY + 10,
- left: event.clientX - 100
+ left: event.clientX - 100,
};
setTooltipStyle(tooltipStyle);
};
return (
-
- {i === 0 &&
))}
Slow
}
- {i === lastIndex && Fast
}
+ {i === 0 && {t('Slow')}
}
+ {i === lastIndex && {t('Fast')}
}
@@ -103,7 +115,14 @@ function SpeedIndexByLocation(props: Props) {
<>
-
+
- }
- >
- <>
- {pointedLocation.name}
- Avg: {dataMap[pointedLocation.id] ? numberWithCommas(parseInt(dataMap[pointedLocation.id].value)) : 0}
+ {t('Avg:')}{' '}
+
+ {dataMap[pointedLocation.id]
+ ? numberWithCommas(
+ parseInt(dataMap[pointedLocation.id].value),
+ )
+ : 0}
+
)}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts
index 1cbdfe2f8..79ab01b34 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/index.ts
@@ -1 +1 @@
-export { default } from './SpeedIndexByLocation'
\ No newline at end of file
+export { default } from './SpeedIndexByLocation';
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
index 19a0f7233..1e903ce07 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
@@ -1,97 +1,109 @@
import React from 'react';
import { NoContent } from 'UI';
-import { Styles, AvgLabel } from '../../common';
-import { withRequest } from 'HOCs'
-import {
- AreaChart, Area,
- CartesianGrid, Tooltip,
- ResponsiveContainer,
- XAxis, YAxis
- } from 'recharts';
+import { withRequest } from 'HOCs';
+import {
+ AreaChart,
+ Area,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from 'recharts';
import { toUnderscore } from 'App/utils';
import { NO_METRIC_DATA } from 'App/constants/messages';
import { InfoCircleOutlined } from '@ant-design/icons';
+import { Styles, AvgLabel } from '../../common';
const WIDGET_KEY = 'timeToRender';
interface Props {
- data: any
- optionsLoading: any
- fetchOptions: any
- options: any
- metric?: any
+ data: any;
+ optionsLoading: any;
+ fetchOptions: any;
+ options: any;
+ metric?: any;
}
function TimeToRender(props: Props) {
- const { data, optionsLoading, metric } = props;
- const gradientDef = Styles.gradientDef();
+ const { data, optionsLoading, metric } = props;
+ const gradientDef = Styles.gradientDef();
+ const onSelect = (params) => {
+ // const _params = { density: 70 }
+ // TODO reload the data with new params;
+ // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
+ };
- const onSelect = (params) => {
- // const _params = { density: 70 }
- // TODO reload the data with new params;
- // this.props.fetchWidget(WIDGET_KEY, dashbaordStore.period, props.platform, { ..._params, url: params.value })
- }
-
- return (
-
- {/*
+ <>
+
-
- {gradientDef}
- Styles.tickFormatter(val)}
- label={{ ...Styles.axisLabelLeft, value: "Time to Render (ms)" }}
- />
-
-
-
-
- );
+
+
+ {/*
-
{text}
@@ -9,5 +10,7 @@ const AvgLabel = ({ className = '', text, count, unit}) =>
{unit && {unit}}
+ );
+}
-export default AvgLabel
+export default AvgLabel;
diff --git a/frontend/app/components/Dashboard/Widgets/common/CountBadge.js b/frontend/app/components/Dashboard/Widgets/common/CountBadge.js
index 18d986ffa..ad639642f 100644
--- a/frontend/app/components/Dashboard/Widgets/common/CountBadge.js
+++ b/frontend/app/components/Dashboard/Widgets/common/CountBadge.js
@@ -1,19 +1,18 @@
import React from 'react';
import { Icon } from 'UI';
-import styles from './countBadge.module.css';
import cn from 'classnames';
+import styles from './countBadge.module.css';
const getFixedValue = (val) => {
let accuracy = 0;
- while (Math.trunc(val * Math.pow(10, accuracy)) === 0) {
+ while (Math.trunc(val * 10 ** accuracy) === 0) {
accuracy += 1;
}
const parsed = parseFloat(val).toFixed(accuracy).toString();
return parsed;
};
-// eslint-disable-next-line complexity
-const CountBadge = ({
+function CountBadge({
title,
icon,
count = '',
@@ -21,26 +20,33 @@ const CountBadge = ({
change,
oppositeColors = false,
component,
- className
-}) => {
- const viewChange = typeof change === 'number' && change !== 0 ;
+ className,
+}) {
+ const viewChange = typeof change === 'number' && change !== 0;
const changeIncrease = change > 0;
const colorGreen = oppositeColors ? !changeIncrease : changeIncrease;
return (
-
-
- { icon &&
-
-
-
-
-
-
-
-
-
- )
+ cursor: {
+ fill: '#eee',
+ },
+ },
+ gradientDef: () => (
+
+
+
+
+
+
+ ),
};
diff --git a/frontend/app/components/Dashboard/Widgets/common/Table.js b/frontend/app/components/Dashboard/Widgets/common/Table.js
index b37c19560..c1974d76f 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Table.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Table.js
@@ -8,7 +8,7 @@ export default class Table extends React.PureComponent {
onLoadMoreClick = () => {
this.setState({ showAll: true });
- }
+ };
render() {
const {
@@ -24,44 +24,68 @@ export default class Table extends React.PureComponent {
} = this.props;
const { showAll } = this.state;
- const isShowMoreButtonVisible = !isTemplate && rows.size > (small ? 3 : 5) && !showAll
+ const isShowMoreButtonVisible =
+ !isTemplate && rows.size > (small ? 3 : 5) && !showAll;
return (
-
);
diff --git a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
index 6781aeedb..4cccdb14b 100644
--- a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
@@ -28,8 +28,10 @@ import {
import { useHistory } from 'react-router-dom';
import { dashboardMetricCreate, withSiteId, metricCreate } from 'App/routes';
import { FilterKey } from 'Types/filter/filterType';
-import MetricsLibraryModal from '../MetricsLibraryModal/MetricsLibraryModal';
import { observer } from 'mobx-react-lite';
+import MetricsLibraryModal from '../MetricsLibraryModal/MetricsLibraryModal';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
interface TabItem {
icon: React.ReactNode;
@@ -38,104 +40,102 @@ interface TabItem {
type: string;
}
-export const tabItems: Record = {
+export const tabItems: (t: TFunction) => Record = (t) => ({
[CATEGORIES.product_analytics]: [
{
icon: = {
+export const mobileTabItems: (t: TFunction) => Record = (
+ t,
+) => ({
// [CATEGORIES.product_analytics]: [
// {
// icon: = {
[CATEGORIES.web_analytics]: [
{
icon:
+
);
}
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomTooltip.js b/frontend/app/components/Dashboard/Widgets/common/CustomTooltip.tsx
similarity index 55%
rename from frontend/app/components/Dashboard/Widgets/common/CustomTooltip.js
rename to frontend/app/components/Dashboard/Widgets/common/CustomTooltip.tsx
index 035388fda..7ac8af6e1 100644
--- a/frontend/app/components/Dashboard/Widgets/common/CustomTooltip.js
+++ b/frontend/app/components/Dashboard/Widgets/common/CustomTooltip.tsx
@@ -1,23 +1,27 @@
import React from 'react';
import { numberWithCommas } from 'App/utils';
+import { useTranslation } from 'react-i18next';
-const TooltipLabel = ({ payload, unit = false }) => {
+function TooltipLabel({ payload, unit = false }) {
+ const { t } = useTranslation();
if (!payload) return '';
const value = numberWithCommas(Math.round(payload.value));
return (
+ {icon && (
+
-
- { viewChange &&
+
+ {viewChange && (
+ )}
+
-
- }
-
{`${payload.name}: ${value}`}
- { unit && ms}
+ {unit && {t('ms')}}
- )
+ );
}
-const CustomTooltip = ({ active, payload, label, unit }) => {
+function CustomTooltip({ active, payload, label, unit }) {
if (active && payload && payload[0]) {
return (
{`${label}`}
- {payload.map(p => (
- { icon &&
- );
+function FeedbackLine({ icon, info, subInfo, sessionId }) {
+ return (
+
- { info &&
-
- { info }
-
- }
- { subInfo &&
-
-
-
- { subInfo }
-
- }
-
+ {icon &&
+ );
}
FeedbackLine.displayName = 'FeedbackLine';
-export default FeedbackLine;
\ No newline at end of file
+export default FeedbackLine;
diff --git a/frontend/app/components/Dashboard/Widgets/common/Styles.js b/frontend/app/components/Dashboard/Widgets/common/Styles.js
index 2bf9c6090..b4f90cf68 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Styles.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Styles.js
@@ -1,95 +1,133 @@
import React from 'react';
-import {numberWithCommas} from 'App/utils';
+import { numberWithCommas } from 'App/utils';
const colorsTeal = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
-const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'];
-const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
+const colors = [
+ '#6774E2',
+ '#929ACD',
+ '#3EAAAF',
+ '#565D97',
+ '#8F9F9F',
+ '#376F72',
+];
+const colorsx = [
+ '#256669',
+ '#38999e',
+ '#3eaaaf',
+ '#51b3b7',
+ '#78c4c7',
+ '#9fd5d7',
+ '#c5e6e7',
+].reverse();
const compareColors = ['#192EDB', '#6272FF', '#808DFF', '#B3BBFF', '#C9CFFF'];
-const compareColorsx = ["#222F99", "#2E3ECC", "#394EFF", "#6171FF", "#8895FF", "#B0B8FF", "#D7DCFF"].reverse();
+const compareColorsx = [
+ '#222F99',
+ '#2E3ECC',
+ '#394EFF',
+ '#6171FF',
+ '#8895FF',
+ '#B0B8FF',
+ '#D7DCFF',
+].reverse();
const customMetricColors = ['#394EFF', '#3EAAAF', '#565D97'];
-const colorsPie = colors.concat(["#DDDDDD"]);
-const safeColors = ['#394EFF', '#3EAAAF', '#9276da', '#ceba64', "#bc6f9d", '#966fbc', '#64ce86', '#e06da3', '#6dabe0'];
+const colorsPie = colors.concat(['#DDDDDD']);
+const safeColors = [
+ '#394EFF',
+ '#3EAAAF',
+ '#9276da',
+ '#ceba64',
+ '#bc6f9d',
+ '#966fbc',
+ '#64ce86',
+ '#e06da3',
+ '#6dabe0',
+];
-const countView = count => {
- const isMoreThanK = count >= 1000;
- return numberWithCommas(isMoreThanK ? Math.trunc(count / 1000) + 'k' : count);
-}
+const countView = (count) => {
+ const isMoreThanK = count >= 1000;
+ return numberWithCommas(isMoreThanK ? `${Math.trunc(count / 1000)}k` : count);
+};
export default {
- customMetricColors,
- colors,
- colorsTeal,
- colorsPie,
- colorsx,
- compareColors,
- compareColorsx,
- safeColors,
- lineColor: '#2A7B7F',
- lineColorCompare: '#394EFF',
- strokeColor: compareColors[0],
- xaxis: {
- axisLine: {stroke: '#CCCCCC'},
- interval: 0,
- dataKey: "time",
- tick: {fill: '#000000', fontSize: 9},
- tickLine: {stroke: '#CCCCCC'},
- strokeWidth: 0.5
+ customMetricColors,
+ colors,
+ colorsTeal,
+ colorsPie,
+ colorsx,
+ compareColors,
+ compareColorsx,
+ safeColors,
+ lineColor: '#2A7B7F',
+ lineColorCompare: '#394EFF',
+ strokeColor: compareColors[0],
+ xaxis: {
+ axisLine: { stroke: '#CCCCCC' },
+ interval: 0,
+ dataKey: 'time',
+ tick: { fill: '#000000', fontSize: 9 },
+ tickLine: { stroke: '#CCCCCC' },
+ strokeWidth: 0.5,
+ },
+ yaxis: {
+ axisLine: { stroke: '#CCCCCC' },
+ tick: { fill: '#000000', fontSize: 9 },
+ tickLine: { stroke: '#CCCCCC' },
+ },
+ axisLabelLeft: {
+ angle: -90,
+ fill: '#999999',
+ offset: 10,
+ style: { textAnchor: 'middle' },
+ position: 'insideLeft',
+ fontSize: 11,
+ },
+ tickFormatter: (val) => `${countView(val)}`,
+ tickFormatterBytes: (val) => Math.round(val / 1024 / 1024),
+ chartMargins: {
+ left: 0,
+ right: 20,
+ top: 10,
+ bottom: 5,
+ },
+ tooltip: {
+ wrapperStyle: {
+ zIndex: 999,
},
- yaxis: {
- axisLine: {stroke: '#CCCCCC'},
- tick: {fill: '#000000', fontSize: 9},
- tickLine: {stroke: '#CCCCCC'},
+ contentStyle: {
+ padding: '5px',
+ background: 'white',
+ border: '1px solid #DDD',
+ borderRadius: '3px',
+ lineHeight: '1.25rem',
+ color: '#888',
+ fontSize: '10px',
},
- axisLabelLeft: {
- angle: -90,
- fill: '#999999',
- offset: 10,
- style: {textAnchor: 'middle'},
- position: 'insideLeft',
- fontSize: 11
+ labelStyle: {},
+ formatter: (value, name, { unit }) => {
+ if (unit && unit.trim() === 'mb') {
+ return numberWithCommas(Math.round(value / 1024 / 1024));
+ }
+ return numberWithCommas(Math.round(value));
},
- tickFormatter: val => `${countView(val)}`,
- tickFormatterBytes: val => Math.round(val / 1024 / 1024),
- chartMargins: {left: 0, right: 20, top: 10, bottom: 5},
- tooltip: {
- wrapperStyle: {
- zIndex: 999,
- },
- contentStyle: {
- padding: '5px',
- background: 'white',
- border: '1px solid #DDD',
- borderRadius: '3px',
- lineHeight: '1.25rem',
- color: '#888',
- fontSize: '10px'
- },
- labelStyle: {},
- formatter: (value, name, {unit}) => {
- if (unit && unit.trim() === 'mb') {
- return numberWithCommas(Math.round(value / 1024 / 1024))
- }
- return numberWithCommas(Math.round(value))
- },
- itemStyle: {
- lineHeight: '0.75rem',
- color: '#000',
- fontSize: '12px'
- },
- cursor: {
- fill: '#eee'
- }
+ itemStyle: {
+ lineHeight: '0.75rem',
+ color: '#000',
+ fontSize: '12px',
},
- gradientDef: () => (
-
+ {info && {info} }
+ {subInfo &&
+
+ {subInfo}
}
+
- {
- cols.map(({
- key, title, width,
- }) =>
-
- { title }
)
- }
+ {cols.map(({ key, title, width }) => (
+
+ {title}
+
+ ))}
- { rows.take(showAll ? rows.size : (small ? 3 : 5)).map(row => (
+
);
}
diff --git a/frontend/app/components/Dashboard/Widgets/common/Title.js b/frontend/app/components/Dashboard/Widgets/common/Title.js
index 77c33ad84..ee369e6f8 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Title.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Title.js
@@ -1,11 +1,14 @@
import styles from './title.module.css';
+import React from 'react';
-const Title = ({ title, sub }) => (
-
+ {rows.take(showAll ? rows.size : small ? 3 : 5).map((row) => (
- {isShowMoreButtonVisible &&
- onRowClick(e, row) : () => null}
>
- { cols.map(({ cellClass = '', className = '', Component, key, toText = t => t, width }) => (
-
- )) }
+ ))}
{ Component
- ?
- )) }
+ {cols.map(
+ ({
+ cellClass = '',
+ className = '',
+ Component,
+ key,
+ toText = (t) => t,
+ width,
+ }) => (
+ { toText(row[ key ]) }
- }
-
+ {' '}
+ {Component ? (
+
+ ),
+ )}
+ {' '}
+ {toText(row[key])}{' '}
+
+ )}
+
-
-
- }
+ {isShowMoreButtonVisible && (
+
+
+
+ )}
-
-);
+function Title({ title, sub }) {
+ return (
+ { title }
- { sub } -
+
+ );
+}
Title.displayName = 'Title';
diff --git a/frontend/app/components/Dashboard/Widgets/common/domain.js b/frontend/app/components/Dashboard/Widgets/common/domain.js
index f00ac7395..f17ccfb1d 100644
--- a/frontend/app/components/Dashboard/Widgets/common/domain.js
+++ b/frontend/app/components/Dashboard/Widgets/common/domain.js
@@ -1,5 +1,8 @@
-export default [ 0, dataMax => {
- if (dataMax === 0) return 10;
- if (dataMax > 100 || dataMax < 0) return dataMax;
- return dataMax * (5.7 - Math.log(dataMax));
-} ];
\ No newline at end of file
+export default [
+ 0,
+ (dataMax) => {
+ if (dataMax === 0) return 10;
+ if (dataMax > 100 || dataMax < 0) return dataMax;
+ return dataMax * (5.7 - Math.log(dataMax));
+ },
+];
diff --git a/frontend/app/components/Dashboard/Widgets/common/index.js b/frontend/app/components/Dashboard/Widgets/common/index.js
index 21ef76ea0..5cc6fa481 100644
--- a/frontend/app/components/Dashboard/Widgets/common/index.js
+++ b/frontend/app/components/Dashboard/Widgets/common/index.js
@@ -2,4 +2,4 @@ export { default as Title } from './Title';
export { default as Table } from './Table';
export { default as domain } from './domain';
export { default as Styles } from './Styles';
-export { default as AvgLabel } from './AvgLabel';
\ No newline at end of file
+export { default as AvgLabel } from './AvgLabel';
diff --git a/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx b/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx
index 630a0fea1..cb5f3b09f 100644
--- a/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx
@@ -11,7 +11,11 @@ function AddCardModal(props: Props) {
<>
{title}
+ {sub} +
+
{items.map((item, index) => (
handleCardSelection(item.type)}
key={index}
- className={
- 'flex items-start gap-2 p-2 hover:bg-active-blue rounded-xl hover:text-teal group cursor-pointer'
- }
+ className="flex items-start gap-2 p-2 hover:bg-active-blue rounded-xl hover:text-teal group cursor-pointer"
>
{item.icon}
-
+
{item.title}
-
+
@@ -234,22 +231,23 @@ const AddCardSection = observer(
inCards?: boolean;
handleOpenChange?: (isOpen: boolean) => void;
}) => {
+ const { t } = useTranslation();
const { showModal } = useModal();
const { metricStore, dashboardStore, projectsStore } = useStore();
- const isMobile = projectsStore.isMobile;
+ const { isMobile } = projectsStore;
const [tab, setTab] = React.useState(
- isMobile ? 'web_analytics' : 'product_analytics'
+ isMobile ? 'web_analytics' : 'product_analytics',
);
const options = isMobile
? [
// { label: 'Product Analytics', value: 'product_analytics' },
- { label: 'Mobile Analytics', value: 'web_analytics' },
+ { label: t('Mobile Analytics'), value: 'web_analytics' },
]
: [
- { label: 'Product Analytics', value: 'product_analytics' },
- { label: 'Monitors', value: 'monitors' },
- { label: 'Web Analytics', value: 'web_analytics' },
+ { label: t('Product Analytics'), value: 'product_analytics' },
+ { label: t('Monitors'), value: 'monitors' },
+ { label: t('Web Analytics'), value: 'web_analytics' },
];
const originStr = window.env.ORIGIN || window.location.origin;
@@ -265,26 +263,20 @@ const AddCardSection = observer(
onClose: () => {
metricStore.updateKey('metricsSearch', '');
},
- }
+ },
);
handleOpenChange?.(false);
};
return (
-
{item.description}
-
-
- What do you want to visualize?
+
@@ -38,9 +43,9 @@ export const showAddToDashboardModal = (metricId: string, dashboardStore: any) =
/>
),
- cancelText: 'Cancel',
+ cancelText: t('Cancel'),
onOk: onSave,
- okText: 'Add',
+ okText: t('Add'),
footer: (_, { OkBtn, CancelBtn }) => (
<>
+
Create New
+ {t('Create New')}
diff --git a/frontend/app/components/Dashboard/components/AddToDashboardButton.tsx b/frontend/app/components/Dashboard/components/AddToDashboardButton.tsx
index 509c66426..0ba8f644d 100644
--- a/frontend/app/components/Dashboard/components/AddToDashboardButton.tsx
+++ b/frontend/app/components/Dashboard/components/AddToDashboardButton.tsx
@@ -6,12 +6,17 @@ import { Button, Modal } from 'antd';
import Select from 'Shared/Select/Select';
import { Form } from 'UI';
import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
interface Props {
metricId: string;
}
-export const showAddToDashboardModal = (metricId: string, dashboardStore: any) => {
+export const showAddToDashboardModal = (
+ metricId: string,
+ dashboardStore: any,
+) => {
+ const { t } = useTranslation();
const dashboardOptions = dashboardStore.dashboards.map((i: any) => ({
key: i.id,
label: i.name,
@@ -27,7 +32,7 @@ export const showAddToDashboardModal = (metricId: string, dashboardStore: any) =
};
Modal.confirm({
- title: 'Add to selected dashboard',
+ title: t('Add to selected dashboard'),
icon: null,
content: (
+
{inCards ? null : (
-
+ {t('What do you want to visualize?')}
{isSaas ? (
-
-
@@ -302,24 +294,21 @@ const AddCardSection = observer(
Ask AI
+
+
) : null}
{t('Ask AI')}
+
)}
);
- }
+ },
);
export default AddCardSection;
diff --git a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx b/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
index 5add19f6f..dd2de2cf0 100644
--- a/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardSelectionModal.tsx
@@ -6,6 +6,7 @@ import { useStore } from 'App/mstore';
import NewDashboardModal from 'Components/Dashboard/components/DashboardList/NewDashModal';
import AiQuery from './DashboardView/AiQuery';
+import { useTranslation } from 'react-i18next';
interface Props {
open: boolean;
@@ -13,6 +14,7 @@ interface Props {
}
function AddCardSelectionModal(props: Props) {
+ const { t } = useTranslation();
const { metricStore } = useStore();
const [open, setOpen] = React.useState(false);
const [isLibrary, setIsLibrary] = React.useState(false);
@@ -35,7 +37,7 @@ function AddCardSelectionModal(props: Props) {
return (
<>
- or
+ Add from library
+ {t('Add from library')}
+ {t('or')}
) : null}
@@ -64,7 +62,7 @@ function AddCardSelectionModal(props: Props) {
onClick={() => onClick(true)}
>
-
-
-
- {instance.exists() && (
+
+
- )}
-
+
+ {instance.exists() && (
+
+ )}
+
- )
+ );
}
-export default BottomButtons
+export default BottomButtons;
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
index 80a900895..e57530aee 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
@@ -2,20 +2,22 @@ import React from 'react';
import { Input } from 'UI';
import Select from 'Shared/Select';
import { alertConditions as conditions } from 'App/constants';
-import Alert from 'Types/alert'
+import Alert from 'Types/alert';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
-const thresholdOptions = [
- { label: '15 minutes', value: 15 },
- { label: '30 minutes', value: 30 },
- { label: '1 hour', value: 60 },
- { label: '2 hours', value: 120 },
- { label: '4 hours', value: 240 },
- { label: '1 day', value: 1440 },
+const thresholdOptions = (t: TFunction) => [
+ { label: t('15 minutes'), value: 15 },
+ { label: t('30 minutes'), value: 30 },
+ { label: t('1 hour'), value: 60 },
+ { label: t('2 hours'), value: 120 },
+ { label: t('4 hours'), value: 240 },
+ { label: t('1 day'), value: 1440 },
];
-const changeOptions = [
- { label: 'change', value: 'change' },
- { label: '% change', value: 'percent' },
+const changeOptions = (t: TFunction) => [
+ { label: t('change'), value: 'change' },
+ { label: t('% change'), value: 'percent' },
];
interface ICondition {
@@ -39,15 +41,18 @@ function Condition({
unit,
changeUnit,
}: ICondition) {
+ const { t } = useTranslation();
return (
{!isThreshold && (
-
+
)}
-
+
-
+
-
+
{!isThreshold && (
-
+
)}
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx
index 95efaaaf3..6186b72a0 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx
@@ -1,7 +1,8 @@
import React from 'react';
import { Checkbox } from 'UI';
+import { observer } from 'mobx-react-lite';
import DropdownChips from '../DropdownChips';
-import { observer } from 'mobx-react-lite'
+import { useTranslation } from 'react-i18next';
interface INotifyHooks {
instance: Alert;
@@ -22,6 +23,7 @@ function NotifyHooks({
hooks,
edit,
}: INotifyHooks) {
+ const { t } = useTranslation();
return (
@@ -32,7 +34,7 @@ function NotifyHooks({
type="checkbox"
checked={instance.slack}
onClick={onChangeCheck}
- label="Slack"
+ label={t('Slack')}
/>
)}
{msTeamsChannels.length > 0 && (
@@ -51,26 +53,28 @@ function NotifyHooks({
checked={instance.email}
onClick={onChangeCheck}
className="mr-8"
- label="Email"
+ label={t('Email')}
/>
{instance.slack && (
-
+
edit({ slackInput: selected })}
/>
@@ -80,13 +84,15 @@ function NotifyHooks({
{instance.msteams && (
-
+
edit({ msteamsInput: selected })}
/>
@@ -96,13 +102,15 @@ function NotifyHooks({
{instance.email && (
-
+
edit({ emailInput: selected })}
/>
@@ -112,13 +120,15 @@ function NotifyHooks({
{instance.webhook && (
-
+
edit({ webhookInput: selected })}
/>
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
index 1aa072d1c..f86870c31 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
@@ -9,7 +9,7 @@ import { DateTime } from 'luxon';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import cn from 'classnames';
import Alert from 'Types/alert';
-import { observer } from 'mobx-react-lite'
+import { observer } from 'mobx-react-lite';
const getThreshold = (threshold: number) => {
if (threshold === 15) return '15 Minutes';
@@ -25,32 +25,26 @@ const getNotifyChannel = (alert: Record, webhooks: Array) => {
if (webhooks.size === 0) {
return 'OpenReplay';
}
- const getSlackChannels = () => {
- return (
- ' (' +
- alert.slackInput
- .map((channelId: number) => {
- return (
- '#' +
- webhooks.find((hook) => hook.webhookId === channelId && hook.type === 'slack')?.name
- );
- })
- .join(', ') +
- ')'
- );
- };
- const getMsTeamsChannels = () => {
- return (
- ' (' +
- alert.msteamsInput
- .map((channelId: number) => {
- return webhooks.find((hook) => hook.webhookId === channelId && hook.type === 'msteams')
- ?.name;
- })
- .join(', ') +
- ')'
- );
- };
+ const getSlackChannels = () =>
+ ` (${alert.slackInput
+ .map(
+ (channelId: number) =>
+ `#${
+ webhooks.find(
+ (hook) => hook.webhookId === channelId && hook.type === 'slack',
+ )?.name
+ }`,
+ )
+ .join(', ')})`;
+ const getMsTeamsChannels = () =>
+ ` (${alert.msteamsInput
+ .map(
+ (channelId: number) =>
+ webhooks.find(
+ (hook) => hook.webhookId === channelId && hook.type === 'msteams',
+ )?.name,
+ )
+ .join(', ')})`;
let str = '';
if (alert.slack) {
str = 'Slack';
@@ -59,16 +53,19 @@ const getNotifyChannel = (alert: Record, webhooks: Array) => {
}
}
if (alert.msteams) {
- str += (str === '' ? '' : ' and ') + 'MS Teams';
+ str += `${str === '' ? '' : ' and '}MS Teams`;
if (alert.msteamsInput.length > 0) {
str += getMsTeamsChannels();
}
}
if (alert.email) {
- str += (str === '' ? '' : ' and ') + (alert.emailInput.length > 1 ? 'Emails' : 'Email');
- str += alert.emailInput.length > 0 ? ' (' + alert.emailInput.join(', ') + ')' : '';
+ str +=
+ (str === '' ? '' : ' and ') +
+ (alert.emailInput.length > 1 ? 'Emails' : 'Email');
+ str +=
+ alert.emailInput.length > 0 ? ` (${alert.emailInput.join(', ')})` : '';
}
- if (alert.webhook) str += (str === '' ? '' : ' and ') + 'Webhook';
+ if (alert.webhook) str += `${str === '' ? '' : ' and '}Webhook`;
if (str === '') return 'OpenReplay';
return str;
@@ -84,7 +81,8 @@ interface Props extends RouteComponentProps {
}
function AlertListItem(props: Props) {
- const { alert, siteId, history, init, demo, webhooks, triggerOptions } = props;
+ const { alert, siteId, history, init, demo, webhooks, triggerOptions } =
+ props;
if (!alert) {
return null;
@@ -99,12 +97,18 @@ function AlertListItem(props: Props) {
const formTriggerName = () =>
Number.isInteger(alert.query.left) && triggerOptions
- ? triggerOptions.find((opt: { value: any, label: string }) => opt.value === alert.query.left)?.label
+ ? triggerOptions.find(
+ (opt: { value: any; label: string }) =>
+ opt.value === alert.query.left,
+ )?.label
: alert.query.left;
return (
@@ -118,7 +122,10 @@ function AlertListItem(props: Props) {
-
+
{alert.detectionMethod}
@@ -128,21 +135,19 @@ function AlertListItem(props: Props) {
? DateTime.fromMillis(+new Date()).toFormat('LLL dd, yyyy, hh:mm a')
: checkForRecent(
DateTime.fromMillis(alert.createdAt || +new Date()),
- 'LLL dd, yyyy, hh:mm a'
+ 'LLL dd, yyyy, hh:mm a',
)}
{'When the '}
-
- {alert.detectionMethod}
-
+ {alert.detectionMethod}
{' of '}
-
+
{triggerOptions ? formTriggerName() : alert.seriesName}
{' is '}
-
+
{alert.query.operator}
{numberWithCommas(alert.query.right)}
{alert.change === 'percent' ? '%' : alert.metric?.unit}
@@ -154,7 +159,7 @@ function AlertListItem(props: Props) {
{alert.detectionMethod === 'change' ? (
<>
{' compared to the previous '}
-
+
{getThreshold(alert.previousPeriod)}
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index 0338c46d8..6832304ed 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -1,11 +1,11 @@
import React from 'react';
import { Loader, NoContent, Pagination } from 'UI';
-import { filterList } from 'App/utils';
-import { sliceListPerPage } from 'App/utils';
+import { filterList, sliceListPerPage } from 'App/utils';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-import AlertListItem from './AlertListItem';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
+import AlertListItem from './AlertListItem';
+import { useTranslation } from 'react-i18next';
const pageSize = 10;
@@ -14,10 +14,11 @@ interface Props {
}
function AlertsList({ siteId }: Props) {
+ const { t } = useTranslation();
const { alertsStore, settingsStore } = useStore();
const { fetchWebhooks, webhooks } = settingsStore;
const { alerts: alertsList, alertsSearch, fetchList, init } = alertsStore;
- const page = alertsStore.page;
+ const { page } = alertsStore;
React.useEffect(() => {
fetchList();
@@ -25,8 +26,11 @@ function AlertsList({ siteId }: Props) {
}, []);
const alertsArray = alertsList;
- const filteredAlerts = filterList(alertsArray, alertsSearch, ['name'], (item, query) =>
- query.test(item.query.left)
+ const filteredAlerts = filterList(
+ alertsArray,
+ alertsSearch,
+ ['name'],
+ (item, query) => query.test(item.query.left),
);
const list = alertsSearch !== '' ? filteredAlerts : alertsArray;
@@ -35,33 +39,47 @@ function AlertsList({ siteId }: Props) {
+
- {alertsSearch !== '' ? 'No matching results' : 'No alerts have been configured yet'}
+
}
- subtext='Configure alerts to stay informed about app activity with threshold or change-based notifications.'
+ subtext={t(
+ 'Configure alerts to stay informed about app activity with threshold or change-based notifications.',
+ )}
>
-
+ {alertsSearch !== ''
+ ? t('No matching results')
+ : t('No alerts have been configured yet')}
-
-
Title
- Type
- Modified
+
+
-
))}
-
+
{sliceListPerPage(list, page - 1, pageSize).map((alert: any) => (
{t('Title')}
+ {t('Type')}
+ {t('Modified')}
-
- Showing {Math.min(list.length, pageSize)} out of{' '}
- {list.length} Alerts
+
+ {};
function AlertsSearch() {
+ const { t } = useTranslation();
const { alertsStore } = useStore();
const [inputValue, setInputValue] = useState(alertsStore.alertsSearch);
useEffect(() => {
- debounceUpdate = debounce((value: string) => alertsStore.changeSearch(value), 500);
+ debounceUpdate = debounce(
+ (value: string) => alertsStore.changeSearch(value),
+ 500,
+ );
}, []);
- const write = ({ target: { value } }: React.ChangeEvent) => {
+ const write = ({
+ target: { value },
+ }: React.ChangeEvent) => {
setInputValue(value);
debounceUpdate(value);
};
return (
+ {t('Showing')}{' '}
+
+ {Math.min(list.length, pageSize)}
+ {' '}
+ {t('out of')}
+ {list.length}
+ {t('Alerts')}
-
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
index 545413b0b..92ec68dd2 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
@@ -5,51 +5,52 @@ import { PlusOutlined } from '@ant-design/icons';
import withPageTitle from 'HOCs/withPageTitle';
import { withSiteId, alertCreate } from 'App/routes';
-import AlertsList from './AlertsList';
-import AlertsSearch from './AlertsSearch';
import { useHistory } from 'react-router';
import { useStore } from 'App/mstore';
+import AlertsList from './AlertsList';
+import AlertsSearch from './AlertsSearch';
+import { useTranslation } from 'react-i18next';
interface IAlertsView {
- siteId: string;
+ siteId: string;
}
function AlertsView({ siteId }: IAlertsView) {
- const history = useHistory();
- const { alertsStore } = useStore();
+ const { t } = useTranslation();
+ const history = useHistory();
+ const { alertsStore } = useStore();
-
- useEffect(() => {
- const unmount = history.listen((location) => {
- if (!location.pathname.includes('/alert')) {
- alertsStore.updateKey('page', 1);
- }
- });
- return unmount;
- }, [history]);
- return (
-
- onRemove(val)} outline={true} />;
- };
+ const _options = options.filter((item) => !selected.includes(item.value));
+ const renderBadge = (item) => {
+ const val = typeof item === 'string' ? item : item.value;
+ const text = typeof item === 'string' ? item : item.label;
return (
- onRemove(val)}
+ outline
+ />
);
-};
+ };
+
+ return (
+
-
-
- }
-
+
+
+ }
>
- {/*{data.issues.map((item: any, index: any) => (*/}
- {/*
-
-
-
-
-
- }>
- Create Alert
-
-
-
-
-
-
-
+
+ );
}
export default withPageTitle('Alerts - OpenReplay')(AlertsView);
diff --git a/frontend/app/components/Dashboard/components/Alerts/DropdownChips/DropdownChips.js b/frontend/app/components/Dashboard/components/Alerts/DropdownChips/DropdownChips.js
index 1f805057d..de2fde6a8 100644
--- a/frontend/app/components/Dashboard/components/Alerts/DropdownChips/DropdownChips.js
+++ b/frontend/app/components/Dashboard/components/Alerts/DropdownChips/DropdownChips.js
@@ -2,65 +2,76 @@ import React from 'react';
import { Input, TagBadge } from 'UI';
import Select from 'Shared/Select';
-const DropdownChips = ({
- textFiled = false,
- validate = null,
- placeholder = '',
- selected = [],
- options = [],
- badgeClassName = 'lowercase',
- onChange = () => null,
- ...props
-}) => {
- const onRemove = (id) => {
- onChange(selected.filter((i) => i !== id));
- };
+function DropdownChips({
+ textFiled = false,
+ validate = null,
+ placeholder = '',
+ selected = [],
+ options = [],
+ badgeClassName = 'lowercase',
+ onChange = () => null,
+ ...props
+}) {
+ const onRemove = (id) => {
+ onChange(selected.filter((i) => i !== id));
+ };
- const onSelect = ({ value }) => {
- const newSlected = selected.concat(value.value);
- onChange(newSlected);
- };
+ const onSelect = ({ value }) => {
+ const newSlected = selected.concat(value.value);
+ onChange(newSlected);
+ };
- const onKeyPress = (e) => {
- const val = e.target.value;
- if (e.key !== 'Enter' || selected.includes(val)) return;
- e.preventDefault();
- e.stopPropagation();
- if (validate && !validate(val)) return;
+ const onKeyPress = (e) => {
+ const val = e.target.value;
+ if (e.key !== 'Enter' || selected.includes(val)) return;
+ e.preventDefault();
+ e.stopPropagation();
+ if (validate && !validate(val)) return;
- const newSlected = selected.concat(val);
- e.target.value = '';
- onChange(newSlected);
- };
+ const newSlected = selected.concat(val);
+ e.target.value = '';
+ onChange(newSlected);
+ };
- const _options = options.filter((item) => !selected.includes(item.value));
-
- const renderBadge = (item) => {
- const val = typeof item === 'string' ? item : item.value;
- const text = typeof item === 'string' ? item : item.label;
- return
+
+
+
- );
+
+
+ }>
+ {t('Create Alert')}
+
+
+
+
+
+
- {textFiled ? (
-
- ) : (
-
- )}
-
+
- {textFiled ? selected.map(renderBadge) : options.filter((i) => selected.includes(i.value)).map(renderBadge)}
-
-
+ {textFiled ? (
+
+ ) : (
+
+ )}
+
+ );
+}
export default DropdownChips;
diff --git a/frontend/app/components/Dashboard/components/Alerts/DropdownChips/index.js b/frontend/app/components/Dashboard/components/Alerts/DropdownChips/index.js
index 9b4fbefff..f69098d3b 100644
--- a/frontend/app/components/Dashboard/components/Alerts/DropdownChips/index.js
+++ b/frontend/app/components/Dashboard/components/Alerts/DropdownChips/index.js
@@ -1 +1 @@
-export { default } from './DropdownChips'
\ No newline at end of file
+export { default } from './DropdownChips';
diff --git a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
index aceeccf3a..b679bccdb 100644
--- a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
@@ -1,30 +1,32 @@
import React, { useEffect } from 'react';
-import { Form, SegmentSelection } from 'UI';
+import { Form, SegmentSelection, confirm } from 'UI';
import { validateEmail } from 'App/validate';
-import { confirm } from 'UI';
import { toast } from 'react-toastify';
import { SLACK, WEBHOOK, TEAMS } from 'App/constants/schedule';
import Breadcrumb from 'Shared/Breadcrumb';
import { withSiteId, alerts } from 'App/routes';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { useStore } from 'App/mstore'
-import { observer } from 'mobx-react-lite'
-import Alert from 'Types/alert'
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import Alert from 'Types/alert';
import cn from 'classnames';
import WidgetName from '../WidgetName';
import BottomButtons from './AlertForm/BottomButtons';
import NotifyHooks from './AlertForm/NotifyHooks';
import AlertListItem from './AlertListItem';
import Condition from './AlertForm/Condition';
+import { useTranslation } from 'react-i18next';
-const Circle = ({ text }: { text: string }) => (
-
+ {textFiled
+ ? selected.map(renderBadge)
+ : options.filter((i) => selected.includes(i.value)).map(renderBadge)}
+
+
- {text}
-
-);
+function Circle({ text }: { text: string }) {
+ return (
+
+ {text}
+
+ );
+}
interface ISection {
index: string;
@@ -33,23 +35,27 @@ interface ISection {
content: React.ReactNode;
}
-const Section = ({ index, title, description, content }: ISection) => (
-
- ) =>
- edit({ [name]: value });
+ const write = ({
+ target: { value, name },
+ }: React.ChangeEvent) => edit({ [name]: value });
const writeOption = (
_: React.ChangeEvent,
- { name, value }: { name: string; value: Record }
+ { name, value }: { name: string; value: Record },
) => edit({ [name]: value.value });
- const onChangeCheck = ({ target: { checked, name } }: React.ChangeEvent) => edit({ [name]: checked });
+ const onChangeCheck = ({
+ target: { checked, name },
+ }: React.ChangeEvent) => edit({ [name]: checked });
const onDelete = async (instance: Alert) => {
if (
await confirm({
- header: 'Confirm',
- confirmButton: 'Yes, delete',
- confirmation: `Are you sure you want to permanently delete this alert?`,
+ header: t('Confirm'),
+ confirmButton: t('Yes, delete'),
+ confirmation: t('Are you sure you want to permanently delete this alert?'),
})
) {
- remove(instance.alertId).then(() => {
- props.history.push(withSiteId(alerts(), siteId));
- toast.success('Alert deleted');
- }).catch(() => {
- toast.error('Failed to delete an alert');
- });
+ remove(instance.alertId)
+ .then(() => {
+ props.history.push(withSiteId(alerts(), siteId));
+ toast.success(t('Alert deleted'));
+ })
+ .catch(() => {
+ toast.error(t('Failed to delete an alert'));
+ });
}
};
const onSave = (instance: Alert) => {
const wasUpdating = instance.exists();
- save(instance).then(() => {
- if (!wasUpdating) {
- toast.success('New alert saved');
- props.history.push(withSiteId(alerts(), siteId));
- } else {
- toast.success('Alert updated');
- }
- }).catch(() => {
- toast.error('Failed to create an alert');
- });
+ save(instance)
+ .then(() => {
+ if (!wasUpdating) {
+ toast.success(t('New alert saved'));
+ props.history.push(withSiteId(alerts(), siteId));
+ } else {
+ toast.success(t('Alert updated'));
+ }
+ })
+ .catch(() => {
+ toast.error(t('Failed to create an alert'));
+ });
};
- const slackChannels: Select[] = []
- const hooks: Select[] = []
- const msTeamsChannels: Select[] = []
+ const slackChannels: Select[] = [];
+ const hooks: Select[] = [];
+ const msTeamsChannels: Select[] = [];
webhooks.forEach((hook) => {
- const option = { value: hook.webhookId, label: hook.name }
+ const option = { value: hook.webhookId, label: hook.name };
if (hook.type === SLACK) {
- slackChannels.push(option)
+ slackChannels.push(option);
}
if (hook.type === WEBHOOK) {
- hooks.push(option)
+ hooks.push(option);
}
if (hook.type === TEAMS) {
- msTeamsChannels.push(option)
+ msTeamsChannels.push(option);
}
- })
+ });
const writeQueryOption = (
e: React.ChangeEvent,
- { name, value }: { name: string; value: string }
+ { name, value }: { name: string; value: string },
) => {
const { query } = instance;
edit({ query: { ...query, [name]: value } });
};
const changeUnit = (value: string) => {
- alertsStore.changeUnit(value)
- }
+ alertsStore.changeUnit(value);
+ };
- const writeQuery = ({ target: { value, name } }: React.ChangeEvent) => {
+ const writeQuery = ({
+ target: { value, name },
+ }: React.ChangeEvent) => {
const { query } = instance;
edit({ query: { ...query, [name]: value } });
};
@@ -184,14 +200,14 @@ const NewAlert = (props: IProps) => {
const isThreshold = instance.detectionMethod === 'threshold';
return (
-
);
-};
+}
-export default withRouter(observer(NewAlert))
+export default withRouter(observer(NewAlert));
diff --git a/frontend/app/components/Dashboard/components/Alerts/index.tsx b/frontend/app/components/Dashboard/components/Alerts/index.tsx
index 793c47aaf..40036b8ea 100644
--- a/frontend/app/components/Dashboard/components/Alerts/index.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/index.tsx
@@ -1 +1 @@
-export { default } from './AlertsView'
+export { default } from './AlertsView';
diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
index 4b6074723..074ebf35c 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
@@ -15,7 +15,7 @@ function CardIssueItem(props: Props) {
title={issue.name}
description={
-
+ );
+}
interface Select {
label: string;
- value: string | number
+ value: string | number;
}
interface IProps extends RouteComponentProps {
@@ -62,7 +68,8 @@ interface IProps extends RouteComponentProps {
onSubmit: (instance: Alert) => void;
}
-const NewAlert = (props: IProps) => {
+function NewAlert(props: IProps) {
+ const { t } = useTranslation();
const { alertsStore, settingsStore } = useStore();
const {
fetchTriggerOptions,
@@ -75,14 +82,12 @@ const NewAlert = (props: IProps) => {
alerts: list,
triggerOptions,
loading,
- } = alertsStore
+ } = alertsStore;
- const deleting = loading
- const webhooks = settingsStore.webhooks
- const fetchWebhooks = settingsStore.fetchWebhooks
- const {
- siteId,
- } = props;
+ const deleting = loading;
+ const { webhooks } = settingsStore;
+ const { fetchWebhooks } = settingsStore;
+ const { siteId } = props;
useEffect(() => {
init({});
@@ -94,84 +99,95 @@ const NewAlert = (props: IProps) => {
useEffect(() => {
if (list.length > 0) {
const alertId = location.pathname.split('/').pop();
- const currentAlert = list.find((alert: Alert) => alert.alertId === String(alertId));
+ const currentAlert = list.find(
+ (alert: Alert) => alert.alertId === String(alertId),
+ );
if (currentAlert) {
- init(currentAlert)
+ init(currentAlert);
}
}
}, [list]);
- const write = ({ target: { value, name } }: React.ChangeEvent
- {title}
- {description &&
-);
+ {description}
}
+function Section({ index, title, description, content }: ISection) {
+ return (
+
+
-
+
-
+ {title}
+ {description && (
+
{description}
+ )}
+ {content}
- {content}
+
+
edit({ [name]: value })}
+ onSelect={(e: any, { name, value }: any) =>
+ edit({ [name]: value })
+ }
value={{ value: instance.detectionMethod }}
list={[
- { name: 'Threshold', value: 'threshold' },
- { name: 'Change', value: 'change' },
+ { name: t('Threshold'), value: 'threshold' },
+ { name: t('Change'), value: 'change' },
]}
/>
@@ -239,7 +259,7 @@ const NewAlert = (props: IProps) => {
/>
{
/>
{
demo
siteId=""
init={() => null}
- webhooks={webhooks} />
+ webhooks={webhooks}
+ />
)}
{isThreshold &&
- 'Eg. When Threshold is above 1ms over the past 15mins, notify me through Slack #foss-notifications.'}
+ t('Eg. When Threshold is above 1ms over the past 15mins, notify me through Slack #foss-notifications.')}
{!isThreshold &&
- 'Eg. Alert me if % change of memory.avg is greater than 10% over the past 4 hours compared to the previous 4 hours.'}
+ t('Eg. Alert me if % change of memory.avg is greater than 10% over the past 4 hours compared to the previous 4 hours.')}
{issue.source}
}
avatar={{issue.sessionCount}
diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
index fe2162bb7..2cf08d645 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
@@ -6,13 +6,15 @@ import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import { InfoCircleOutlined } from '@ant-design/icons';
import { debounce } from 'App/utils';
import useIsMounted from 'App/hooks/useIsMounted';
-import CardIssueItem from './CardIssueItem';
-import SessionsModal from '../SessionsModal';
import { useModal } from 'App/components/Modal';
import Issue from 'App/mstore/types/issue';
import { List, Button } from 'antd';
+import SessionsModal from '../SessionsModal';
+import CardIssueItem from './CardIssueItem';
+import { useTranslation } from 'react-i18next';
function CardIssues() {
+ const { t } = useTranslation();
const { metricStore, dashboardStore } = useStore();
const [data, setData] = useState<{
issues: Issue[];
@@ -24,22 +26,23 @@ function CardIssues() {
const pageSize = 5;
const { showModal } = useModal();
const filter = useObserver(() => dashboardStore.drillDownFilter);
- const hasFilters = filter.filters.length > 0 || (filter.startTimestamp !== dashboardStore.drillDownPeriod.start || filter.endTimestamp !== dashboardStore.drillDownPeriod.end);
+ const hasFilters =
+ filter.filters.length > 0 ||
+ filter.startTimestamp !== dashboardStore.drillDownPeriod.start ||
+ filter.endTimestamp !== dashboardStore.drillDownPeriod.end;
const drillDownPeriod = useObserver(() => dashboardStore.drillDownPeriod);
const depsString = JSON.stringify(widget.series);
-
function getFilters(filter: any) {
const mapSeries = (item: any) => {
- const filters = item.filter.filters
- .map((f: any) => f.toJson());
+ const filters = item.filter.filters.map((f: any) => f.toJson());
return {
...item,
filter: {
...item.filter,
- filters
- }
+ filters,
+ },
};
};
@@ -47,7 +50,7 @@ function CardIssues() {
...filter,
limit: pageSize,
page: filter.page,
- series: filter.series.map(mapSeries)
+ series: filter.series.map(mapSeries),
};
}
@@ -68,7 +71,10 @@ function CardIssues() {
}
};
- const debounceRequest: any = React.useCallback(debounce(fetchIssues, 1000), []);
+ const debounceRequest: any = React.useCallback(
+ debounce(fetchIssues, 1000),
+ [],
+ );
const handleClick = (issue?: any) => {
// const filters = getFilters(widget.filter);
@@ -80,10 +86,16 @@ function CardIssues() {
...widget,
page: filter.page,
limit: filter.limit,
- filters: filter.filters
+ filters: filter.filters,
};
debounceRequest(newPayload);
- }, [drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage, filter.page]);
+ }, [
+ drillDownPeriod,
+ filter.filters,
+ depsString,
+ metricStore.sessionsPage,
+ filter.page,
+ ]);
const clearFilters = () => {
metricStore.updateKey('page', 1);
@@ -94,36 +106,46 @@ function CardIssues() {
-
Issues
+{t('Issues')}
{!!filter.filters[1] && (
- Showing issues of {filter.filters[0].value}
- to
+ {t('Showing issues of')}{' '}
+ {filter.filters[0].value}
+ {t('to')}
{filter.filters[1].value}
)}
- {hasFilters && }
-
+ {hasFilters && (
+
+ )}
+
+
+ handleClick(item)} key={index}>*/}
- {/*
*/}
- {/*))}*/}
+ {/* {data.issues.map((item: any, index: any) => ( */}
+ {/* handleClick(item)} key={index}> */}
+ {/*
*/}
+ {/* ))} */}
- handleClick(item)}>
{data.total && (
<>
- Showing < span className="font-medium">{(filter.page - 1) * pageSize + 1} to{' '}
- {(filter.page - 1) * pageSize + pageSize} of{' '}
- {data.total} issues.
+ {t('Showing')}{' '}
+
+ {(filter.page - 1) * pageSize + 1}
+ {' '}
+ {t('to')}{' '}
+
+ {(filter.page - 1) * pageSize + pageSize}
+ {' '}
+ {t('of')} {data.total}
+ {t('issues')}.
)}
diff --git a/frontend/app/components/Dashboard/components/CardIssues/index.ts b/frontend/app/components/Dashboard/components/CardIssues/index.ts
index 9970a8e05..7f1987d88 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/index.ts
+++ b/frontend/app/components/Dashboard/components/CardIssues/index.ts
@@ -1 +1 @@
-export { default } from './CardIssues'
\ No newline at end of file
+export { default } from './CardIssues';
diff --git a/frontend/app/components/Dashboard/components/CardUserList/CardUserItem.tsx b/frontend/app/components/Dashboard/components/CardUserList/CardUserItem.tsx
index 8c195b081..eef63b6a0 100644
--- a/frontend/app/components/Dashboard/components/CardUserList/CardUserItem.tsx
+++ b/frontend/app/components/Dashboard/components/CardUserList/CardUserItem.tsx
@@ -1,29 +1,37 @@
import React from 'react';
import { Icon } from 'UI';
+
interface Props {
- user: any
+ user: any;
}
function CardUserItem(props: Props) {
- const { user } = props;
- return (
-
- ) {
- const [loading, setLoading] = useState(false);
- const { showModal } = useModal();
- const userId = new URLSearchParams(props.location.search).get("userId");
- const { metricStore, dashboardStore } = useStore();
-
- const [data, setData] = useState([
- { name: 'user@domain.com', sessions: 29 },
- { name: 'user@domain.com', sessions: 29 },
- { name: 'user@domain.com', sessions: 29 },
- { name: 'user@domain.com', sessions: 29 },
- ]);
- const pageSize = data.length;
+ const { t } = useTranslation();
+ const [loading, setLoading] = useState(false);
+ const { showModal } = useModal();
+ const userId = new URLSearchParams(props.location.search).get('userId');
+ const { metricStore, dashboardStore } = useStore();
- const handleClick = (issue: any) => {
- props.history.replace({search: (new URLSearchParams({userId : '123'})).toString()});
- // showModal(([
+ { name: 'user@domain.com', sessions: 29 },
+ { name: 'user@domain.com', sessions: 29 },
+ { name: 'user@domain.com', sessions: 29 },
+ { name: 'user@domain.com', sessions: 29 },
+ ]);
+ const pageSize = data.length;
- useEffect(() => {
- if (!userId) return;
+ const handleClick = (issue: any) => {
+ props.history.replace({
+ search: new URLSearchParams({ userId: '123' }).toString(),
+ });
+ // showModal() => {
- metricStore.setClickMapsRage(e.target.checked)
+ const onToggle = (e: React.ChangeEvent) => {
+ metricStore.setClickMapsRage(e.target.checked);
+ };
+
+ const refreshHeatmapSession = async () => {
+ const oldData = metricStore.instance.toJson();
+ metricStore.instance.updateKey('data', { sessionId: null, domURL: [] });
+ try {
+ await dashboardStore.fetchMetricChartData(
+ metricStore.instance,
+ oldData,
+ false,
+ dashboardStore.period,
+ );
+
+ metricStore.instance.updateKey('hasChanged', true);
+ } catch (e) {
+ console.error(e);
}
+ };
- const refreshHeatmapSession = async () => {
- const oldData = metricStore.instance.toJson()
- metricStore.instance.updateKey('data', { sessionId: null, domURL: [] })
- try {
- await dashboardStore.fetchMetricChartData(
- metricStore.instance,
- oldData,
- false,
- dashboardStore.period)
+ React.useEffect(
+ () => () => {
+ metricStore.setClickMapsRage(false);
+ },
+ [],
+ );
- metricStore.instance.updateKey('hasChanged', true)
- } catch (e) {
- console.error(e)
- }
- }
+ return (
+
-
-
- setOpen(false)}/>
- ;
+ return (
+ <>
+
+
+
+ setOpen(false)} />
+
+ );
}
export default CreateCardButton;
diff --git a/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx b/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx
index d768449d9..7b7011996 100644
--- a/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx
+++ b/frontend/app/components/Dashboard/components/CreateDashboardButton.tsx
@@ -3,15 +3,17 @@ import { PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useStore } from 'App/mstore';
import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
interface Props {
disabled?: boolean;
}
function CreateDashboardButton({ disabled }: Props) {
+ const { t } = useTranslation();
const [dashboardCreating, setDashboardCreating] = React.useState(false);
const { projectsStore, dashboardStore } = useStore();
- const siteId = projectsStore.siteId;
+ const { siteId } = projectsStore;
const history = useHistory();
const createNewDashboard = async () => {
@@ -28,17 +30,15 @@ function CreateDashboardButton({ disabled }: Props) {
});
};
return (
- <>
- }
- disabled={disabled}
- type="primary"
- onClick={createNewDashboard}
- >
- Create Dashboard
-
-
+ }
+ disabled={disabled}
+ type="primary"
+ onClick={createNewDashboard}
+ >
+ {t('Create Dashboard')}
+
);
}
diff --git a/frontend/app/components/Dashboard/components/DashbaordListModal/DashbaordListModal.tsx b/frontend/app/components/Dashboard/components/DashbaordListModal/DashbaordListModal.tsx
index 236602493..aa072b7ac 100644
--- a/frontend/app/components/Dashboard/components/DashbaordListModal/DashbaordListModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashbaordListModal/DashbaordListModal.tsx
@@ -4,46 +4,57 @@ import { SideMenuitem, Icon } from 'UI';
import { withSiteId, dashboardSelected } from 'App/routes';
import { withRouter } from 'react-router-dom';
import { useModal } from 'App/components/Modal';
+import { useTranslation } from 'react-i18next';
interface Props {
- siteId: string
- history: any
+ siteId: string;
+ history: any;
}
function DashbaordListModal(props: Props) {
- const { dashboardStore } = useStore();
- const { hideModal } = useModal();
- const dashboards = dashboardStore.dashboards;
- const activeDashboardId = dashboardStore.selectedDashboard?.dashboardId;
+ const { t } = useTranslation();
+ const { dashboardStore } = useStore();
+ const { hideModal } = useModal();
+ const { dashboards } = dashboardStore;
+ const activeDashboardId = dashboardStore.selectedDashboard?.dashboardId;
- const onItemClick = (dashboard) => {
- dashboardStore.selectDashboardById(dashboard.dashboardId);
- const path = withSiteId(dashboardSelected(dashboard.dashboardId), parseInt(props.siteId));
- props.history.push(path);
- hideModal();
- };
- return (
-
-
-
+ return useObserver(() => (
+
+
+
-
-
- ));
+
+
+
+
+
+
+
+ ));
}
export default DashboardEditModal;
diff --git a/frontend/app/components/Dashboard/components/DashboardEditModal/index.ts b/frontend/app/components/Dashboard/components/DashboardEditModal/index.ts
index c7f4d7b17..f27d977d2 100644
--- a/frontend/app/components/Dashboard/components/DashboardEditModal/index.ts
+++ b/frontend/app/components/Dashboard/components/DashboardEditModal/index.ts
@@ -1 +1 @@
-export { default } from './DashboardEditModal'
\ No newline at end of file
+export { default } from './DashboardEditModal';
diff --git a/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx b/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx
index dc06c7a53..c98612605 100644
--- a/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardForm/DashboardForm.tsx
@@ -3,57 +3,74 @@ import React from 'react';
import { Input } from 'UI';
import cn from 'classnames';
import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
-interface Props {
-}
+interface Props {}
function DashboardForm(props: Props) {
- const { dashboardStore } = useStore();
- const dashboard = dashboardStore.dashboardInstance;
+ const { t } = useTranslation();
+ const { dashboardStore } = useStore();
+ const dashboard = dashboardStore.dashboardInstance;
- const write = ({ target: { value, name } }) => dashboard.update({ [ name ]: value })
- const writeRadio = ({ target: { value, name } }) => {
- dashboard.update({ [name]: value === 'team' });
- }
+ const write = ({ target: { value, name } }) =>
+ dashboard.update({ [name]: value });
+ const writeRadio = ({ target: { value, name } }) => {
+ dashboard.update({ [name]: value === 'team' });
+ };
- return useObserver(() => (
-
-
-
-
-
-
-
- {user.name}
- {/* some-button */}
-
-
-
+ const { user } = props;
+ return (
+ {user.sessions}
-
+
+ );
}
-export default CardUserItem;
\ No newline at end of file
+export default CardUserItem;
diff --git a/frontend/app/components/Dashboard/components/CardUserList/CardUserList.tsx b/frontend/app/components/Dashboard/components/CardUserList/CardUserList.tsx
index 842184f2e..7b3d4967d 100644
--- a/frontend/app/components/Dashboard/components/CardUserList/CardUserList.tsx
+++ b/frontend/app/components/Dashboard/components/CardUserList/CardUserList.tsx
@@ -3,76 +3,88 @@ import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import { RouteComponentProps, withRouter } from 'react-router';
import { Loader, Pagination } from 'UI';
-import { Button } from 'antd'
+import { Button } from 'antd';
+import { useStore } from 'App/mstore';
import SessionsModal from './SessionsModal';
import CardUserItem from './CardUserItem';
-import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
interface Props {
- history: any;
- location: any;
+ history: any;
+ location: any;
}
function CardUserList(props: RouteComponentProps
+
+
+
- );
+
+
+ {user.name}
+ {/* some-button */}
+
+
+
+ {user.sessions}
+
+
+
-
- {data.map((item: any, index: any) => (
-
-
- ({ sessions: [], total: 0 });
- const filter = useObserver(() => sessionStore.userFilter);
+ const { t } = useTranslation();
+ const { userId, hash, name } = props;
+ const { sessionStore } = useStore();
+ const { hideModal } = useModal();
+ const [loading, setLoading] = React.useState(false);
+ const [data, setData] = React.useState({ sessions: [], total: 0 });
+ const filter = useObserver(() => sessionStore.userFilter);
- const onDateChange = (period: any) => {
- filter.update('period', period);
+ const onDateChange = (period: any) => {
+ filter.update('period', period);
+ };
+
+ const fetchData = () => {
+ setLoading(true);
+ sessionStore
+ .getSessions(filter)
+ .then(setData)
+ .catch(() => {
+ console.log('error');
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ };
+
+ useEffect(() => {
+ const userFilter = {
+ key: FilterKey.USERID,
+ value: [userId],
+ operator: 'is',
+ isEvent: false,
};
+ filter.update('filters', [userFilter]);
+ }, []);
+ useEffect(fetchData, [filter.page, filter.startDate, filter.endDate]);
- const fetchData = () => {
- setLoading(true);
- sessionStore
- .getSessions(filter)
- .then(setData)
- .catch(() => {
- console.log('error');
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- useEffect(() => {
- const userFilter = { key: FilterKey.USERID, value: [userId], operator: 'is', isEvent: false };
- filter.update('filters', [userFilter]);
- }, []);
- useEffect(fetchData, [filter.page, filter.startDate, filter.endDate]);
-
- return (
-
+ );
}
export default observer(SessionsModal);
diff --git a/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/index.ts b/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/index.ts
index 914a0b55b..8d8b31d23 100644
--- a/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/index.ts
+++ b/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/index.ts
@@ -1 +1 @@
-export { default } from './SessionsModal';
\ No newline at end of file
+export { default } from './SessionsModal';
diff --git a/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx b/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx
index a8a89e7cb..5171e706d 100644
--- a/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx
+++ b/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx
@@ -1,49 +1,52 @@
import React from 'react';
-import { Checkbox } from "UI";
-import { Button } from 'antd'
+import { Checkbox } from 'UI';
+import { Button } from 'antd';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { toJS } from 'mobx';
+import { useTranslation } from 'react-i18next';
function ClickMapRagePicker() {
- const { metricStore, dashboardStore } = useStore();
+ const { t } = useTranslation();
+ const { metricStore, dashboardStore } = useStore();
- const onToggle = (e: React.ChangeEvent
-
+ showModal(Returning users between
-
-
-
- handleClick(item)}>
-
- ))}
-
- metricStore.updateKey('sessionsPage', page)}
- limit={metricStore.sessionsPageSize}
- debounceRequest={500}
- />
-
+ return (
+
- Showing {Math.min(data.length, pageSize)} out of{' '}
- {data.length} Issues
-
-
+
+ {data.map((item: any, index: any) => (
+
+
+
+ );
}
-export default withRouter(observer(CardUserList));
\ No newline at end of file
+export default withRouter(observer(CardUserList));
diff --git a/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx b/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx
index 26b4a5cc1..5cba5f2a2 100644
--- a/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx
+++ b/frontend/app/components/Dashboard/components/CardUserList/SessionsModal/SessionsModal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable i18next/no-literal-string */
import React, { useEffect } from 'react';
import { useStore } from 'App/mstore';
import { FilterKey } from 'App/types/filter/filterType';
@@ -7,93 +8,126 @@ import SelectDateRange from 'Shared/SelectDateRange';
import { useObserver, observer } from 'mobx-react-lite';
import { useModal } from 'App/components/Modal';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { useTranslation } from 'react-i18next';
const PER_PAGE = 10;
interface Props {
- userId: string;
- hash: string;
- name: string;
+ userId: string;
+ hash: string;
+ name: string;
}
function SessionsModal(props: Props) {
- const { userId, hash, name } = props;
- const { sessionStore } = useStore();
- const { hideModal } = useModal();
- const [loading, setLoading] = React.useState(false);
- const [data, setData] = React.useState
+
+
+ {t('Returning users between')}
+
+
- );
+ handleClick(item)}>
+
+ ))}
+
+
+ metricStore.updateKey('sessionsPage', page)
+ }
+ limit={metricStore.sessionsPageSize}
+ debounceRequest={500}
+ />
+
+
+ {t('Showing')}{' '}
+ {Math.min(data.length, pageSize)}{' '}
+ {t('out of')} {data.length}
+ {t('Issues')}
+
+
-
-
- }>
-
-
-
-
-
-
- {name}'s Sessions
-
-
-
- No recordings found.
-
-
- {data.sessions.map((session: any) => (
-
-
-
-
+ return (
+
-
- ))}
-
- filter.update('page', page)}
- limit={PER_PAGE}
- debounceRequest={1000}
- />
-
-
- {/* showing x to x of total sessions */}
- Showing {(filter.page - 1) * PER_PAGE + 1} to{' '}
- {(filter.page - 1) * PER_PAGE + data.sessions.length} of{' '}
- {data.total} sessions.
-
-
+
+
+ }
+ >
+
+
+
+
+
- );
+
+ {name}
+ 's
+ {t('Sessions')}
+
+
+
+ {t('No recordings found.')}
+
+
+
+ {data.sessions.map((session: any) => (
+
+
+
+
+
+
+ ))}
+
+ filter.update('page', page)}
+ limit={PER_PAGE}
+ debounceRequest={1000}
+ />
+
+
+ {/* showing x to x of total sessions */}
+ {t('Showing')}{' '}
+
+ {(filter.page - 1) * PER_PAGE + 1}
+ {' '}
+ {t('to')}{' '}
+
+ {(filter.page - 1) * PER_PAGE + data.sessions.length}
+ {' '}
+ {t('of')} {data.total}
+ {t('sessions.')}
+
+
+
+ );
}
-export default observer(ClickMapRagePicker);
\ No newline at end of file
+export default observer(ClickMapRagePicker);
diff --git a/frontend/app/components/Dashboard/components/ClickMapRagePicker/index.ts b/frontend/app/components/Dashboard/components/ClickMapRagePicker/index.ts
index 208ab0919..4fd4c435a 100644
--- a/frontend/app/components/Dashboard/components/ClickMapRagePicker/index.ts
+++ b/frontend/app/components/Dashboard/components/ClickMapRagePicker/index.ts
@@ -1 +1 @@
-export { default } from './ClickMapRagePicker'
\ No newline at end of file
+export { default } from './ClickMapRagePicker';
diff --git a/frontend/app/components/Dashboard/components/CreateCardButton.tsx b/frontend/app/components/Dashboard/components/CreateCardButton.tsx
index faaff2ec0..5b44c5912 100644
--- a/frontend/app/components/Dashboard/components/CreateCardButton.tsx
+++ b/frontend/app/components/Dashboard/components/CreateCardButton.tsx
@@ -1,32 +1,39 @@
-import React from "react";
-import {Tooltip} from "UI";
-import {Button} from "antd";
+import React from 'react';
+import { Tooltip } from 'UI';
+import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
-import AddCardSelectionModal from "Components/Dashboard/components/AddCardSelectionModal";
-import {useStore} from "App/mstore";
+import AddCardSelectionModal from 'Components/Dashboard/components/AddCardSelectionModal';
+import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
const MAX_CARDS = 29;
function CreateCardButton() {
- const [open, setOpen] = React.useState(false);
- const {dashboardStore} = useStore();
- const dashboard: any = dashboardStore.selectedDashboard;
- const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
+ const { t } = useTranslation();
+ const [open, setOpen] = React.useState(false);
+ const { dashboardStore } = useStore();
+ const dashboard: any = dashboardStore.selectedDashboard;
+ const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS;
- return <>
-
-
- );
+
+
-
+ const onItemClick = (dashboard) => {
+ dashboardStore.selectDashboardById(dashboard.dashboardId);
+ const path = withSiteId(
+ dashboardSelected(dashboard.dashboardId),
+ parseInt(props.siteId),
);
+ props.history.push(path);
+ hideModal();
+ };
+ return (
+ Dashboards
-
- {dashboards.map((item: any) => (
-
-
- onItemClick(item)} // TODO add click handler
- leading = {(
-
- ))}
-
- {item.isPublic &&
- )}
- />
-
+
+ );
}
export default withRouter(DashbaordListModal);
diff --git a/frontend/app/components/Dashboard/components/DashbaordListModal/index.ts b/frontend/app/components/Dashboard/components/DashbaordListModal/index.ts
index 2948a8225..b79e6109a 100644
--- a/frontend/app/components/Dashboard/components/DashbaordListModal/index.ts
+++ b/frontend/app/components/Dashboard/components/DashbaordListModal/index.ts
@@ -1 +1 @@
-export { default } from './DashbaordListModal'
\ No newline at end of file
+export { default } from './DashbaordListModal';
diff --git a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
index 1be4a2444..579d8a66d 100644
--- a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
@@ -3,62 +3,64 @@ import React from 'react';
import { Modal, Form, Icon, Checkbox, Input } from 'UI';
import { Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
-import { useStore } from 'App/mstore'
+import { useStore } from 'App/mstore';
+import { useTranslation } from 'react-i18next';
interface Props {
- show: boolean;
- // dashboard: any;
- closeHandler?: () => void;
- focusTitle?: boolean;
+ show: boolean;
+ // dashboard: any;
+ closeHandler?: () => void;
+ focusTitle?: boolean;
}
function DashboardEditModal(props: Props) {
- const { show, closeHandler, focusTitle } = props;
- const { dashboardStore } = useStore();
- const dashboard = useObserver(() => dashboardStore.dashboardInstance);
+ const { t } = useTranslation();
+ const { show, closeHandler, focusTitle } = props;
+ const { dashboardStore } = useStore();
+ const dashboard = useObserver(() => dashboardStore.dashboardInstance);
- const onSave = () => {
- dashboardStore.save(dashboard).then(closeHandler);
- }
+ const onSave = () => {
+ dashboardStore.save(dashboard).then(closeHandler);
+ };
- React.useEffect(() => {
- const handleEsc = (e) => e.key === 'Escape' && closeHandler?.()
- document.addEventListener("keydown", handleEsc, false);
- return () => {
- document.removeEventListener("keydown", handleEsc, false);
- }
- }, [])
+ React.useEffect(() => {
+ const handleEsc = (e) => e.key === 'Escape' && closeHandler?.();
+ document.addEventListener('keydown', handleEsc, false);
+ return () => {
+ document.removeEventListener('keydown', handleEsc, false);
+ };
+ }, []);
- const write = ({ target: { value, name } }) => dashboard.update({ [ name ]: value })
+ const write = ({ target: { value, name } }) =>
+ dashboard.update({ [name]: value });
- return useObserver(() => (
-
+ {t('Dashboards')}
+
+
+ {dashboards.map((item: any) => (
+
+
+ onItemClick(item)} // TODO add click handler
+ leading={
+
+ ))}
+
+ {item.isPublic && (
+
+ }
+ />
+
+
+ )}
+ { 'Edit Dashboard' }
- }
- />
-
- {t('Edit Dashboard')}
+ }
+ />
+
+
+ dashboard.update({ isPublic: !dashboard.isPublic })
+ }
+ />
+
+
+ dashboard.update({ isPublic: !dashboard.isPublic })
+ }
+ >
+
+
+
+
+
+
-
-
+
}
onClick={() => onEdit(true)}
@@ -83,16 +85,15 @@ function DashboardHeader(props: Props) {
className="flex items-center gap-2"
style={{ flex: 1, justifyContent: 'end' }}
>
-
- (null);
const [focusTitle, setFocusedInput] = React.useState(true);
const [showEditModal, setShowEditModal] = React.useState(false);
@@ -51,9 +53,11 @@ function DashboardList() {
if (!dashboard) return;
if (
await confirm({
- header: 'Delete Dashboard',
- confirmButton: 'Yes, delete',
- confirmation: `Are you sure you want to permanently delete this Dashboard?`,
+ header: t('Delete Dashboard'),
+ confirmButton: t('Yes, delete'),
+ confirmation: t(
+ 'Are you sure you want to permanently delete this Dashboard?',
+ ),
})
) {
void dashboardStore.deleteDashboard(dashboard);
@@ -62,7 +66,7 @@ function DashboardList() {
const tableConfig: TableColumnsType = [
{
- title: 'Title',
+ title: t('Title'),
dataIndex: 'name',
width: '25%',
sorter: (a, b) => a.name?.localeCompare(b.name),
@@ -70,7 +74,7 @@ function DashboardList() {
render: (t) =>
-
-
-
+ return useObserver(() => (
+
+
+ ));
}
export default DashboardForm;
diff --git a/frontend/app/components/Dashboard/components/DashboardForm/index.ts b/frontend/app/components/Dashboard/components/DashboardForm/index.ts
index 01c5b0072..a5b3a736d 100644
--- a/frontend/app/components/Dashboard/components/DashboardForm/index.ts
+++ b/frontend/app/components/Dashboard/components/DashboardForm/index.ts
@@ -1 +1 @@
-export { default } from './DashboardForm';
\ No newline at end of file
+export { default } from './DashboardForm';
diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
index 033fe55da..adee84b0c 100644
--- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
@@ -3,15 +3,16 @@ import BackButton from 'Shared/Breadcrumb/BackButton';
import { withSiteId } from 'App/routes';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { PageTitle, confirm } from 'UI';
-import { Tooltip, Popover, Button } from 'antd';
+import { Tooltip, Popover, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import SelectDateRange from 'Shared/SelectDateRange';
import { useStore } from 'App/mstore';
-import DashboardOptions from '../DashboardOptions';
import withModal from 'App/components/Modal/withModal';
import { observer } from 'mobx-react-lite';
+import DashboardOptions from '../DashboardOptions';
import DashboardEditModal from '../DashboardEditModal';
import AddCardSection from '../AddCardSection/AddCardSection';
+import { useTranslation } from 'react-i18next';
interface IProps {
siteId: string;
@@ -21,6 +22,7 @@ interface IProps {
type Props = IProps & RouteComponentProps;
function DashboardHeader(props: Props) {
+ const { t } = useTranslation();
const { siteId } = props;
const [popoverOpen, setPopoverOpen] = React.useState(false);
const handleOpenChange = (open: boolean) => {
@@ -29,7 +31,7 @@ function DashboardHeader(props: Props) {
const { dashboardStore } = useStore();
const [focusTitle, setFocusedInput] = React.useState(true);
const [showEditModal, setShowEditModal] = React.useState(false);
- const period = dashboardStore.period;
+ const { period } = dashboardStore;
const dashboard: any = dashboardStore.selectedDashboard;
@@ -42,13 +44,15 @@ function DashboardHeader(props: Props) {
const onDelete = async () => {
if (
await confirm({
- header: 'Delete Dashboard',
- confirmButton: 'Yes, delete',
- confirmation: `Are you sure you want to permanently delete this Dashboard?`,
+ header: t('Delete Dashboard'),
+ confirmButton: t('Yes, delete'),
+ confirmation: t(
+ 'Are you sure you want to permanently delete this Dashboard?',
+ ),
})
) {
dashboardStore.deleteDashboard(dashboard).then(() => {
- props.history.push(withSiteId(`/dashboard`, siteId));
+ props.history.push(withSiteId('/dashboard', siteId));
});
}
};
@@ -60,19 +64,17 @@ function DashboardHeader(props: Props) {
focusTitle={focusTitle}
/>
-
+
+
+
-
-
+
+
+
-
- ));
+
-
+
+
+
-
-
- {dashboard?.name}
+
+ {' '}
+ {dashboard?.name}
+
{t}
,
},
{
- title: 'Owner',
+ title: t('Owner'),
dataIndex: 'owner',
width: '16.67%',
sorter: (a, b) => a.owner?.localeCompare(b.owner),
@@ -78,7 +82,7 @@ function DashboardList() {
render: (owner) => {owner}
,
},
{
- title: 'Last Modified',
+ title: t('Last Modified'),
dataIndex: 'updatedAt',
width: '16.67%',
sorter: (a, b) => a.updatedAt.toMillis() - b.updatedAt.toMillis(),
@@ -88,10 +92,10 @@ function DashboardList() {
{
title: (
-
-
Visibility
+
+
@@ -117,7 +121,7 @@ function DashboardList() {
bordered={false}
className="rounded-lg"
>
- {isPublic ? 'Team' : 'Private'}
+ {isPublic ? t('Team') : t('Private')}
),
},
@@ -131,23 +135,23 @@ function DashboardList() {
- No matching results
+ {t('No matching results')}
@@ -189,10 +195,10 @@ function DashboardList() {
- Create and organize your insights
+ {t('Create and organize your insights')}
+
+ {gradientDef}
+ Styles.tickFormatter(val)}
+ label={{ ...Styles.axisLabelLeft, value: data?.label }}
+ />
+
+
+
+
+
+ );
}
export default AreaChartCard;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
index 8d426ec6f..1f32fa3ac 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
@@ -1,30 +1,48 @@
import React from 'react';
-import ExCard from './ExCard';
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import {
+ Bar,
+ BarChart,
+ CartesianGrid,
+ Legend,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from 'recharts';
import { Styles } from 'Components/Dashboard/Widgets/common';
+import ExCard from './ExCard';
interface Props {
title: string;
type: string;
onCard: (card: string) => void;
onClick?: any;
- data?: any,
- hideLegend?: boolean,
+ data?: any;
+ hideLegend?: boolean;
}
function BarChartCard(props: Props) {
- const keys = props.data ? Object.keys(props.data.chart[0]).filter(key => key !== 'time') : [];
+ const keys = props.data
+ ? Object.keys(props.data.chart[0]).filter((key) => key !== 'time')
+ : [];
return (
- Styles.tickFormatter(val)}
- label={{ ...Styles.axisLabelLeft, value: props.data?.label || 'Number of Errors' }}
+ tickFormatter={(val) => Styles.tickFormatter(val)}
+ label={{
+ ...Styles.axisLabelLeft,
+ value: props.data?.label || 'Number of Errors',
+ }}
allowDecimals={false}
/>
{!props.hideLegend && }
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx
index e77764c0f..d71583ace 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars.tsx
@@ -1,61 +1,58 @@
import React from 'react';
-import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard";
-import {List, Progress} from "antd";
-
+import ExCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard';
+import { List, Progress } from 'antd';
interface Props {
- title: string;
- type: string;
- onCard: (card: string) => void;
- data?: any;
+ title: string;
+ type: string;
+ onCard: (card: string) => void;
+ data?: any;
}
function Bars(props: Props) {
- const _data = props.data || {
- total: 90,
- values: [
- {
- "label": "company.domain.com",
- "value": 89
- },
- {
- "label": "openreplay.com",
- "value": 15
- }
- ]
- }
- return (
-
-
-
- )}
- description={(
-
- )}
- />
-
- )}
+ const _data = props.data || {
+ total: 90,
+ values: [
+ {
+ label: 'company.domain.com',
+ value: 89,
+ },
+ {
+ label: 'openreplay.com',
+ value: 15,
+ },
+ ],
+ };
+ return (
+
+
+ }
+ description={
+
+ }
/>
-
- );
+
+ )}
+ />
+
+ );
}
export default Bars;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx
index b0f056569..30ac5248d 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample.tsx
@@ -1,23 +1,23 @@
import React from 'react';
-import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard";
-import CallWithErrors from "Components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors";
+import ExCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard';
+import CallWithErrors from 'Components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors';
interface Props {
- title: string;
- type: string;
- onCard: (card: string) => void;
- onClick?: any;
- data?: any,
+ title: string;
+ type: string;
+ onCard: (card: string) => void;
+ onClick?: any;
+ data?: any;
}
function CallsWithErrorsExample(props: Props) {
- return (
-
-
- );
+ return (
+
+
+ );
}
export default CallsWithErrorsExample;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx
index 6dd084040..f127d4f39 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx
@@ -9,35 +9,38 @@ import {
import React from 'react';
import ExCard from './ExCard';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
-const TYPES = {
- Frustrations: 'frustrations',
- Errors: 'errors',
- Users: 'users',
-};
+const TYPES = (t: TFunction) => ({
+ Frustrations: t('frustrations'),
+ Errors: t('errors'),
+ Users: t('users'),
+});
function ExampleCount(props: any) {
- const [type, setType] = React.useState(TYPES.Frustrations);
+ const { t } = useTranslation();
+ const [type, setType] = React.useState(TYPES(t).Frustrations);
const el = {
- [TYPES.Frustrations]:
+
{t('Visibility')}
- Try adjusting your search criteria or creating a new dashboard.
+ {t(
+ 'Try adjusting your search criteria or creating a new dashboard.',
+ )}
- Build dashboards to track key metrics and monitor performance in one place.
+ {t('Build dashboards to track key metrics and monitor performance in one place.')}
-
- );
+function DashboardsView({ history, siteId }: { history: any; siteId: string }) {
+ return (
+
+
+ );
}
export default withPageTitle('Dashboards - OpenReplay')(DashboardsView);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
index d4a3b9231..89513f46c 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
@@ -2,32 +2,32 @@ import React from 'react';
import { PageTitle } from 'UI';
-import DashboardSearch from './DashboardSearch';
import CreateDashboardButton from 'Components/Dashboard/components/CreateDashboardButton';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
+import DashboardSearch from './DashboardSearch';
+import { useTranslation } from 'react-i18next';
function Header() {
+ const { t } = useTranslation();
const { dashboardStore } = useStore();
const dashboardsSearch = dashboardStore.filter.query;
const showSearch = dashboardStore.dashboards.length > 0 || dashboardsSearch;
return (
- <>
-
-
+
+ }
+ show={data?.chart.length === 0}
+ >
+ <>
+ {/*
-
- {showSearch && (
-
-
- )}
+
-
-
+
);
}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx
index f2c5a4b13..f4766acc2 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx
@@ -10,7 +10,9 @@ const CARD_TYPES_MAP = CARD_CATEGORIES.reduce((acc: any, category: any) => {
return acc;
}, {});
-const WidgetChart = lazy(() => import('Components/Dashboard/components/WidgetChart/WidgetChart'));
+const WidgetChart = lazy(
+ () => import('Components/Dashboard/components/WidgetChart/WidgetChart'),
+);
interface Props {
category?: string;
@@ -29,11 +31,13 @@ function CardsLibrary(props: Props) {
// });
// }, [metricStore.filteredCards, props.category]);
- const cards = useMemo(() => {
- return metricStore.filteredCards.filter((card: any) => {
- return card.name.toLowerCase().includes(query.toLowerCase());
- });
- }, [query, metricStore.filteredCards]);
+ const cards = useMemo(
+ () =>
+ metricStore.filteredCards.filter((card: any) =>
+ card.name.toLowerCase().includes(query.toLowerCase()),
+ ),
+ [query, metricStore.filteredCards],
+ );
useEffect(() => {
metricStore.fetchList();
@@ -50,7 +54,7 @@ function CardsLibrary(props: Props) {
+
-
+ {showSearch && (
+
+
+ )}
+
+
+
{cards.map((metric: any) => (
-
-
- {gradientDef}
-
- Styles.tickFormatter(val)}
- label={{...Styles.axisLabelLeft, value: data?.label}}
- />
-
-
-
-
-
- );
+ return (
+
+
+ }
+ >
+
+
-
- }
- >
-
-
- }
- show={data?.chart.length === 0}
- >
- <>
- {/* onItemClick(e, metric.metricId)}
@@ -80,9 +84,9 @@ function CardsLibrary(props: Props) {
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
index ef685eceb..90b92f80d 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CreateCard.tsx
@@ -1,108 +1,100 @@
import React from 'react';
-import {Button, Space} from "antd";
-import {ArrowLeft, ArrowRight} from "lucide-react";
-import CardBuilder from "Components/Dashboard/components/WidgetForm/CardBuilder";
-import {useHistory} from "react-router";
-import {useStore} from "App/mstore";
-import { HEATMAP } from "App/constants/card";
-import {renderClickmapThumbnail} from "Components/Dashboard/components/WidgetForm/renderMap";
-import WidgetPreview from "Components/Dashboard/components/WidgetPreview/WidgetPreview";
+import { Button, Space } from 'antd';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { useHistory } from 'react-router';
+import { useStore } from 'App/mstore';
+import { HEATMAP } from 'App/constants/card';
+import { renderClickmapThumbnail } from 'Components/Dashboard/components/WidgetForm/renderMap';
+import WidgetPreview from 'Components/Dashboard/components/WidgetPreview/WidgetPreview';
import WidgetFormNew from 'Components/Dashboard/components/WidgetForm/WidgetFormNew';
-
-const getTitleByType = (type: string) => {
- switch (type) {
- case HEATMAP:
- return 'Heatmap';
- default:
- return 'Trend Single';
- }
-}
+import { useTranslation } from 'react-i18next';
interface Props {
- // cardType: string,
- onBack?: () => void
- onAdded?: () => void
- extra?: React.ReactNode
+ // cardType: string,
+ onBack?: () => void;
+ onAdded?: () => void;
+ extra?: React.ReactNode;
}
function CreateCard(props: Props) {
- const history = useHistory();
- const {metricStore, dashboardStore, aiFiltersStore} = useStore();
- const metric = metricStore.instance;
- const siteId: string = history.location.pathname.split('/')[1];
- const dashboardId: string = history.location.pathname.split('/')[3];
- const isItDashboard = history.location.pathname.includes('dashboard')
- // const title = getTitleByType(metric.metricType)
+ const { t } = useTranslation();
+ const history = useHistory();
+ const { metricStore, dashboardStore, aiFiltersStore } = useStore();
+ const metric = metricStore.instance;
+ const siteId: string = history.location.pathname.split('/')[1];
+ const dashboardId: string = history.location.pathname.split('/')[3];
+ const isItDashboard = history.location.pathname.includes('dashboard');
+ // const title = getTitleByType(metric.metricType)
- const createNewDashboard = async () => {
- dashboardStore.initDashboard();
- return await dashboardStore
- .save(dashboardStore.dashboardInstance)
- .then(async (syncedDashboard) => {
- dashboardStore.selectDashboardById(syncedDashboard.dashboardId);
- return syncedDashboard.dashboardId;
- });
- }
+ const createNewDashboard = async () => {
+ dashboardStore.initDashboard();
+ return await dashboardStore
+ .save(dashboardStore.dashboardInstance)
+ .then(async (syncedDashboard) => {
+ dashboardStore.selectDashboardById(syncedDashboard.dashboardId);
+ return syncedDashboard.dashboardId;
+ });
+ };
- const addCardToDashboard = async (dashboardId: string, metricId: string) => {
- return dashboardStore.addWidgetToDashboard(
- dashboardStore.getDashboard(parseInt(dashboardId, 10))!, [metricId]
- );
- }
-
- const createCard = async () => {
- const isClickMap = metric.metricType === HEATMAP;
- if (isClickMap) {
- try {
- metric.thumbnail = await renderClickmapThumbnail();
- } catch (e) {
- console.error(e);
- }
- }
-
- const savedMetric = await metricStore.save(metric);
- return savedMetric.metricId;
- }
-
- const createDashboardAndAddCard = async () => {
- const cardId = await createCard();
-
- if (dashboardId) {
- await addCardToDashboard(dashboardId, cardId);
- void dashboardStore.fetch(dashboardId);
- props.onAdded?.();
- } else if (isItDashboard) {
- const dashboardId = await createNewDashboard();
- await addCardToDashboard(dashboardId, cardId);
- history.replace(`${history.location.pathname}/${dashboardId}`);
- } else {
- history.replace(`${history.location.pathname}/${cardId}`);
- }
- }
-
- return (
-
- */}
-
-
+ const addCardToDashboard = async (dashboardId: string, metricId: string) =>
+ dashboardStore.addWidgetToDashboard(
+ dashboardStore.getDashboard(parseInt(dashboardId, 10))!,
+ [metricId],
);
+
+ const createCard = async () => {
+ const isClickMap = metric.metricType === HEATMAP;
+ if (isClickMap) {
+ try {
+ metric.thumbnail = await renderClickmapThumbnail();
+ } catch (e) {
+ console.error(e);
+ }
+ }
+
+ const savedMetric = await metricStore.save(metric);
+ return savedMetric.metricId;
+ };
+
+ const createDashboardAndAddCard = async () => {
+ const cardId = await createCard();
+
+ if (dashboardId) {
+ await addCardToDashboard(dashboardId, cardId);
+ void dashboardStore.fetch(dashboardId);
+ props.onAdded?.();
+ } else if (isItDashboard) {
+ const dashboardId = await createNewDashboard();
+ await addCardToDashboard(dashboardId, cardId);
+ history.replace(`${history.location.pathname}/${dashboardId}`);
+ } else {
+ history.replace(`${history.location.pathname}/${cardId}`);
+ }
+ };
+
+ return (
+
-
- {props.onBack ? : null}
-
-
-
- {props.extra}
- {/*
- {metric.name}
-
-
+ */}
+
+ );
}
export default CreateCard;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index 17945fbfb..f5c01655b 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -1,10 +1,3 @@
-import ExampleFunnel from './Examples/Funnel';
-import ExamplePath from './Examples/Path';
-import ExampleTrend from './Examples/Trend';
-import ByBrowser from './Examples/SessionsBy/ByBrowser';
-import BySystem from './Examples/SessionsBy/BySystem';
-import ByCountry from './Examples/SessionsBy/ByCountry';
-import ByUrl from './Examples/SessionsBy/ByUrl';
import {
HEATMAP,
ERRORS,
@@ -12,7 +5,7 @@ import {
TABLE,
TIMESERIES,
USER_PATH,
-} from "App/constants/card";
+} from 'App/constants/card';
import { FilterKey } from 'Types/filter/filterType';
import { BarChart, TrendingUp, SearchSlash } from 'lucide-react';
import ByUser from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser';
@@ -20,6 +13,14 @@ import HeatmapsExample from 'Components/Dashboard/components/DashboardList/NewDa
import ByReferrer from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer';
import ByFetch from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth';
import TableOfErrors from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/TableOfErrors';
+import ByUrl from './Examples/SessionsBy/ByUrl';
+import ByCountry from './Examples/SessionsBy/ByCountry';
+import BySystem from './Examples/SessionsBy/BySystem';
+import ByBrowser from './Examples/SessionsBy/ByBrowser';
+import ExampleTrend from './Examples/Trend';
+import ExamplePath from './Examples/Path';
+import ExampleFunnel from './Examples/Funnel';
+import { TFunction } from 'i18next';
export const CARD_CATEGORY = {
PRODUCT_ANALYTICS: 'product-analytics',
@@ -27,10 +28,25 @@ export const CARD_CATEGORY = {
ERROR_TRACKING: 'error-tracking',
};
-export const CARD_CATEGORIES = [
- { key: CARD_CATEGORY.PRODUCT_ANALYTICS, label: 'Product Analytics', icon: TrendingUp, types: [USER_PATH, ERRORS] },
- { key: CARD_CATEGORY.WEB_ANALYTICS, label: 'Web Analytics', icon: BarChart, types: [TABLE] },
- { key: CARD_CATEGORY.ERROR_TRACKING, label: 'Monitors', icon: SearchSlash, types: [] },
+export const CARD_CATEGORIES = (t: TFunction) => [
+ {
+ key: CARD_CATEGORY.PRODUCT_ANALYTICS,
+ label: t('Product Analytics'),
+ icon: TrendingUp,
+ types: [USER_PATH, ERRORS],
+ },
+ {
+ key: CARD_CATEGORY.WEB_ANALYTICS,
+ label: t('Web Analytics'),
+ icon: BarChart,
+ types: [TABLE],
+ },
+ {
+ key: CARD_CATEGORY.ERROR_TRACKING,
+ label: t('Monitors'),
+ icon: SearchSlash,
+ types: [],
+ },
];
export interface CardType {
@@ -48,45 +64,43 @@ export interface CardType {
viewType?: string;
}
-export const CARD_LIST: CardType[] = [
+export const CARD_LIST: (t: TFunction) => CardType[] = (t) => [
{
title: 'Untitled Funnel',
key: FUNNEL,
cardType: FUNNEL,
- category: CARD_CATEGORIES[0].key,
+ category: CARD_CATEGORIES(t)[0].key,
example: ExampleFunnel,
width: 4,
height: 300,
data: {
stages: [
{
- 'value': [
- '/sessions'
- ],
- 'type': 'location',
- 'operator': 'contains',
- 'count': 1586,
- 'dropPct': null,
- 'dropDueToIssues': 0
+ value: ['/sessions'],
+ type: 'location',
+ operator: 'contains',
+ count: 1586,
+ dropPct: null,
+ dropDueToIssues: 0,
},
{
- 'value': [],
- 'type': 'click',
- 'operator': 'onAny',
- 'count': 1292,
- 'dropPct': 18,
- 'dropDueToIssues': 294
- }
+ value: [],
+ type: 'click',
+ operator: 'onAny',
+ count: 1292,
+ dropPct: 18,
+ dropDueToIssues: 294,
+ },
],
// totalDropDueToIssues: 294
- }
+ },
},
{
title: 'Untitled Heatmaps',
key: HEATMAP,
cardType: HEATMAP,
metricOf: 'heatMapUrl',
- category: CARD_CATEGORIES[0].key,
+ category: CARD_CATEGORIES(t)[0].key,
example: HeatmapsExample,
viewType: 'chart',
},
@@ -94,48 +108,43 @@ export const CARD_LIST: CardType[] = [
title: 'Untitled Journey',
key: USER_PATH,
cardType: USER_PATH,
- category: CARD_CATEGORIES[0].key,
- example: ExamplePath
+ category: CARD_CATEGORIES(t)[0].key,
+ example: ExamplePath,
},
{
title: 'Untitled Trend',
key: TIMESERIES,
cardType: TIMESERIES,
metricOf: 'sessionCount',
- category: CARD_CATEGORIES[0].key,
+ category: CARD_CATEGORIES(t)[0].key,
data: {
- chart: generateTimeSeriesData(),
+ chart: generateTimeSeriesData(t),
label: 'Number of Sessions',
- namesMap: [
- 'Series 1'
- ]
+ namesMap: ['Series 1'],
},
- example: ExampleTrend
+ example: ExampleTrend,
},
{
title: 'Untitled Users Trend',
- key: TIMESERIES + '_userCount',
+ key: `${TIMESERIES}_userCount`,
cardType: TIMESERIES,
metricOf: 'userCount',
- category: CARD_CATEGORIES[0].key,
+ category: CARD_CATEGORIES(t)[0].key,
data: {
- chart: generateTimeSeriesData(),
+ chart: generateTimeSeriesData(t),
label: 'Number of Users',
- namesMap: [
- 'Series 1'
- ]
+ namesMap: ['Series 1'],
},
- example: ExampleTrend
+ example: ExampleTrend,
},
-
// Web analytics
{
title: 'Untitled Top Users',
key: FilterKey.USERID,
cardType: TABLE,
metricOf: FilterKey.USERID,
- category: CARD_CATEGORIES[1].key,
+ category: CARD_CATEGORIES(t)[1].key,
example: ByUser,
viewType: 'table',
},
@@ -145,7 +154,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.USER_BROWSER,
cardType: TABLE,
metricOf: FilterKey.USER_BROWSER,
- category: CARD_CATEGORIES[1].key,
+ category: CARD_CATEGORIES(t)[1].key,
example: ByBrowser,
viewType: 'table',
},
@@ -154,7 +163,7 @@ export const CARD_LIST: CardType[] = [
// key: TYPE.SESSIONS_BY_SYSTEM,
// cardType: TABLE,
// metricOf: FilterKey.USER_OS,
- // category: CARD_CATEGORIES[1].key,
+ // category: CARD_CATEGORIES(t)[1].key,
// example: BySystem,
// },
{
@@ -162,7 +171,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.USER_COUNTRY,
cardType: TABLE,
metricOf: FilterKey.USER_COUNTRY,
- category: CARD_CATEGORIES[1].key,
+ category: CARD_CATEGORIES(t)[1].key,
example: ByCountry,
viewType: 'table',
},
@@ -172,7 +181,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.USER_DEVICE,
cardType: TABLE,
metricOf: FilterKey.USER_DEVICE,
- category: CARD_CATEGORIES[1].key,
+ category: CARD_CATEGORIES(t)[1].key,
example: BySystem,
viewType: 'table',
},
@@ -181,7 +190,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.LOCATION,
cardType: TABLE,
metricOf: FilterKey.LOCATION,
- category: CARD_CATEGORIES[1].key,
+ category: CARD_CATEGORIES(t)[1].key,
example: ByUrl,
viewType: 'table',
},
@@ -191,7 +200,7 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.REFERRER,
cardType: TABLE,
metricOf: FilterKey.REFERRER,
- category: CARD_CATEGORIES[1].key,
+ category: CARD_CATEGORIES(t)[1].key,
example: ByReferrer,
viewType: 'table',
},
@@ -202,11 +211,11 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.ERRORS,
cardType: TABLE,
metricOf: FilterKey.ERRORS,
- category: CARD_CATEGORIES[2].key,
+ category: CARD_CATEGORIES(t)[2].key,
data: {
- chart: generateBarChartData(),
+ chart: generateBarChartData(t),
hideLegend: true,
- label: 'Number of Sessions'
+ label: 'Number of Sessions',
},
width: 4,
height: 336,
@@ -218,105 +227,115 @@ export const CARD_LIST: CardType[] = [
key: FilterKey.FETCH,
cardType: TABLE,
metricOf: FilterKey.FETCH,
- category: CARD_CATEGORIES[2].key,
+ category: CARD_CATEGORIES(t)[2].key,
example: ByFetch,
viewType: 'table',
},
{
title: 'Untitled Sessions with 4xx/5xx Requests',
- key: TIMESERIES + '_4xx_requests',
+ key: `${TIMESERIES}_4xx_requests`,
cardType: TIMESERIES,
metricOf: 'sessionCount',
category: CARD_CATEGORY.ERROR_TRACKING,
data: {
- chart: generateTimeSeriesData(),
+ chart: generateTimeSeriesData(t),
label: 'Number of Sessions',
- namesMap: [
- 'Series 1'
- ]
+ namesMap: ['Series 1'],
},
filters: [
{
- "type": "fetch",
- "isEvent": true,
- "value": [],
- "operator": "is",
- "filters": [
+ type: 'fetch',
+ isEvent: true,
+ value: [],
+ operator: 'is',
+ filters: [
{
- "type": "fetchStatusCode",
- "isEvent": false,
- "value": [
- "400"
- ],
- "operator": ">=",
- "filters": []
+ type: 'fetchStatusCode',
+ isEvent: false,
+ value: ['400'],
+ operator: '>=',
+ filters: [],
},
- ]
- }
+ ],
+ },
],
- example: ExampleTrend
+ example: ExampleTrend,
},
{
title: 'Untitled Sessions with Slow Network Requests',
- key: TIMESERIES + '_slow_network_requests',
+ key: `${TIMESERIES}_slow_network_requests`,
cardType: TIMESERIES,
metricOf: 'sessionCount',
category: CARD_CATEGORY.ERROR_TRACKING,
data: {
- chart: generateTimeSeriesData(),
+ chart: generateTimeSeriesData(t),
label: 'Number of Sessions',
- namesMap: [
- 'Series 1'
- ]
+ namesMap: ['Series 1'],
},
filters: [
{
- "type": "fetch",
- "isEvent": true,
- "value": [],
- "operator": "is",
- "filters": [
+ type: 'fetch',
+ isEvent: true,
+ value: [],
+ operator: 'is',
+ filters: [
{
- "type": "fetchDuration",
- "isEvent": false,
- "value": [
- "5000"
- ],
- "operator": ">=",
- "filters": []
+ type: 'fetchDuration',
+ isEvent: false,
+ value: ['5000'],
+ operator: '>=',
+ filters: [],
},
- ]
- }
+ ],
+ },
],
- example: ExampleTrend
+ example: ExampleTrend,
},
];
-function generateTimeSeriesData(): any[] {
- const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
+function generateTimeSeriesData(t: TFunction): any[] {
+ const months = [
+ t('Jan'),
+ t('Feb'),
+ t('Mar'),
+ t('Apr'),
+ t('May'),
+ t('Jun'),
+ t('Jul'),
+ ];
const pointsPerMonth = 3; // Number of points for each month
const data = months.flatMap((month, monthIndex) =>
Array.from({ length: pointsPerMonth }, (_, pointIndex) => ({
time: month,
'Series 1': Math.floor(Math.random() * 90),
- timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000
- }))
+ timestamp:
+ Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000,
+ })),
);
return data;
}
-function generateAreaData(): any[] {
- const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
+function generateAreaData(t: TFunction): any[] {
+ const months = [
+ t('Jan'),
+ t('Feb'),
+ t('Mar'),
+ t('Apr'),
+ t('May'),
+ t('Jun'),
+ t('Jul'),
+ ];
const pointsPerMonth = 3; // Number of points for each month
const data = months.flatMap((month, monthIndex) =>
Array.from({ length: pointsPerMonth }, (_, pointIndex) => ({
time: month,
- 'value': Math.floor(Math.random() * 90),
- timestamp: Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000
- }))
+ value: Math.floor(Math.random() * 90),
+ timestamp:
+ Date.now() + (monthIndex * pointsPerMonth + pointIndex) * 86400000,
+ })),
);
return data;
@@ -326,21 +345,37 @@ function generateRandomValue(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
-function generateBarChartData(): any[] {
- const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
- return months.map(month => ({
+function generateBarChartData(t: TFunction): any[] {
+ const months = [
+ t('Jan'),
+ t('Feb'),
+ t('Mar'),
+ t('Apr'),
+ t('May'),
+ t('Jun'),
+ t('Jul'),
+ ];
+ return months.map((month) => ({
time: month,
- value: generateRandomValue(1000, 5000)
+ value: generateRandomValue(1000, 5000),
}));
}
-function generateStackedBarChartData(keys: any): any[] {
- const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
- return months.map(month => ({
+function generateStackedBarChartData(keys: any, t: TFunction): any[] {
+ const months = [
+ t('Jan'),
+ t('Feb'),
+ t('Mar'),
+ t('Apr'),
+ t('May'),
+ t('Jun'),
+ t('Jul'),
+ ];
+ return months.map((month) => ({
time: month,
...keys.reduce((acc: any, key: any) => {
acc[key] = generateRandomValue(1000, 5000);
return acc;
- }, {})
+ }, {}),
}));
}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx
index 988311c54..4d2880e66 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard.tsx
@@ -1,23 +1,26 @@
import React from 'react';
-import {NoContent} from 'UI';
+import { NoContent } from 'UI';
import { InfoCircleOutlined } from '@ant-design/icons';
import {
- AreaChart, Area,
- CartesianGrid, Tooltip,
- ResponsiveContainer,
- XAxis, YAxis
+ AreaChart,
+ Area,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
} from 'recharts';
-import {NO_METRIC_DATA} from 'App/constants/messages'
-import {AvgLabel, Styles} from "Components/Dashboard/Widgets/common";
-import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard";
+import { NO_METRIC_DATA } from 'App/constants/messages';
+import { AvgLabel, Styles } from 'Components/Dashboard/Widgets/common';
+import ExCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard';
interface Props {
- title: string;
- type: string;
- onCard: (card: string) => void;
- onClick?: any;
- data?: any,
+ title: string;
+ type: string;
+ onCard: (card: string) => void;
+ onClick?: any;
+ data?: any;
}
// interface Props {
@@ -26,62 +29,63 @@ interface Props {
// }
function AreaChartCard(props: Props) {
- const {data} = props;
- const gradientDef = Styles.gradientDef();
+ const { data } = props;
+ const gradientDef = Styles.gradientDef();
- return (
-
+
+ {props.onBack ? (
+
+ ) : null}
+
+
+
+ {props.extra}
+ {/* {metric.name}
+ {props.title}
- */}
- {/* */}
- {/*
*/}
- {props.title}
+ */}
+ {/* */}
+ {/*
*/}
+ - (
-
- (
+
+
+ {props.title}
-
+
setType(v)}
/>
@@ -50,33 +53,34 @@ function ExampleCount(props: any) {
}
export function Frustrations() {
+ const { t } = useTranslation();
const rows = [
{
- label: 'Rage Clicks',
+ label: t('Rage Clicks'),
progress: 25,
value: 100,
icon:
+
{rows.map((r) => (
-
+
{r.icon}
))}
@@ -120,50 +120,47 @@ export function Frustrations() {
}
export function Errors() {
+ const { t } = useTranslation();
const rows = [
{
- label: 'HTTP response status code (404 Not Found)',
+ label: t('HTTP response status code (404 Not Found)'),
value: 500,
progress: 90,
- icon: {r.label}
@@ -101,7 +101,7 @@ export function Frustrations() {
width: lineWidth * (0.01 * r.progress),
background: '#394EFF',
}}
- className={'rounded-l'}
+ className="rounded-l"
/>
- {r.value}
+ {r.value}
4XX
,
+ icon: {t('4XX')}
,
},
{
- label: 'Cross-origin request blocked',
+ label: t('Cross-origin request blocked'),
value: 300,
progress: 60,
- icon: CROS
,
+ icon: {t('CROS')}
,
},
{
- label: 'Reference error',
+ label: t('Reference error'),
value: 200,
progress: 40,
- icon: RE
,
+ icon: {t('RE')}
,
},
{
label: 'Unhandled Promise Rejection',
value: 50,
progress: 20,
- icon: NULL
,
+ icon: {t('NULL')}
,
},
{
label: 'Failed Network Request',
value: 10,
progress: 5,
- icon: XHR
,
+ icon: {t('XHR')}
,
},
];
const lineWidth = 270;
return (
-
+
{rows.map((r) => (
-
+
{r.icon}
-
@@ -216,18 +213,14 @@ export function Users() {
];
return (
-
+
-
))}
{r.label}
{r.value}
+ {r.value}
+
{rows.map((r) => (
-
+
{r.label[0].toUpperCase()}
-
@@ -254,7 +247,7 @@ export function Circle({
return (
+
-
))}
{r.label}
{r.value}
+ {r.value}
{children}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
index c846eb794..566bed126 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
@@ -1,30 +1,37 @@
-import React from 'react'
+import React from 'react';
function ExCard({
- title,
- children,
- type,
- onCard,
- height,
- }: {
- title: React.ReactNode;
- children: React.ReactNode;
- type: string;
- onCard: (card: string) => void;
- height?: number;
+ title,
+ children,
+ type,
+ onCard,
+ height,
+}: {
+ title: React.ReactNode;
+ children: React.ReactNode;
+ type: string;
+ onCard: (card: string) => void;
+ height?: number;
}) {
- return (
-
-
- );
+ return (
+ onCard(type)}>
- {title}
- onCard(type)}>{children}
-
+
-
+
);
}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample.tsx
index 625d109df..7a6937faa 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample.tsx
@@ -12,7 +12,10 @@ function HeatmapsExample(props: Props) {
const canvasRef = React.useRef(null);
useEffect(() => {
- const pointMap: Record = {};
+ const pointMap: Record<
+ string,
+ { times: number; data: number[]; original: any }
+ > = {};
let maxIntensity = 0;
for (let i = 0; i < 20; i++) {
@@ -23,7 +26,7 @@ function HeatmapsExample(props: Props) {
pointMap[key] = {
times: Math.floor(Math.random() * 100),
data: [x, y],
- original: { x, y }
+ original: { x, y },
};
}
@@ -45,14 +48,18 @@ function HeatmapsExample(props: Props) {
.draw();
}, []);
-
// const data = {};
return (
-
-
+
+
);
}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx
index b3271aa33..90cf82f5e 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample.tsx
@@ -1,56 +1,62 @@
import React from 'react';
-import ExCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard";
-import InsightsCard from "Components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard";
-import {InsightIssue} from "App/mstore/types/widget";
+import ExCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard';
+import InsightsCard from 'Components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard';
+import { InsightIssue } from 'App/mstore/types/widget';
interface Props {
- title: string;
- type: string;
- onCard: (card: string) => void;
+ title: string;
+ type: string;
+ onCard: (card: string) => void;
}
function InsightsExample(props: Props) {
- const data = {
- issues: [
- {
- "category": "errors",
- "name": "Error: Invalid unit value NaN",
- "value": 562,
- "oldValue": null,
- "ratio": 7.472410583698976,
- "change": 1,
- "isNew": true
- },
- {
- "category": "errors",
- "name": "TypeError: e.node.getContext is not a function",
- "value": 128,
- "oldValue": 1,
- "ratio": 1.7019013429065284,
- "change": 12700.0,
- "isNew": false
- },
- {
- "category": "errors",
- "name": "Unhandled Promise Rejection: {\"message\":\"! POST error on /client/members; 400\",\"response\":{}}",
- "value": 26,
- "oldValue": null,
- "ratio": 0.34569871027788857,
- "change": 1,
- "isNew": true
- }
- ].map(
- (i: any) =>
- new InsightIssue(i.category, i.name, i.ratio, i.oldValue, i.value, i.change, i.isNew)
- )
- }
- return (
-
-
-
- );
+ const data = {
+ issues: [
+ {
+ category: 'errors',
+ name: 'Error: Invalid unit value NaN',
+ value: 562,
+ oldValue: null,
+ ratio: 7.472410583698976,
+ change: 1,
+ isNew: true,
+ },
+ {
+ category: 'errors',
+ name: 'TypeError: e.node.getContext is not a function',
+ value: 128,
+ oldValue: 1,
+ ratio: 1.7019013429065284,
+ change: 12700.0,
+ isNew: false,
+ },
+ {
+ category: 'errors',
+ name: 'Unhandled Promise Rejection: {"message":"! POST error on /client/members; 400","response":{}}',
+ value: 26,
+ oldValue: null,
+ ratio: 0.34569871027788857,
+ change: 1,
+ isNew: true,
+ },
+ ].map(
+ (i: any) =>
+ new InsightIssue(
+ i.category,
+ i.name,
+ i.ratio,
+ i.oldValue,
+ i.value,
+ i.change,
+ i.isNew,
+ ),
+ ),
+ };
+ return (
+
+
+ );
}
export default InsightsExample;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PageResponseTimeDistributionExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PageResponseTimeDistributionExample.tsx
index e0feafe0a..50c59b6e6 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PageResponseTimeDistributionExample.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PageResponseTimeDistributionExample.tsx
@@ -3,7 +3,6 @@ import ExCard from 'Components/Dashboard/components/DashboardList/NewDashModal/E
import CustomMetricOverviewChart from 'Components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart';
import ResponseTimeDistribution from 'Components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution';
-
interface Props {
title: string;
type: string;
@@ -12,12 +11,10 @@ interface Props {
function PageResponseTimeDistributionExample(props: Props) {
const data = {
- chart: []
- }
+ chart: [],
+ };
return (
-
+
);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx
index 70044e102..3bb0d4d78 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx
@@ -1,59 +1,57 @@
import React from 'react';
-import {ResponsiveContainer, Sankey} from 'recharts';
+import { ResponsiveContainer, Sankey } from 'recharts';
import CustomLink from 'App/components/shared/Insights/SankeyChart/CustomLink';
import CustomNode from 'App/components/shared/Insights/SankeyChart/CustomNode';
+import { USER_PATH } from 'App/constants/card';
import ExCard from './ExCard';
-import {USER_PATH} from "App/constants/card";
function ExamplePath(props: any) {
- const data = {
- nodes: [
- {idd: 0, name: 'Home'},
- {idd: 1, name: 'Google'},
- {idd: 2, name: 'Facebook'},
- {idd: 3, name: 'Search'},
- {idd: 4, name: 'Product'},
- {idd: 5, name: 'Chart'},
- ],
- links: [
- {source: 0, target: 3, value: 40},
- {source: 0, target: 4, value: 60},
+ const data = {
+ nodes: [
+ { idd: 0, name: 'Home' },
+ { idd: 1, name: 'Google' },
+ { idd: 2, name: 'Facebook' },
+ { idd: 3, name: 'Search' },
+ { idd: 4, name: 'Product' },
+ { idd: 5, name: 'Chart' },
+ ],
+ links: [
+ { source: 0, target: 3, value: 40 },
+ { source: 0, target: 4, value: 60 },
- {source: 1, target: 3, value: 100},
- {source: 2, target: 3, value: 100},
+ { source: 1, target: 3, value: 100 },
+ { source: 2, target: 3, value: 100 },
- {source: 3, target: 4, value: 50},
- {source: 3, target: 5, value: 50},
+ { source: 3, target: 4, value: 50 },
+ { source: 3, target: 5, value: 50 },
- {source: 4, target: 5, value: 15},
- ],
- };
+ { source: 4, target: 5, value: 15 },
+ ],
+ };
- return (
-
+
+
-
-
-
-
-
-
-
- );
+
+
+
+
+
+
+
+ );
}
-export default ExamplePath
+export default ExamplePath;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PerfBreakdown.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PerfBreakdown.tsx
index d6c1abfd0..dbe7bbfbe 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PerfBreakdown.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/PerfBreakdown.tsx
@@ -2,8 +2,10 @@ import { GitCommitHorizontal } from 'lucide-react';
import React from 'react';
import ExCard from './ExCard';
+import { useTranslation } from 'react-i18next';
function PerfBreakdown(props: any) {
+ const { t } = useTranslation();
const rows = [
['5K', '1K'],
['4K', '750'],
@@ -11,7 +13,7 @@ function PerfBreakdown(props: any) {
['2K', '250'],
['1K', '0'],
];
- const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
+ const months = [t('Jan'), t('Feb'), t('Mar'), t('Apr'), t('May')];
const values = [
[3, 1, 9],
[2, 4, 10],
@@ -21,32 +23,30 @@ function PerfBreakdown(props: any) {
];
const bgs = ['#E2E4F6', '#A7BFFF', '#394EFF'];
return (
-
-
onCard(type)}
+ />
+
+ );
}
-export default ExCard
+export default ExCard;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx
index c44920110..bf838d553 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx
@@ -1,25 +1,23 @@
import React from 'react';
-import ExCard from './ExCard';
import FunnelWidget from 'Components/Funnels/FunnelWidget/FunnelWidget';
import Funnel from 'App/mstore/types/funnel';
+import ExCard from './ExCard';
interface Props {
title: string;
type: string;
onCard: (card: string) => void;
- data?: any,
+ data?: any;
}
function ExampleFunnel(props: Props) {
const _data = {
- funnel: new Funnel().fromJSON(props.data)
+ funnel: new Funnel().fromJSON(props.data),
};
return (
- {title}
+ onCard(type)}
+ >
+ {children}
+
+
-
+
+
+
{rows.map((r) => (
-
-
- {r[0]}
-
- {r[1]}
+
+
))}
{r[0]}
+
+ {r[1]}
+
{months.map((m, i) => (
-
+
{m}
-
{values[i].map((v, bg) => (
@@ -83,18 +83,18 @@ function PerfBreakdown(props: any) {
-
-
-
XHR
+
+
+
+
- {t('XHR')}
-
- ,
- },
- {
- label: 'Click Rage',
- progress: 25,
- value: '405',
- icon: ,
- },
- {
- label: 'Bad Request',
- progress: 5,
- value: '302',
- icon: ,
- },
- {
- label: 'Mouse Thrashing',
- progress: 3,
- value: '194',
- icon: ,
- },
- ];
+ const rows = [
+ {
+ label: 'Dead Click',
+ progress: 85,
+ value: '2.5K',
+ icon: ,
- },
- {
- label: 'Admin User',
- progress: 25,
- value: '405',
- icon: ,
- },
- {
- label: 'Management User',
- progress: 5,
- value: '302',
- icon: ,
- },
- {
- label: 'Sales User',
- progress: 3,
- value: '194',
- icon: ,
- },
- {
- label: 'Marketing User',
- progress: 1,
- value: '57',
- icon: ,
- },
- ];
+ const rows = [
+ {
+ label: 'Demo User',
+ progress: 85,
+ value: '2.5K',
+ icon:
-
Other
+
+
+
- {t('Other')}
-
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByBrowser.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByBrowser.tsx
index 3f83e8e0a..48aac4cef 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByBrowser.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByBrowser.tsx
@@ -11,42 +11,36 @@ function ByBrowser(props: any) {
label: 'Chrome',
progress: 85,
value: '2.5K',
- icon: Response End
+
+
{t('Response End')}
- null} />
+
+
);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx
index 92fd4a3bf..3f426fd62 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import ByComponent from './Component';
import { LinkOutlined } from '@ant-design/icons';
import { Icon } from 'UI';
+import ByComponent from './Component';
function SlowestDomains(props: any) {
const rows = [
@@ -9,42 +9,36 @@ function SlowestDomains(props: any) {
label: 'res.cloudinary.com',
value: '500',
progress: 75,
- icon:
+
);
}
-export default SessionsByErrors
+export default SessionsByErrors;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx
index ab8ec58c2..e62777be9 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsByIssues.tsx
@@ -1,15 +1,13 @@
-import React from 'react'
-import ExCard from "./ExCard";
-import { Frustrations } from "./Count";
+import React from 'react';
+import ExCard from './ExCard';
+import { Frustrations } from './Count';
function SessionsByIssues(props: any) {
return (
-
+
);
}
-export default SessionsByIssues
+export default SessionsByIssues;
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx
index f5710b759..e20e14224 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx
@@ -14,22 +14,20 @@ function SessionsPerBrowserExample(props: Props) {
const data = {
chart: [
{
- 'browser': 'Chrome',
- 'count': 1524,
+ browser: 'Chrome',
+ count: 1524,
'126.0.0': 1157,
- '125.0.0': 224
+ '125.0.0': 224,
},
{
- 'browser': 'Edge',
- 'count': 159,
- '126.0.0': 145
- }
- ]
+ browser: 'Edge',
+ count: 159,
+ '126.0.0': 145,
+ },
+ ],
};
return (
-
+
);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx
index baded8f84..79ba220a2 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SlowestDomain.tsx
@@ -42,20 +42,12 @@ function SlowestDomain(props: any) {
const lineWidth = 240;
return (
-
-
+ null}
+ />
+
+
{rows.map((r) => (
-
-
- {r.icon}
-
-
+
);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/TableOfErrors.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/TableOfErrors.tsx
index 5ca12cfce..382ccd6b9 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/TableOfErrors.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/TableOfErrors.tsx
@@ -4,217 +4,214 @@ import { Errors } from 'Components/Dashboard/components/DashboardList/NewDashMod
import CustomMetricTableErrors from 'Components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors';
function TableOfErrors(props: any) {
- const data =
- {
- 'total': 53,
- 'errors': [
- {
- 'errorId': '915785df4535216f2911bbb21a1afc9658c',
- 'name': 'TypeError',
- 'message': 'e.update is not a function',
- 'users': 14,
- 'sessions': 15,
- 'lastOccurrence': 1725014275603,
- 'firstOccurrence': 1722623575416,
- 'chart': [
- {
- 'count': 1,
- 'timestamp': 1724371200000
- },
- {
- 'count': 0,
- 'timestamp': 1724486399833
- },
- {
- 'count': 0,
- 'timestamp': 1724601599666
- },
- {
- 'count': 6,
- 'timestamp': 1724716799499
- },
- {
- 'count': 3,
- 'timestamp': 1724831999332
- },
- {
- 'count': 5,
- 'timestamp': 1724947199165
- },
- {
- 'count': 0,
- 'timestamp': 1725062398998
- }
- ],
- 'viewed': false
- },
- {
- 'errorId': '915d0c598f4e14456af9ab9f4b992329729',
- 'name': 'Unhandled Promise Rejection',
- 'message': '"Timeout (b)"',
- 'users': 2,
- 'sessions': 2,
- 'lastOccurrence': 1725013879988,
- 'firstOccurrence': 1718110576163,
- 'chart': [
- {
- 'count': 0,
- 'timestamp': 1724371200000
- },
- {
- 'count': 0,
- 'timestamp': 1724486399833
- },
- {
- 'count': 0,
- 'timestamp': 1724601599666
- },
- {
- 'count': 0,
- 'timestamp': 1724716799499
- },
- {
- 'count': 1,
- 'timestamp': 1724831999332
- },
- {
- 'count': 1,
- 'timestamp': 1724947199165
- },
- {
- 'count': 0,
- 'timestamp': 1725062398998
- }
- ],
- 'viewed': false
- },
- {
- 'errorId': '915c22f1195ec3067dbd0a75638a2d64f0b',
- 'name': 'Unhandled Promise Rejection',
- 'message': '{"message":"! GET error on /cards; 403","response":{}}',
- 'users': 2,
- 'sessions': 2,
- 'lastOccurrence': 1725013720866,
- 'firstOccurrence': 1709287604526,
- 'chart': [
- {
- 'count': 1,
- 'timestamp': 1724371200000
- },
- {
- 'count': 0,
- 'timestamp': 1724486399833
- },
- {
- 'count': 0,
- 'timestamp': 1724601599666
- },
- {
- 'count': 0,
- 'timestamp': 1724716799499
- },
- {
- 'count': 0,
- 'timestamp': 1724831999332
- },
- {
- 'count': 1,
- 'timestamp': 1724947199165
- },
- {
- 'count': 0,
- 'timestamp': 1725062398998
- }
- ],
- 'viewed': false
- },
- {
- 'errorId': '915206415c1c4b79e8f5f55bba62544c3c5',
- 'name': 'Unhandled Promise Rejection',
- 'message': '{"message":"! GET error on /dashboards; 403","response":{}}',
- 'users': 1,
- 'sessions': 1,
- 'lastOccurrence': 1725013689204,
- 'firstOccurrence': 1715788328614,
- 'chart': [
- {
- 'count': 0,
- 'timestamp': 1724371200000
- },
- {
- 'count': 0,
- 'timestamp': 1724486399833
- },
- {
- 'count': 0,
- 'timestamp': 1724601599666
- },
- {
- 'count': 0,
- 'timestamp': 1724716799499
- },
- {
- 'count': 0,
- 'timestamp': 1724831999332
- },
- {
- 'count': 1,
- 'timestamp': 1724947199165
- },
- {
- 'count': 0,
- 'timestamp': 1725062398998
- }
- ],
- 'viewed': false
- },
- {
- 'errorId': '91514ac2304acfca5d82cd518fb36e5fc22',
- 'name': 'TypeError',
- 'message': 'Cannot read properties of undefined (reading \'status\')',
- 'users': 1,
- 'sessions': 1,
- 'lastOccurrence': 1725013072800,
- 'firstOccurrence': 1725013072800,
- 'chart': [
- {
- 'count': 0,
- 'timestamp': 1724371200000
- },
- {
- 'count': 0,
- 'timestamp': 1724486399833
- },
- {
- 'count': 0,
- 'timestamp': 1724601599666
- },
- {
- 'count': 0,
- 'timestamp': 1724716799499
- },
- {
- 'count': 0,
- 'timestamp': 1724831999332
- },
- {
- 'count': 1,
- 'timestamp': 1724947199165
- },
- {
- 'count': 0,
- 'timestamp': 1725062398998
- }
- ],
- 'viewed': false
- },
- ]
- };
+ const data = {
+ total: 53,
+ errors: [
+ {
+ errorId: '915785df4535216f2911bbb21a1afc9658c',
+ name: 'TypeError',
+ message: 'e.update is not a function',
+ users: 14,
+ sessions: 15,
+ lastOccurrence: 1725014275603,
+ firstOccurrence: 1722623575416,
+ chart: [
+ {
+ count: 1,
+ timestamp: 1724371200000,
+ },
+ {
+ count: 0,
+ timestamp: 1724486399833,
+ },
+ {
+ count: 0,
+ timestamp: 1724601599666,
+ },
+ {
+ count: 6,
+ timestamp: 1724716799499,
+ },
+ {
+ count: 3,
+ timestamp: 1724831999332,
+ },
+ {
+ count: 5,
+ timestamp: 1724947199165,
+ },
+ {
+ count: 0,
+ timestamp: 1725062398998,
+ },
+ ],
+ viewed: false,
+ },
+ {
+ errorId: '915d0c598f4e14456af9ab9f4b992329729',
+ name: 'Unhandled Promise Rejection',
+ message: '"Timeout (b)"',
+ users: 2,
+ sessions: 2,
+ lastOccurrence: 1725013879988,
+ firstOccurrence: 1718110576163,
+ chart: [
+ {
+ count: 0,
+ timestamp: 1724371200000,
+ },
+ {
+ count: 0,
+ timestamp: 1724486399833,
+ },
+ {
+ count: 0,
+ timestamp: 1724601599666,
+ },
+ {
+ count: 0,
+ timestamp: 1724716799499,
+ },
+ {
+ count: 1,
+ timestamp: 1724831999332,
+ },
+ {
+ count: 1,
+ timestamp: 1724947199165,
+ },
+ {
+ count: 0,
+ timestamp: 1725062398998,
+ },
+ ],
+ viewed: false,
+ },
+ {
+ errorId: '915c22f1195ec3067dbd0a75638a2d64f0b',
+ name: 'Unhandled Promise Rejection',
+ message: '{"message":"! GET error on /cards; 403","response":{}}',
+ users: 2,
+ sessions: 2,
+ lastOccurrence: 1725013720866,
+ firstOccurrence: 1709287604526,
+ chart: [
+ {
+ count: 1,
+ timestamp: 1724371200000,
+ },
+ {
+ count: 0,
+ timestamp: 1724486399833,
+ },
+ {
+ count: 0,
+ timestamp: 1724601599666,
+ },
+ {
+ count: 0,
+ timestamp: 1724716799499,
+ },
+ {
+ count: 0,
+ timestamp: 1724831999332,
+ },
+ {
+ count: 1,
+ timestamp: 1724947199165,
+ },
+ {
+ count: 0,
+ timestamp: 1725062398998,
+ },
+ ],
+ viewed: false,
+ },
+ {
+ errorId: '915206415c1c4b79e8f5f55bba62544c3c5',
+ name: 'Unhandled Promise Rejection',
+ message: '{"message":"! GET error on /dashboards; 403","response":{}}',
+ users: 1,
+ sessions: 1,
+ lastOccurrence: 1725013689204,
+ firstOccurrence: 1715788328614,
+ chart: [
+ {
+ count: 0,
+ timestamp: 1724371200000,
+ },
+ {
+ count: 0,
+ timestamp: 1724486399833,
+ },
+ {
+ count: 0,
+ timestamp: 1724601599666,
+ },
+ {
+ count: 0,
+ timestamp: 1724716799499,
+ },
+ {
+ count: 0,
+ timestamp: 1724831999332,
+ },
+ {
+ count: 1,
+ timestamp: 1724947199165,
+ },
+ {
+ count: 0,
+ timestamp: 1725062398998,
+ },
+ ],
+ viewed: false,
+ },
+ {
+ errorId: '91514ac2304acfca5d82cd518fb36e5fc22',
+ name: 'TypeError',
+ message: "Cannot read properties of undefined (reading 'status')",
+ users: 1,
+ sessions: 1,
+ lastOccurrence: 1725013072800,
+ firstOccurrence: 1725013072800,
+ chart: [
+ {
+ count: 0,
+ timestamp: 1724371200000,
+ },
+ {
+ count: 0,
+ timestamp: 1724486399833,
+ },
+ {
+ count: 0,
+ timestamp: 1724601599666,
+ },
+ {
+ count: 0,
+ timestamp: 1724716799499,
+ },
+ {
+ count: 0,
+ timestamp: 1724831999332,
+ },
+ {
+ count: 1,
+ timestamp: 1724947199165,
+ },
+ {
+ count: 0,
+ timestamp: 1725062398998,
+ },
+ ],
+ viewed: false,
+ },
+ ],
+ };
return (
-
-
+
+
);
}
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Tabs/CoreWebVitals.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Tabs/CoreWebVitals.tsx
index 3cd3d7603..7ebc05c87 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Tabs/CoreWebVitals.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Tabs/CoreWebVitals.tsx
@@ -5,16 +5,16 @@ import SessionsByIssues from '../SessionsByIssues';
import SessionsByErrors from '../SessionsByErrors';
interface ExampleProps {
- onCard: (card: string) => void;
+ onCard: (card: string) => void;
}
-const CoreWebVitals: React.FC = ({onCard}) => (
- <>
-
-
-
-
-
+const CoreWebVitals: React.FC = ({ onCard }) => (
+ <>
+ = ({onCard}) => (
- <>
-
-
-
-
-
+const PerformanceMonitoring: React.FC = ({ onCard }) => (
+ <>
+ = ({ onCard }) => (
- <>
- = ({onCard}) => (
- <>
-
-
-
-
+
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx
index 98a88eef7..69027b892 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample.tsx
@@ -13,79 +13,77 @@ interface Props {
function SpeedIndexByLocationExample(props: Props) {
const data = {
- 'value': 1480,
- 'chart': [
+ value: 1480,
+ chart: [
{
- 'userCountry': 'AT',
- 'value': 415
+ userCountry: 'AT',
+ value: 415,
},
{
- 'userCountry': 'PL',
- 'value': 433.1666666666667
+ userCountry: 'PL',
+ value: 433.1666666666667,
},
{
- 'userCountry': 'FR',
- 'value': 502
+ userCountry: 'FR',
+ value: 502,
},
{
- 'userCountry': 'IT',
- 'value': 540.4117647058823
+ userCountry: 'IT',
+ value: 540.4117647058823,
},
{
- 'userCountry': 'TH',
- 'value': 662.0
+ userCountry: 'TH',
+ value: 662.0,
},
{
- 'userCountry': 'ES',
- 'value': 740.5454545454545
+ userCountry: 'ES',
+ value: 740.5454545454545,
},
{
- 'userCountry': 'SG',
- 'value': 889.6666666666666
+ userCountry: 'SG',
+ value: 889.6666666666666,
},
{
- 'userCountry': 'TW',
- 'value': 1008.0
+ userCountry: 'TW',
+ value: 1008.0,
},
{
- 'userCountry': 'HU',
- 'value': 1027.0
+ userCountry: 'HU',
+ value: 1027.0,
},
{
- 'userCountry': 'DE',
- 'value': 1054.4583333333333
+ userCountry: 'DE',
+ value: 1054.4583333333333,
},
{
- 'userCountry': 'BE',
- 'value': 1126.0
+ userCountry: 'BE',
+ value: 1126.0,
},
{
- 'userCountry': 'TR',
- 'value': 1174.0
+ userCountry: 'TR',
+ value: 1174.0,
},
{
- 'userCountry': 'US',
- 'value': 1273.3015873015872
+ userCountry: 'US',
+ value: 1273.3015873015872,
},
{
- 'userCountry': 'GB',
- 'value': 1353.8095238095239
+ userCountry: 'GB',
+ value: 1353.8095238095239,
},
{
- 'userCountry': 'VN',
- 'value': 1473.8181818181818
+ userCountry: 'VN',
+ value: 1473.8181818181818,
},
{
- 'userCountry': 'HK',
- 'value': 1654.6666666666667
+ userCountry: 'HK',
+ value: 1654.6666666666667,
},
],
- 'unit': 'ms'
+ unit: 'ms',
};
return (
-
+ {r.icon}
+
-
))}
{r.label}
{r.value}
+ {r.value}