v0.69.73

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.71",
+  "version": "0.69.73",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",
@@ -36,7 +36,7 @@
     "@visx/scale": "^3.3.0",
     "@visx/xychart": "^3.3.0",
     "@visx/zoom": "^3.3.0",
-    "adex-common": "github:AmbireTech/adex-common#eb2d0bd0c10ef2baed38391d59dec5055646bce4",
+    "adex-common": "github:AmbireTech/adex-common#119affb121179d181a9e4dc219121dc7a68cac04",
     "blockies-ts": "^1.0.0",
     "d3-geo": "^3.1.0",
     "dayjs": "^1.11.10",

src/components/AdminPanel/AdminPanel.tsx

@@ -7,6 +7,7 @@ import Invoices from 'components/Billing/Invoices'
 import AdminAnalytics from './AdminAnalytics'
 import Accounts from './Accounts'
 import SSPsAnalytics from './SSPsAnalytics'
+import DspStats from './DspStats'
 // import { AccountDetails } from './AccountDetails'
 
 const AdminPanel = () => {
@@ -28,6 +29,7 @@ const AdminPanel = () => {
           <Tabs.Tab value="invoices">Invoices</Tabs.Tab>
           <Tabs.Tab value="validatorAnalytics">Validator Analytics</Tabs.Tab>
           <Tabs.Tab value="sspAnalytics">SSPs Analytics</Tabs.Tab>
+          <Tabs.Tab value="dspStats">DSP info</Tabs.Tab>
           <Tabs.Tab value="accounts">Accounts</Tabs.Tab>
           <Tabs.Tab value="user-account" disabled>
             Account details
@@ -51,6 +53,10 @@ const AdminPanel = () => {
             <SSPsAnalytics />
           </Tabs.Panel>
 
+          <Tabs.Panel value="dspStats" pt="xs">
+            <DspStats />
+          </Tabs.Panel>
+
           <Tabs.Panel value="accounts" pt="xs">
             <Accounts />
           </Tabs.Panel>

src/components/AdminPanel/DspStats.tsx

@@ -0,0 +1,120 @@
+import { NumberFormatter, Stack, SimpleGrid, Fieldset } from '@mantine/core'
+import CustomTable from 'components/common/CustomTable'
+import DetailsRow from 'components/common/DetailsRow'
+import useAdmin from 'hooks/useAdmin'
+import { useEffect } from 'react'
+import { BaseDSPStats, SSPQPSStats } from 'types/dspStats'
+
+const getPercent = (total: number, part: number): string => {
+  return ` (${((part / total) * 100).toFixed(2)}%) `
+}
+
+const BaseStats = ({ dspStats }: { dspStats: BaseDSPStats }) => {
+  return (
+    <Stack gap="xs">
+      <DetailsRow
+        title="Total requests (any kind)"
+        value={<NumberFormatter thousandSeparator value={dspStats.totalRequests} />}
+      />
+
+      <DetailsRow
+        title="Bid requests - total"
+        value={
+          <div>
+            {getPercent(dspStats.totalRequests, dspStats.ortbRequests)}
+            <NumberFormatter thousandSeparator value={dspStats.ortbRequests} />
+          </div>
+        }
+      />
+
+      <DetailsRow
+        title="Bid requests - throttled"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.throttledRequests)}
+            <NumberFormatter thousandSeparator value={dspStats.throttledRequests} />
+          </div>
+        }
+      />
+
+      <DetailsRow
+        title="Bid requests - no bids"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.bidRequestsWithNoBids)}
+            <NumberFormatter thousandSeparator value={dspStats.bidRequestsWithNoBids} />
+          </div>
+        }
+      />
+      <DetailsRow
+        title="Bid requests - in time response"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.bidRequestsBidsInTime)}
+            <NumberFormatter thousandSeparator value={dspStats.bidRequestsBidsInTime} />
+          </div>
+        }
+      />
+
+      <DetailsRow
+        title="Bid requests - NOT in time response"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.bidRequestsWithBidsLate)}
+            <NumberFormatter thousandSeparator value={dspStats.bidRequestsWithBidsLate} />
+          </div>
+        }
+      />
+    </Stack>
+  )
+}
+
+const DspStats = () => {
+  const { dspStats, getDspStats } = useAdmin()
+
+  useEffect(() => {
+    getDspStats()
+  }, [getDspStats])
+
+  return (
+    <SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl">
+      <Fieldset p="lg" legend="Totals">
+        <BaseStats dspStats={dspStats} />
+      </Fieldset>
+
+      <Fieldset p="lg" legend="Past 24h">
+        {dspStats.last24h && <BaseStats dspStats={dspStats.last24h} />}
+      </Fieldset>
+      <Fieldset p="lg" legend="Current">
+        <Stack gap="xs">
+          <DetailsRow
+            title="Total Bid requests per second"
+            value={<NumberFormatter thousandSeparator value={dspStats.ortbRequestsPerSecond} />}
+          />
+          <DetailsRow
+            title="Throttled requests per second"
+            value={
+              <NumberFormatter thousandSeparator value={dspStats.throttledRequestsPerSecond} />
+            }
+          />
+        </Stack>
+      </Fieldset>
+      <Fieldset p="lg" legend="SSPs (per second)">
+        <CustomTable
+          headings={['SSP', 'cfg QPS', 'current QPS', 'current dropped']}
+          data={dspStats.ssp.map((ssp: SSPQPSStats) => ({
+            id: ssp.name,
+            columns: [
+              { value: ssp.name },
+              { value: ssp.qpsConfig },
+              { value: ssp.qpsCurrent },
+              { value: ssp.qpsDropped }
+            ]
+          }))}
+        />
+      </Fieldset>
+    </SimpleGrid>
+  )
+}
+
+export default DspStats

