Merge pull request #51 from ar-io/PE-6462-phase-5-report-assessments-…

…not-connected-staking-page PE-6462: phase 5: report assessments and not-connected staking page
ar-io · Jul 23, 2024 · 4b6da50 · 4b6da50
2 parents bf528d0 + e0e42bb
commit 4b6da50
Show file tree

Hide file tree

Showing 15 changed files with 262 additions and 135 deletions.
diff --git a/src/components/AssessmentDetailsPanel.tsx b/src/components/AssessmentDetailsPanel.tsx
@@ -1,4 +1,3 @@
-import { AoGatewayWithAddress } from '@ar.io/sdk';
 import { Dialog } from '@headlessui/react';
 import {
   CaretDoubleRightIcon,
@@ -11,6 +10,17 @@ import {
 import { ArNSAssessment, Assessment } from '@src/types';
 import { useState } from 'react';
 import Bubble from './Bubble';
+import Placeholder from './Placeholder';
+
+const extraTimingsLabels: Record<string, string> = {
+  dns: 'DNS',
+  download: 'Download',
+  firstByte: 'First Byte',
+  request: 'Request',
+  tcp: 'TCP',
+  tls: 'TLS',
+  wait: 'Wait',
+};
 
 const ArNSAssessmentPanel = ({
   arnsName,
@@ -48,7 +58,9 @@ const ArNSAssessmentPanel = ({
             <div>
               Status Code:{' '}
               <span className="text-mid">
-                {arnsAssessment.resolvedStatusCode}
+                {arnsAssessment.resolvedStatusCode == 404
+                  ? '404 (Unregistered ArNS Name)'
+                  : arnsAssessment.resolvedStatusCode}
               </span>
             </div>
           </div>
@@ -109,6 +121,11 @@ const ArNSAssessmentPanel = ({
             Expected: {arnsAssessment.expectedDataHash}
           </div>
         )}
+        {!arnsAssessment.pass && arnsAssessment.failureReason && (
+          <div className="pt-3 italic">
+            Failure Reason: {arnsAssessment.failureReason}
+          </div>
+        )}
       </div>
       {arnsAssessment.timings && (
         <div className="border-t border-grey-500">
@@ -119,9 +136,23 @@ const ArNSAssessmentPanel = ({
             </button>
           </div>
           {timingsPanelOpen && arnsAssessment.timings && (
-            <div className="flex gap-1 px-3 pb-3">
-              <TimerIcon className="size-4" />
-              <div>Total: {arnsAssessment.timings.total} ms</div>
+            <div className="flex flex-col gap-1 px-3 pb-3">
+              <div className="flex gap-1">
+                <TimerIcon className="size-4" />
+                <div className="text-high">
+                  Total: {arnsAssessment.timings.total} ms
+                </div>
+              </div>
+              {Object.entries(extraTimingsLabels)
+                .filter(([key]) => arnsAssessment.timings![key] !== undefined)
+                .map(([key, label]) => {
+                  return (
+                    <div className="pl-5 text-low" key={key}>
+                      {label}: {arnsAssessment.timings![key]}{' '}
+                      ms
+                    </div>
+                  );
+                })}
             </div>
           )}
         </div>
@@ -131,11 +162,11 @@ const ArNSAssessmentPanel = ({
 };
 
 const AssessmentDetailsPanel = ({
-  gateway,
+  observedHost,
   assessment,
   onClose,
 }: {
-  gateway: AoGatewayWithAddress;
+  observedHost?: string;
   assessment: Assessment;
   onClose: () => void;
 }) => {
@@ -162,7 +193,7 @@ const AssessmentDetailsPanel = ({
             <div className="text-xl text-high">Observation Details</div>
 
             <div className="flex rounded bg-grey-500 p-3">
-              <div>{gateway.settings.fqdn}</div>
+              <div>{observedHost ?? <Placeholder />}</div>
               <div className="flex grow justify-end">
                 <Bubble value={assessment.pass} additionalClasses="text-xs" />
               </div>
@@ -232,7 +263,7 @@ const AssessmentDetailsPanel = ({
                         key={arnsName}
                         arnsName={arnsName}
                         arnsAssessment={arnsAssessment}
-                        chosen={true}
+                        chosen={false}
                       />
                     </>
                   ),

diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -35,7 +35,7 @@ import ReportsIcon from './reports.svg?react';
 import SortAsc from './sort_asc.svg?react';
 import SortDesc from './sort_desc.svg?react';
 import StakingIcon from './staking.svg?react';
-import StakingSplash from './staking_splash.svg?react';
+import StakingLinesBGIcon from './staking_lines_bg.svg?react';
 import StartGatewayCubes from './start_gateway_cubes.svg?react';
 import StatsArrowIcon from './stats_arrow.svg?react';
 import StreakDownArrowIcon from './streak_down_arrow.svg?react';
@@ -83,7 +83,7 @@ export {
   SortAsc,
   SortDesc,
   StakingIcon,
-  StakingSplash,
+  StakingLinesBGIcon,
   StartGatewayCubes,
   StatsArrowIcon,
   StreakDownArrowIcon,

diff --git a/src/components/icons/staking_lines_bg.svg b/src/components/icons/staking_lines_bg.svg
diff --git a/src/components/icons/staking_splash.svg b/src/components/icons/staking_splash.svg
diff --git a/src/pages/Gateways/Banner.tsx b/src/pages/Gateways/Banner.tsx
@@ -61,7 +61,7 @@ const Banner = () => {
               </div>
 
               <div className="pt-[8px] text-sm text-low">
-                By starting your own gateway, you can earn rewards.
+                By running a gateway, you become a contributor to the ecosystem and can earn rewards.
               </div>
             </div>
           </button>

diff --git a/src/pages/Observe/index.tsx b/src/pages/Observe/index.tsx
@@ -32,7 +32,7 @@ const Report = () => {
       )}
       {selectedAssessment && gateway && (
         <AssessmentDetailsPanel
-          gateway={gateway}
+          observedHost={gateway.settings.fqdn}
           assessment={selectedAssessment}
           onClose={() => setSelectedAssessment(undefined)}
         />

diff --git a/src/pages/Report/GatewayAssessmentsTable.tsx b/src/pages/Report/GatewayAssessmentsTable.tsx
@@ -1,7 +1,9 @@
+import { AoGatewayWithAddress } from '@ar.io/sdk/web';
 import AddressCell from '@src/components/AddressCell';
+import AssessmentDetailsPanel from '@src/components/AssessmentDetailsPanel';
 import Bubble from '@src/components/Bubble';
 import TableView from '@src/components/TableView';
-import { ReportData } from '@src/types';
+import { Assessment, ReportData } from '@src/types';
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import { useEffect, useState } from 'react';
 
@@ -14,13 +16,23 @@ interface TableData {
   arnsResult: boolean;
 
   overallResult: boolean;
+  assessment: Assessment;
 }
 
 const columnHelper = createColumnHelper<TableData>();
 
-const ReportsTable = ({ reportData }: { reportData: ReportData }) => {
+const GatewayAssessmentsTable = ({
+  gateway,
+  reportData,
+}: {
+  gateway?: AoGatewayWithAddress;
+  reportData: ReportData;
+}) => {
   const [tableData, setTableData] = useState<Array<TableData>>([]);
 
+  const [observedHost, setObservedHost] = useState<string>(); 
+  const [selectedAssessment, setSelectedAssessment] = useState<Assessment>();
+
   useEffect(() => {
     const tableData: Array<TableData> = Object.entries(
       reportData.gatewayAssessments,
@@ -32,6 +44,7 @@ const ReportsTable = ({ reportData }: { reportData: ReportData }) => {
         ownershipResult: assessment.ownershipAssessment.pass,
         arnsResult: assessment.arnsAssessments.pass,
         overallResult: assessment.pass,
+        assessment: assessment,
       };
     });
     setTableData(tableData);
@@ -83,7 +96,7 @@ const ReportsTable = ({ reportData }: { reportData: ReportData }) => {
   ];
 
   return (
-    <div>
+    <div className='mb-[24px]'>
       <div className="flex w-full items-center rounded-t-xl border border-grey-600 py-[15px] pl-[24px] pr-[13px]">
         <div className="grow text-sm text-mid">Reports</div>
       </div>
@@ -93,9 +106,20 @@ const ReportsTable = ({ reportData }: { reportData: ReportData }) => {
         isLoading={false}
         noDataFoundText="No reports found."
         defaultSortingState={{ id: 'timestamp', desc: true }}
+        onRowClick={(row) => {
+          setObservedHost(row.observedHost);
+          setSelectedAssessment(row.assessment)
+        }}
       />
+      {selectedAssessment && gateway && (
+        <AssessmentDetailsPanel
+          observedHost={observedHost}
+          assessment={selectedAssessment}
+          onClose={() => setSelectedAssessment(undefined)}
+        />
+      )}
     </div>
   );
 };
 
-export default ReportsTable;
+export default GatewayAssessmentsTable;
diff --git a/src/pages/Report/index.tsx b/src/pages/Report/index.tsx
@@ -22,7 +22,7 @@ const Report = () => {
     <div className="flex h-screen max-w-full flex-col gap-[24px] overflow-auto pr-[24px] scrollbar">
       <ReportHeader gateway={gateway} reportData={reportData} />
       {isLoading || !reportData ? undefined : reportData ? (
-        <GatewayAssessmentsTable reportData={reportData} />
+        <GatewayAssessmentsTable gateway={gateway} reportData={reportData} />
       ) : (
         <div>Unable to find report with ID {reportId}.</div>
       )}

diff --git a/src/pages/Staking/ActiveStakes.tsx b/src/pages/Staking/ActiveStakes.tsx
@@ -113,7 +113,7 @@ const ActiveStakes = () => {
           <Button
             buttonType={ButtonType.SECONDARY}
             active={true}
-            title="Unstake"
+            title="Manage Stake"
             text=" "
             rightIcon={<GearIcon />}
             onClick={() => {