remove type script errros

PeerDB-io · Nov 10, 2023 · fa83754 · fa83754
1 parent 18ffac0
commit fa83754
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 50 deletions.
diff --git a/ui/app/mirrors/edit/[mirrorId]/aggregatedCountsByInterval.ts b/ui/app/mirrors/edit/[mirrorId]/aggregatedCountsByInterval.ts
@@ -1,9 +1,11 @@
+import moment from 'moment';
+
 type timestampType ={
-  timestamp: string;
+  timestamp: Date;
   count: number;
 }
 
-function aggregateCountsByInterval(timestamps: timestampType[], interval:string) {
+function aggregateCountsByInterval(timestamps: timestampType[], interval:string):[string, number][] {
     let timeUnit;
     switch (interval) {
       case 'hour':
@@ -27,9 +29,8 @@ function aggregateCountsByInterval(timestamps: timestampType[], interval:string)
 
     // Iterate through the timestamps and populate the aggregatedCounts object
     for (let { timestamp, count } of timestamps) {
-      timestamp = roundUpToNearest15Minutes(timestamp);
-      const date = new Date(timestamp);
-      const formattedTimestamp = formatTimestamp(date, timeUnit);
+      const date = roundUpToNearest15Minutes(timestamp);
+      const formattedTimestamp = moment(date).format(timeUnit);
 
       if (!aggregatedCounts[formattedTimestamp]) {
         aggregatedCounts[formattedTimestamp] = 0;
@@ -50,7 +51,7 @@ function aggregateCountsByInterval(timestamps: timestampType[], interval:string)
     }
 
     while (intervals.length < 30) {
-      intervals.push(formatTimestamp(currentTimestamp, timeUnit));
+      intervals.push(moment(currentTimestamp).format(timeUnit));
       if (interval === 'hour') {
         currentTimestamp.setHours(currentTimestamp.getHours() - 1);
       } else if (interval === '15min') {
@@ -63,7 +64,8 @@ function aggregateCountsByInterval(timestamps: timestampType[], interval:string)
     }
 
     // Populate the result array with intervals and counts
-    const resultArray = intervals.map((interval) => [interval, aggregatedCounts[interval] || 0]);
+    const resultArray:[string, number][] = intervals.map((interval) => [interval, aggregatedCounts[interval] || 0]);
+
     return resultArray;
   }
 
@@ -83,25 +85,4 @@ function aggregateCountsByInterval(timestamps: timestampType[], interval:string)
     return date;
   }
 
-  // Helper function to format a timestamp
-  function formatTimestamp(date:Date, format:string) {
-    const year = date.getFullYear();
-    const month = padZero(date.getMonth() + 1); // Months are zero-based
-    const day = padZero(date.getDate());
-    const hour = padZero(date.getHours());
-    const minutes = padZero(date.getMinutes());
-
-    return format
-      .replace('YYYY', year)
-      .replace('MM', month)
-      .replace('DD', day)
-      .replace('HH', hour)
-      .replace('mm', minutes);
-  }
-
-  // Helper function to pad single digits with leading zeros
-  function padZero(number:number) {
-    return number < 10 ? `0${number}` : `${number}`;
-  }
-
 export default aggregateCountsByInterval
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -243,7 +243,7 @@ export function CDCMirror({ cdc, syncStatusChild }: CDCMirrorStatusProps) {
         </Trigger>
       </Tabs.List>
       <Tabs.Content className='p-5 rounded-b-md' value='tab1'>
-        <CDCDetails config={cdc.config} />
+        {/* <CDCDetails config={cdc.config} /> */}
       </Tabs.Content>
       <Tabs.Content className='p-5 rounded-b-md' value='tab2'>
         {syncStatusChild}

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx b/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx
@@ -47,11 +47,11 @@ function CdcDetails({ syncs,mirrorConfig }:props) {
         </div>
         <div className="basis-1/4 md:basis-1/3">
           <div><Label variant="subheadline" colorName='lowContrast'>Source</Label></div>
-          <div><PeerButton peerName={mirrorConfig?.source?.name} peerType={dBTypeFromJSON(mirrorConfig?.source?.type)}/></div>
+          <div><PeerButton peerName={mirrorConfig?.source?.name ?? ''} peerType={dBTypeFromJSON(mirrorConfig?.source?.type)}/></div>
         </div>
         <div className="basis-1/4 md:basis-1/3">
           <div><Label variant="subheadline" colorName='lowContrast'>Destination</Label></div>
-          <div><PeerButton peerName={mirrorConfig?.destination?.name} peerType={dBTypeFromJSON(mirrorConfig?.destination?.type)}/></div>
+          <div><PeerButton peerName={mirrorConfig?.destination?.name ?? ''} peerType={dBTypeFromJSON(mirrorConfig?.destination?.type)}/></div>
         </div>
       </div>
       <div className="flex flex-row mt-10">
@@ -72,7 +72,7 @@ function CdcDetails({ syncs,mirrorConfig }:props) {
   );
 }
 
-function numberWithCommas(x:Number) {
+function numberWithCommas(x:Number):string {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdcGraph.tsx b/ui/app/mirrors/edit/[mirrorId]/cdcGraph.tsx
@@ -11,7 +11,7 @@ type SyncStatusRow = {
 
 import aggregateCountsByInterval from './aggregatedCountsByInterval'
 
-const aggregateTypeMap = {
+const aggregateTypeMap:{[key:string]:string} = {
   "15min":" 15 mins",
   "hour": "Hour",
   "day": "Day",
@@ -21,7 +21,8 @@ const aggregateTypeMap = {
   function CdcGraph({syncs}:{syncs:SyncStatusRow[]}) {
 
     let [aggregateType,setAggregateType] = useState('hour');
-    let [counts,setCounts] = useState([]);
+    const initialCount:[string,number][] = []
+    let [counts,setCounts] = useState(initialCount);
 
 
     let rows = syncs.map((sync) => ({
@@ -30,7 +31,7 @@ const aggregateTypeMap = {
     }))
 
     useEffect(()=>{
-      let counts = aggregateCountsByInterval(rows,aggregateType, undefined, new Date());
+      let counts = aggregateCountsByInterval(rows,aggregateType);
       counts = counts.slice(0,29)
       counts = counts.reverse();
       setCounts(counts)
@@ -44,33 +45,27 @@ const aggregateTypeMap = {
               })}
             </div>
             <div><Label variant="body">Sync history</Label></div>
-
             <div className='flex space-x-2 justify-left ml-2'>
                 {counts.map((count,i)=><GraphBar key={i} label={formatGraphLabel(new Date(count[0]),aggregateType)} count={count[1]}/>)}
             </div>
           </div>
   }
 
   type filterButtonProps = {  
-    aggregateType:String;
-    selectedAggregateType:String;
+    aggregateType:string;
+    selectedAggregateType:string;
     setAggregateType:Function;
   };
-  function FilterButton({aggregateType,selectedAggregateType,setAggregateType}:filterButtonProps){
+  function FilterButton({aggregateType,selectedAggregateType,setAggregateType}:filterButtonProps):React.ReactNode{
     return  <button 
               className={aggregateType === selectedAggregateType ? "bg-gray-200 px-1 mx-1 rounded-md":"px-1 mx-1"}
               onClick={()=>setAggregateType(aggregateType)}>
               {aggregateTypeMap[aggregateType]}
             </button>
   }
-
-  type GraphBarProps = {
-    count: number | undefined;
-    label: string
-  };
-
 
-  function formatGraphLabel(date:Date, aggregateType:String) {
+
+  function formatGraphLabel(date:Date, aggregateType:String):string {
     switch (aggregateType) {
       case "15min":
         return moment(date).format('MMM Do HH:mm');
@@ -80,9 +75,16 @@ const aggregateTypeMap = {
         return moment(date).format('MMM Do');
       case "month":
         return moment(date).format('MMM yy');
+      default:
+        return "Unknown aggregate type: "+ aggregateType ;
     }
   }
-
+
+  type GraphBarProps = {
+    count: number;
+    label: string
+  };
+
   function GraphBar({label,count}:GraphBarProps){
     let color = count && count >0 ? 'bg-green-500' : 'bg-gray-500';
     let classNames = `relative w-10 h-24 rounded  ${color}`;
@@ -91,11 +93,15 @@ const aggregateTypeMap = {
                 <div className="group-hover:opacity-100 transition-opacity bg-gray-800 px-1 text-sm text-gray-100 rounded-md absolute left-1/2 
         -translate-x-1/2 translate-y-full opacity-0 m-4 mx-auto w-28 z-10 text-center">
                   <div>{label}</div>
-                  <div>{count}</div>
+                  <div>{numberWithCommas(count)}</div>
                 </div>
               </div>
             </div>
   }
 
+  function numberWithCommas(x:number):string {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+
 
   export default CdcGraph;
diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatus.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatus.tsx
@@ -1,6 +1,5 @@
 import prisma from '@/app/utils/prisma';
 import { SyncStatusTable } from './syncStatusTable';
-import NewCdcDetails from './newCdcDetails';
 
 type SyncStatusProps = {
   flowJobName: string | undefined;

diff --git a/ui/app/mirrors/tables.tsx b/ui/app/mirrors/tables.tsx
@@ -10,7 +10,7 @@ import { useState } from 'react';
 
 export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
   const [mirrors, setMirrors] = useState(cdcFlows);
-
+  
   return (
     <>
       <Label variant='headline'>Change-data capture</Label>