src/components/AdminPanel/SSPsAnalytics.tsx

@@ -248,7 +248,7 @@ const SSPsAnalytics = ({
               size="sm"
             />
           </SimpleGrid>
-          <SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl" mt="xl">
+          <SimpleGrid cols={{ base: 1, xl: 2 }} spacing="xl" mt="xl">
             <Stack>
               <Divider
                 labelPosition="left"

src/components/CampaignDetails/CampaignDetails.tsx

@@ -3,12 +3,12 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { Grid, Text, Button, Paper, Stack, Group, Divider, Box, Anchor } from '@mantine/core'
 import { modals } from '@mantine/modals'
 import BadgeStatusCampaign from 'components/Dashboard/BadgeStatusCampaign'
-import { CATEGORIES, COUNTRIES } from 'constants/createCampaign'
+import { CATEGORIES, COUNTRIES, SSPs } from 'constants/createCampaign'
 import { AdUnit, CampaignStatus } from 'adex-common/dist/types'
 import MediaThumb from 'components/common/MediaThumb'
 import { formatDateTime } from 'helpers/formatters'
 import GoBack from 'components/common/GoBack'
-import CampaignDetailsRow from 'components/common/CampainDetailsRow/CampaignDetailsRow'
+import DetailsRow from 'components/common/DetailsRow/DetailsRow'
 import { useCampaignsData } from 'hooks/useCampaignsData'
 import ActiveIcon from 'resources/icons/Active'
 import StopIcon from 'resources/icons/Stop'
@@ -275,7 +275,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                 <Paper bg="lightBackground" p="md" withBorder>
                   <Stack gap="xs">
                     {isAdminPanel && (
-                      <CampaignDetailsRow
+                      <DetailsRow
                         textSize="sm"
                         title="Owner"
                         value={
@@ -290,9 +290,9 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         }
                       />
                     )}
-                    <CampaignDetailsRow textSize="sm" title="Title" value={campaign?.title} />
-                    <CampaignDetailsRow textSize="sm" title="Id" value={campaign?.id} />
-                    <CampaignDetailsRow
+                    <DetailsRow textSize="sm" title="Title" value={campaign?.title} />
+                    <DetailsRow textSize="sm" title="Id" value={campaign?.id} />
+                    <DetailsRow
                       textSize="sm"
                       title="Status"
                       value={
@@ -304,14 +304,14 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                       }
                     />
                     {/* TODO: Add data for it */}
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Served"
                       // value={campaignData?.share}
                       value=""
                     />
                     {/* TODO: Add data for it */}
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Budget"
                       value={
@@ -323,11 +323,11 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         />
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       title="Created"
                       value={formatDateTime(new Date(Number(campaign.created)))}
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Starts"
                       value={
@@ -336,7 +336,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           : 'N/A'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Ends"
                       value={
@@ -345,7 +345,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           : 'N/A'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       title="CPM min"
                       value={
                         campaign.pricingBounds.IMPRESSION?.min && (
@@ -359,7 +359,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         )
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       title="CPM max"
                       value={
                         campaign.pricingBounds.IMPRESSION?.max && (
@@ -373,7 +373,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         )
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Limit average daily spending"
                       value={
@@ -382,19 +382,19 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           : 'No'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Aggressive bidding"
                       value={
                         campaign.targetingInput.inputs.advanced.aggressiveBidding ? 'Yes' : 'No'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Loose source bidding"
                       value={campaign.targetingInput.inputs.advanced.looseSourceCTR ? 'Yes' : 'No'}
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Last modified by"
                       noBorder
@@ -430,6 +430,13 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         inputValues={campaign.targetingInput.inputs.location}
                         selectData={COUNTRIES}
                       />
+                      {campaign.targetingInput.inputs.ssp && (
+                        <CatsLocsFormatted
+                          title="Selected SSPs"
+                          inputValues={campaign.targetingInput.inputs.ssp}
+                          selectData={SSPs}
+                        />
+                      )}
                     </Stack>
                   </Paper>
                 </Stack>
@@ -443,7 +450,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         {campaign.adUnits.map((item: AdUnit, index: number) => {
                           const isLast = index === campaign.adUnits.length - 1
                           return (
-                            <CampaignDetailsRow
+                            <DetailsRow
                               key={item.id}
                               textSize="sm"
                               title={`${item.banner?.format.w}x${item.banner?.format.h}`}