Add per service charts to protocol-dashboard

protocol-dashboard/src/components/IndividualServiceApiCallsChart/IndividualServiceApiCallsChart.tsx

@@ -0,0 +1,42 @@
+import LineChart from 'components/LineChart'
+import React, { useState } from 'react'
+import { useIndividualServiceApiCalls } from 'store/cache/analytics/hooks'
+import { Bucket, MetricError } from 'store/cache/analytics/slice'
+
+type OwnProps = {
+  node: string
+}
+
+type IndividualServiceApiCallsChartProps = OwnProps
+
+const IndividualServiceApiCallsChart: React.FC<IndividualServiceApiCallsChartProps> = ({
+  node
+}) => {
+  const [bucket, setBucket] = useState(Bucket.MONTH)
+
+  const { apiCalls } = useIndividualServiceApiCalls(node, bucket)
+  let error, labels, data
+  if (apiCalls === MetricError.ERROR) {
+    error = true
+    labels = []
+    data = []
+  } else {
+    labels = apiCalls?.map(a => new Date(a.timestamp).getTime() / 1000) ?? null
+    data = apiCalls?.map(a => a.total_count) ?? null
+  }
+  return (
+    <LineChart
+      title="API Calls"
+      tooltipTitle="API Calls"
+      error={error}
+      data={data}
+      labels={labels}
+      selection={bucket}
+      options={[Bucket.ALL_TIME, Bucket.MONTH, Bucket.WEEK]}
+      onSelectOption={(option: string) => setBucket(option as Bucket)}
+      showLeadingDay
+    />
+  )
+}
+
+export default IndividualServiceApiCallsChart

protocol-dashboard/src/components/IndividualServiceApiCallsChart/index.tsx

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

protocol-dashboard/src/components/IndividualServiceUniqueUsersChart/IndividualServiceUniqueUsersChart.tsx

@@ -0,0 +1,42 @@
+import LineChart from 'components/LineChart'
+import React, { useState } from 'react'
+import { useIndividualServiceApiCalls } from 'store/cache/analytics/hooks'
+import { Bucket, MetricError } from 'store/cache/analytics/slice'
+
+type OwnProps = {
+  node: string
+}
+
+type IndividualServiceUniqueUsersChartProps = OwnProps
+
+const IndividualServiceUniqueUsersChart: React.FC<IndividualServiceUniqueUsersChartProps> = ({
+  node
+}) => {
+  const [bucket, setBucket] = useState(Bucket.MONTH)
+
+  const { apiCalls } = useIndividualServiceApiCalls(node, bucket)
+  let error, labels, data
+  if (apiCalls === MetricError.ERROR) {
+    error = true
+    labels = []
+    data = []
+  } else {
+    labels = apiCalls?.map(a => new Date(a.timestamp).getTime() / 1000) ?? null
+    data = apiCalls?.map(a => a.unique_count) ?? null
+  }
+  return (
+    <LineChart
+      title="Unique Users"
+      tooltipTitle="Unique Users"
+      error={error}
+      data={data}
+      labels={labels}
+      selection={bucket}
+      options={[Bucket.ALL_TIME, Bucket.MONTH, Bucket.WEEK]}
+      onSelectOption={(option: string) => setBucket(option as Bucket)}
+      showLeadingDay
+    />
+  )
+}
+
+export default IndividualServiceUniqueUsersChart

protocol-dashboard/src/components/IndividualServiceUniqueUsersChart/index.tsx

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

protocol-dashboard/src/components/NodeOverview/NodeOverview.module.css

@@ -5,6 +5,13 @@
   display: inline-flex;
   flex-direction: column;
   box-sizing: border-box;
