change(ui) - global limits

frontend/app/components/Alerts/AlertForm.js

@@ -161,15 +161,15 @@ const AlertForm = props => {
                   />
                   { unit && (
                       <Input
-                      className="px-4"
-                      style={{ marginRight: '31px'}}
-                      label={{ basic: true, content: unit }}
-                      labelPosition='right'
-                      name="right"
-                      value={ instance.query.right }
-                      onChange={ writeQuery }
-                      placeholder="E.g. 3"
-                    />
+                        className="px-4"
+                        style={{ marginRight: '31px'}}
+                        // label={{ basic: true, content: unit }}
+                        // labelPosition='right'
+                        name="right"
+                        value={ instance.query.right }
+                        onChange={ writeQuery }
+                        placeholder="E.g. 3"
+                      />
                   )}
                   { !unit && (
                       <Input
@@ -309,7 +309,7 @@ const AlertForm = props => {
             {instance.exists() ? 'Update' : 'Create'}
           </Button>
           <div className="mx-1" />
-          <Button basic onClick={props.onClose}>Cancel</Button>
+          <Button onClick={props.onClose}>Cancel</Button>
         </div>
         <div>
           {instance.exists() && (

frontend/app/components/Header/Header.js

@@ -26,6 +26,7 @@ import ErrorGenPanel from 'App/dev/components';
 import Alerts from '../Alerts/Alerts';
 import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
 import { fetchList as fetchMetadata } from 'Duck/customField';
+import { useStore } from 'App/mstore';
 
 const DASHBOARD_PATH = dashboard();
 const SESSIONS_PATH = sessions();
@@ -46,8 +47,13 @@ const Header = (props) => {
   
   const name = account.get('name').split(" ")[0];
   const [hideDiscover, setHideDiscover] = useState(false)
+  const { userStore } = useStore();
   let activeSite = null;
 
+  useEffect(() => {
+    userStore.fetchLimits();
+  }, []);
+
   useEffect(() => {
     activeSite = sites.find(s => s.id == siteId);
     props.initSite(activeSite);

frontend/app/mstore/index.tsx

@@ -5,7 +5,6 @@ import UserStore from './userStore';
 import RoleStore from './roleStore';
 import APIClient from 'App/api_client';
 import FunnelStore from './funnelStore';
-import { makeAutoObservable, observable, action } from "mobx"
 import { dashboardService, metricService, sessionService, userService, auditService, funnelService, errorService } from 'App/services';
 import SettingsStore from './settingsStore';
 import AuditStore from './auditStore';
@@ -23,8 +22,6 @@ export class RootStore {
     errorStore: ErrorStore;
     notificationStore: NotificationStore
 
-    limits: any;
-
     constructor() {
         this.dashboardStore = new DashboardStore();
         this.metricStore = new MetricStore();
@@ -35,10 +32,6 @@ export class RootStore {
         this.auditStore = new AuditStore();
         this.errorStore = new ErrorStore();
         this.notificationStore = new NotificationStore();
-        makeAutoObservable(this, {
-          limits: observable,
-          fetchLimits: action,
-        });
     }
 
     initClient() {
@@ -51,18 +44,6 @@ export class RootStore {
       auditService.initClient(client)
       errorService.initClient(client)
     }
-
-    fetchLimits(): Promise<any> {
-      return new Promise((resolve, reject) => {
-          userService.getLimits()
-              .then((response: any) => {
-                  this.limits = response;
-                  resolve(response);
-              }).catch((error: any) => {
-                  reject(error);
-              });
-      });
-    }
 }
 
 const StoreContext = React.createContext<RootStore>({} as RootStore);

frontend/app/mstore/settingsStore.ts

@@ -7,6 +7,8 @@ export default class SettingsStore {
     loadingCaptureRate: boolean = false;
     sessionSettings: SessionSettings = new SessionSettings()
     captureRateFetched: boolean = false;
+    limits: any = null;
+
     constructor() {
         makeAutoObservable(this, {
             sessionSettings: observable,
@@ -15,7 +17,7 @@ export default class SettingsStore {
 
     saveCaptureRate(data: any) {
         return sessionService.saveCaptureRate(data)
-            .then(data => {
+            .then((data: any) => {
                 this.sessionSettings.merge({
                     captureRate: data.rate,
                     captureAll: data.captureAll

frontend/app/mstore/userStore.ts

@@ -14,6 +14,7 @@ export default class UserStore {
 
     loading: boolean = false;
     saving: boolean = false;
+    limits: any = null;
 
     constructor() {
         makeAutoObservable(this, {
@@ -24,6 +25,18 @@ export default class UserStore {
         })
     }
 
+    fetchLimits(): Promise<any> {
+        return new Promise((resolve, reject) => {
+            userService.getLimits()
+                .then((response: any) => {
+                    this.limits = response.limits;
+                    resolve(response.limits);
+                }).catch((error: any) => {
+                    reject(error);
+                });
+        });
+    }
+
     initUser(user?: any ): Promise<void> {
         return new Promise((resolve, reject) => {
             if (user) {