feat: #3556 data warehouse analytics and copy updates: (#3558)

.github/ISSUE_TEMPLATE/cloud--internal-.md

@@ -2,13 +2,11 @@
 name: Cloud (Internal)
 about: Issues raised by the Reapit Cloud Team for internal usage
 title: ''
-labels: cloud-team, feature
+labels: front-end, needs-triage
 assignees: ''
 
 ---
 
 **Background context or User story:**
 
 **Specification or Acceptance Criteria:**
-
-**Suggested solution:**

packages/data-warehouse/src/components/pages/__styles__/styles.ts

@@ -67,3 +67,14 @@ export const image = css`
     height: 300px;
   }
 `
+
+export const flexColumn = css`
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+export const icon = css`
+  margin-top: -0.5rem;
+  margin-right: 0.25rem;
+  color: #0061a8;
+`

packages/data-warehouse/src/components/pages/accounts/accounts.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react'
-import { Button, H3, H5, Section, Helper, Loader } from '@reapit/elements'
+import { Button, H3, H5, Section, Helper, Loader, Content } from '@reapit/elements'
 import { PagedApiResponse } from '../../../types/core'
 import { AccountModel } from '../../../types/accounts'
 import AccountsTable from './accounts-table'
@@ -67,13 +67,26 @@ export const Accounts: React.FC = () => {
           {provisionInProgress && (
             <AccountProgressBar percentageComplete={percentageComplete} setPercentageComplete={setPercentageComplete} />
           )}
-          <FadeIn>
-            <Helper variant="info">
-              You are able to manage the credentials used to access your data warehouse. There is no limit on the number
-              of user accounts you&apos;re able to add and we recommend that each individual user/application is
-              provided with their own credentials.
-            </Helper>
-          </FadeIn>
+          <Section>
+            <FadeIn>
+              <Content>
+                <p>
+                  <i>
+                    In order to access your organisations data warehouse, you must first create the user accounts to
+                    access it. You are to manage and create as many user accounts as you wish without any additional
+                    costs. We recommend that each individual user or application is provided with a unique set of
+                    credentials.
+                  </i>
+                </p>
+                <p>
+                  <i>
+                    Please note that creating the first user account is a long running process and can take several
+                    minutes to complete.
+                  </i>
+                </p>
+              </Content>
+            </FadeIn>
+          </Section>
           <Section>
             <H5>User Account Details</H5>
             {accountsLoading ? (

packages/data-warehouse/src/components/pages/analytics/__tests__/__snapshots__/analytics-cost-explorer.test.tsx.snap

@@ -327,12 +327,12 @@ exports[`AnalyticsCostExplorer should match a snapshot 1`] = `
                   <p
                     className="mt-4"
                   >
-                    ** Costs adjusted to include 2 free hours of warehouse uptime (included in monthly subscription)
+                    ** Data warehouse uptime costs may take upwards of an hour to appear in the Cost Explorer
                   </p>
                   <p
                     className="mt-4"
                   >
-                    *** Partially used hours are rounded upwards for the purposes of billing
+                    *** Partially used hours are rounded upwards for the purposes of billing 
                   </p>
                 </div>
               </Component>

packages/data-warehouse/src/components/pages/analytics/__tests__/__snapshots__/analytics.test.tsx.snap

@@ -5,15 +5,15 @@ exports[`Analytics should match a snapshot 1`] = `
   <Component>
     <ErrorBoundary>
       <Component
-        className="justify-between items-center"
+        className=""
         isFlex={true}
       >
         <section
           className=""
           data-test=""
         >
           <Component
-            className="mb-0"
+            className=""
           >
             <h3
               className=""
@@ -22,20 +22,6 @@ exports[`Analytics should match a snapshot 1`] = `
               Analytics
             </h3>
           </Component>
-          <Component
-            disabled={true}
-            onClick={[Function]}
-          >
-            <button
-              className="button  is-primary  "
-              data-test=""
-              disabled={true}
-              onClick={[Function]}
-              type="button"
-            >
-              Usage Limits
-            </button>
-          </Component>
           <AnalyticsUsageModal
             handleClose={[Function]}
             visible={false}

packages/data-warehouse/src/components/pages/analytics/__tests__/analytics-handlers.test.tsx

@@ -206,13 +206,13 @@ describe('getAppHttpTrafficPerDayChartData', () => {
     labels: ['2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05'],
     data: [0, 0, 0, 0, 0, 0.3, 0.5],
     chartDataStats: [
-      { date: '2019-11', requestCount: 0 },
-      { date: '2019-12', requestCount: 0 },
-      { date: '2020-01', requestCount: 0 },
-      { date: '2020-02', requestCount: 0 },
-      { date: '2020-03', requestCount: 0 },
-      { date: '2020-04', requestCount: 0.3 },
-      { date: '2020-05', requestCount: 0.5 },
+      { date: '2019-11', requestCount: '£0.00 (0.00 hrs)' },
+      { date: '2019-12', requestCount: '£0.00 (0.00 hrs)' },
+      { date: '2020-01', requestCount: '£0.00 (0.00 hrs)' },
+      { date: '2020-02', requestCount: '£0.00 (0.00 hrs)' },
+      { date: '2020-03', requestCount: '£0.00 (0.00 hrs)' },
+      { date: '2020-04', requestCount: '£0.30 (0.04 hrs)' },
+      { date: '2020-05', requestCount: '£0.50 (0.07 hrs)' },
     ],
   })
 })

