change(ui) - events virutalize and sync

frontend/app/components/Session_/Player/Player.js

@@ -42,6 +42,7 @@ import { updateLastPlayedSession } from 'Duck/sessions';
 import OverviewPanel from '../OverviewPanel';
 import ConsolePanel from 'Shared/DevTools/ConsolePanel';
 import ProfilerPanel from 'Shared/DevTools/ProfilerPanel';
+import StackEventPanel from 'Shared/DevTools/StackEventPanel';
 
 @connectPlayer((state) => ({
   live: state.live,
@@ -115,7 +116,8 @@ export default class Player extends React.PureComponent {
               // <Network />
               <NetworkPanel />
             )}
-            {bottomBlock === STACKEVENTS && <StackEvents />}
+            {/* {bottomBlock === STACKEVENTS && <StackEvents />} */}
+            {bottomBlock === STACKEVENTS && <StackEventPanel />}
             {bottomBlock === STORAGE && <Storage />}
             {bottomBlock === PROFILER && <ProfilerPanel />}
             {bottomBlock === PERFORMANCE && <ConnectedPerformance />}

frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx

@@ -95,7 +95,7 @@ function ConsolePanel(props: Props) {
     );
   };
 
-  let filtered = React.useMemo(() => {
+  const filtered = React.useMemo(() => {
     const filterRE = getRE(filter, 'i');
     let list = logs;
 

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -233,9 +233,9 @@ function NetworkPanel(props: Props) {
         (list = list.filter((networkCall: any) => networkCall.url !== fetchCall.url))
     );
     list = list.concat(fetchList);
-    list = list.sort((a: any, b: any) => {
-      return compare(a, b, sortBy);
-    });
+    // list = list.sort((a: any, b: any) => {
+    //   return compare(a, b, sortBy);
+    // });
 
     // if (!sortAscending) {
     //   list = list.reverse();

frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { hideHint } from 'Duck/components/player';
+import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
+import { getRE } from 'App/utils';
+import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
+
+import TimeTable from '../TimeTable';
+import BottomBlock from '../BottomBlock';
+import { connectPlayer, jump } from 'Player';
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import { DATADOG, SENTRY, STACKDRIVER, typeList } from 'Types/session/stackEvent';
+import { connect } from 'react-redux';
+import StackEventRow from 'Shared/DevTools/StackEventRow';
+
+let timeOut: any = null;
+const TIMEOUT_DURATION = 5000;
+const INDEX_KEY = 'stackEvent';
+const ALL = 'ALL';
+const TABS = [ALL, ...typeList].map((tab) => ({ text: tab, key: tab }));
+
+interface Props {
+  list: any;
+  hideHint: any;
+  time: any;
+}
+function StackEventPanel(props: Props) {
+  const { list, time } = props;
+  const additionalHeight = 0;
+  const {
+    sessionStore: { devTools },
+  } = useStore();
+  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
+  const [filteredList, setFilteredList] = useState([]);
+  const filter = useObserver(() => devTools[INDEX_KEY].filter);
+  const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
+  const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
+  const [pauseSync, setPauseSync] = useState(activeIndex > 0);
+  const synRef: any = useRef({});
+  synRef.current = {
+    pauseSync,
+    activeIndex,
+  };
+  const _list = React.useRef();
+
+  const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
+  const onFilterChange = ({ target: { value } }: any) => {
+    devTools.update(INDEX_KEY, { filter: value });
+  };
+
+  const getCurrentIndex = () => {
+    return filteredList.filter((item: any) => item.time <= time).length - 1;
+  };
+
+  const removePause = () => {
+    clearTimeout(timeOut);
+    timeOut = setTimeout(() => {
+      devTools.update(INDEX_KEY, { index: getCurrentIndex() });
+      setPauseSync(false);
+    }, TIMEOUT_DURATION);
+  };
+
+  useEffect(() => {
+    const currentIndex = getCurrentIndex();
+    if (currentIndex !== activeIndex && !pauseSync) {
+      devTools.update(INDEX_KEY, { index: currentIndex });
+    }
+  }, [time]);
+
+  const onMouseLeave = () => {
+    if (isDetailsModalActive) return;
+    removePause();
+  };
+
+  React.useMemo(() => {
+    const filterRE = getRE(filter, 'i');
+    let list = props.list;
+
+    list = list.filter(
+      ({ name, source }: any) =>
+        (!!filter ? filterRE.test(name) : true) && (activeTab === ALL || activeTab === source)
+    );
+
+    setFilteredList(list);
+  }, [filter, activeTab]);
+
+  const tabs = useMemo(() => {
+    return TABS.filter(({ key }) => key === ALL || list.some(({ source }: any) => key === source));
+  }, []);
+
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    keyMapper: (index: number) => filteredList[index],
+  });
+
+  const _rowRenderer = ({ index, key, parent, style }: any) => {
+    const item = filteredList[index];
+
+    return (
+      // @ts-ignore
+      <CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
+        {() => (
+          <StackEventRow
+            isActive={activeIndex === index}
+            style={style}
+            key={item.key}
+            event={item}
+            onJump={() => jump(item.time)}
+          />
+        )}
+      </CellMeasurer>
+    );
+  };
+
+  return (
+    <BottomBlock
+      style={{ height: 300 + additionalHeight + 'px' }}
+      onMouseEnter={() => setPauseSync(true)}
+      onMouseLeave={onMouseLeave}
+    >
+      <BottomBlock.Header>
+        <div className="flex items-center">
+          <span className="font-semibold color-gray-medium mr-4">Stack Events</span>
+          <Tabs tabs={tabs} active={activeTab} onClick={onTabClick} border={false} />
+        </div>
+        <Input
+          className="input-small h-8"
+          placeholder="Filter by keyword"
+          icon="search"
+          iconPosition="left"
+          name="filter"
+          height={28}
+          onChange={onFilterChange}
+          value={filter}
+        />
+      </BottomBlock.Header>
+      <BottomBlock.Content className="overflow-y-auto">
+        <NoContent
+          title={
+            <div className="capitalize flex items-center mt-16">
+              <Icon name="info-circle" className="mr-2" size="18" />
+              No Data
+            </div>
+          }
+          size="small"
+          show={filteredList.length === 0}
+        >
+          <AutoSizer>
+            {({ height, width }: any) => (
+              <List
+                ref={_list}
+                deferredMeasurementCache={cache}
+                overscanRowCount={5}
+                rowCount={Math.ceil(filteredList.length || 1)}
+                rowHeight={cache.rowHeight}
+                rowRenderer={_rowRenderer}
+                width={width}
+                height={height}
+                scrollToIndex={activeIndex}
+                scrollToAlignment="center"
+              />
+            )}
+          </AutoSizer>
+        </NoContent>
+      </BottomBlock.Content>
+    </BottomBlock>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    hintIsHidden:
+      state.getIn(['components', 'player', 'hiddenHints', 'stack']) ||
+      !state.getIn(['site', 'list']).some((s: any) => s.stackIntegrations),
+  }),
+  { hideHint }
+)(
+  connectPlayer((state: any) => ({
+    list: state.stackList,
+    time: state.time,
+  }))(StackEventPanel)
+);

frontend/app/components/shared/DevTools/StackEventPanel/index.ts

@@ -0,0 +1 @@
+export { default } from './StackEventPanel';

frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx

@@ -9,9 +9,11 @@ import StackEventModal from '../StackEventModal';
 interface Props {
   event: any;
   onJump: any;
+  style?: any;
+  isActive?: boolean;
 }
 function StackEventRow(props: Props) {
-  const { event, onJump } = props;
+  const { event, onJump, style, isActive } = props;
   let message = event.payload[0] || '';
   message = typeof message === 'string' ? message : JSON.stringify(message);
   const onClickDetails = () => {
@@ -30,11 +32,13 @@ function StackEventRow(props: Props) {
 
   return (
     <div
+      style={style}
       data-scroll-item={event.isRed()}
       onClick={onClickDetails}
       className={cn(
         'group flex items-center py-2 px-4 border-b cursor-pointer relative',
-        'hover:bg-active-blue'
+        'hover:bg-active-blue',
+        { 'bg-teal-light': isActive }
       )}
     >
       <div className={cn('mr-auto flex items-start')}>

frontend/app/mstore/sessionStore.ts

@@ -49,15 +49,20 @@ class UserFilter {
   }
 }
 
-class DevTools {
-  networkIndex: 0;
-  network: any;
+interface BaseDevState {
+  index: number;
+  filter: string;
+  activeTab: string;
+  isError: boolean;
+}
 
-  consoleIndex: 0;
-  eventsIndex: 0;
+class DevTools {
+  network: BaseDevState;
+  stackEvent: BaseDevState;
 
   constructor() {
-    this.network = { index: 0, search: '', activeTab: 'ALL', isError: false };
+    this.network = { index: 0, filter: '', activeTab: 'ALL', isError: false };
+    this.stackEvent = { index: 0, filter: '', activeTab: 'ALL', isError: false };
     makeAutoObservable(this, {
       update: action,
     });