Relay Chain - Coretime Overview UI Tab

packages/apps-config/src/endpoints/testingRelayPaseo.ts

@@ -351,7 +351,7 @@ export const testParasPaseoCommon: EndpointOption[] = [
     }
   },
   {
-    info: 'BridgeHub',
+    info: 'PaseoBridgeHub',
     isPeopleForIdentity: true,
     paraId: 1002,
     providers: {
@@ -367,7 +367,7 @@ export const testParasPaseoCommon: EndpointOption[] = [
     }
   },
   {
-    info: 'Coretime',
+    info: 'PaseoCoretime',
     isPeopleForIdentity: true,
     paraId: 1005,
     providers: {

packages/apps-routing/src/coretime.ts

@@ -0,0 +1,22 @@
+// Copyright 2017-2024 @polkadot/apps-routing authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Route, TFunction } from './types.js';
+
+import Component from '@polkadot/app-coretime';
+
+export default function create (t: TFunction): Route {
+  return {
+    Component,
+    display: {
+      needsApi: [
+        'query.coretimeAssignmentProvider.coreDescriptors'
+      ],
+      needsApiInstances: true
+    },
+    group: 'network',
+    icon: 'flask',
+    name: 'coretime',
+    text: t('nav.coretime', 'Coretime (Experimental)', { ns: 'apps-routing' })
+  };
+}

packages/apps-routing/src/index.ts

@@ -14,6 +14,7 @@ import calendar from './calendar.js';
 import claims from './claims.js';
 import collator from './collator.js';
 import contracts from './contracts.js';
+import coretime from './coretime.js';
 import council from './council.js';
 import democracy from './democracy.js';
 import explorer from './explorer.js';
@@ -62,7 +63,9 @@ export default function create (t: TFunction): Routes {
     // Legacy staking Pre v14 pallet version.
     stakingLegacy(t),
     collator(t),
+    // Coretime
     broker(t),
+    coretime(t),
     // governance v2
     referenda(t),
     membership(t),

packages/apps-routing/tsconfig.build.json

@@ -11,12 +11,13 @@
     { "path": "../page-alliance/tsconfig.build.json" },
     { "path": "../page-ambassador/tsconfig.build.json" },
     { "path": "../page-assets/tsconfig.build.json" },
+    { "path": "../page-broker/tsconfig.build.json" },
     { "path": "../page-bounties/tsconfig.build.json" },
     { "path": "../page-calendar/tsconfig.build.json" },
     { "path": "../page-claims/tsconfig.build.json" },
-    { "path": "../page-broker/tsconfig.build.json" },
     { "path": "../page-collator/tsconfig.build.json" },
     { "path": "../page-contracts/tsconfig.build.json" },
+    { "path": "../page-coretime/tsconfig.build.json" },
     { "path": "../page-council/tsconfig.build.json" },
     { "path": "../page-democracy/tsconfig.build.json" },
     { "path": "../page-explorer/tsconfig.build.json" },

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

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ApiPromise } from '@polkadot/api';
+import type { PalletBrokerConfigRecord } from '@polkadot/react-hooks/types';
 
 import React, { useRef } from 'react';
 
@@ -14,11 +15,12 @@ import Workload from './Workload.js';
 interface Props {
   api: ApiPromise;
   core: number;
+  config: PalletBrokerConfigRecord,
   workload?: CoreWorkloadType[],
   workplan?: CoreWorkplanType[],
 }
 
-function CoreTable ({ api, core, workload, workplan }: Props): React.ReactElement<Props> {
+function CoreTable ({ api, config, 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)?][] = [
@@ -39,6 +41,7 @@ function CoreTable ({ api, core, workload, workplan }: Props): React.ReactElemen
     >
       <Workload
         api={api}
+        config={config}
         core={core}
         key={core}
         workload={workload}

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

@@ -6,20 +6,26 @@ import type { CoreInfo } from '../types.js';
 
 import React from 'react';
 
+import { useBrokerConfig } from '@polkadot/react-hooks';
+
 import CoreTable from './CoreTable.js';
 
 interface Props {
   api: ApiPromise;
+  isApiReady: boolean;
   data: CoreInfo[];
 }
 
-function CoresTable ({ api, data }: Props): React.ReactElement<Props> {
+function CoresTable ({ api, data, isApiReady }: Props): React.ReactElement<Props> {
+  const config = useBrokerConfig(api, isApiReady);
+
   return (
     <>
-      {data?.map((coreData) => {
+      {config && data?.map((coreData) => {
         return (
           <CoreTable
             api={api}
+            config={config}
             core={coreData?.core}
             key={coreData?.core}
             workload={coreData?.workload}

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

@@ -4,16 +4,16 @@
 import type { LinkOption } from '@polkadot/apps-config/endpoints/types';
 import type { statsType } from '../types.js';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { CardSummary, styled, SummaryBox, UsageBar } from '@polkadot/react-components';
 import { defaultHighlight } from '@polkadot/react-components/styles';
-import { useApi, useBrokerSalesInfo, useBrokerStatus } from '@polkadot/react-hooks';
+import { useApi, useBrokerConfig, useBrokerSalesInfo, useBrokerStatus } from '@polkadot/react-hooks';
 import { type CoreWorkload } from '@polkadot/react-hooks/types';
-import { formatBalance } from '@polkadot/util';
+import { BN, BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../translate.js';
-import { getStats } from '../utils.js';
+import { estimateTime, getStats } from '../utils.js';
 import RegionLength from './Summary/RegionLength.js';
 import Timeslice from './Summary/Timeslice.js';
 import TimeslicePeriod from './Summary/TimeslicePeriod.js';
@@ -41,12 +41,15 @@ interface Props {
 
 function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
   const { t } = useTranslation();
-  const { api, apiEndpoint } = useApi();
-  const totalCores = useBrokerStatus('coreCount');
+  const { api, apiEndpoint, isApiReady } = useApi();
   const uiHighlight = apiEndpoint?.ui.color || defaultHighlight;
-  const { idles, pools, tasks }: statsType = React.useMemo(() => getStats(totalCores, workloadInfos), [totalCores, workloadInfos]);
+  const { idles, pools, tasks }: statsType = React.useMemo(() => getStats(coreCount, workloadInfos), [coreCount, workloadInfos]);
 
-  const salesInfo = useBrokerSalesInfo();
+  const saleInfo = useBrokerSalesInfo(api, isApiReady);
+  const config = useBrokerConfig(api, isApiReady);
+  const status = useBrokerStatus(api, isApiReady);
+  const currentRegionEnd = useMemo(() => saleInfo && config && saleInfo?.regionEnd - config?.regionLength, [saleInfo, config]);
+  const currentRegionStart = useMemo(() => currentRegionEnd && config && currentRegionEnd - config?.regionLength, [currentRegionEnd, config]);
 
   return (
     <SummaryBox>
@@ -63,24 +66,31 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
               <CardSummary label={t('region (ts)')}>
                 <RegionLength />
               </CardSummary>
-              <CardSummary label={t('estimated bulk price')}>
-                <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}
+                  {saleInfo?.coresSold} / {saleInfo?.coresOffered}
                 </div>
               </CardSummary>
+              <CardSummary
+                label={t('cycle progress')}
+                progress={{
+                  isBlurred: false,
+                  total: new BN(config?.regionLength || 0),
+                  value: (config?.regionLength && currentRegionEnd && status && new BN(config?.regionLength - (currentRegionEnd - status?.lastTimeslice))) || BN_ZERO,
+                  withTime: false
+                }}
+              />
             </StyledDiv>
           </>
 
         )}
-        <div style={{ marginLeft: '2rem' }}>
+        <div
+          className='media--1400'
+          style={{ marginLeft: '2rem' }}
+        >
           <UsageBar
             data={[
               { color: '#FFFFFF', label: 'Idle', value: idles },
@@ -91,6 +101,32 @@ function Summary ({ coreCount, workloadInfos }: Props): React.ReactElement {
 
         </div>
       </StyledSection>
+      <section>
+        {status && currentRegionStart && currentRegionEnd &&
+          (
+            <>
+              <CardSummary
+                className='media--1200'
+                label={t('cycle dates')}
+              >
+                <div>
+                  <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionStart, status?.lastTimeslice * 80)}</div>
+                  <div style={{ fontSize: '14px' }}>{estimateTime(currentRegionEnd, status?.lastTimeslice * 80)}</div>
+                </div>
+              </CardSummary>
+              <CardSummary
+                className='media--1200'
+                label={t('cycle ts')}
+              >
+                <div>
+                  <div style={{ fontSize: '14px' }}>{currentRegionStart}</div>
+                  <div style={{ fontSize: '14px' }}>{currentRegionEnd}</div>
+                </div>
+              </CardSummary>
+            </>
+          )
+        }
+      </section>
     </SummaryBox>
   );
 }

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

@@ -3,22 +3,22 @@
 
 import React from 'react';
 
-import { BrokerStatus } from '@polkadot/react-query';
+import { useApi, useBrokerStatus } from '@polkadot/react-hooks';
 
 interface Props {
   children?: React.ReactNode;
   className?: string;
 }
 
 function Timeslice ({ children, className }: Props): React.ReactElement<Props> | null {
+  const { api, isApiReady } = useApi();
+  const info = useBrokerStatus(api, isApiReady);
+
   return (
-    <BrokerStatus
-      className={className}
-      query='lastTimeslice'
-    >
+    <div className={className}>
+      {info?.lastTimeslice || '-'}
       {children}
-    </BrokerStatus>
-  );
+    </div>);
 }
 
 export default React.memo(Timeslice);