change(ui): add more tz, change abs/rel timest

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

@@ -100,10 +100,11 @@ function Timeline(props) {
       };
     } else {
       const time = getTime(e);
+      const tz = settingsStore.sessionSettings.timezone.value
+      const timeStr = DateTime.fromMillis(props.startedAt + time).setZone(tz).toFormat(`hh:mm:ss a`)
       timeLineTooltip = {
-        time: !settingsStore.isUniTs
+        time: Duration.fromMillis(time).toFormat(`mm:ss`),
-          ? Duration.fromMillis(time).toFormat(`mm:ss`)
+        timeStr,
-          : DateTime.fromMillis(props.startedAt + time).toFormat(`hh:mm:ss a`),
         offset: e.nativeEvent.offsetX,
         isVisible: true,
       };

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

@@ -8,30 +8,39 @@ interface Props {
   time: number;
   offset: number;
   isVisible: boolean;
+  timeStr: string;
 }
 
 function TimeTooltip({
   time,
   offset,
   isVisible,
+  timeStr,
 }: Props) {
   return (
     <div
       className={stl.timeTooltip}
       style={{
-        top: -30,
+        top: 0,
         left: offset,
         display: isVisible ? 'block' : 'none',
-        transform: 'translateX(-50%)',
+        transform: 'translate(-50%, -110%)',
         whiteSpace: 'nowrap',
+        textAlign: "center",
       }}
     >
       {!time ? 'Loading' : time}
+      {timeStr ? (
+        <>
+          <br />
+          <span className="text-gray-light">({timeStr})</span>
+        </>
+      ) : null}
     </div>
   );
 }
 
 export default connect((state) => {
-  const { time = 0, offset = 0, isVisible } = state.getIn(['sessions', 'timeLineTooltip']);
+  const { time = 0, offset = 0, isVisible, timeStr } = state.getIn(['sessions', 'timeLineTooltip']);
-  return { time, offset, isVisible };
+  return { time, offset, isVisible, timeStr };
 })(TimeTooltip);

frontend/app/components/Session_/Subheader.js

@@ -13,7 +13,6 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import AutoplayToggle from 'Shared/AutoplayToggle';
-import { Toggler } from 'UI';
 
 function SubHeader(props) {
   const { player, store } = React.useContext(PlayerContext)
@@ -28,7 +27,6 @@ function SubHeader(props) {
     eventList: eventsList,
     endTime,
   } = store.get()
-  const { settingsStore } = useStore()
 
   const mappedResourceList = resourceList
     .filter((r) => r.isRed() || r.isYellow())
@@ -56,19 +54,9 @@ function SubHeader(props) {
     showModal(<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true });
   };
 
-  const timeStr = settingsStore.isUniTs ? 'Local Time' : 'Relative Timestamp'
-  const onFormatCh = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    settingsStore.toggleTimeFormat()
-  }
   return (
     <div className="w-full px-4 py-2 flex items-center border-b">
 
-    {!isAssist && (<div onClick={onFormatCh} className="cursor-pointer color-gray-medium text-sm p-1 flex items-center gap-2 mr-2 hover:bg-gray-light-shade rounded-md">
-      <Toggler plain name="sessionsLive" checked={settingsStore.isUniTs} />
-      <span>{timeStr}</span>
-    </div>)}
       {location && (
         <div
           className="flex items-center cursor-pointer color-gray-medium text-sm p-1 hover:bg-gray-light-shade rounded-md"

frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx

@@ -21,6 +21,7 @@ function FetchDetailsModal(props: Props) {
   const isXHR = resource.type === TYPES.XHR
   const {
     sessionStore: { devTools },
+    settingsStore: { sessionSettings: { timezone }},
   } = useStore();
 
   useEffect(() => {
@@ -49,7 +50,7 @@ function FetchDetailsModal(props: Props) {
   return (
     <div className="bg-white p-5 h-screen overflow-y-auto" style={{ width: '500px' }}>
       <h5 className="mb-2 text-2xl">Network Request</h5>
-      <FetchBasicDetails resource={resource} timestamp={props.time ? DateTime.fromMillis(props.time).toFormat(`hh:mm:ss a`) : undefined} />
+      <FetchBasicDetails resource={resource} timestamp={props.time ? DateTime.fromMillis(props.time).setZone(timezone.value).toFormat(`hh:mm:ss a`) : undefined} />
 
       {isXHR && !fetchPresented && <FetchPluginMessage />}
       {isXHR && <FetchTabs resource={resource} />}

frontend/app/duck/sessions.js

@@ -70,7 +70,7 @@ const initialState = Map({
     timelinePointer: null,
     sessionPath: {},
     lastPlayedSessionId: null,
-    timeLineTooltip: { time: 0, offset: 0, isVisible: false },
+    timeLineTooltip: { time: 0, offset: 0, isVisible: false, timeStr: '' },
     createNoteTooltip: { time: 0, isVisible: false, isEdit: false, note: null },
 });
 
@@ -454,4 +454,4 @@ export function updateLastPlayedSession(sessionId) {
         type: LAST_PLAYED_SESSION_ID,
         sessionId,
     };
-}
+}

frontend/app/mstore/settingsStore.ts

@@ -8,7 +8,6 @@ export default class SettingsStore {
     sessionSettings: SessionSettings = new SessionSettings()
     captureRateFetched: boolean = false;
     limits: any = null;
-    isUniTs = false;
 
     constructor() {
         makeAutoObservable(this, {
@@ -16,10 +15,6 @@ export default class SettingsStore {
         })
     }
 
-    toggleTimeFormat = () => {
-        this.isUniTs = !this.isUniTs
-    }
-
     saveCaptureRate(data: any) {
         return sessionService.saveCaptureRate(data)
             .then(data => data.json())

frontend/app/mstore/types/sessionSettings.ts

@@ -13,27 +13,52 @@ const defaultDurationFilter = {
     countType: 'sec'
 }
 
+const negativeExceptions = {
+    4: ['-04:30'],
+    3: ['-03:30'],
+
+}
+const exceptions = {
+    3: ['+03:30'],
+    4: ['+04:30'],
+    5: ['+05:30', '+05:45'],
+    6: ['+06:30'],
+    9: ['+09:30']
+}
+
 export const generateGMTZones = (): Timezone[] => {
     const timezones: Timezone[] = [];
 
-    const positiveNumbers = [...Array(12).keys()];
+    const positiveNumbers = [...Array(13).keys()];
-    const negativeNumbers = [...Array(12).keys()].reverse();
+    const negativeNumbers = [...Array(13).keys()].reverse();
     negativeNumbers.pop(); // remove trailing zero since we have one in positive numbers array
 
     const combinedArray = [...negativeNumbers, ...positiveNumbers];
 
     for (let i = 0; i < combinedArray.length; i++) {
-        let symbol = i < 11 ? '-' : '+';
+        let symbol = i < 12 ? '-' : '+';
-        let isUTC = i === 11;
+        let isUTC = i === 12;
-        let value = String(combinedArray[i]).padStart(2, '0');
+        const item = combinedArray[i]
+        let value = String(item).padStart(2, '0');
 
-        let tz = `UTC ${symbol}${String(combinedArray[i]).padStart(2, '0')}:00`;
+        let tz = `UTC ${symbol}${String(item).padStart(2, '0')}:00`;
 
         let dropdownValue = `UTC${symbol}${value}`;
         timezones.push({ label: tz, value: isUTC ? 'UTC' : dropdownValue });
+
+        // @ts-ignore
+        const negativeMatch = negativeExceptions[item], positiveMatch = exceptions[item]
+        if (i < 11 && negativeMatch) {
+            negativeMatch.forEach((str: string) => {
+                timezones.push({ label: `UTC ${str}`, value: `UTC${str}`})
+            })
+        } else if (i > 11 && positiveMatch) {
+            positiveMatch.forEach((str: string) => {
+                timezones.push({ label: `UTC ${str}`, value: `UTC${str}`})
+            })
+        }
     }
 
-    timezones.splice(17, 0, { label: 'GMT +05:30', value: 'UTC+05:30' });
     return timezones;
 };