Merge pull request #356 from openreplay/api-calls

Chore(release): API calls and other fixes in UI

frontend/app/Router.js

@@ -21,6 +21,10 @@ import Header from 'Components/Header/Header';
 import FunnelDetails from 'Components/Funnels/FunnelDetails';
 import FunnelIssueDetails from 'Components/Funnels/FunnelIssueDetails';
 import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
+import { fetchList as fetchSiteList } from 'Duck/site';
+import { fetchList as fetchAnnouncements } from 'Duck/announcements';
+import { fetchList as fetchAlerts } from 'Duck/alerts';
+import { fetchWatchdogStatus } from 'Duck/watchdogs';
 
 import APIClient from './api_client';
 import * as routes from './routes';
@@ -80,7 +84,14 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB);
     onboarding: state.getIn([ 'user', 'onboarding' ])
   };
 }, {
-  fetchUserInfo, fetchTenants, setSessionPath, fetchIntegrationVariables
+  fetchUserInfo,
+  fetchTenants,
+  setSessionPath,
+  fetchIntegrationVariables,
+  fetchSiteList,
+  fetchAnnouncements,
+  fetchAlerts,
+  fetchWatchdogStatus,
 })
 class Router extends React.Component {
   state = {
@@ -93,6 +104,14 @@ class Router extends React.Component {
         props.fetchUserInfo().then(() => {
           props.fetchIntegrationVariables() 
         }),
+        props.fetchSiteList().then(() => {
+          setTimeout(() => {
+            props.fetchAnnouncements();
+            props.fetchAlerts();
+            props.fetchWatchdogStatus();
+          }, 100);
+        }),
+        // props.fetchAnnouncements(),
       ])
       // .then(() => this.onLoginLogout());
     }

frontend/app/components/Alerts/Notifications/Notifications.js

