merging parachainIds with renewalIds

packages/page-broker/src/Overview/Summary.tsx

@@ -39,7 +39,7 @@ interface Props {
   workloadInfos?: CoreWorkload[]
 }
 
-function Summary({ coreCount, workloadInfos }: Props): React.ReactElement {
+function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
   const { t } = useTranslation();
   const { api, apiEndpoint, isApiReady } = useApi();
   const uiHighlight = apiEndpoint?.ui.color || defaultHighlight;
@@ -79,7 +79,7 @@ function Summary({ coreCount, workloadInfos }: Props): React.ReactElement {
                 progress={{
                   isBlurred: false,
                   total: new BN(config?.regionLength || 0),
-                  value: config?.regionLength && currentRegionEnd && status && new BN(config?.regionLength - (currentRegionEnd - status?.lastTimeslice)) || BN_ZERO,
+                  value: (config?.regionLength && currentRegionEnd && status && new BN(config?.regionLength - (currentRegionEnd - status?.lastTimeslice))) || BN_ZERO,
                   withTime: false
                 }}
               />
@@ -114,7 +114,6 @@ function Summary({ coreCount, workloadInfos }: Props): React.ReactElement {
                   <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionEnd, status?.lastTimeslice * 80)}</div>
                 </div>
               </CardSummary>
-
               <CardSummary
                 className='media--1200'
                 label={t('cycle ts')}

packages/page-coretime/src/Overview/Summary.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2024 @polkadot/app-coretime authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ApiPromise } from '@polkadot/api';
 import type { BrokerStatus, CoreDescription, PalletBrokerConfigRecord, PalletBrokerSaleInfoRecord, RegionInfo } from '@polkadot/react-hooks/types';
 
 import React, { useMemo } from 'react';
@@ -11,27 +11,27 @@
 import { BN } from '@polkadot/util';
 
 import { useTranslation } from '../translate.js';
-import { CoreTimeConsts, estimateTime } from '../utils.js';
+import { FirstCycleStart, estimateTime } from '../utils.js';
 
 interface Props {
-  api: ApiPromise,
+  api: ApiPromise | null,
   coreDscriptors?: CoreDescription[];
   saleInfo: PalletBrokerSaleInfoRecord
   config: PalletBrokerConfigRecord,
-  region: RegionInfo,
+  region: RegionInfo[],
   status: BrokerStatus,
   parachainCount: number
 }
 
