Fix: #840 updates required to analytics tab (#861)

* feat: #840: Updates required to analytics tab
reapit · Apr 9, 2020 · 60de401 · 60de401
1 parent a6259ec
commit 60de401
Show file tree

Hide file tree

Showing 28 changed files with 438 additions and 293 deletions.
diff --git a/packages/elements/src/styles/vendor/bulma-overrides.scss b/packages/elements/src/styles/vendor/bulma-overrides.scss
@@ -213,6 +213,16 @@
   }
 }
 
+.table {
+  tfoot {
+    tr {
+      th {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
 .textarea {
   border-radius: 0;
   height: 180px;

diff --git a/packages/marketplace/src/actions/__tests__/app-installations.ts b/packages/marketplace/src/actions/__tests__/app-installations.ts
@@ -2,6 +2,9 @@ import {
   appInstallationsReceiveData,
   appInstallationsRequestData,
   appInstallationsRequestDataFailure,
+  appInstallationsFilterReceiveData,
+  appInstallationsFilterRequestData,
+  appInstallationsFilterRequestDataFailure,
   appInstallationsRequestInstall,
   appInstallationsRequestUninstall,
   appInstallationsSetFormState,
@@ -21,6 +24,21 @@ describe('app install actions', () => {
   it('should create a appInstallationsRequestDataFailure action', () => {
     expect(appInstallationsRequestDataFailure.type).toEqual(ActionTypes.APP_INSTALLATIONS_REQUEST_DATA_FAILURE)
   })
+
+  it('should create a appInstallationsFilterReceiveData action', () => {
+    expect(appInstallationsFilterReceiveData.type).toEqual(ActionTypes.APP_INSTALLATIONS_FILTER_RECEIVE_DATA)
+    expect(appInstallationsFilterReceiveData(installationsStub).data).toEqual(installationsStub)
+  })
+  it('should create a appInstallationsFilterRequestData action', () => {
+    expect(appInstallationsFilterRequestData.type).toEqual(ActionTypes.APP_INSTALLATIONS_FILTER_REQUEST_DATA)
+    expect(appInstallationsFilterRequestData({ appId: ['1'] }).data).toEqual({ appId: ['1'] })
+  })
+  it('should create a appInstallationsFilterRequestDataFailure action', () => {
+    expect(appInstallationsFilterRequestDataFailure.type).toEqual(
+      ActionTypes.APP_INSTALLATIONS_FILTER_REQUEST_DATA_FAILURE,
+    )
+  })
+
   it('should create a appInstallationsRequestInstall action', () => {
     expect(appInstallationsRequestInstall.type).toEqual(ActionTypes.APP_INSTALLATIONS_REQUEST_INSTALL)
     expect(appInstallationsRequestInstall({ appId: '1' }).data).toEqual({ appId: '1' })

diff --git a/packages/marketplace/src/actions/app-installations.ts b/packages/marketplace/src/actions/app-installations.ts
@@ -33,6 +33,16 @@ export const appInstallationsReceiveData = actionCreator<PagedResultInstallation
 export const appInstallationsRequestDataFailure = actionCreator<void>(
   ActionTypes.APP_INSTALLATIONS_REQUEST_DATA_FAILURE,
 )
+export const appInstallationsFilterRequestData = actionCreator<InstallationParams>(
+  ActionTypes.APP_INSTALLATIONS_FILTER_REQUEST_DATA,
+)
+export const appInstallationsFilterReceiveData = actionCreator<PagedResultInstallationModel_>(
+  ActionTypes.APP_INSTALLATIONS_FILTER_RECEIVE_DATA,
+)
+export const appInstallationsFilterRequestDataFailure = actionCreator<void>(
+  ActionTypes.APP_INSTALLATIONS_FILTER_REQUEST_DATA_FAILURE,
+)
+
 export const appInstallationsRequestInstall = actionCreator<InstallParams>(
   ActionTypes.APP_INSTALLATIONS_REQUEST_INSTALL,
 )

diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/analytics.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/analytics.tsx.snap
@@ -38,12 +38,6 @@ exports[`AnalyticsPage should match a snapshot 1`] = `
                 "onTabClick": [Function],
                 "tabIdentifier": "detailed",
               },
-              Object {
-                "active": false,
-                "displayText": "BILLING",
-                "onTabClick": [Function],
-                "tabIdentifier": "billing",
-              },
             ]
           }
         />

diff --git a/packages/marketplace/src/components/pages/__tests__/analytics.tsx b/packages/marketplace/src/components/pages/__tests__/analytics.tsx
@@ -23,7 +23,9 @@ describe('AnalyticsPage', () => {
         push: jest.fn(),
       }
       const result = tabConfigs({ currentTab: mockCurrentTab, history })
-      expect(result).toHaveLength(2)
+      // expect(result).toHaveLength(2)
+      // Expect columns to have length 1 because we temporarily hide the Billing tab as it will not be ready for Beta
+      expect(result).toHaveLength(1)
     })
   })
   describe('handleUseEffectToSetCurrentTab', () => {

diff --git a/packages/marketplace/src/components/pages/analytics.tsx b/packages/marketplace/src/components/pages/analytics.tsx
@@ -28,14 +28,15 @@ export const tabConfigs = ({ currentTab, history }: TabConfigsProps): TabConfig[
     },
     active: currentTab === AnalyticsTab.DETAILED,
   },
-  {
-    tabIdentifier: AnalyticsTab.BILLING,
-    displayText: 'BILLING',
-    onTabClick: () => {
-      history.push(`${Routes.DEVELOPER_ANALYTICS}/${AnalyticsTab.BILLING}`)
-    },
-    active: currentTab === AnalyticsTab.BILLING,
-  },
+  // Temporarily hide the Billing tab as it will not be ready for Beta
+  // {
+  //   tabIdentifier: AnalyticsTab.BILLING,
+  //   displayText: 'BILLING',
+  //   onTabClick: () => {
+  //     history.push(`${Routes.DEVELOPER_ANALYTICS}/${AnalyticsTab.BILLING}`)
+  //   },
+  //   active: currentTab === AnalyticsTab.BILLING,
+  // },
 ]
 
 export const handleUseEffectToSetCurrentTab = (activeTab, setCurrentTab) => {

diff --git a/...rketplace/src/components/ui/__tests__/__snapshots__/developer-hits-per-day-chart.tsx.snap b/...rketplace/src/components/ui/__tests__/__snapshots__/developer-hits-per-day-chart.tsx.snap
@@ -41,13 +41,16 @@ exports[`DeveloperHitsPerDay should match a snapshot 1`] = `
     }
     options={
       Object {
+        "height": 50,
         "legend": null,
+        "maintainAspectRatio": true,
         "tooltips": Object {
           "callbacks": Object {
             "label": [Function],
           },
           "mode": "label",
         },
+        "width": 100,
       }
     }
   />

diff --git a/.../components/ui/analytics/detailed/__test__/__snapshots__/installation-table.test.tsx.snap b/.../components/ui/analytics/detailed/__test__/__snapshots__/installation-table.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`InstallationTable should match snapshot 1`] = `
     onChange={[Function]}
     pageNumber={1}
     pageSize={5}
-    totalCount={1}
+    totalCount={0}
   />
 </div>
 `;
@@ -156,7 +156,7 @@ exports[`InstallationTable should match with null developerData 1`] = `
     onChange={[Function]}
     pageNumber={1}
     pageSize={5}
-    totalCount={1}
+    totalCount={0}
   />
 </div>
 `;

diff --git a/...components/ui/analytics/detailed/__test__/__snapshots__/traffic-event-table.test.tsx.snap b/...components/ui/analytics/detailed/__test__/__snapshots__/traffic-event-table.test.tsx.snap
@@ -13,6 +13,9 @@ exports[`TrafficEventTable should match snapshot 1`] = `
           "Footer": "Total",
           "Header": "Endpoint",
           "accessor": "endpoint",
+          "columnProps": Object {
+            "className": "capitalize",
+          },
         },
         Object {
           "Footer": [Function],
@@ -52,6 +55,9 @@ exports[`TrafficEventTable should match snapshot if data is empty 1`] = `
           "Footer": "Total",
           "Header": "Endpoint",
           "accessor": "endpoint",
+          "columnProps": Object {
+            "className": "capitalize",
+          },
         },
         Object {
           "Footer": [Function],
@@ -80,6 +86,9 @@ exports[`TrafficEventTable should match snapshot when loading 1`] = `
           "Footer": "Total",
           "Header": "Endpoint",
           "accessor": "endpoint",
+          "columnProps": Object {
+            "className": "capitalize",
+          },
         },
         Object {
           "Footer": [Function],

diff --git a/packages/marketplace/src/components/ui/analytics/detailed/__test__/detailed-tab.test.tsx b/packages/marketplace/src/components/ui/analytics/detailed/__test__/detailed-tab.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as ReactRedux from 'react-redux'
 import configureStore from 'redux-mock-store'
 import { shallow } from 'enzyme'
+import MockDate from 'mockdate'
 import {
   DetailedTab,
   handleMapAppNameToInstallation,
@@ -10,16 +11,18 @@ import {
   mapState,
   MapState,
   handleFetchHttpTrafficPerDayDataUseCallback,
+  handleDefaultFilter,
+  handleFetchHttpTrafficPerDayDataUseEffect,
 } from '../detailed-tab'
 import { usageStatsDataStub } from '@/sagas/__stubs__/app-usage-stats'
 import { installationsStub } from '@/sagas/__stubs__/installations'
 import { appsDataStub } from '@/sagas/__stubs__/apps'
 import { ReduxState } from '@/types/core'
-import { appInstallationsRequestData } from '@/actions/app-installations'
+import { appInstallationsRequestData, appInstallationsFilterRequestData } from '@/actions/app-installations'
 import { httpTrafficPerDayRequestData } from '@/actions/app-http-traffic-event'
 import { developerState } from '@/sagas/__stubs__/developer'
+import { httpTrafficPerDayStub } from '@/sagas/__stubs__/app-http-traffic-event'
 
-0
 jest.mock('@reapit/elements', () => ({
   ...jest.requireActual('@reapit/elements'),
   toLocalTime: jest.fn().mockReturnValue('localtime'),
@@ -37,6 +40,10 @@ const mockState = {
     loading: false,
   },
   developer: developerState,
+  appHttpTraffic: {
+    perDayLoading: false,
+    trafficEvents: httpTrafficPerDayStub,
+  },
 } as ReduxState
 
 describe('OverviewPage', () => {
@@ -66,10 +73,11 @@ describe('OverviewPage', () => {
   describe('mapState', () => {
     it('should run correctly', () => {
       const mockedUseSelector = spySelector as jest.Mock<MapState>
-      const { appUsageStats, developer, installations } = mockedUseSelector(state => mapState(state))
+      const { appUsageStats, developer, installations, appHttpTraffic } = mockedUseSelector(state => mapState(state))
       expect(appUsageStats).toEqual(mockState.appUsageStats)
       expect(developer).toEqual(mockState.developer)
       expect(installations).toEqual(mockState.installations)
+      expect(appHttpTraffic).toEqual(mockState.appHttpTraffic)
     })
   })
 
@@ -79,16 +87,21 @@ describe('OverviewPage', () => {
       const fn = handleFetchAppUsageStatsDataUseCallback(developerAppData, spyDispatch)
       fn()
       expect(spyDispatch).toBeCalledWith(
-        appInstallationsRequestData({
+        appInstallationsFilterRequestData({
           installedDateFrom: '2019-09-30',
           installedDateTo: '2019-10-06',
           pageSize: 9999,
         }),
       )
+      expect(spyDispatch).toBeCalledWith(
+        appInstallationsRequestData({
+          pageSize: 9999,
+        }),
+      )
     })
   })
 
-  describe('handleFetchAppUsageStatsDataUseCallback', () => {
+  describe('handleFetchHttpTrafficPerDayDataUseCallback', () => {
     it('should run correctly', () => {
       const developerAppData = appsDataStub.data.data || []
       const fn = handleFetchHttpTrafficPerDayDataUseCallback(developerAppData, spyDispatch)
@@ -101,6 +114,32 @@ describe('OverviewPage', () => {
         }),
       )
     })
+    it('should run correctly', () => {
+      const developerAppData = []
+      const mockDispatch = jest.fn()
+      const fn = handleFetchHttpTrafficPerDayDataUseCallback(developerAppData, mockDispatch)
+      fn()
+      expect(mockDispatch).toHaveBeenCalledTimes(0)
+    })
+  })
+})
+
+describe('handleDefaultFilter', () => {
+  const mockDateString = '2020-04-01'
+  beforeEach(() => {
+    MockDate.set(new Date(mockDateString))
+  })
+  afterEach(() => {
+    MockDate.reset()
+  })
+  it('should run correctly', () => {
+    const developerAppData = appsDataStub.data.data || []
+    const result = handleDefaultFilter(developerAppData)
+    expect(result).toEqual({
+      lastMonday: '2020-03-23',
+      lastSunday: '2020-03-29',
+      appIds: ['09043eb8-9e5e-4650-b7f1-f0cb62699027', '261da083-cee2-4f5c-a18f-8f9375f1f5af'],
+    })
   })
 })
 
@@ -113,6 +152,15 @@ describe('handleFetchAppUsageStatsDataUseEffect', () => {
   })
 })
 
+describe('handleFetchHttpTrafficPerDayDataUseEffect', () => {
+  it('should run correctly', () => {
+    const mockFunction = jest.fn()
+    const fn = handleFetchHttpTrafficPerDayDataUseEffect(mockFunction)
+    fn()
+    expect(mockFunction).toBeCalled()
+  })
+})
+
 describe('handleMapAppNameToInstallation', () => {
   const installationsArray = [
     {

diff --git a/...ges/marketplace/src/components/ui/analytics/detailed/__test__/installation-table.test.tsx b/...ges/marketplace/src/components/ui/analytics/detailed/__test__/installation-table.test.tsx
@@ -42,7 +42,14 @@ describe('InstallationTable', () => {
 
   it('should match snapshot', () => {
     expect(
-      shallow(<InstallationTable installedApps={installedApps} installations={installations} developer={developer} />),
+      shallow(
+        <InstallationTable
+          installedApps={installedApps}
+          filteredInstalledApps={installedApps}
+          installations={installations}
+          developer={developer}
+        />,
+      ),
     ).toMatchSnapshot()
   })
 
@@ -52,6 +59,7 @@ describe('InstallationTable', () => {
       shallow(
         <InstallationTable
           installedApps={installedApps}
+          filteredInstalledApps={installedApps}
           installations={installationsWithoutData}
           developer={developer}
         />,
@@ -65,6 +73,7 @@ describe('InstallationTable', () => {
       shallow(
         <InstallationTable
           installedApps={installedApps}
+          filteredInstalledApps={installedApps}
           installations={installations}
           developer={developerWithoutData}
         />,

diff --git a/...es/marketplace/src/components/ui/analytics/detailed/__test__/traffic-event-table.test.tsx b/...es/marketplace/src/components/ui/analytics/detailed/__test__/traffic-event-table.test.tsx
@@ -20,10 +20,11 @@ describe('TrafficEventTable', () => {
       expect(trafficEventsTableColumns).toHaveLength(2)
     })
     it('should return valid Header, accessor and Footer for each column', () => {
-      trafficEventsTableColumns.forEach(({ Header, accessor, Footer }, index) => {
+      trafficEventsTableColumns.forEach(({ Header, accessor, columnProps, Footer }, index) => {
         if (index === 0) {
           expect(Header).toEqual('Endpoint')
           expect(accessor).toEqual('endpoint')
+          expect(columnProps?.className).toEqual('capitalize')
           expect(Footer).toEqual('Total')
         }
         if (index === 1) {