fix(ui): minor issues (#1361)

* change(ui): xray show only fetch errors

* fix(ui): funnels check for data

* fix(ui): js errors

* change(ui): session list country flag alignment, city trim

frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx

@@ -29,7 +29,7 @@ function FunnelIssues() {
                     filter: {
                         ...item.filter,
                         filters: item.filter.filters.filter((filter: any, index: any) => {
-                            const stage = widget.data.funnel.stages[index];
+                            const stage = widget.data.funnel?.stages[index];
                             return stage &&stage.isActive
                         }).map((f: any) => f.toJson())
                     }

frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx

@@ -40,11 +40,11 @@ function OverviewPanel({ issuesList }: { issuesList: Record<string, any>[] }) {
   const performanceChartData = tabStates[currentTab]?.performanceChartData || []
 
   const fetchPresented = fetchList.length > 0;
-
   const resourceList = resourceListUnmap
     .filter((r: any) => r.isRed || r.isYellow)
     .concat(fetchList.filter((i: any) => parseInt(i.status) >= 400))
-    .concat(graphqlList.filter((i: any) => parseInt(i.status) >= 400));
+    .concat(graphqlList.filter((i: any) => parseInt(i.status) >= 400))
+    .filter((i: any) => i.type === "fetch");
 
   const resources: any = React.useMemo(() => {
     return {

frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NETWORK, EXCEPTIONS } from 'Duck/components/player';
 import { useModal } from 'App/components/Modal';
-import { Icon, Tooltip } from 'UI';
+import { Icon } from 'UI';
 import StackEventModal from '../StackEventModal';
 import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
 import FetchDetails from 'Shared/FetchDetailsModal';
@@ -9,6 +9,7 @@ import GraphQLDetailsModal from 'Shared/GraphQLDetailsModal';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { TYPES } from 'App/types/session/event'
 import { types as issueTypes } from 'App/types/session/issue'
+import { Tooltip } from 'antd';
 
 interface Props {
   pointer: any;
@@ -61,8 +62,6 @@ const TimelinePointer = React.memo((props: Props) => {
               : item.name}
           </div>
         }
-        delay={0}
-        placement="top"
       >
         <div onClick={createEventClickHandler(item, NETWORK)} className="cursor-pointer">
           <div className="h-4 w-4 rounded-full bg-red text-white font-bold flex items-center justify-center text-sm">
@@ -87,8 +86,6 @@ const TimelinePointer = React.memo((props: Props) => {
             <b>{elData.name}</b>
           </div>
         }
-        delay={0}
-        placement="top"
       >
         <div onClick={createEventClickHandler(item, null)} className="cursor-pointer">
           <Icon name={elData.icon} color="black" size="16" />
@@ -105,8 +102,6 @@ const TimelinePointer = React.memo((props: Props) => {
             <b>{'Stack Event'}</b>
           </div>
         }
-        delay={0}
-        placement="top"
       >
         <div
           onClick={createEventClickHandler(item, 'EVENT')}
@@ -126,8 +121,6 @@ const TimelinePointer = React.memo((props: Props) => {
             <b>{item.type}</b>
           </div>
         }
-        delay={0}
-        placement="top"
       >
         <div
           onClick={createEventClickHandler(item, EXCEPTIONS)}
@@ -149,8 +142,6 @@ const TimelinePointer = React.memo((props: Props) => {
             <span>{item.message}</span>
           </div>
         }
-        delay={0}
-        placement="top"
       >
         <div onClick={createEventClickHandler(item, 'ERRORS')} className="cursor-pointer">
           <div className="h-4 w-4 rounded-full bg-red text-white font-bold flex items-center justify-center text-sm">

frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx

@@ -76,7 +76,7 @@ function CreateNote({
     }
   }, [isVisible]);
 
-  const duration = Duration.fromMillis(time).toFormat('mm:ss');
+  const duration = Duration.fromMillis(time || 0).toFormat('mm:ss');
 
   const cleanUp = () => {
     setCreateNoteTooltip({ isVisible: false, time: 0 });

frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx

@@ -64,7 +64,7 @@ function SelectDateRange(props: Props) {
             {isCustom && (
                 <OutsideClickDetectingDiv
                     onClickOutside={(e: any) => {
-                        if (e.target.parentElement.parentElement.classList.contains('rc-time-picker-panel-select') || e.target.parentElement.parentElement.classList[0].includes('-menu')) {
+                        if (e.target.parentElement.parentElement.classList.contains('rc-time-picker-panel-select') || e.target.parentElement.parentElement.classList[0]?.includes('-menu')) {
                             return false;
                         }
                         setIsCustom(false);

frontend/app/components/shared/SessionItem/SessionItem.tsx

@@ -222,7 +222,7 @@ function SessionItem(props: RouteComponentProps & Props) {
             </div>
             <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
               <div style={{ height: '21px' }}>
-                <CountryFlag userCity={userCity} userState={userState} country={userCountry} style={{ paddingTop: '4px' }} label />
+                <CountryFlag userCity={userCity} userState={userState} country={userCountry} label />
               </div>
               <div className="color-gray-medium flex items-center py-1">
                 <span className="capitalize" style={{ maxWidth: '70px' }}>

frontend/app/components/ui/CountryFlag/CountryFlag.js

@@ -1,22 +1,17 @@
 import React from 'react';
 import cn from 'classnames';
-import { countries } from 'App/constants';
-import { Icon } from 'UI';
-import stl from './countryFlag.module.css';
+import { Icon, TextEllipsis } from 'UI';
 
 const CountryFlag = ({
   userCity = '',
-  userState = '',
   country = '',
   className = '',
   style = {},
-  label = false,
   width = 22,
   height = 15,
 }) => {
   const knownCountry = !!country && country !== 'UN';
   const countryFlag = knownCountry ? country.toLowerCase() : '';
-  const countryName = knownCountry ? countries[country] : 'Unknown Country';
 
   return (
     <div className="flex items-center" style={style}>
@@ -33,9 +28,14 @@ const CountryFlag = ({
           </div>
         </div>
       )}
-      {userCity && <span className="mx-1">{userCity},</span>}
-      {userState && <span className="mr-1">{userState},</span>}
-      {knownCountry && label && <div className={cn(stl.label, 'ml-1')}>{countryName}</div>}
+      {userCity && (
+        <span className="mx-1">
+          <TextEllipsis
+            text={userCity}
+            maxWidth="150px"
+          />
+        </span>
+      )}
     </div>
   );
 };

frontend/app/components/ui/TextEllipsis/TextEllipsis.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState, useRef, useEffect, forwardRef } from 'react';
 import cn from 'classnames';
-import { Tooltip } from 'UI';
+import { Tooltip } from 'antd';
 import styles from './textEllipsis.module.css';
 
 /** calculates text width in pixels