-function Summary ({ api, config, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
+function Summary({ api, config, parachainCount, saleInfo, status }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const currentRegionEnd = saleInfo.regionEnd - config.regionLength;
   const currentRegionStart = saleInfo.regionEnd - config.regionLength * 2;
   const chainName = useCall<string>(api?.rpc.system.chain)?.toString().toLowerCase();
 
   const cycleNumber = useMemo(() =>
-    chainName && currentRegionEnd && Math.floor((currentRegionEnd - CoreTimeConsts.FirstCycleStart[chainName]) / config.regionLength)
-  , [currentRegionEnd, chainName, config]);
+    chainName && currentRegionEnd && Math.floor((currentRegionEnd - FirstCycleStart[chainName]) / config.regionLength)
+    , [currentRegionEnd, chainName, config]);
 
   return (
     <SummaryBox>

packages/page-coretime/src/ParachainsTable.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2024 @polkadot/app-coretime authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 import type { FlagColor } from '@polkadot/react-components/types';
 import type { CoretimeInformation } from '@polkadot/react-hooks/types';
 
 import React, { useRef } from 'react';
@@ -20,7 +20,6 @@
 }
 
 interface Props {
-  ids: number[]
   coretimeInfo: CoretimeInformation
 }
 
@@ -30,21 +29,17 @@
   [CoreTimeTypes['Bulk Coretime']]: 'pink'
 };
 
-function ParachainsTable ({ coretimeInfo, ids }: Props): React.ReactElement<Props> {
+function ParachainsTable ({ coretimeInfo }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
     [t('parachains'), 'start'],
     [t('name'), 'start'],
-    // ['', 'media--1400'],
     [t('core number'), 'start'],
     [t('type'), 'start'],
     [t('last block'), 'start'],
     [t('end'), 'start'],
     [t('renewal'), 'start'],
     [t('renewal price'), 'start']
-    // [t('chain'), 'no-pad-left'],
-    // [t('in/out'), 'media--1700', 2],
-    // [t('leases'), 'media--1100']
   ]);
 
   return (
@@ -53,20 +48,18 @@
       header={headerRef.current}
       isSplit={false}
     >
-      {ids && coretimeInfo && ids.map((id: number) => {
-        const chain = coretimeInfo.chainInfo[id];
+      {coretimeInfo?.taskIds?.map((taskId: number) => {
+        const chain = coretimeInfo.chainInfo[taskId];
         const type = chain?.lease ? CoreTimeTypes.Lease : chain?.reservation ? CoreTimeTypes.Reservation : CoreTimeTypes['Bulk Coretime'];
         const targetTimeslice = chain?.lease?.until || coretimeInfo.salesInfo.regionEnd;
         const showEsimates = !!targetTimeslice && type !== CoreTimeTypes.Reservation;
-        // const renewBefore =
 
         return (
-          <tr key={id}>
-            <td>{id}</td>
+          <tr key={taskId}>
+            <td>{taskId}</td>
             <td>
               <ParaLink
-                id={new BN(id)}
-                key={id}
+                id={new BN(taskId)}
               />
             </td>
             <td>{chain?.workload?.core}</td>
@@ -78,8 +71,8 @@
             </td>
             <td>{showEsimates && formatNumber(targetTimeslice * 80).toString()}</td>
             <td>{showEsimates && estimateTime(targetTimeslice, coretimeInfo.status.lastCommittedTimeslice * 80)}</td>
-            <td>{chain.renewal ? 'renewed' : ''}</td>
-            <td>{chain.renewal ? formatBalance(chain.renewal?.price.toString()) : ''}</td>
+            <td>{chain?.renewal ? 'renewed' : ''}</td>
+            <td>{chain?.renewal ? formatBalance(chain.renewal?.price.toString()) : ''}</td>
           </tr>
         );
       }

packages/page-coretime/src/index.tsx

@@ -1,13 +1,12 @@
 // Copyright 2017-2024 @polkadot/app-coretime authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TabItem } from '@polkadot/react-components/types';
-import type { ParaId } from '@polkadot/types/interfaces';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 
 import { Tabs } from '@polkadot/react-components';
-import { useApi, useCall, useCoretimeInformation } from '@polkadot/react-hooks';
+import { useApi, useCoretimeInformation } from '@polkadot/react-hooks';
 
 import Summary from './Overview/Summary.js';
 import ParachainsTable from './ParachainsTable.js';
@@ -32,37 +31,27 @@
   const { t } = useTranslation();
   const { api, isApiReady } = useApi();
   const itemsRef = useRef(createItemsRef(t));
-  const [parachainIds, setParachainIds] = useState<number[]>([]);
   const coretimeInfo = useCoretimeInformation(api, isApiReady);
 
-  const paraIds = useCall<ParaId[]>(api.query.paras.parachains);
-
-  useEffect(() => {
-    if (paraIds) {
-      setParachainIds(paraIds.map((a) => a.toNumber()));
-    }
-  }, [paraIds]);
-
   return (
     <main className={className}>
       <Tabs
         basePath={basePath}
         items={itemsRef.current}
       />
-      {coretimeInfo?.salesInfo && (
+      {coretimeInfo && (
         <Summary
           api={isApiReady ? api : null}
           config={coretimeInfo?.config}
-          parachainCount={paraIds?.length || 0}
+          parachainCount={coretimeInfo.taskIds?.length || 0}
           region={coretimeInfo?.region}
           saleInfo={coretimeInfo?.salesInfo}
           status={coretimeInfo?.status}
         />
       )}
-      {!!parachainIds &&
+      {!!coretimeInfo &&
         <ParachainsTable
           coretimeInfo={coretimeInfo}
-          ids={parachainIds}
         />
       }
 

packages/page-coretime/src/utils.ts

@@ -1,18 +1,19 @@
 // Copyright 2017-2024 @polkadot/app-coretime authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 import { BN } from '@polkadot/util';
 
 export const CoreTimeConsts = {
   BlockTime: 6000,
   BlocksPerTimeslice: 80,
   DefaultRegion: 5040,
-  FirstCycleStart: {
-    kusama: 285768,
-    polkadot: 282525
-  }
 };
 
+export const FirstCycleStart: Record<string, number>  ={
+  kusama: 285768,
+  polkadot: 282525
+}
+
 function formatDate (date: Date) {
   const day = date.getDate();
   const month = date.toLocaleString('default', { month: 'short' });

packages/react-hooks/src/types.ts

@@ -7,7 +7,7 @@ import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { DeriveAccountFlags, DeriveAccountRegistration } from '@polkadot/api-derive/types';
 import type { DisplayedJudgement } from '@polkadot/react-components/types';
 import type { Option, u32, u128, Vec } from '@polkadot/types';
-import type { AccountId, BlockNumber, Call, Hash, ParaId, SessionIndex, ValidatorPrefs } from '@polkadot/types/interfaces';
+import type { AccountId, BlockNumber, Call, Hash, SessionIndex, ValidatorPrefs } from '@polkadot/types/interfaces';
 import type { PalletPreimageRequestStatus, PalletStakingRewardDestination, PalletStakingStakingLedger, PolkadotRuntimeParachainsAssignerCoretimeCoreDescriptor, SpStakingExposurePage, SpStakingPagedExposureMetadata } from '@polkadot/types/lookup';
 import type { ICompact, IExtrinsic, INumber } from '@polkadot/types/types';
 import type { KeyringJson$Meta } from '@polkadot/ui-keyring/types';
@@ -323,8 +323,8 @@ export interface PalletBrokerConfigRecord {
 }
 
 export interface ChainInformation {
-  id: ParaId,
-  workload: CoreWorkload[] | undefined,
+  id: number,
+  workload: CoreWorkload | undefined,
   renewal: PotentialRenewal | undefined,
   worklplan: CoreWorkplan[] | undefined,
   lease: LegacyLease | undefined,
@@ -336,6 +336,7 @@ export interface CoretimeInformation {
   status: BrokerStatus,
   region: RegionInfo[],
   config: PalletBrokerConfigRecord
+  taskIds: number[]
 }
 
 export interface BrokerStatus {

packages/react-hooks/src/useBrokerPotentialRenewals.ts

@@ -5,11 +5,11 @@ import type { ApiPromise } from '@polkadot/api';
 import type { Option, StorageKey, u32 } from '@polkadot/types';
 import type { PalletBrokerPotentialRenewalId, PalletBrokerPotentialRenewalRecord } from '@polkadot/types/lookup';
 import type { PotentialRenewal } from './types.js';
-import { BN_ZERO,  } from '@polkadot/util';
 
 import { useEffect, useState } from 'react';
 
 import { createNamedHook, useCall, useMapKeys } from '@polkadot/react-hooks';
+import { BN_ZERO } from '@polkadot/util';
 
 import { processHexMask } from './utils/dataProcessing.js';
 
@@ -19,8 +19,9 @@ function extractInfo (info: Option<PalletBrokerPotentialRenewalRecord>, item: Pa
   let task = '';
 
   if (!unwrapped) {
-    return
+    return;
   }
+
   const completion = unwrapped?.completion;
 
   if (completion?.isComplete) {
@@ -45,7 +46,6 @@ function extractInfo (info: Option<PalletBrokerPotentialRenewalRecord>, item: Pa
     task,
     when: item?.when.toNumber()
   };
-
 }
 
 const OPT_KEY = {
@@ -61,9 +61,11 @@ function useBrokerPotentialRenewalsImpl (api: ApiPromise, ready: boolean): Poten
 
   useEffect((): void => {
     if (!potentialRenewals) {
-      return
+      return;
     }
-    const renewals = potentialRenewals[0][0].map((info, index) => extractInfo(potentialRenewals[1][index], info))
+
+    const renewals = potentialRenewals[0][0].map((info, index) => extractInfo(potentialRenewals[1][index], info));
+
     setState(renewals.filter((renewal): renewal is PotentialRenewal => !!renewal));
   }, [potentialRenewals]);
 

packages/react-hooks/src/useCoretimeInformation.ts

@@ -15,6 +15,7 @@ function useCoretimeInformationImpl (api: ApiPromise, ready: boolean): CoretimeI
   const { apiCoretime, isApiReady } = useApi();
 
   const [workloadData, setWorkloadData] = useState<CoreWorkload[]>([]);
+  const [taskIds, setTaskIds] = useState<number[]>([]);
 
   /** coretime API calls */
   const status = useBrokerStatus(apiCoretime, isApiReady);
@@ -30,10 +31,24 @@ function useCoretimeInformationImpl (api: ApiPromise, ready: boolean): CoretimeI
   /** Other APIs */
   const paraIds = useCall<ParaId[]>(api.query.paras.parachains);
   const coreInfos = useCoreDescriptor(api, ready);
-
-  const potentialRenewalsCurrentRegion = useMemo(() => potentialRenewals?.filter((renewal: PotentialRenewal) => renewal.when === salesInfo?.regionEnd), [potentialRenewals, salesInfo]);
+  // when - The point in time that the renewable workload on core ends and a fresh renewal may begin.
+  const potentialRenewalsCurrentRegion = useMemo(() => config && salesInfo && potentialRenewals?.filter((renewal: PotentialRenewal) => renewal.when.toString() === salesInfo?.regionBegin.toString()), [potentialRenewals, salesInfo, config]);
   const [state, setState] = useState<CoretimeInformation | undefined>();
 
+  useEffect(() => {
+    if (paraIds?.length && potentialRenewals?.length && !taskIds.length) {
+      const simpleIds = paraIds.map((p) => p.toNumber());
+      const renewalIds = potentialRenewals?.map((r) => Number(r.task));
+      const numbers = [...new Set(simpleIds.concat(renewalIds))];
+
+      if (numbers?.length > simpleIds.length) {
+        setTaskIds(numbers.sort((a, b) => a - b));
+      } else {
+        setTaskIds(simpleIds);
+      }
+    }
+  }, [potentialRenewals, paraIds, taskIds]);
+
   useEffect(() => {
     if (workloads?.length) {
       setWorkloadData(workloads);
@@ -64,18 +79,21 @@ function useCoretimeInformationImpl (api: ApiPromise, ready: boolean): CoretimeI
 
     const chainInfo: Record<string, ChainInformation> = {};
 
-    paraIds?.forEach((id: ParaId) => {
-      const lease = leases?.find((lease) => lease.task === id.toString());
-      const reservation = reservations?.find((reservation) => reservation.task === id.toString());
-      const workload = workloadData?.find((one) => one.info.task === id.toString());
+    taskIds?.forEach((id) => {
+      const taskId = id.toString();
+      const lease = leases?.find((lease) => lease.task === taskId);
+      const reservation = reservations?.find((reservation) => reservation.task === taskId);
+      const workload = workloadData?.find((one) => one.info.task === taskId);
+      const renewal = potentialRenewalsCurrentRegion?.find((renewal) => renewal.task.toString() === taskId);
+      const worklplan = workplans?.filter((workplan) => workplan.core === workload?.core && workplan.info.task.toString() === taskId);
 
       chainInfo[id.toString()] = {
-        id: id.toNumber() as unknown as ParaId,
+        id,
         lease,
-        renewal: potentialRenewalsCurrentRegion?.find((renewal) => renewal.task.toString() === id.toString()),
+        renewal,
         reservation,
-        workload: workloadData,
-        worklplan: workplans?.filter((workplan) => workplan.core === workload?.core && workplan.info.task.toString() === id.toString())
+        workload,
+        worklplan
       };
     });
 
@@ -86,9 +104,10 @@ function useCoretimeInformationImpl (api: ApiPromise, ready: boolean): CoretimeI
         region,
         salesInfo,
         status,
+        taskIds
       });
     }
-  }, [paraIds, workloadData, potentialRenewalsCurrentRegion, salesInfo, leases, reservations, region, status, config, workplans]);
+  }, [taskIds, workloadData, potentialRenewalsCurrentRegion, salesInfo, leases, reservations, region, status, config, workplans]);
 
   return state;
 }

packages/react-hooks/src/utils/dataProcessing.ts

@@ -1,15 +1,15 @@
 // Copyright 2017-2024 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { PalletBrokerScheduleItem, PalletBrokerCoreMask } from '@polkadot/types/lookup';
+import type { PalletBrokerScheduleItem } from '@polkadot/types/lookup';
 
 import { BN } from '@polkadot/util';
 
 export function hexToBin (hex: string): string {
   return parseInt(hex, 16).toString(2);
 }
 
-export function processHexMask (mask: PalletBrokerScheduleItem['mask'] | PalletBrokerCoreMask | undefined): string[] {
+export function processHexMask (mask: PalletBrokerScheduleItem['mask'] | undefined): string[] {
   if (!mask) {
     return [];
   }