@@ -18,9 +18,9 @@ class Notifications extends React.Component {
 
   constructor(props) {
     super(props);
-    setTimeout(() => {
-      props.fetchList();
-    }, 1000);
+    // setTimeout(() => {
+    //   props.fetchList();
+    // }, 1000);
     
     setInterval(() => {
       props.fetchList();

frontend/app/components/Announcements/Announcements.js

@@ -10,11 +10,7 @@ import { withRouter } from 'react-router-dom';
 @withToggle('visible', 'toggleVisisble')
 @withRouter
 class Announcements extends React.Component {
-  constructor(props) {
-    super(props);
-    props.fetchList();
-  }
-
+  
   navigateToUrl = url => {
     if (url) {
       if (url.startsWith(window.ENV.ORIGIN)) {

frontend/app/components/BugFinder/BugFinder.js

@@ -4,14 +4,11 @@ import withPageTitle from 'HOCs/withPageTitle';
 import {
   fetchFavoriteList as fetchFavoriteSessionList
 } from 'Duck/sessions';
-import { countries } from 'App/constants';
 import { applyFilter, clearEvents, addAttribute } from 'Duck/filters';
 import { fetchList as fetchFunnelsList } from 'Duck/funnels';
-import { defaultFilters, preloadedFilters } from 'Types/filter';
 import { KEYS } from 'Types/filter/customFilter';
 import SessionList from './SessionList';
 import stl from './bugFinder.css';
-import { fetchList as fetchSiteList } from 'Duck/site';
 import withLocationHandlers from "HOCs/withLocationHandlers";
 import { fetch as fetchFilterVariables } from 'Duck/sources';
 import { fetchSources } from 'Duck/customField';
@@ -68,7 +65,6 @@ const allowedQueryKeys = [
   fetchSources,
   clearEvents,
   setActiveTab,
-  fetchSiteList,
   fetchFunnelsList,
   resetFunnel,
   resetFunnelFilters,
@@ -81,7 +77,6 @@ export default class BugFinder extends React.PureComponent {
   state = {showRehydratePanel: false}
   constructor(props) {
     super(props);
-    // props.fetchFavoriteSessionList();
 
     // TODO should cache the response
     // props.fetchSources().then(() => {
@@ -115,29 +110,6 @@ export default class BugFinder extends React.PureComponent {
     this.setState({ showRehydratePanel: !this.state.showRehydratePanel })
   }
 
-  // fetchPreloadedFilters = () => {
-  //   this.props.fetchFilterVariables('filterValues').then(function() {
-  //     const { filterValues } = this.props;
-  //     const keys = [
-  //       {key: KEYS.USER_OS, label: 'OS'},
-  //       {key: KEYS.USER_BROWSER, label: 'Browser'},
-  //       {key: KEYS.USER_DEVICE, label: 'Device'},
-  //       {key: KEYS.REFERRER, label: 'Referrer'},
-  //       {key: KEYS.USER_COUNTRY, label: 'Country'},        
-  //     ]
-  //     if (filterValues && filterValues.size != 0) {
-  //       keys.forEach(({key, label}) => {
-  //         const _keyFilters = filterValues.get(key)
-  //         if (key === KEYS.USER_COUNTRY) {
-  //           preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, actualValue: countries[item], isFilter: true})));
-  //         } else {
-  //           preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, isFilter: true})));
-  //         }
-  //       })
-  //     }
-  //   }.bind(this));
-  // }
-
   setActiveTab = tab => {
     this.props.setActiveTab(tab);
   }

frontend/app/components/BugFinder/DateRange.js

@@ -10,7 +10,7 @@ import DateRangeDropdown from 'Shared/DateRangeDropdown';
 })
 export default class DateRange extends React.PureComponent {
   onDateChange = (e) => {
-    this.props.fetchFunnelsList(e.rangeValue)
+    // this.props.fetchFunnelsList(e.rangeValue)
     this.props.applyFilter(e)
   }
   render() {

frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js

@@ -22,9 +22,9 @@ function SessionsMenu(props) {
     }
   }
   
-  useEffect(() => {
-    fetchWatchdogStatus()
-  }, [])
+  // useEffect(() => {
+  //   fetchWatchdogStatus()
+  // }, [])
   
   const capturingAll = props.captureRate && props.captureRate.get('captureAll');
 

frontend/app/components/Client/Client.js

@@ -3,7 +3,6 @@ import { withRouter } from 'react-router-dom';
 import { Switch, Route, Redirect } from 'react-router';
 import { CLIENT_TABS, client as clientRoute } from 'App/routes';
 import { fetchList as fetchMemberList } from 'Duck/member';
-import { fetchList as fetchSiteList } from 'Duck/site';
 
 import ProfileSettings from './ProfileSettings';
 import Integrations from './Integrations';
@@ -21,7 +20,6 @@ import Roles from './Roles';
   appearance: state.getIn([ 'user', 'account', 'appearance' ]),
 }), {
   fetchMemberList,
-  fetchSiteList,
 })
 @withRouter
 export default class Client extends React.PureComponent {

frontend/app/components/Header/Header.js

@@ -66,10 +66,6 @@ const Header = (props) => {
     }
   }, [showTrackingModal])
 
-  useEffect(() => {
-    fetchSiteList()
-  }, [])
-
   return (
     <div className={ cn(styles.header, showTrackingModal ? styles.placeOnTop : '') }>
       <NavLink to={ withSiteId(SESSIONS_PATH, siteId) }>

frontend/app/components/Header/SiteDropdown.js

@@ -11,6 +11,8 @@ import cn from 'classnames';
 import NewSiteForm from '../Client/Sites/NewSiteForm';
 import { clearSearch } from 'Duck/search';
 import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
+import { fetchList as fetchAlerts } from 'Duck/alerts';
+import {  fetchWatchdogStatus } from 'Duck/watchdogs';
 
 @withRouter
 @connect(state => ({  
@@ -23,13 +25,15 @@ import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
   init,
   clearSearch,
   fetchIntegrationVariables,
+  fetchAlerts,
+  fetchWatchdogStatus,
 })
 export default class SiteDropdown extends React.PureComponent {
   state = { showProductModal: false }
 
-  componentDidMount() {
-    this.props.fetchIntegrationVariables();
-  }
+  // componentDidMount() {
+  //   this.props.fetchIntegrationVariables();
+  // }
 
   closeModal = (e, newSite) => {
     this.setState({ showProductModal: false })    
@@ -44,6 +48,8 @@ export default class SiteDropdown extends React.PureComponent {
     this.props.setSiteId(siteId);
     this.props.clearSearch();
     this.props.fetchIntegrationVariables();
+    this.props.fetchAlerts();
+    this.props.fetchWatchdogStatus();
   }
 
   render() {

frontend/app/components/shared/TrackerUpdateMessage/TrackerUpdateMessage.js

@@ -1,18 +1,25 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Icon } from 'UI'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom';
 import { onboarding as onboardingRoute } from 'App/routes'
 import { withSiteId } from 'App/routes';
+import { isGreaterOrEqualVersion } from 'App/utils'
 
 const TrackerUpdateMessage= (props) => {
-  // const { site } = props;
-  const { site, sites, match: { params: { siteId } } } = props;
+  const [needUpdate, setNeedUpdate] = React.useState(false)
+  const { sites, match: { params: { siteId } } } = props;
   const activeSite = sites.find(s => s.id == siteId);
-  const hasSessions = !!activeSite && !activeSite.recorded;
-  const appVersionInt = parseInt(window.ENV.TRACKER_VERSION.split(".").join(""))
-  const trackerVersionInt = site.trackerVersion ? parseInt(site.trackerVersion.split(".").join("")) : 0
-  const needUpdate = !hasSessions && appVersionInt > trackerVersionInt;
+  
+  useEffect(() => {
+    if (!activeSite || !activeSite.trackerVersion) return;
+
+    const isLatest = isGreaterOrEqualVersion(activeSite.trackerVersion, window.ENV.TRACKER_VERSION);
+    if (!isLatest && activeSite.recorded) {
+      setNeedUpdate(true)
+    }
+  }, [activeSite])
+
   return needUpdate ? (
     <>
       {(

frontend/app/utils.js

@@ -226,4 +226,10 @@ export const iceServerConfigFromString = (str) => {
       return server
     }
   })
+}
+
+export const isGreaterOrEqualVersion = (version, compareTo) => {
+  const [major, minor, patch] = version.split("-")[0].split('.');
+  const [majorC, minorC, patchC] = compareTo.split("-")[0].split('.');
+  return (major > majorC) || (major === majorC && minor > minorC) || (major === majorC && minor === minorC && patch >= patchC);
 }