feat: update raw test output design

.gitignore

@@ -6,6 +6,7 @@ LOCAL_APPDATA_FONTCONFIG_CACHE/
 node_modules/
 config/local*
 data/asn-domain.json
+data/ipdb.mmdb
 test/screenshots
 yarn.lock
 .eslintcache

bin/fetch-data.js

@@ -7,8 +7,8 @@ const fs = require('fs');
 const path = require('path');
 const { pipeline } = require('node:stream/promises');
 
-const ASN_COLUMN_NUM = 5;
-const DOMAIN_COLUMN_NUM = 7;
+const ASN_COLUMN_NUM = 2;
+const DOMAIN_COLUMN_NUM = 4;
 
 async function fetchAndSaveAsnDomainMap (url) {
 	let asnDomainMap = {};
@@ -20,7 +20,7 @@ async function fetchAndSaveAsnDomainMap (url) {
 	});
 
 	let pipelinePromise = pipeline(
-		got.stream(url),
+		got.stream(`${url}.csv.gz`),
 		zlib.createGunzip(),
 		parser,
 	);
@@ -50,11 +50,24 @@ async function fetchAndSaveAsnDomainMap (url) {
 	console.log(`ASN-domain map saved to: ${outputPath}`);
 }
 
+async function downloadMmdb (url) {
+	let outputPath = path.resolve(__dirname, '../data/ipdb.mmdb');
+	fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+
+	await pipeline(
+		got.stream(`${url}.mmdb`),
+		fs.createWriteStream(outputPath),
+	);
+
+	console.log(`MMDB file saved to: ${outputPath}`);
+}
+
 async function main () {
-	let url = `https://download.jsdelivr.com/IPINFO_LITE.csv.gz`;
+	let url = `https://download.jsdelivr.com/IPINFO_LITE_ASN`;
 
 	try {
 		await fetchAndSaveAsnDomainMap(url);
+		await downloadMmdb(url);
 	} catch (err) {
 		console.error('Failed to fetch or process data:', err);
 		process.exit(1);

package.json

@@ -36,6 +36,7 @@
 		"koa-static": "^5.0.0",
 		"less": "^4.5.1",
 		"lodash": "^4.17.21",
+		"maxmind": "^5.0.5",
 		"nuxt": "4.2.2",
 		"opentype.js": "^1.3.4",
 		"pinia": "^3.0.4",

src/assets/js/utils/http.js

@@ -66,6 +66,10 @@ module.exports.getDomainFromASN = (asn) => {
 	return _.makeHTTPRequest({ url: `/asn-to-domain/${asn}` });
 };
 
+module.exports.getNetworkFromIP = (ip) => {
+	return _.makeHTTPRequest({ url: `/ip-to-network/${encodeURIComponent(ip)}` });
+};
+
 module.exports.getNetworkDomainMap = () => {
 	return _.makeHTTPRequest({ url: `/network-to-domain` });
 };

src/assets/less/components/results-raw-output.less

@@ -20,6 +20,11 @@
 			flex-direction: column;
 			width: 100%;
 			padding: 24px 0 24px 18px;
+			gap: 8px;
+
+			@media (min-width: @screen-sm-min) {
+				gap: 24px;
+			}
 
 			&_top-wrapper {
 				display: flex;
@@ -36,87 +41,134 @@
 						left: 24px;
 						width: calc(100% - 24px - 24px);
 						height: 1px;
-						background: #dcdcdc;
+						background: #e7e7ee;
 					}
 				}
 			}
 
 			&_inner-wrapper {
 				width: 100%;
-				padding: 0 24px;
+				padding: 0 12px;
 				background: #fbfbfb;
+
+				@media (min-width: @screen-sm-min) {
+					padding: 0 24px;
+				}
 			}
 
 			&_header {
 				position: relative;
-				display: flex;
-				align-items: center;
-				flex-flow: row wrap;
-				justify-content: flex-start;
-				gap: 8px 16px;
 				width: 100%;
-				padding-right: 24px;
-				margin-bottom: 8px;
-
-				@media (min-width: @screen-sm-min) {
-					margin-bottom: 24px;
-				}
+				padding-right: 12px;
+				color: #17233a;
 
 				&_info {
+					position: relative;
 					display: flex;
 					align-items: center;
 					flex-flow: row wrap;
-					font-weight: 600;
-					font-size: 16px;
-					line-height: 24px;
+					gap: 12px;
+					font-size: 14px;
 					color: #17233a;
-
-					> span {
-						&:nth-child(1) {
-							display: flex;
-							align-items: center;
-							column-gap: 8px;
+					margin-bottom: 12px;
+					line-height: 26px;
+
+					&_target {
+						display: flex;
+						flex-wrap: wrap;
+						align-items: center;
+						font-weight: 600;
+						padding-right: 6px;
+						overflow-wrap: anywhere;
+						word-break: normal;
+						max-width: calc(100% - 24px);
+
+						& > img {
+							margin-right: 6px;
 						}
 					}
 
 					&_network-link {
 						color: #17233a;
 						cursor: pointer;
+						line-height: 26px;
 
 						&:hover, &:focus, &:active {
 							color: #17d4a7;
 							text-decoration: none;
 						}
 					}
+
+					> .gp-tls-details {
+						font-size: 12px;
+						font-weight: 600;
+						padding: 0 12px;
+						border: 1px solid #e7e7ee;
+						border-radius: 8px;
+						height: 26px;
+					}
 				}
 
-				&_time {
+				&_address {
 					display: flex;
+					gap: 8px;
 					align-items: center;
-					font-size: 16px;
-					line-height: 20px;
-					color: #17233a;
+					font-size: 12px;
 
 					&_value {
-						font-size: 14px;
-						background: #f3f5f7;
+						font-weight: 600;
+						padding: 0 12px;
+						background: #fff;
 						border: 1px solid #e7e7ee;
 						border-radius: 8px;
-						padding: 4px;
-						margin-left: 4px;
-						white-space: nowrap;
+						height: 26px;
 					}
+				}
 
-					&.main-value {
-						.c-gp-results-raw-output_list_item_header_time_dot-icon {
-							display: none;
+				&_metrics {
+					display: flex;
+					flex-wrap: wrap;
+					gap: 4px;
+					align-items: center;
+					background: #f3f5f6;
+					border-radius: 12px;
+					padding: 4px;
 
-							@media (min-width: @screen-sm-min) {
-								display: inline-flex;
-								margin-right: 16px;
-							}
+					&:not(:has(> *)) {
+						display: none;
+
+						&.in-progress {
+							display: flex;
+							background: linear-gradient(135deg, #f3f6f6 25%, #f0f0f0 50%, #f3f6f6 75%);
+							background-size: 200% 100%;
+							animation: bg-loading 2s infinite linear;
+							min-height: 36px;
+							border-radius: 8px;
 						}
 					}
+
+					&_logo {
+						width: 28px;
+						height: 28px;
+						padding: 3px;
+						border-radius: 8px;
+						background: #fff;
+						border: 1px solid #e7e7ee;
+						object-fit: contain;
+					}
+				}
+
+				&_time {
+					display: inline-flex;
+					align-items: center;
+					font-size: 12px;
+					padding: 0 12px;
+					gap: 8px;
+					height: 28px;
+					border: 1px solid #e7e7ee;
+					border-radius: 8px;
+					background: #fff;
+					line-height: 20px;
 				}
 
 				&_dropdown-icon {
@@ -149,11 +201,10 @@
 
 			&_status-line {
 				position: absolute;
-				top: 0;
-				left: -18px;
+				top: 3px;
+				left: -10px;
 				width: 2px;
-				height: 28px;
-				border-radius: 8px;
+				height: 20px;
 				background: #c0c0c0;
 			}
 		}
@@ -215,7 +266,7 @@
 			align-items: center;
 			justify-content: center;
 			cursor: pointer;
-			font-size: 20px;
+			font-size: 14px;
 			width: 28px;
 			height: 28px;
 			background-color: #f3f5f6;
@@ -243,3 +294,13 @@
 		}
 	}
 }
+
+@keyframes bg-loading {
+	0% {
+		background-position: -200% 0;
+	}
+
+	100% {
+		background-position: 200% 0;
+	}
+}