Skip to content

Commit

Permalink
Merge pull request #326 from AmbireTech/development
Browse files Browse the repository at this point in the history
v0.69.73
  • Loading branch information
ivopaunov authored Dec 27, 2024
2 parents 0785a43 + 2b52e38 commit 0e09bec
Show file tree
Hide file tree
Showing 19 changed files with 373 additions and 69 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand Down
6 changes: 6 additions & 0 deletions src/components/AdminPanel/AdminPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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
Expand All @@ -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>
Expand Down
120 changes: 120 additions & 0 deletions src/components/AdminPanel/DspStats.tsx
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion src/components/AdminPanel/SSPsAnalytics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
43 changes: 25 additions & 18 deletions src/components/CampaignDetails/CampaignDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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={
Expand All @@ -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={
Expand All @@ -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={
Expand All @@ -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={
Expand All @@ -336,7 +336,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
: 'N/A'
}
/>
<CampaignDetailsRow
<DetailsRow
textSize="sm"
title="Ends"
value={
Expand All @@ -345,7 +345,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
: 'N/A'
}
/>
<CampaignDetailsRow
<DetailsRow
title="CPM min"
value={
campaign.pricingBounds.IMPRESSION?.min && (
Expand All @@ -359,7 +359,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
)
}
/>
<CampaignDetailsRow
<DetailsRow
title="CPM max"
value={
campaign.pricingBounds.IMPRESSION?.max && (
Expand All @@ -373,7 +373,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
)
}
/>
<CampaignDetailsRow
<DetailsRow
textSize="sm"
title="Limit average daily spending"
value={
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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}`}
Expand Down
Loading

0 comments on commit 0e09bec

Please sign in to comment.