+  min-height: 240px;
+}
+
+.loading {
+  margin: 42px auto 0;
+  justify-content: center;
+  align-items: center;
 }
 
 .header {

protocol-dashboard/src/components/NodeOverview/NodeOverview.tsx

@@ -80,6 +80,7 @@ type NodeOverviewProps = {
   isOwner?: boolean
   isDeregistered?: boolean
   isUnregistered?: boolean
+  isLoading: boolean
 }
 
 const NodeOverview = ({
@@ -91,7 +92,8 @@ const NodeOverview = ({
   delegateOwnerWallet,
   isOwner,
   isDeregistered,
-  isUnregistered
+  isUnregistered,
+  isLoading
 }: NodeOverviewProps) => {
   const { isOpen, onClick, onClose } = useModalControls()
   const { health, status, error } = useNodeHealth(endpoint, serviceType)
@@ -252,76 +254,82 @@ const NodeOverview = ({
 
   return (
     <Paper className={styles.container}>
-      <div className={styles.header}>
-        <div className={styles.serviceType}>
-          {serviceType === ServiceType.DiscoveryProvider
-            ? messages.dp
-            : messages.cn}
-        </div>
-        {isDeregistered && (
-          <div className={styles.deregistered}>{messages.deregistered}</div>
-        )}
-        {!isDeregistered && (
-          <div className={styles.version}>
-            {`${messages.version} ${health?.version || version || 'unknown'}`}
+      {isLoading ? (
+        <Loading className={styles.loading} />
+      ) : (
+        <>
+          <div className={styles.header}>
+            <div className={styles.serviceType}>
+              {serviceType === ServiceType.DiscoveryProvider
+                ? messages.dp
+                : messages.cn}
+            </div>
+            {isDeregistered && (
+              <div className={styles.deregistered}>{messages.deregistered}</div>
+            )}
+            {!isDeregistered && (
+              <div className={styles.version}>
+                {`${messages.version} ${health?.version || version || 'unknown'}`}
+              </div>
+            )}
+            {!isDeregistered && isUnregistered && (
+              <>
+                <Button
+                  onClick={onClick}
+                  leftIcon={<IconArrowWhite />}
+                  type={ButtonType.PRIMARY}
+                  text={messages.register}
+                  className={clsx(styles.registerBtn)}
+                  textClassName={styles.registerBtnText}
+                />
+                <RegisterServiceModal
+                  isOpen={isOpen}
+                  onClose={onClose}
+                  defaultDelegateOwnerWallet={
+                    delegateOwnerWallet || health?.delegateOwnerWallet || ''
+                  }
+                  defaultEndpoint={endpoint}
+                  defaultServiceType={serviceType}
+                />
+              </>
+            )}
+            {!isDeregistered && isOwner && (
+              <>
+                <Button
+                  onClick={onClick}
+                  leftIcon={<IconPencil />}
+                  type={ButtonType.PRIMARY_ALT}
+                  text={messages.modify}
+                  className={clsx(styles.modifyBtn)}
+                  textClassName={styles.modifyBtnText}
+                />
+                <ModifyServiceModal
+                  isOpen={isOpen}
+                  onClose={onClose}
+                  spID={spID}
+                  serviceType={serviceType}
+                  endpoint={endpoint}
+                  delegateOwnerWallet={health?.delegateOwnerWallet}
+                />
+              </>
+            )}
           </div>
-        )}
-        {!isDeregistered && isUnregistered && (
-          <>
-            <Button
-              onClick={onClick}
-              leftIcon={<IconArrowWhite />}
-              type={ButtonType.PRIMARY}
-              text={messages.register}
-              className={clsx(styles.registerBtn)}
-              textClassName={styles.registerBtnText}
+          <ServiceDetail label={messages.endpoint} value={endpoint} />
+          {(operatorWallet || health?.operatorWallet) && (
+            <ServiceDetail
+              label={messages.operator}
+              value={operatorWallet || health?.operatorWallet}
             />
-            <RegisterServiceModal
-              isOpen={isOpen}
-              onClose={onClose}
-              defaultDelegateOwnerWallet={
-                delegateOwnerWallet || health?.delegateOwnerWallet || ''
-              }
-              defaultEndpoint={endpoint}
-              defaultServiceType={serviceType}
-            />
-          </>
-        )}
-        {!isDeregistered && isOwner && (
-          <>
-            <Button
-              onClick={onClick}
-              leftIcon={<IconPencil />}
-              type={ButtonType.PRIMARY_ALT}
-              text={messages.modify}
-              className={clsx(styles.modifyBtn)}
-              textClassName={styles.modifyBtnText}
+          )}
+          {(delegateOwnerWallet || health?.delegateOwnerWallet) && (
+            <ServiceDetail
+              label={messages.delegate}
+              value={delegateOwnerWallet || health.delegateOwnerWallet}
             />
-            <ModifyServiceModal
-              isOpen={isOpen}
-              onClose={onClose}
-              spID={spID}
-              serviceType={serviceType}
-              endpoint={endpoint}
-              delegateOwnerWallet={health?.delegateOwnerWallet}
-            />
-          </>
-        )}
-      </div>
-      <ServiceDetail label={messages.endpoint} value={endpoint} />
-      {(operatorWallet || health?.operatorWallet) && (
-        <ServiceDetail
-          label={messages.operator}
-          value={operatorWallet || health?.operatorWallet}
-        />
-      )}
-      {(delegateOwnerWallet || health?.delegateOwnerWallet) && (
-        <ServiceDetail
-          label={messages.delegate}
-          value={delegateOwnerWallet || health.delegateOwnerWallet}
-        />
+          )}
+          {healthDetails}
+        </>
       )}
-      {healthDetails}
     </Paper>
   )
 }

protocol-dashboard/src/containers/Node/Node.module.css

@@ -1,4 +1,19 @@
 .container {
-  display: inline-flex;
   width: 100%;
 }
+
+.section {
+  margin-bottom: 16px;
+  display: flex;
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+.section > * {
+  width: 100%;
+  margin: 0 8px;
+}
+
+.chart {
+  min-height: 340px;
+}