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

change(ui) - fetch url ellipsis in between

Browse source
This commit is contained in:
Shekar Siri 2022-11-21 12:37:24 +01:00
parent 70cb76e382
commit 8a9fc7a453
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/app/components/shared/FetchDetailsModal/components/FetchBasicDetails/FetchBasicDetails.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { formatBytes } from 'App/utils';
import CopyText from 'Shared/CopyText';
import cn from 'classnames';
@ -8,12 +8,20 @@ interface Props {
}
function FetchBasicDetails({ resource }: Props) {
const _duration = parseInt(resource.duration);
const text = useMemo(() => {
if (resource.url.length > 50) {
const endText = resource.url.split('/').pop();
return resource.url.substring(0, 50 - endText.length) + '.../' + endText;
}
return resource.url;
}, [resource]);
return (
<div>
<div className="flex items-center py-1">
<div className="font-medium">Name</div>
<div className="rounded-lg bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip cursor-pointer">
<CopyText content={resource.url}>{resource.url}</CopyText>
<CopyText content={resource.url}>{text}</CopyText>
</div>
</div>
@ -45,7 +53,12 @@ function FetchBasicDetails({ resource }: Props) {
{resource.status && (
<div className="flex items-center py-1">
<div className="font-medium">Status</div>
<div className={cn("rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip flex items-center", { 'error color-red': !resource.success })}>
<div
className={cn(
'rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip flex items-center',
{ 'error color-red': !resource.success }
)}
>
{resource.status === '200' && (
<div className="w-4 h-4 bg-green rounded-full mr-2"></div>
)}