From 78445cc3e8edbb74e139ba84ad51a3e5bb58aacb Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 11:41:42 +0200
Subject: [PATCH 1/3] add dsp stats data, action and admin tab

---
 src/components/AdminPanel/AdminPanel.tsx   |  6 +++
 src/components/AdminPanel/DspStats.tsx     | 15 +++++++
 src/contexts/AdminContext/AdminContext.tsx | 46 +++++++++++++++++++++-
 src/types/dspStats.ts                      | 17 ++++++++
 4 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AdminPanel/DspStats.tsx
 create mode 100644 src/types/dspStats.ts

diff --git a/src/components/AdminPanel/AdminPanel.tsx b/src/components/AdminPanel/AdminPanel.tsx
index d31bf23f..b9f2c4fa 100644
--- a/src/components/AdminPanel/AdminPanel.tsx
+++ b/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 stats</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>
diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
new file mode 100644
index 00000000..695184aa
--- /dev/null
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -0,0 +1,15 @@
+import { Stack } from '@mantine/core'
+import useAdmin from 'hooks/useAdmin'
+import { useEffect } from 'react'
+
+const DspStats = () => {
+  const { dspStats, getDspStats } = useAdmin()
+
+  useEffect(() => {
+    getDspStats()
+  }, [])
+
+  return <Stack>{JSON.stringify(dspStats, null, 2)}</Stack>
+}
+
+export default DspStats
diff --git a/src/contexts/AdminContext/AdminContext.tsx b/src/contexts/AdminContext/AdminContext.tsx
index 1c7a0c7c..b5c5f977 100644
--- a/src/contexts/AdminContext/AdminContext.tsx
+++ b/src/contexts/AdminContext/AdminContext.tsx
@@ -2,10 +2,13 @@ import { createContext, FC, PropsWithChildren, useMemo, useState, useCallback }
 import { Account, AdminTransfer, AdminTransferType } from 'types'
 import { useAdExApi } from 'hooks/useAdexServices'
 import { removeOptionalEmptyStringProps } from 'helpers'
+import { DspStats } from 'types/dspStats'
 
 interface IAdminContext {
   accounts: Map<string, Account>
   getAllAccounts: () => void
+  dspStats: DspStats
+  getDspStats: () => void
   initialDataLoading: boolean
   makeTransfer: (
     values: AdminTransfer,
@@ -20,12 +23,25 @@ interface IAdminContext {
   ) => Promise<void>
 }
 
+const dspStatsDefault = {
+  totalRequests: 0,
+  ortbRequests: 0,
+  throttledRequests: 0,
+  ortbRequestsPerSecond: 0,
+  throttledRequestsPerSecond: 0,
+  bidRequestsWithNoBids: 0,
+  bidRequestsBidsInTime: 0,
+  bidRequestsWithBidsLate: 0,
+  ssp: []
+}
+
 const AdminContext = createContext<IAdminContext | null>(null)
 
 const AdminProvider: FC<PropsWithChildren> = ({ children }) => {
   const { adexServicesRequest } = useAdExApi()
   const [initialDataLoading, setLoading] = useState(true)
   const [accounts, setAccounts] = useState<Map<string, Account>>(new Map<string, Account>())
+  const [dspStats, setDspStats] = useState<DspStats>(dspStatsDefault)
 
   const getAllAccounts = useCallback(async () => {
     try {
@@ -131,15 +147,43 @@ const AdminProvider: FC<PropsWithChildren> = ({ children }) => {
     [adexServicesRequest]
   )
 
+  const getDspStats = useCallback(async () => {
+    try {
+      const res = await adexServicesRequest<DspStats>('backend', {
+        route: '/dsp/admin/sysinfo',
+        method: 'GET',
+        headers: {
+          'content-type': 'application/json'
+        }
+      })
+
+      if (res) {
+        setDspStats(res)
+      }
+    } catch (err) {
+      console.log({ err })
+    }
+  }, [adexServicesRequest])
+
   const contextValue = useMemo(
     () => ({
       accounts,
       getAllAccounts,
+      getDspStats,
+      dspStats,
       initialDataLoading,
       makeTransfer,
       updateAccountInfo
     }),
-    [accounts, initialDataLoading, makeTransfer, getAllAccounts, updateAccountInfo]
+    [
+      accounts,
+      getAllAccounts,
+      getDspStats,
+      dspStats,
+      initialDataLoading,
+      makeTransfer,
+      updateAccountInfo
+    ]
   )
 
   return <AdminContext.Provider value={contextValue}>{children}</AdminContext.Provider>
diff --git a/src/types/dspStats.ts b/src/types/dspStats.ts
new file mode 100644
index 00000000..1a7bfa9e
--- /dev/null
+++ b/src/types/dspStats.ts
@@ -0,0 +1,17 @@
+export type SSPQPSStats = {
+  name: string
+  qpsConfig?: number
+  qpsCurrent: number
+  qpsDropped: number
+}
+export type DspStats = {
+  totalRequests: number
+  ortbRequests: number
+  throttledRequests: number
+  ortbRequestsPerSecond: number
+  throttledRequestsPerSecond: number
+  bidRequestsWithNoBids: number
+  bidRequestsBidsInTime: number
+  bidRequestsWithBidsLate: number
+  ssp: SSPQPSStats[]
+}

From c68c9e155a16b10fd120424a076f39d0ee46bf5d Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 12:02:22 +0200
Subject: [PATCH 2/3] rename campaign details row to details row

---
 .../CreateCampaign/CampaignSummary.tsx        | 40 ++++++-------------
 .../CreateCampaign/StepFour/StepFour.tsx      |  4 +-
 .../common/CampainDetailsRow/index.ts         |  3 --
 .../DetailsRow.tsx}                           |  8 ++--
 src/components/common/DetailsRow/index.ts     |  3 ++
 5 files changed, 22 insertions(+), 36 deletions(-)
 delete mode 100644 src/components/common/CampainDetailsRow/index.ts
 rename src/components/common/{CampainDetailsRow/CampaignDetailsRow.tsx => DetailsRow/DetailsRow.tsx} (86%)
 create mode 100644 src/components/common/DetailsRow/index.ts

diff --git a/src/components/CreateCampaign/CampaignSummary.tsx b/src/components/CreateCampaign/CampaignSummary.tsx
index 92ec661a..2fcec032 100644
--- a/src/components/CreateCampaign/CampaignSummary.tsx
+++ b/src/components/CreateCampaign/CampaignSummary.tsx
@@ -3,7 +3,7 @@ import { Button, Group, Stack, Text } from '@mantine/core'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import LeftArrowIcon from 'resources/icons/LeftArrow'
 import useCreateCampaignData from 'hooks/useCreateCampaignData/useCreateCampaignData'
-import CampaignDetailsRow from 'components/common/CampainDetailsRow'
+import DetailsRow from 'components/common/DetailsRow'
 import { UtmInfo } from './CreateCampaignCommon'
 
 const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
@@ -39,51 +39,41 @@ const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
 
   return (
     <Stack gap="xs">
-      <CampaignDetailsRow
-        lighterColor
-        title="Budget"
-        value={campaignBudgetFormatted}
-        textSize="sm"
-      />
-      <CampaignDetailsRow lighterColor title="CPM" value={priceBoundsFormatted} textSize="sm" />
-      <CampaignDetailsRow
+      <DetailsRow lighterColor title="Budget" value={campaignBudgetFormatted} textSize="sm" />
+      <DetailsRow lighterColor title="CPM" value={priceBoundsFormatted} textSize="sm" />
+      <DetailsRow
         lighterColor
         title="Placement"
         value={placement === 'site' ? 'Website' : 'App'}
         textSize="sm"
       />
       {placement === 'site' && (
-        <CampaignDetailsRow
-          lighterColor
-          title="Device"
-          textSize="sm"
-          value={formattedSelectedDevice}
-        />
+        <DetailsRow lighterColor title="Device" textSize="sm" value={formattedSelectedDevice} />
       )}
-      <CampaignDetailsRow lighterColor title="Ad Format" value={adFormats} textSize="sm" />
-      <CampaignDetailsRow lighterColor title="Categories" value={formattedCats} textSize="sm" />
-      <CampaignDetailsRow lighterColor title="Countries" value={formattedLocs} textSize="sm" />
-      <CampaignDetailsRow
+      <DetailsRow lighterColor title="Ad Format" value={adFormats} textSize="sm" />
+      <DetailsRow lighterColor title="Categories" value={formattedCats} textSize="sm" />
+      <DetailsRow lighterColor title="Countries" value={formattedLocs} textSize="sm" />
+      <DetailsRow
         lighterColor
         title="Limit average daily spending"
         value={advancedTargeInput.limitDailyAverageSpending ? 'Yes' : 'No'}
         textSize="sm"
       />
-      <CampaignDetailsRow
+      <DetailsRow
         lighterColor
         title="Aggressive bidding"
         value={advancedTargeInput.aggressiveBidding ? 'Yes' : 'No'}
         textSize="sm"
       />
 
-      <CampaignDetailsRow
+      <DetailsRow
         lighterColor
         title="Loose source bidding"
         value={advancedTargeInput.looseSourceCTR ? 'Yes' : 'No'}
         textSize="sm"
       />
 
-      <CampaignDetailsRow
+      <DetailsRow
         lighterColor
         title="Auto UTM tracking"
         value={
@@ -98,11 +88,7 @@ const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
         noBorder
         mb="xs"
       />
-      <CampaignDetailsRow
-        title="Estimated Impressions"
-        value={estimatedImpressions}
-        textSize="sm"
-      />
+      <DetailsRow title="Estimated Impressions" value={estimatedImpressions} textSize="sm" />
       <Stack align="stretch" justify="space-between" gap="sm" mt="xl" px="md">
         {step === 3 ? (
           <Button onClick={onLaunchClick} size="lg" variant="filled">
diff --git a/src/components/CreateCampaign/StepFour/StepFour.tsx b/src/components/CreateCampaign/StepFour/StepFour.tsx
index 47452912..3a50c9a7 100644
--- a/src/components/CreateCampaign/StepFour/StepFour.tsx
+++ b/src/components/CreateCampaign/StepFour/StepFour.tsx
@@ -1,5 +1,5 @@
 import { Paper, Stack } from '@mantine/core'
-import CampaignDetailsRow from 'components/common/CampainDetailsRow/CampaignDetailsRow'
+import DetailsRow from 'components/common/DetailsRow/DetailsRow'
 import useCreateCampaignData from 'hooks/useCreateCampaignData/useCreateCampaignData'
 import { useMemo } from 'react'
 import { CreateCampaignOverview } from 'types'
@@ -68,7 +68,7 @@ const StepFour = () => {
         const fullTitle = `${item.title}`
 
         return (
-          <CampaignDetailsRow
+          <DetailsRow
             key={fullTitle}
             lighterColor
             title={fullTitle}
diff --git a/src/components/common/CampainDetailsRow/index.ts b/src/components/common/CampainDetailsRow/index.ts
deleted file mode 100644
index 61ca631e..00000000
--- a/src/components/common/CampainDetailsRow/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CampaignDetailsRow from './CampaignDetailsRow'
-
-export default CampaignDetailsRow
diff --git a/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx b/src/components/common/DetailsRow/DetailsRow.tsx
similarity index 86%
rename from src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx
rename to src/components/common/DetailsRow/DetailsRow.tsx
index e341c396..812394f8 100644
--- a/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx
+++ b/src/components/common/DetailsRow/DetailsRow.tsx
@@ -1,6 +1,6 @@
 import { Divider, Flex, Text, FlexProps, MantineFontSize } from '@mantine/core'
 
-export type CampaignDetailsRowProps = FlexProps & {
+export type DetailsRowProps = FlexProps & {
   title: string
   value: any | undefined
   lighterColor?: boolean | undefined
@@ -9,7 +9,7 @@ export type CampaignDetailsRowProps = FlexProps & {
   column?: boolean
 }
 
-const CampaignDetailsRow = ({
+const DetailsRow = ({
   title,
   value,
   lighterColor,
@@ -17,7 +17,7 @@ const CampaignDetailsRow = ({
   noBorder = false,
   column = false,
   ...flexProps
-}: CampaignDetailsRowProps) => {
+}: DetailsRowProps) => {
   return (
     <>
       <Flex
@@ -44,4 +44,4 @@ const CampaignDetailsRow = ({
   )
 }
 
-export default CampaignDetailsRow
+export default DetailsRow
diff --git a/src/components/common/DetailsRow/index.ts b/src/components/common/DetailsRow/index.ts
new file mode 100644
index 00000000..043de36c
--- /dev/null
+++ b/src/components/common/DetailsRow/index.ts
@@ -0,0 +1,3 @@
+import DetailsRow from './DetailsRow'
+
+export default DetailsRow

From dfaabb7460cdee7a7f93e2ced1c132f4d008ce6d Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 12:02:38 +0200
Subject: [PATCH 3/3] update dsp info

---
 src/components/AdminPanel/AdminPanel.tsx      |  2 +-
 src/components/AdminPanel/DspStats.tsx        | 63 ++++++++++++++++++-
 .../CampaignDetails/CampaignDetails.tsx       | 34 +++++-----
 3 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/src/components/AdminPanel/AdminPanel.tsx b/src/components/AdminPanel/AdminPanel.tsx
index b9f2c4fa..6e1b2683 100644
--- a/src/components/AdminPanel/AdminPanel.tsx
+++ b/src/components/AdminPanel/AdminPanel.tsx
@@ -29,7 +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 stats</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
diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
index 695184aa..18072a1b 100644
--- a/src/components/AdminPanel/DspStats.tsx
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -1,4 +1,5 @@
-import { Stack } from '@mantine/core'
+import { NumberFormatter, Stack, Divider, Space } from '@mantine/core'
+import DetailsRow from 'components/common/DetailsRow'
 import useAdmin from 'hooks/useAdmin'
 import { useEffect } from 'react'
 
@@ -9,7 +10,65 @@ const DspStats = () => {
     getDspStats()
   }, [])
 
-  return <Stack>{JSON.stringify(dspStats, null, 2)}</Stack>
+  return (
+    <Stack maw={420} gap="xs">
+      <DetailsRow
+        title="Total ORTB requests"
+        value={<NumberFormatter thousandSeparator value={dspStats.ortbRequests} />}
+      />
+      <DetailsRow
+        title="Bid requests with no bids"
+        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithNoBids} />}
+      />
+      <DetailsRow
+        title="Bid requests in time"
+        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsBidsInTime} />}
+      />
+      <DetailsRow
+        title="Bid requests with late bids"
+        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithBidsLate} />}
+      />
+      <DetailsRow
+        title="Total Bid requests per second"
+        value={<NumberFormatter thousandSeparator value={dspStats.ortbRequestsPerSecond} />}
+      />
+      <DetailsRow
+        title="Total requests"
+        value={<NumberFormatter thousandSeparator value={dspStats.totalRequests} />}
+      />
+      <DetailsRow
+        title="Throttled requests"
+        value={<NumberFormatter thousandSeparator value={dspStats.throttledRequests} />}
+      />
+      <DetailsRow
+        title="Throttled requests per second"
+        value={<NumberFormatter thousandSeparator value={dspStats.throttledRequestsPerSecond} />}
+      />
+      <Space />
+      {dspStats.ssp.map((ssp) => (
+        <Stack gap={0}>
+          <DetailsRow id={ssp.name} title="ssp" value={ssp.name} />
+          <DetailsRow
+            id={ssp.name}
+            title="qps cfg"
+            value={<NumberFormatter thousandSeparator value={ssp.qpsConfig} />}
+          />
+          <DetailsRow
+            id={ssp.name}
+            title="qps current"
+            value={<NumberFormatter thousandSeparator value={ssp.qpsCurrent} />}
+          />
+          <DetailsRow
+            id={ssp.name}
+            title="qps dropped"
+            value={<NumberFormatter thousandSeparator value={ssp.qpsDropped} />}
+            noBorder
+          />
+          <Divider size="xl" />
+        </Stack>
+      ))}
+    </Stack>
+  )
 }
 
 export default DspStats
diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index 663e5fcb..6aee34fb 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -8,7 +8,7 @@ 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
@@ -443,7 +443,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}`}