Update TS types to match Go code

nfx · Jul 9, 2023 · 50c3f83 · 50c3f83
1 parent d7fc824
commit 50c3f83
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 51 deletions.
diff --git a/ui/src/Blacklist.tsx b/ui/src/Blacklist.tsx
@@ -5,16 +5,16 @@ import { Facet, QueryFacets } from "./components/facets/QueryFacet";
 import { Countries } from "./countries";
 import { http, useTitle } from "./util";
 
-type BlacklistEntry = {
+type Blacklisted = {
   Proxy: string;
+  Country: string;
+  Provider: string;
+  ASN: number;
   Failure: string;
   Sources: string[];
-  Provider: string;
-  ASN: string;
-  Country: string;
 };
 
-function BlacklistItem({ Proxy, Failure, Sources, Provider, ASN, Country }: BlacklistEntry) {
+function BlacklistItem({ Proxy, Failure, Sources, Provider, ASN, Country }: Blacklisted) {
   const removeProxy = () => {
     http.delete(`/blacklist/${Proxy.replace("//", "")}`);
     return false;
@@ -48,7 +48,7 @@ function BlacklistItem({ Proxy, Failure, Sources, Provider, ASN, Country }: Blac
 
 export default function Blacklist() {
   useTitle("Blacklist");
-  const [result, setResult] = useState<{ Facets?: Facet[]; Records?: BlacklistEntry[] }>();
+  const [result, setResult] = useState<{ Facets?: Facet[]; Records?: Blacklisted[] }>();
   return (
     <div className="card blacklist table-responsive">
       <LiveFilter endpoint="/blacklist" onUpdate={setResult} minDelay={10000} />

diff --git a/ui/src/Dashboard.tsx b/ui/src/Dashboard.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useState } from "react";
-import { Card as CardEntry } from "./components/Card";
+import { Card as Card } from "./components/Card";
 import { IconHeader } from "./components/IconHeader";
 import { TimeDiff } from "./components/TimeDiff";
 import { http, tinyNum, useInterval, useTitle } from "./util";
@@ -9,28 +9,36 @@ const pipeline = ["Scheduled", "New", "Probing"] as const;
 const stats = ["Found", "Timeouts", "Blacklisted", "Ignored"] as const;
 const cols = [...pipeline, ...stats];
 
-type ProbeEntry = {
+type Source  = {
   Name: string;
+  Homepage: string;
+  UrlPrefix: string;
+  Frequency: string;
   State: string;
-  Progress: number;
   Failure: string;
-  EstFinish: number;
-  NextRefresh: number;
-  UrlPrefix: string;
-  Homepage: string;
+  Progress: number;
+  Dirty: number;
+  Contribution: number;
+  Exclusive: number;
   Scheduled: number;
   New: number;
   Probing: number;
   Found: number;
   Timeouts: number;
   Blacklisted: number;
   Ignored: number;
-  Exclusive: number;
-  Dirty: number;
-  Contribution: number;
+  Updated: string;
+  EstFinish: string;
+  NextRefresh: string;
 };
 
-type Summary = Partial<ProbeEntry>;
+type Summary = Partial<Source>;
+
+type Card = {
+  Name: string;
+  Value: number;
+  Increment?: number;
+};
 
 function successRate(v: Summary) {
   if (!v["Found"]) {
@@ -45,12 +53,12 @@ function successRate(v: Summary) {
   );
 }
 
-function SourceOverview({ sources }: { sources: ProbeEntry[] }) {
+function SourceOverview({ sources }: { sources: Source[] }) {
   const summary: Summary = {};
   sources.forEach(probe =>
     cols.forEach(col => {
       const oldVal = summary[col];
-      const val = probe[col as keyof ProbeEntry] as number;
+      const val = probe[col as keyof Source] as number;
       summary[col] = val + (oldVal ? oldVal : 0);
     })
   );
@@ -115,7 +123,7 @@ function Cols(props: Summary) {
   );
 }
 
-function Probe(props: ProbeEntry) {
+function Probe(props: Source) {
   const { Name, State, Progress, Failure, EstFinish, NextRefresh, UrlPrefix, Homepage } = props;
   const style: Record<string, string | number> = {};
   let rowClass = "";
@@ -148,15 +156,9 @@ function Probe(props: ProbeEntry) {
   );
 }
 
-type CardEntry = {
-  Name: string;
-  Value: string;
-  Increment?: number;
-};
-
 export default function Dashboard() {
   useTitle("Overview");
-  const [dashboard, setDashboard] = useState<{ Cards: CardEntry[]; Refresh: ProbeEntry[] }>();
+  const [dashboard, setDashboard] = useState<{ Cards: Card[]; Refresh: Source[] }>();
   const [delay, setDelay] = useState<number | undefined>(1000);
   useInterval(() => {
     http
@@ -173,7 +175,7 @@ export default function Dashboard() {
     <div>
       <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3">
         {dashboard.Cards.map(card => (
-          <CardEntry key={card.Name} label={card.Name} value={card.Value} increment={card.Increment} />
+          <Card key={card.Name} label={card.Name} value={card.Value} increment={card.Increment} />
         ))}
       </div>
       <SourceOverview sources={dashboard.Refresh} />

diff --git a/ui/src/History.tsx b/ui/src/History.tsx
@@ -14,22 +14,22 @@ function convertSize(bytes: number) {
   return `${(bytes / 1024 / 1024).toFixed()}mb`;
 }
 
-type HistoryEntry = {
-  ID: string;
+type FilteredRequest = {
+  ID: number;
   Serial: number;
   Attempt: number;
   Ts: string;
   Method: string;
   URL: string;
-  Status: string;
   StatusCode: number;
+  Status: string;
   Proxy: string;
   Appeared: number;
   Size: number;
   Took: number;
 };
 
-function Request(history: HistoryEntry) {
+function Request(history: FilteredRequest) {
   const pos = history.URL.indexOf("/", 9);
   const path = history.URL.substring(pos);
 
@@ -75,7 +75,7 @@ function Request(history: HistoryEntry) {
 
 export default function History() {
   useTitle("History");
-  const [result, setResult] = useState<{ facets: Facet[]; Records?: HistoryEntry[] }>();
+  const [result, setResult] = useState<{ facets: Facet[]; Records?: FilteredRequest[] }>();
   return (
     <div id="history-table" className="card history table-responsive">
       <LiveFilter endpoint="/history" onUpdate={setResult} minDelay={2000} />

diff --git a/ui/src/Proxies.tsx b/ui/src/Proxies.tsx
@@ -8,7 +8,7 @@ import { http, useTitle } from "./util";
 
 export default function Proxies() {
   useTitle("Proxies");
-  const [result, setResult] = useState<{ Facets: Facet[]; Records?: ProxyEntry[] }>();
+  const [result, setResult] = useState<{ Facets: Facet[]; Records?: ApiEntry[] }>();
   return (
     <div>
       <LiveFilter endpoint="/pool" onUpdate={setResult} minDelay={2000} />
@@ -45,24 +45,26 @@ function timeTook(duration: number) {
   return `${(ms / 1000).toFixed(2)}s`;
 }
 
-export type ProxyEntry = {
+export type ApiEntry = {
   Proxy: string;
   FirstSeen: number;
   LastSeen: number;
-  Timeouts: number;
+  ReanimateAfter: string;
   Ok: boolean;
-  ReanimateAfter: number;
   Speed: number;
-  Country: string;
-  Provider: string;
-  ASN: string;
+  Seen: number;
+  Timeouts: number;
   Offered: number;
+  Reanimated: number;
   Succeed: number;
-  HourSucceed: number[];
   HourOffered: number[];
+  HourSucceed: number[];
+  Country: string;
+  Provider: string;
+  ASN: number;
 };
 
-function Entry(props: ProxyEntry) {
+function Entry(props: ApiEntry) {
   const proxy = props.Proxy;
   const { FirstSeen, LastSeen, Timeouts, Ok, ReanimateAfter, Speed, Country, Provider, ASN } = props;
   const removeProxy = () => {

diff --git a/ui/src/Reverify.tsx b/ui/src/Reverify.tsx
@@ -5,16 +5,18 @@ import { Facet, QueryFacets } from "./components/facets/QueryFacet";
 import { Countries } from "./countries";
 import { http, useTitle } from "./util";
 
-type ReverifyEntry = {
+type InReverify = {
   Proxy: string;
-  Sources: string[];
-  Provider: string;
-  ASN: string;
-  Country: string;
   Attempt: number;
+  After: string;
+  Country: string;
+  Provider: string;
+  ASN: number;
+  Failure: string;
+  Sources: string[];
 };
 
-function ReverifyItem({ Proxy, Sources, Provider, ASN, Country, Attempt }: ReverifyEntry) {
+function ReverifyItem({ Proxy, Sources, Provider, ASN, Country, Attempt }: InReverify) {
   const removeProxy = () => {
     http.delete(`/blacklist/${Proxy.replace("//", "")}`);
     return false;
@@ -48,7 +50,7 @@ function ReverifyItem({ Proxy, Sources, Provider, ASN, Country, Attempt }: Rever
 
 export default function Reverify() {
   useTitle("Reverify");
-  const [result, setResult] = useState<{ Facets: Facet[]; Records?: ReverifyEntry[] }>();
+  const [result, setResult] = useState<{ Facets: Facet[]; Records?: InReverify[] }>();
   return (
     <div className="card blacklist table-responsive">
       <LiveFilter endpoint="/reverify" onUpdate={setResult} minDelay={10000} />

diff --git a/ui/src/components/Card.tsx b/ui/src/components/Card.tsx
@@ -1,6 +1,6 @@
 export type CardProps = {
   label: string;
-  value: string;
+  value: number;
   increment?: number;
 };
 

diff --git a/ui/src/components/TimeDiff.tsx b/ui/src/components/TimeDiff.tsx
@@ -1,5 +1,5 @@
 type TimeDiffProps = {
-  ts: number;
+  ts: string | number | Date;
   title: string;
 };