Coretime Broker on Coretime Chain - Update after Coretime Polkadot re…

…lease (#10947) * showing all cores, not relying on the core information in workload to show the cores * swapped idles and pools to reflect correct values * added start and end for bulk coretime, taking into account timeslice from the workplan * checked and updated the time estimation function * added cores offerred vs sold in summary * filters turned back on * lint * reversed a change in a file from .github folder * removed some extra checks * minor refactor
polkadot-js · Sep 26, 2024 · 859ba48 · 859ba48
1 parent f8efe68
commit 859ba48
Show file tree

Hide file tree

Showing 13 changed files with 292 additions and 263 deletions.
diff --git a/packages/page-broker/src/Overview/CoreTable.tsx b/packages/page-broker/src/Overview/CoreTable.tsx
@@ -16,10 +16,9 @@ interface Props {
   core: number;
   workload?: CoreWorkloadType[],
   workplan?: CoreWorkplanType[],
-  timeslice: number,
 }
 
-function CoreTable ({ api, core, timeslice, workload, workplan }: Props): React.ReactElement<Props> {
+function CoreTable ({ api, core, workload, workplan }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const headerRef = useRef<([React.ReactNode?, string?] | false)[]>([[t('core')]]);
   const header: [React.ReactNode?, string?, number?, (() => void)?][] = [
@@ -38,15 +37,14 @@ function CoreTable ({ api, core, timeslice, workload, workplan }: Props): React.
       isSplit={false}
       key={core}
     >
-      {workload?.map((v) => (
-        <Workload
-          api={api}
-          key={v.core}
-          timeslice={timeslice}
-          value={v}
-          workplan={workplan}
-        />
-      ))}
+      <Workload
+        api={api}
+        core={core}
+        key={core}
+        workload={workload}
+        workplan={workplan}
+      />
+
     </Table>
   );
 }

diff --git a/packages/page-broker/src/Overview/CoresTables.tsx b/packages/page-broker/src/Overview/CoresTables.tsx
@@ -2,44 +2,31 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ApiPromise } from '@polkadot/api';
-import type { CoreInfo, CoreWorkloadType, CoreWorkplanType } from '../types.js';
+import type { CoreInfo } from '../types.js';
 
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import CoreTable from './CoreTable.js';
 
 interface Props {
   api: ApiPromise;
-  workloadInfos?: CoreWorkloadType[];
-  workplanInfos?: CoreWorkplanType[];
-  timeslice: number;
+  data: CoreInfo[];
 }
 
-function CoresTable ({ api, timeslice, workloadInfos, workplanInfos }: Props): React.ReactElement<Props> {
-  const coreArr: number[] = useMemo(() => workloadInfos ? [...workloadInfos.map((plan) => plan.core)] : [], [workloadInfos]);
-  const filteredList: CoreInfo[] = useMemo(() => coreArr.map((c) => ({
-    core: c,
-    workload: workloadInfos?.filter((v) => v.core === c),
-    workplan: workplanInfos?.filter((v) => v.core === c)
-  })), [workloadInfos, workplanInfos, coreArr]);
-
+function CoresTable ({ api, data }: Props): React.ReactElement<Props> {
   return (
     <>
-      {
-        filteredList.map((c) => {
-          return (
-            <CoreTable
-              api={api}
-              core={c.core}
-              key={`core ${c.core}`}
-              timeslice={timeslice}
-              workload={c.workload}
-              workplan={c.workplan}
-            />
-          );
-        }
-        )
-      }
+      {data?.map((coreData) => {
+        return (
+          <CoreTable
+            api={api}
+            core={coreData?.core}
+            key={coreData?.core}
+            workload={coreData?.workload}
+            workplan={coreData?.workplan}
+          />
+        );
+      })}
     </>
   );
 }

diff --git a/packages/page-broker/src/Overview/Filters.tsx b/packages/page-broker/src/Overview/Filters.tsx
@@ -1,13 +1,14 @@
 // Copyright 2017-2024 @polkadot/app-broker authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { CoreInfo } from '../types.js';
+
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Dropdown, Input, styled } from '@polkadot/react-components';
 import { useDebounce } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate.js';
-import { type CoreWorkloadType, type CoreWorkplanType } from '../types.js';
 
 const StyledDiv = styled.div`
   @media (max-width: 768px) {
@@ -16,31 +17,31 @@ const StyledDiv = styled.div`
 `;
 
 interface Props {
-  workLoad?: CoreWorkloadType[];
-  onFilter: (data: CoreWorkloadType[]) => void
+  data: CoreInfo[];
+  onFilter: (data: CoreInfo[]) => void
 }
 
-const filterLoad = (parachainId: string, load: CoreWorkloadType[] | CoreWorkplanType[], workloadCoreSelected: number): CoreWorkloadType[] | CoreWorkplanType[] => {
+const filterLoad = (parachainId: string, data: CoreInfo[], workloadCoreSelected: number): CoreInfo[] => {
   if (parachainId) {
-    return load?.filter(({ info }) => info.task === parachainId);
+    return data.filter(({ workload }) => !!workload?.filter(({ info }) => info.task === parachainId).length);
   }
 
   if (workloadCoreSelected === -1) {
-    return load;
+    return data;
   }
 
-  return load?.filter(({ core }) => core === workloadCoreSelected);
+  return data.filter((one) => one.core === workloadCoreSelected);
 };
 
-function Filters ({ onFilter, workLoad }: Props): React.ReactElement<Props> {
+function Filters ({ data, onFilter }: Props): React.ReactElement<Props> {
   const [workloadCoreSelected, setWorkloadCoreSelected] = useState(-1);
   const [_parachainId, setParachainId] = useState<string>('');
 
   const coreArr: number[] = useMemo(() =>
-    workLoad?.length
-      ? Array.from({ length: workLoad?.length || 0 }, (_, index) => index)
+    data?.length
+      ? Array.from({ length: data.length || 0 }, (_, index) => index)
       : []
-  , [workLoad]);
+  , [data]);
 
   const { t } = useTranslation();
   const parachainId = useDebounce(_parachainId);
@@ -60,14 +61,14 @@ function Filters ({ onFilter, workLoad }: Props): React.ReactElement<Props> {
   );
 
   useEffect(() => {
-    if (!workLoad) {
+    if (!data) {
       return;
     }
 
-    const filtered = filterLoad(parachainId, workLoad, workloadCoreSelected);
+    const filtered = filterLoad(parachainId, data, workloadCoreSelected);
 
     onFilter(filtered);
-  }, [workLoad, workloadCoreSelected, parachainId, onFilter]);
+  }, [data, workloadCoreSelected, parachainId, onFilter]);
 
   const onDropDownChange = useCallback((v: number) => {
     setWorkloadCoreSelected(v);

diff --git a/packages/page-broker/src/Overview/Summary.tsx b/packages/page-broker/src/Overview/Summary.tsx
@@ -2,19 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { LinkOption } from '@polkadot/apps-config/endpoints/types';
-import type { CoreWorkloadType, statsType } from '../types.js';
+import type { statsType } from '../types.js';
 
 import React from 'react';
 
 import { CardSummary, styled, SummaryBox, UsageBar } from '@polkadot/react-components';
 import { defaultHighlight } from '@polkadot/react-components/styles';
-import { useApi, useBrokerStatus } from '@polkadot/react-hooks';
+import { useApi, useBrokerSalesInfo, useBrokerStatus } from '@polkadot/react-hooks';
+import { type CoreWorkload } from '@polkadot/react-hooks/types';
+import { formatBalance } from '@polkadot/util';
 
 import { useTranslation } from '../translate.js';
 import { getStats } from '../utils.js';
-import Cores from './Summary/Cores.js';
 import RegionLength from './Summary/RegionLength.js';
-import RenewalPrice from './Summary/RenewalPrice.js';
 import Timeslice from './Summary/Timeslice.js';
 import TimeslicePeriod from './Summary/TimeslicePeriod.js';
 
@@ -34,37 +34,47 @@ const StyledSection = styled.section`
 `;
 
 interface Props {
+  coreCount?: string
   apiEndpoint?: LinkOption | null;
-  workloadInfos?: CoreWorkloadType[] | CoreWorkloadType
+  workloadInfos?: CoreWorkload[]
 }
 
-function Summary ({ workloadInfos }: Props): React.ReactElement {
+function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
   const { t } = useTranslation();
   const { api, apiEndpoint } = useApi();
   const totalCores = useBrokerStatus('coreCount');
   const uiHighlight = apiEndpoint?.ui.color || defaultHighlight;
   const { idles, pools, tasks }: statsType = React.useMemo(() => getStats(totalCores, workloadInfos), [totalCores, workloadInfos]);
 
+  const salesInfo = useBrokerSalesInfo();
+
   return (
     <SummaryBox>
       <StyledSection style={{ display: 'flex' }}>
         {api.query.broker && (
           <>
             <StyledDiv>
-              <CardSummary label={t('current timeslice')}>
+              <CardSummary label={t('timeslice (ts)')}>
                 <Timeslice />
               </CardSummary>
-              <CardSummary label={t('core count')}>
-                <Cores />
-              </CardSummary>
-              <CardSummary label={t('timeslice period')}>
+              <CardSummary label={t('block per ts')}>
                 <TimeslicePeriod />
               </CardSummary>
-              <CardSummary label={t('region length')}>
+              <CardSummary label={t('region (ts)')}>
                 <RegionLength />
               </CardSummary>
               <CardSummary label={t('estimated bulk price')}>
-                <RenewalPrice />
+                <div className='ui--balance-value'>
+                  {formatBalance(salesInfo?.endPrice) || '-'}
+                </div>
+              </CardSummary>
+              <CardSummary label={t('total cores')}>
+                {coreCount}
+              </CardSummary>
+              <CardSummary label={t('cores sold/offered')}>
+                <div>
+                  {salesInfo?.coresSold} / {salesInfo?.coresOffered}
+                </div>
               </CardSummary>
             </StyledDiv>
           </>
@@ -73,8 +83,8 @@ function Summary ({ workloadInfos }: Props): React.ReactElement {
         <div style={{ marginLeft: '2rem' }}>
           <UsageBar
             data={[
-              { color: '#04AA6D', label: 'Pools', value: idles },
-              { color: '#FFFFFF', label: 'Idle', value: pools },
+              { color: '#FFFFFF', label: 'Idle', value: idles },
+              { color: '#04AA6D', label: 'Pools', value: pools },
               { color: uiHighlight, label: 'Tasks', value: tasks }]
             }
           ></UsageBar>

diff --git a/packages/page-broker/src/Overview/WorkInfoRow.tsx b/packages/page-broker/src/Overview/WorkInfoRow.tsx
@@ -39,8 +39,8 @@ function WorkInfoRow ({ data }: { data: InfoRow }): React.ReactElement {
   if (!data.task) {
     return (
       <>
-        <td style={{ width: 200 }}>no task assigned</td>
-        <td colSpan={5} />
+        <td style={{ width: 200 }}>no task</td>
+        <td colSpan={6} />
       </>);
   }
 
@@ -60,7 +60,7 @@ function WorkInfoRow ({ data }: { data: InfoRow }): React.ReactElement {
             header='type'
             value={'Reservation'}
           />
-          <td colSpan={3} />
+          <td colSpan={4} />
         </>
       );
     }
@@ -94,46 +94,53 @@ function WorkInfoRow ({ data }: { data: InfoRow }): React.ReactElement {
             header='type'
             value={'Legacy Lease'}
           />
+          <td colSpan={1} />
         </>);
     }
 
     default: {
-      return <>
-        <TableCol
-          header='Task'
-          value={data.task}
-        />
-        <TableCol
-          header='Blocks per timeslice'
-          value={data.maskBits}
-        />
-        <TableCol
-          header='Start'
-          hide='both'
-          value={data.start}
-        />
-        <TableCol
-          header='End'
-          hide='both'
-          value={data.end}
-        />
-        <TableCol
-          header='Last block'
-          value={data.endBlock}
-        />
-        <StyledTableCol hide='mobile'>
-          <h5 style={{ opacity: '0.6' }}>{'Owner'}</h5>
-          {data.owner
-            ? (
-              <AddressMini
-                isPadded={false}
-                key={data.owner}
-                value={data.owner}
-              />
-            )
+      return (
+        <>
+          <TableCol
+            header='Task'
+            value={data.task}
+          />
+          <TableCol
+            header='Blocks per timeslice'
+            value={data.maskBits}
+          />
+          <TableCol
+            header='Start'
+            hide='both'
+            value={data.start}
+          />
+          <TableCol
+            header='End'
+            hide='both'
+            value={data.end}
+          />
+          <TableCol
+            header='Last block'
+            value={data.endBlock}
+          />
+          <TableCol
+            header='type'
+            value={'Bulk Coretime'}
+          />
+          <StyledTableCol hide='mobile'>
+            <h5 style={{ opacity: '0.6' }}>{'Owner'}</h5>
+            {data.owner
+              ? (
+                <AddressMini
+                  isPadded={false}
+                  key={data.owner}
+                  value={data.owner}
+                />
+              )
 
-            : <p>&nbsp;</p>}
-        </StyledTableCol></>;
+              : <p>&nbsp;</p>}
+          </StyledTableCol>
+        </>);
     }
   }
 }