fix(ui): add warning for localhost, fix geturl method for tracker
This commit is contained in:
nick-delirium
parent
4ec2867b30
commit
9743d9bb7b
6 changed files with 99 additions and 62 deletions
|
|
@ -29,7 +29,7 @@ function RecordingsList() {
|
|||
show={length === 0}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<AnimatedSVG name={ICONS.NO_RECORDINGS} size={180} />
|
||||
<AnimatedSVG name={ICONS.NO_RECORDINGS} />
|
||||
<div className="text-center text-gray-600 my-4">
|
||||
{recordsSearch !== ''
|
||||
? 'No matching results'
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ import { observer } from 'mobx-react-lite';
|
|||
import AutoplayToggle from 'Shared/AutoplayToggle';
|
||||
|
||||
function SubHeader(props) {
|
||||
const { player, store } = React.useContext(PlayerContext)
|
||||
const [showWarningModal, setWarning] = React.useState(true);
|
||||
const { player, store } = React.useContext(PlayerContext);
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
|
|
@ -25,19 +26,19 @@ function SubHeader(props) {
|
|||
exceptionsList,
|
||||
eventList: eventsList,
|
||||
endTime,
|
||||
} = store.get()
|
||||
} = store.get();
|
||||
|
||||
const mappedResourceList = resourceList
|
||||
.filter((r) => r.isRed || r.isYellow)
|
||||
.concat(fetchList.filter((i) => parseInt(i.status) >= 400))
|
||||
.concat(graphqlList.filter((i) => parseInt(i.status) >= 400))
|
||||
.concat(graphqlList.filter((i) => parseInt(i.status) >= 400));
|
||||
|
||||
const [isCopied, setCopied] = React.useState(false);
|
||||
const { showModal, hideModal } = useModal();
|
||||
|
||||
const location =
|
||||
currentLocation && currentLocation.length > 60
|
||||
? `${currentLocation.slice(0, 60)}...`
|
||||
currentLocation && currentLocation.length > 70
|
||||
? `${currentLocation.slice(0, 25)}...${currentLocation.slice(-40)}`
|
||||
: currentLocation;
|
||||
|
||||
const showReportModal = () => {
|
||||
|
|
@ -48,66 +49,98 @@ function SubHeader(props) {
|
|||
exceptionsList: exceptionsList,
|
||||
eventsList: eventsList,
|
||||
endTime: endTime,
|
||||
}
|
||||
showModal(<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true, width: 620 });
|
||||
};
|
||||
showModal(
|
||||
<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />,
|
||||
{ right: true, width: 620 }
|
||||
);
|
||||
};
|
||||
|
||||
const showWarning =
|
||||
location && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(location) && showWarningModal;
|
||||
return (
|
||||
<div className="w-full px-4 py-2 flex items-center border-b">
|
||||
|
||||
{location && (
|
||||
<div className="w-full px-4 py-2 flex items-center border-b relative">
|
||||
{showWarning ? (
|
||||
<div
|
||||
className="flex items-center cursor-pointer color-gray-medium text-sm p-1 hover:bg-gray-light-shade rounded-md"
|
||||
onClick={() => {
|
||||
copy(currentLocation);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 5000);
|
||||
className="px-3 py-1 border border-gray-light drop-shadow-md rounded bg-active-blue flex items-center justify-between"
|
||||
style={{
|
||||
zIndex: 999,
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
bottom: '-24px',
|
||||
transform: 'translate(-50%, 0)',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<Icon size="20" name="event/link" className="mr-1" />
|
||||
<Tooltip title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}>
|
||||
{location}
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="ml-auto text-sm flex items-center color-gray-medium gap-2"
|
||||
style={{ width: 'max-content' }}
|
||||
>
|
||||
<Button icon="file-pdf" variant="text" onClick={showReportModal}>
|
||||
Create Bug Report
|
||||
</Button>
|
||||
<NotePopup />
|
||||
<Issues sessionId={props.sessionId} />
|
||||
<SharePopup
|
||||
entity="sessions"
|
||||
id={props.sessionId}
|
||||
showCopyLink={true}
|
||||
trigger={
|
||||
<div className="relative">
|
||||
<Button icon="share-alt" variant="text" className="relative">
|
||||
Share
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ItemMenu
|
||||
items={[
|
||||
{
|
||||
key: 1,
|
||||
component: <AutoplayToggle />,
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
component: <Bookmark noMargin sessionId={props.sessionId} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<QueueControls />
|
||||
Some assets may load incorrectly on localhost.
|
||||
<a
|
||||
href="https://docs.openreplay.com/en/troubleshooting/session-recordings/#testing-in-localhost"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link ml-1"
|
||||
>
|
||||
Learn More
|
||||
</a>
|
||||
<div className="py-1 ml-3 cursor-pointer" onClick={() => setWarning(false)}>
|
||||
<Icon name="close" size={16} color="black" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{location && (
|
||||
<>
|
||||
<div
|
||||
className="flex items-center cursor-pointer color-gray-medium text-sm p-1 hover:bg-gray-light-shade rounded-md"
|
||||
onClick={() => {
|
||||
copy(currentLocation);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 5000);
|
||||
}}
|
||||
>
|
||||
<Icon size="20" name="event/link" className="mr-1" />
|
||||
<Tooltip title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}>
|
||||
{location}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className="ml-auto text-sm flex items-center color-gray-medium gap-2"
|
||||
style={{ width: 'max-content' }}
|
||||
>
|
||||
<Button icon="file-pdf" variant="text" onClick={showReportModal}>
|
||||
Create Bug Report
|
||||
</Button>
|
||||
<NotePopup />
|
||||
<Issues sessionId={props.sessionId} />
|
||||
<SharePopup
|
||||
entity="sessions"
|
||||
id={props.sessionId}
|
||||
showCopyLink={true}
|
||||
trigger={
|
||||
<div className="relative">
|
||||
<Button icon="share-alt" variant="text" className="relative">
|
||||
Share
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ItemMenu
|
||||
items={[
|
||||
{
|
||||
key: 1,
|
||||
component: <AutoplayToggle />,
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
component: <Bookmark noMargin sessionId={props.sessionId} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<QueueControls />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="210" height="160" viewBox="0 0 210 160" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="13" y="7.86084" width="88.2438" height="80.702" rx="4" fill="#FDF9F3"/>
|
||||
<rect x="103.398" y="31.9722" width="88.2438" height="80.702" rx="40.351" fill="#E4EDF6"/>
|
||||
<g clip-path="url(#clip0_299_2)">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
3
frontend/app/svg/icons/cross.svg
Normal file
3
frontend/app/svg/icons/cross.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 293 B |
|
|
@ -333,9 +333,9 @@ export default class App {
|
|||
return undefined
|
||||
}
|
||||
const ingest = this.options.ingestPoint
|
||||
const isSaas = ingest === DEFAULT_INGEST_POINT
|
||||
const isSaas = /api.openreplay.com/.test(ingest)
|
||||
|
||||
const projectPath = isSaas ? ingest.replace('api', 'app') : ingest
|
||||
const projectPath = isSaas ? 'https://openreplay.com/ingest' : ingest
|
||||
|
||||
const url = projectPath.replace(/ingest$/, `${projectID}/session/${sessionID}`)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue