Add per-service charts

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

@@ -0,0 +1,45 @@
+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(parseInt(a.timestamp, 10) * 1000).getTime() / 1000
+      ) ?? null
+    data = apiCalls?.map(a => a.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,45 @@
+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(parseInt(a.timestamp, 10) * 1000).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'

src/components/NodeOverview/NodeOverview.module.css → 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

@@ -0,0 +1,127 @@
+import React from 'react'
+import clsx from 'clsx'
+
+import Paper from 'components/Paper'
+import Button from 'components/Button'
+import ModifyServiceModal from 'components/ModifyServiceModal'
+import { ButtonType, IconPencil } from '@audius/stems'
+import { ServiceType, Address } from 'types'
+import { useModalControls } from 'utils/hooks'
+
+import desktopStyles from './NodeOverview.module.css'
+import mobileStyles from './NodeOverviewMobile.module.css'
+import { createStyles } from 'utils/mobile'
+import Loading from 'components/Loading'
+
+const styles = createStyles({ desktopStyles, mobileStyles })
+
+const messages = {
+  dp: 'Discovery Node',
+  cn: 'Content Node',
+  title: 'SERVICE',
+  version: 'VER.',
+  deregistered: 'DEREGISTERED',
+  endpoint: 'SERVICE ENDPOINT',
+  operator: 'OPERATOR',
+  delegate: 'DELEGATE OWNER WALLET',
+  modify: 'Modify Service'
+}
+
+const ServiceDetail = ({ label, value }: { label: string; value: string }) => {
+  return (
+    <div className={styles.descriptor}>
+      <div className={styles.label}>{label}</div>
+      <div className={styles.value}>{value}</div>
+    </div>
+  )
+}
+
+type NodeOverviewProps = {
+  spID?: number
+  serviceType?: ServiceType
+  version?: string
+  endpoint?: string
+  operatorWallet?: Address
+  delegateOwnerWallet?: Address
+  isOwner?: boolean
+  isDeregistered?: boolean
+  isLoading: boolean
+}
+
+const NodeOverview = ({
+  spID,
+  serviceType,
+  version,
+  endpoint,
+  operatorWallet,
+  delegateOwnerWallet,
+  isOwner,
+  isDeregistered,
+  isLoading
+}: NodeOverviewProps) => {
+  const { isOpen, onClick, onClose } = useModalControls()
+
+  return (
+    <Paper className={styles.container}>
+      {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>
+            ) : (
+              <div className={styles.version}>
+                {`${messages.version} ${version || ''}`}
+              </div>
+            )}
+            {isOwner &&
+              !isDeregistered &&
+              spID &&
+              endpoint &&
+              serviceType &&
+              delegateOwnerWallet && (
+                <>
+                  <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={delegateOwnerWallet}
+                  />
+                </>
+              )}
+          </div>
+          {endpoint ? (
+            <ServiceDetail label={messages.endpoint} value={endpoint} />
+          ) : null}
+          {operatorWallet ? (
+            <ServiceDetail label={messages.operator} value={operatorWallet} />
+          ) : null}
+          {delegateOwnerWallet ? (
+            <ServiceDetail
+              label={messages.delegate}
+              value={delegateOwnerWallet}
+            />
+          ) : null}
+        </>
+      )}
+    </Paper>
+  )
+}
+
+export default NodeOverview