From 0bc0c54e40f289ef361f041a3e4e084b1a394069 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 29 Jun 2023 23:40:51 +0100 Subject: [PATCH] Adds card for showing response times --- package.json | 1 + src/components/Form/Heading.tsx | 2 +- src/components/Form/Row.tsx | 6 +++-- src/components/Results/Screenshot.tsx | 4 ++-- src/components/Results/ServerStatus.tsx | 29 +++++++++++++++++++++++++ src/components/Results/TxtRecords.tsx | 1 - src/components/misc/ProgressBar.tsx | 3 +++ src/pages/Results.tsx | 17 ++++++++++++--- yarn.lock | 5 +++++ 9 files changed, 59 insertions(+), 9 deletions(-) create mode 100644 src/components/Results/ServerStatus.tsx diff --git a/package.json b/package.json index da17f9d..e122666 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "got": "^13.0.0", "jest-styled-components": "^7.0.8", "node-fetch": "2.6.1", + "perf_hooks": "^0.0.1", "react": "^18.1.0", "react-dom": "^18.1.0", "react-router-dom": "^6.3.0", diff --git a/src/components/Form/Heading.tsx b/src/components/Form/Heading.tsx index 2df91aa..ddc3d35 100644 --- a/src/components/Form/Heading.tsx +++ b/src/components/Form/Heading.tsx @@ -19,7 +19,7 @@ const StyledHeading = styled.h1` align-items: center; font-size: ${TextSizes.medium}; img { // Some titles have an icon - width: 2rem; + width: 2.5rem; border-radius: 4px; } a { // If a title is a link, keep title styles diff --git a/src/components/Form/Row.tsx b/src/components/Form/Row.tsx index c5e5418..77e434b 100644 --- a/src/components/Form/Row.tsx +++ b/src/components/Form/Row.tsx @@ -64,14 +64,16 @@ const formatDate = (dateString: string): string => { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(dateString)); } - const formatValue = (value: any): string => { - const isValidDate = (date: any) => date instanceof Date && !isNaN(date as any as number); + const isValidDate = (date: any) => { + return date instanceof Date && !isNaN(date as any as number) && date >= new Date('1980-01-01'); + }; if (isValidDate(new Date(value))) return formatDate(value); if (typeof value === 'boolean') return value ? '✅' : '❌'; return value; }; + const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); } diff --git a/src/components/Results/Screenshot.tsx b/src/components/Results/Screenshot.tsx index 95ef65c..65bd7d9 100644 --- a/src/components/Results/Screenshot.tsx +++ b/src/components/Results/Screenshot.tsx @@ -14,11 +14,11 @@ img { } `; -const ScreenshotCard = (screenshot: string): JSX.Element => { +const ScreenshotCard = (screenshot: { data: string }): JSX.Element => { return ( Screenshot - Full page screenshot + Full page screenshot ); } diff --git a/src/components/Results/ServerStatus.tsx b/src/components/Results/ServerStatus.tsx new file mode 100644 index 0000000..e070540 --- /dev/null +++ b/src/components/Results/ServerStatus.tsx @@ -0,0 +1,29 @@ + +import styled from 'styled-components'; +import colors from 'styles/colors'; +import Card from 'components/Form/Card'; +import Heading from 'components/Form/Heading'; +import Row from 'components/Form/Row'; + +const Outer = styled(Card)` +span.val { + &.up { color: ${colors.success}; } + &.down { color: ${colors.danger}; } +} +`; + +const ServerStatusCard = (serverStatus: any): JSX.Element => { + return ( + + Server Status + + Is Up? + { serverStatus.isUp ? ✅ Online : ❌ Offline} + + + { serverStatus.responseTime && } + + ); +} + +export default ServerStatusCard; diff --git a/src/components/Results/TxtRecords.tsx b/src/components/Results/TxtRecords.tsx index a5e8686..6c23678 100644 --- a/src/components/Results/TxtRecords.tsx +++ b/src/components/Results/TxtRecords.tsx @@ -8,7 +8,6 @@ import Row from 'components/Form/Row'; const Outer = styled(Card)``; const TxtRecordCard = (records: any): JSX.Element => { - console.log(records); return ( TXT Config diff --git a/src/components/misc/ProgressBar.tsx b/src/components/misc/ProgressBar.tsx index 75258fe..f3988cf 100644 --- a/src/components/misc/ProgressBar.tsx +++ b/src/components/misc/ProgressBar.tsx @@ -141,6 +141,9 @@ const jobNames = [ 'lighthouse', 'location', 'shodan', + 'redirects', + 'txt-records', + 'status', // 'server-info', 'whois', ] as const; diff --git a/src/pages/Results.tsx b/src/pages/Results.tsx index 69af0df..858e120 100644 --- a/src/pages/Results.tsx +++ b/src/pages/Results.tsx @@ -23,7 +23,8 @@ import CookiesCard from 'components/Results/Cookies'; import RobotsTxtCard from 'components/Results/RobotsTxt'; import DnsRecordsCard from 'components/Results/DnsRecords'; import RedirectsCard from 'components/Results/Redirects'; -import TxtRecordResults from 'components/Results/TxtRecords'; +import TxtRecordCard from 'components/Results/TxtRecords'; +import ServerStatusCard from 'components/Results/ServerStatus'; import ProgressBar, { LoadingJob, LoadingState, initialJobs } from 'components/misc/ProgressBar'; import keys from 'utils/get-keys'; import { determineAddressType, AddressType } from 'utils/address-type-checker'; @@ -233,6 +234,14 @@ const Results = (): JSX.Element => { fetchRequest: () => fetch(`/follow-redirects?url=${address}`).then(res => res.json()), }); + // Get current status and response time of server + const [serverStatusResults] = useMotherHook({ + jobId: 'status', + updateLoadingJobs, + addressInfo: { address, addressType, expectedAddressTypes: urlTypeOnly }, + fetchRequest: () => fetch(`/server-status?url=${address}`).then(res => res.json()), + }); + /* Cancel remaining jobs after 10 second timeout */ useEffect(() => { const checkJobs = () => { @@ -266,18 +275,20 @@ const Results = (): JSX.Element => { { title: 'DNS Records', result: dnsResults, Component: DnsRecordsCard }, { title: 'Performance', result: lighthouseResults, Component: LighthouseCard }, { title: 'Cookies', result: cookieResults, Component: CookiesCard }, - { title: 'Screenshot', result: lighthouseResults?.fullPageScreenshot?.screenshot?.data, Component: ScreenshotCard }, + { title: 'Screenshot', result: lighthouseResults?.fullPageScreenshot?.screenshot, Component: ScreenshotCard }, { title: 'Technologies', result: technologyResults, Component: BuiltWithCard }, { title: 'Crawl Rules', result: robotsTxtResults, Component: RobotsTxtCard }, { title: 'Server Info', result: shoadnResults?.serverInfo, Component: ServerInfoCard }, { title: 'Redirects', result: redirectResults, Component: RedirectsCard }, - { title: 'TXT Records', result: txtRecordResults, Component: TxtRecordResults }, + { title: 'TXT Records', result: txtRecordResults, Component: TxtRecordCard }, + { title: 'Server Status', result: serverStatusResults, Component: ServerStatusCard }, ]; return (
+ Web Check Icon Web Check { address && diff --git a/yarn.lock b/yarn.lock index 9892291..bf878fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7291,6 +7291,11 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +perf_hooks@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/perf_hooks/-/perf_hooks-0.0.1.tgz#253e7e18b71fcc0390fd3afb2cd7cf1685df040c" + integrity sha512-qG/D9iA4KDme+KF4vCObJy6Bouu3BlQnmJ8jPydVPm32NJBD9ZK1ZNgXSYaZKHkVC1sKSqUiLgFvAZPUiIEnBw== + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"