packages/data-warehouse/src/components/pages/analytics/analytics-cost-explorer.tsx

@@ -88,9 +88,9 @@ const AnalyticsCostExplorer: React.FC = () => {
               you will be automatically invoiced at the end of each billing period.
             </p>
             <p className="mt-4">
-              ** Costs adjusted to include 2 free hours of warehouse uptime (included in monthly subscription)
+              ** Data warehouse uptime costs may take upwards of an hour to appear in the Cost Explorer
             </p>
-            <p className="mt-4">*** Partially used hours are rounded upwards for the purposes of billing</p>
+            <p className="mt-4">*** Partially used hours are rounded upwards for the purposes of billing </p>
           </GridItem>
         </Grid>
       </FadeIn>

packages/data-warehouse/src/components/pages/analytics/analytics-handlers.ts

@@ -17,7 +17,7 @@ import { ReapitConnectSession } from '@reapit/connect-session'
 
 export interface ChartDataModel {
   date: string
-  requestCount: number
+  requestCount: number | string
 }
 
 export interface RequestByDateModel {
@@ -28,7 +28,7 @@ export interface RequestByDateModel {
 export type TableDataRow = {
   name?: string
   amount?: number
-  cost?: number
+  cost?: string | number
   itemCount: number | null
   subRows: TableDataRow[]
 }
@@ -89,7 +89,15 @@ export const prepareTableColumns = (monthlyBilling?: BillingBreakdownForMonthV2M
     {
       Header: 'Cost',
       accessor: row => {
-        return row.cost && formatCurrency(row.cost)
+        if (!row.cost) return formatCurrency(0)
+        const formatted = formatCurrency(row.cost)
+        const cost =
+          row.name === 'Data Warehouse Subscription'
+            ? `${formatted} (Includes 2 hours warehouse uptime per month`
+            : row.name === 'Data Warehouse'
+            ? `${formatted} (${Number(row.cost || 0) / 6.99} hour(s) additional uptime)`
+            : formatted
+        return cost
       },
       Footer: formatCurrency(totalCost),
     },
@@ -122,7 +130,7 @@ export const getAppHttpTrafficPerDayChartData = (stats: ServiceItemBillingV2Mode
     data.push(item.cost as number)
     chartDataStats.push({
       date: item.name as string,
-      requestCount: item.cost as number,
+      requestCount: `£${(item.cost || 0).toFixed(2)} (${((item.cost || 0) / 6.99).toFixed(2)} hrs)`,
     })
   })
 

packages/data-warehouse/src/components/pages/analytics/analytics.tsx

@@ -1,5 +1,17 @@
 import * as React from 'react'
-import { Button, FadeIn, Grid, GridItem, H3, Helper, Loader, Section } from '@reapit/elements'
+import {
+  Button,
+  Content,
+  FadeIn,
+  Grid,
+  GridItem,
+  H3,
+  Helper,
+  isMobile,
+  LevelRight,
+  Loader,
+  Section,
+} from '@reapit/elements'
 import ErrorBoundary from '@/components/hocs/error-boundary'
 import AnalyticsCostExplorer from './analytics-cost-explorer'
 import AnalyticsDailyUsage from './analytics-daily-usage'
@@ -11,17 +23,26 @@ import { reapitConnectBrowserSession } from '../../../core/connect-session'
 import { SubscriptionModelPagedResult } from '@reapit/foundations-ts-definitions'
 import { MessageContext } from '../../../context/message-context'
 import AnalyticsUsageModal from './analytics-usage-modal'
+import { getChargableUsageString, handleGetSettings } from './analytics-handlers'
+import { SettingsModel } from '../../../types/settings'
+import { cx } from 'linaria'
+import { flexColumn, icon } from '../__styles__/styles'
+import { FaInfo } from 'react-icons/fa'
 
 export const AnalyticsPage: React.FC = () => {
   const [subscriptions, setSubscriptions] = useState<SubscriptionModelPagedResult>()
   const [subscriptionsLoading, setSubscriptionsLoading] = useState<boolean>(false)
+  const [settings, setSettings] = useState<SettingsModel>()
+  const [settingsLoading, setSettingsLoading] = useState<boolean>(false)
   const [modalVisible, setModalVisible] = useState<boolean>(false)
   const { connectSession } = useReapitConnect(reapitConnectBrowserSession)
   const { setMessageState } = useContext(MessageContext)
   const currentSubscription = getCurrentSubscription(subscriptions)
   const handleModalClose = () => setModalVisible(false)
   const handleModalOpen = () => setModalVisible(true)
+  const mobile = isMobile()
 
+  useEffect(handleGetSettings(setSettingsLoading, setSettings, connectSession), [connectSession])
   useEffect(handleGetSubscriptions(setSubscriptions, setSubscriptionsLoading, setMessageState, connectSession), [
     setSubscriptions,
     setSubscriptionsLoading,
@@ -30,11 +51,22 @@ export const AnalyticsPage: React.FC = () => {
 
   return (
     <ErrorBoundary>
-      <Section className="justify-between items-center" isFlex>
-        <H3 className="mb-0">Analytics</H3>
-        <Button onClick={handleModalOpen} disabled={!currentSubscription}>
-          Usage Limits
-        </Button>
+      <Section className={cx('justify-between', 'items-center', mobile && flexColumn)} isFlex>
+        <H3 className={cx(!mobile && 'mb-0')}>Analytics</H3>
+        {!settingsLoading && settings && (
+          <FadeIn>
+            <LevelRight>
+              <FaInfo className={icon} />
+              <i className="mr-4 mb-2 inline-block">
+                Warehouse uptime limit set at {settings?.monthlyUsageCap ?? 0} hrs/pcm (
+                {getChargableUsageString(settings)})
+              </i>
+              <Button onClick={handleModalOpen} disabled={!currentSubscription}>
+                Adjust uptime limit
+              </Button>
+            </LevelRight>
+          </FadeIn>
+        )}
         <AnalyticsUsageModal visible={modalVisible} handleClose={handleModalClose} />
       </Section>
       {subscriptionsLoading ? (
@@ -45,15 +77,26 @@ export const AnalyticsPage: React.FC = () => {
         </Helper>
       ) : (
         <>
-          <FadeIn>
-            <Helper variant="info">
-              Billing is based on consumption and is calculated based on the number of hours of warehouse uptime in a
-              given month. Your warehouse will become active and available when queries are issued against it. You will
-              be billed by the minute while your warehouse is active and serving data. After a short period of
-              inactivity, the warehouse will enter a sleep state. No usage costs are accrued when the warehouse is
-              sleeping and your subscription includes 2 hours of warehouse uptime per month.{' '}
-            </Helper>
-          </FadeIn>
+          <Section>
+            <FadeIn>
+              <Content>
+                <p>
+                  <i>
+                    Billing is based on consumption and is calculated based on the number of hours of warehouse uptime
+                    in a given month. Your warehouse will become active and available when queries are issued against
+                    it. You will be billed by the minute while your warehouse is active and serving data.
+                  </i>
+                </p>
+                <p>
+                  <i>
+                    After a short period of inactivity, the warehouse will enter a sleep state. No usage costs are
+                    accrued when the warehouse is sleeping. Your subscription includes 2 hours of warehouse uptime per
+                    month.
+                  </i>
+                </p>
+              </Content>
+            </FadeIn>
+          </Section>
           <Grid isMultiLine>
             <GridItem className="is-half">
               <AnalyticsDailyUsage />

packages/data-warehouse/src/components/pages/data/data.tsx

@@ -65,24 +65,35 @@ export const Data: React.FC<DataProps> = () => {
           <Loader />
         ) : currentSubscription ? (
           <>
-            <FadeIn>
-              <Helper variant="info">
-                Our data warehouse solution can provide access to your data in a number of different formats. To get
-                immediate access to your data in a particular format, click &lsquo;Create Share&rsquo;. The data will be
-                published into your data warehouse and connectivity information will then be presented to you. Please
-                see our{' '}
-                <a
-                  href="https://www.youtube.com/watch?v=N-4TeWsM7EU&feature=youtu.be"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  usage instructions
-                </a>{' '}
-                for further information on how to use these details to connect a number of popular BI applications.
-                Please note that generating a data share is a long running process and can take 30 seconds or more to
-                complete.
-              </Helper>
-            </FadeIn>
+            <Section>
+              <FadeIn>
+                <Content>
+                  <p>
+                    <i>
+                      Our data warehouse solution can provide access to your data in a number of different formats. To
+                      get immediate access to your data in a particular format, click ‘Create Share’. The data will be
+                      published into your data warehouse and connectivity information will then be presented to you.
+                      Please see our{' '}
+                      <a
+                        href="https://www.youtube.com/watch?v=N-4TeWsM7EU&feature=youtu.be"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        usage instructions
+                      </a>{' '}
+                      for further information on how to use these details to connect a number of popular BI
+                      applications.
+                    </i>
+                  </p>
+                  <p>
+                    <i>
+                      Please note that creating a data share is a long running process and can take 30 seconds or more
+                      to complete.
+                    </i>
+                  </p>
+                </Content>
+              </FadeIn>
+            </Section>
             <Section>
               <H5>Available Data</H5>
               {dataSetsLoading ? (