Fix: Error on Coretime on Polkadot due to no data coming from Coretime API (#10910)

* added placeholders for when no data is available

* linter warning

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

@@ -15,11 +15,11 @@ interface Props {
 function RegionLength ({ children, className }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const config = useCall<PalletBrokerConfigRecord>(api.query.broker?.configuration);
-  const length = config?.toJSON().regionLength;
+  const length = config?.toJSON()?.regionLength;
 
   return (
     <div className={className}>
-      {length?.toString()}
+      {length?.toString() || '-'}
       {children}
     </div>
   );

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

@@ -21,7 +21,7 @@ function RenewalPrice ({ currentPrice, renewalBump }: Props): React.ReactElement
 
   return (
     <div className='ui--balance-value'>
-      {formatBalance(renewalPrice)}
+      {formatBalance(renewalPrice) || '-'}
     </div>
 
   );

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

@@ -59,9 +59,13 @@ function Overview ({ api, apiEndpoint, className, isReady }: Props): React.React
   const reservationMap = useMemo(() => reservations ? createTaskMap(reservations) : [], [reservations]);
 
   const timesliceAsString = useMemo(() => {
-    const timeslice = status?.toHuman().lastCommittedTimeslice?.toString();
+    if (!!status && !!status?.toHuman()) {
+      const timeslice = status?.toHuman().lastCommittedTimeslice?.toString();
 
-    return timeslice === undefined ? '' : timeslice.toString().split(',').join('');
+      return timeslice === undefined ? '' : timeslice.toString().split(',').join('');
+    }
+
+    return '0';
   }, [status]);
 
   useEffect(() =>
@@ -78,16 +82,21 @@ function Overview ({ api, apiEndpoint, className, isReady }: Props): React.React
         apiEndpoint={apiEndpoint}
         workloadInfos={workLoad}
       ></Summary>
-      <Filters
-        onFilter={setFiltered}
-        workLoad={workLoad}
-      />
-      <CoresTable
-        api={api}
-        timeslice={Number(timesliceAsString)}
-        workloadInfos={filtered || workLoad}
-        workplanInfos={workPlan}
-      />
+      {!!workPlan?.length &&
+        (<>
+          <Filters
+            onFilter={setFiltered}
+            workLoad={workLoad}
+          />
+          <CoresTable
+            api={api}
+            timeslice={Number(timesliceAsString)}
+            workloadInfos={filtered || workLoad}
+            workplanInfos={workPlan}
+          />
+        </>)
+      }
+      {!workPlan?.length && <p style={{ marginLeft: '22px', marginTop: '3rem', opacity: 0.7 }}> No data currently available</p>}
     </div>
   );
 }

packages/react-hooks/src/useBrokerStatus.ts

@@ -19,7 +19,7 @@ function useBrokerStatusImpl (query: string): string | undefined {
             );
   }, [status]);
 
-  return state?.toJSON()[query]?.toString();
+  return state?.toJSON()?.[query]?.toString();
 }
 
 export const useBrokerStatus = createNamedHook('useBrokerStatus', useBrokerStatusImpl);

packages/react-hooks/src/useCurrentPrice.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 function extractCurrentPrice (saleInfo: PalletBrokerSaleInfoRecord) {
-  return saleInfo.toJSON().price?.toString();
+  return saleInfo.toJSON()?.price?.toString();
 }
 
 function useCurrentPriceImpl () {

packages/react-hooks/src/useRenewalBump.ts

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
 
 function extractRenewalBump (config: PalletBrokerConfigRecord) {
-  return config.toJSON().renewalBump?.toString();
+  return config.toJSON()?.renewalBump?.toString();
 }
 
 function useRenewalBumpImpl () {

packages/react-query/src/BrokerStatus.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 function BrokerStatus ({ children, className = '', query }: Props): React.ReactElement<Props> {
-  const info = useBrokerStatus(query);
+  const info = useBrokerStatus(query) || '-';
 
   return (
     <div className={className}>