Relay Chain Coretime UI bugs (#11043)

* showing multiple core rows for parachains, changed end dates for non extended chains, correct renew status

* mobile table

* only showing renewals eligibility during the interlude

* removed extra tag

* styled component $property

packages/page-broker/src/utils.ts

@@ -1,18 +1,13 @@
 // Copyright 2017-2024 @polkadot/app-broker authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { CoreWorkload, LegacyLease, RegionInfo, Reservation } from '@polkadot/react-hooks/types';
 import type { CoreWorkloadType, CoreWorkplanType, InfoRow } from './types.js';
 
+import { CoreTimeConsts, type CoreWorkload, type LegacyLease, type RegionInfo, type Reservation } from '@polkadot/react-hooks/types';
 import { BN } from '@polkadot/util';
 
 import { CoreTimeTypes } from './types.js';
 
-export const CoreTimeConsts = {
-  BlockTime: 6000,
-  BlocksPerTimeslice: 80
-};
-
 function formatDate (date: Date) {
   const day = date.getDate();
   const month = date.toLocaleString('default', { month: 'short' });

packages/page-coretime/src/ParachainTableRow.tsx

@@ -0,0 +1,70 @@
+// Copyright 2017-2024 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ChainInformation, ChainWorkTaskInformation } from '@polkadot/react-hooks/types';
+
+import React from 'react';
+
+import { ExpandButton } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
+
+import Row from './Row.js';
+
+interface Props {
+  chain: ChainInformation
+  regionEnd: number
+  regionBegin: number
+  lastCommittedTimeslice: number
+}
+
+function ParachainTableRow ({ chain, lastCommittedTimeslice, regionBegin, regionEnd }: Props): React.ReactElement<Props> {
+  const [isExpanded, toggleIsExpanded] = useToggle(false);
+  const info = chain.workTaskInfo;
+  const firstRecord = chain.workTaskInfo[0];
+  const multiple = info.length > 1;
+  const expandedContent = info.slice(1);
+
+  if (!firstRecord) {
+    return <></>;
+  }
+
+  const renderRow = (record: ChainWorkTaskInformation, idx: number, highlight = false) =>
+    <>
+      <Row
+        chainRecord={record}
+        highlight={highlight}
+        id={chain.id}
+        lastCommittedTimeslice={lastCommittedTimeslice}
+        lease={chain.lease}
+        regionBegin={regionBegin}
+        regionEnd={regionEnd}
+      />
+      {idx === 0 && <td style={{ paddingRight: '2rem', textAlign: 'right', verticalAlign: 'top' }}>
+
+        {!!multiple &&
+                    <ExpandButton
+                      expanded={isExpanded}
+                      onClick={toggleIsExpanded}
+                    />
+        }
+      </td>}
+    </>;
+
+  return (
+    <>
+      <tr
+        className={`isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}
+        key={chain.id}
+      >
+        {renderRow(firstRecord, 0)}
+      </tr>
+      {isExpanded && expandedContent?.map((infoRow, idx) =>
+        <tr key={`${chain.id}${idx}`}>
+          {renderRow(infoRow, idx + 1, true)}
+        </tr>
+      )}
+    </>
+  );
+}
+
+export default React.memo(ParachainTableRow);

packages/page-coretime/src/ParachainsTable.tsx

@@ -1,39 +1,30 @@
 // 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';
 
-import { ParaLink, Table, Tag } from '@polkadot/react-components';
-import { BN, formatBalance, formatNumber } from '@polkadot/util';
+import { Table } from '@polkadot/react-components';
+import { type CoretimeInformation } from '@polkadot/react-hooks/types';
 
+import ParachainTableRow from './ParachainTableRow.js';
 import { useTranslation } from './translate.js';
-import { CoreTimeTypes } from './types.js';
-import { estimateTime, getOccupancyType } from './utils.js';
 
 interface Props {
   coretimeInfo: CoretimeInformation
 }
 
-const colours: Record<string, string> = {
-  [CoreTimeTypes.Reservation]: 'orange',
-  [CoreTimeTypes.Lease]: 'blue',
-  [CoreTimeTypes['Bulk Coretime']]: 'pink'
-};
-
 function ParachainsTable ({ coretimeInfo }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
     [t('parachains'), 'start'],
-    [t('name'), 'start'],
+    [t('name'), 'start media--800'],
     [t('core number'), 'start'],
     [t('type'), 'start'],
-    [t('last block'), 'start'],
-    [t('end'), 'start'],
-    [t('renewal'), 'start'],
-    [t('renewal price'), 'start']
+    [t('last block'), 'start media--800'],
+    [t('end'), 'start media--1000'],
+    [t('renewal'), 'start media--1200'],
+    [t('renewal price'), 'start media--1200'],
+    [t('other cores'), 'end']
   ]);
 
   return (
@@ -44,33 +35,17 @@ function ParachainsTable ({ coretimeInfo }: Props): React.ReactElement<Props> {
     >
       {coretimeInfo?.taskIds?.map((taskId: number) => {
         const chain = coretimeInfo.chainInfo[taskId];
-        const type = getOccupancyType(chain?.lease, chain?.reservation, !!chain.worklplan?.find((a) => a.info.isPool));
-        const targetTimeslice = chain?.lease?.until || coretimeInfo.salesInfo.regionEnd;
-        const showEsimates = !!targetTimeslice && type !== CoreTimeTypes.Reservation;
 
         return (
-          <tr key={taskId}>
-            <td>{taskId}</td>
-            <td>
-              <ParaLink
-                id={new BN(taskId)}
-              />
-            </td>
-            <td>{chain?.workload?.core}</td>
-            <td>
-              <Tag
-                color={colours[type] as FlagColor}
-                label={Object.values(CoreTimeTypes)[type]}
-              />
-            </td>
-            <td>{showEsimates && formatNumber(targetTimeslice * 80).toString()}</td>
-            <td>{showEsimates && estimateTime(targetTimeslice, coretimeInfo.status.lastCommittedTimeslice * 80)}</td>
-            <td>{chain?.renewal ? 'eligible' : type === CoreTimeTypes['Bulk Coretime'] ? 'renewed' : ''}</td>
-            <td>{chain?.renewal ? formatBalance(chain.renewal?.price.toString()) : ''}</td>
-          </tr>
+          <ParachainTableRow
+            chain={chain}
+            key={chain.id}
+            lastCommittedTimeslice={coretimeInfo.status.lastCommittedTimeslice}
+            regionBegin={coretimeInfo.salesInfo.regionBegin}
+            regionEnd={coretimeInfo.salesInfo.regionEnd}
+          />
         );
-      }
-      )}
+      })}
 
     </Table>
   );

packages/page-coretime/src/Row.tsx

@@ -0,0 +1,79 @@
+// Copyright 2017-2024 @polkadot/app-coretime authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { FlagColor } from '@polkadot/react-components/types';
+import type { ChainWorkTaskInformation, LegacyLease } from '@polkadot/react-hooks/types';
+
+import React from 'react';
+
+import { ParaLink, styled, Tag } from '@polkadot/react-components';
+import { ChainRenewalStatus } from '@polkadot/react-hooks/types';
+import { BN, formatBalance, formatNumber } from '@polkadot/util';
+
+import { CoreTimeTypes } from './types.js';
+import { estimateTime } from './utils.js';
+
+interface Props {
+  id: number
+  chainRecord: ChainWorkTaskInformation
+  regionEnd: number
+  regionBegin: number
+  lastCommittedTimeslice: number
+  lease: LegacyLease | undefined
+  highlight?: boolean
+}
+
+const colours: Record<string, string> = {
+  [CoreTimeTypes.Reservation]: 'orange',
+  [CoreTimeTypes.Lease]: 'blue',
+  [CoreTimeTypes['Bulk Coretime']]: 'pink'
+};
+
+const StyledCell = styled.td<{ $p: boolean }>`
+  && {
+    background-color: ${({ $p }) => ($p ? '#F9FAFB' : undefined)};
+  }
+`;
+
+function Row ({ chainRecord, highlight = false, id, lastCommittedTimeslice, lease, regionBegin, regionEnd }: Props): React.ReactElement<Props> {
+  const chainRegionEnd = (chainRecord.renewalStatus === ChainRenewalStatus.Renewed ? regionEnd : regionBegin);
+  const targetTimeslice = lease?.until || chainRegionEnd;
+  const showEstimates = !!targetTimeslice && Object.values(CoreTimeTypes)[chainRecord.type] !== CoreTimeTypes.Reservation;
+
+  return (
+    <React.Fragment key={`${id}`}>
+      <StyledCell $p={highlight}>{id}</StyledCell>
+      <StyledCell
+        $p={highlight}
+        className='media--800'
+      >{<ParaLink id={new BN(id)} />}</StyledCell>
+      <StyledCell $p={highlight}>{chainRecord?.workload?.core}</StyledCell>
+      <StyledCell $p={highlight}>
+        <Tag
+          color={colours[chainRecord.type] as FlagColor}
+          label={Object.values(CoreTimeTypes)[chainRecord.type]}
+        />
+      </StyledCell>
+      <StyledCell
+        $p={highlight}
+        className='media--800'
+      >{showEstimates && formatNumber(targetTimeslice * 80).toString()}</StyledCell>
+      <StyledCell
+        $p={highlight}
+        className='media--1000'
+      >{showEstimates && estimateTime(targetTimeslice, lastCommittedTimeslice * 80)}</StyledCell>
+      <StyledCell
+        $p={highlight}
+        className='media--1200'
+      >{chainRecord?.renewalStatus}</StyledCell>
+      <StyledCell
+        $p={highlight}
+        className='media--1200'
+      >{chainRecord?.renewal ? formatBalance(chainRecord.renewal?.price.toString()) : ''}</StyledCell>
+      {highlight && <StyledCell $p={highlight} />}
+    </React.Fragment>
+
+  );
+}
+
+export default React.memo(Row);

packages/page-coretime/src/utils.ts

@@ -1,17 +1,11 @@
 // Copyright 2017-2024 @polkadot/app-coretime authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { LegacyLease, Reservation } from '@polkadot/react-hooks/types';
-
+import { CoreTimeConsts, type LegacyLease, type Reservation } from '@polkadot/react-hooks/types';
 import { BN } from '@polkadot/util';
 
 import { CoreTimeTypes } from './types.js';
 
-export const CoreTimeConsts = {
-  BlockTime: 6000,
-  BlocksPerTimeslice: 80
-};
-
 export const FirstCycleStart: Record<string, number> = {
   kusama: 285768,
   polkadot: 282525

packages/react-hooks/src/types.ts

@@ -322,14 +322,21 @@ export interface PalletBrokerConfigRecord {
   contributionTimeout: number;
 }
 
+export interface ChainWorkTaskInformation {
+  renewal: PotentialRenewal | undefined
+  renewalStatus: string
+  type: CoreTimeTypes
+  workload: CoreWorkload | undefined
+  workplan: CoreWorkplan[] | undefined
+}
+
 export interface ChainInformation {
   id: number,
-  workload: CoreWorkload | undefined,
-  renewal: PotentialRenewal | undefined,
-  worklplan: CoreWorkplan[] | undefined,
   lease: LegacyLease | undefined,
   reservation: Reservation| undefined
+  workTaskInfo: ChainWorkTaskInformation[]
 }
+
 export interface CoretimeInformation {
   chainInfo: Record<number, ChainInformation>,
   salesInfo: PalletBrokerSaleInfoRecord,
@@ -356,3 +363,26 @@ export interface PotentialRenewal {
   maskBits: number,
   task: string
 }
+
+export enum CoreTimeTypes {
+  'Reservation',
+  'Lease',
+  'Bulk Coretime',
+  'On Demand'
+}
+
+export const ChainRenewalStatus = {
+  Eligible: 'eligible',
+  None: '-',
+  Renewed: 'renewed'
+};
+
+// RelayChain
+export const CoreTimeConsts = {
+  BlockTime: 6000,
+  BlocksPerTimeslice: 80
+};
+
+export const CoreTimeChainConsts = {
+  BlocksPerTimeslice: 40
+};