Skip to content

feat: update raw test output design #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PavelKopecky wants to merge 22 commits into
base: master
Choose a base branch
from
Open

feat: update raw test output design #126

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
5c29279
feat: update raw test output design
PavelKopecky Apr 1, 2026
01924e4
fix: network logo attribution render condition and rel
PavelKopecky Apr 1, 2026
cdc798a
feat: show cdn names on hover
PavelKopecky Apr 1, 2026
3468b09
refactor: destructure getNetworkByIp return value
PavelKopecky Apr 1, 2026
60ac0d7
fix: network data lookup
PavelKopecky Apr 2, 2026
f4da52b
Merge branch 'master' into gh-79
PavelKopecky Apr 2, 2026
f6edeb5
Merge branch 'master' into gh-79
MartinKolarik Apr 3, 2026
9b71fef
Update package-lock.json
MartinKolarik Apr 3, 2026
26648bc
refactor: rename
MartinKolarik Apr 3, 2026
20d9417
fix: log noise
MartinKolarik Apr 3, 2026
2799a4c
build: fix less source maps
MartinKolarik Apr 3, 2026
805c115
fix: caching
MartinKolarik Apr 3, 2026
d0d5465
fix: adjust sizes
MartinKolarik Apr 3, 2026
3235519
Update results-raw-output.less
MartinKolarik Apr 3, 2026
71e1060
Merge branch 'master' into gh-79
PavelKopecky Apr 4, 2026
175f67b
Merge branch 'master' into gh-79
PavelKopecky Apr 4, 2026
ab60a08
Merge branch 'master' into gh-79
PavelKopecky Apr 6, 2026
19af089
Merge branch 'master' into gh-79
PavelKopecky Apr 7, 2026
2c78d99
Merge branch 'master' into gh-79
PavelKopecky Apr 10, 2026
287d13b
feat: update resolved address design
PavelKopecky Apr 13, 2026
e420e8f
fix: cdn logo alt
PavelKopecky Apr 13, 2026
b1b4c94
Merge branch 'master' into gh-79
MartinKolarik Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ LOCAL_APPDATA_FONTCONFIG_CACHE/
node_modules/
config/local*
data/asn-domain.json
data/IPINFO_LITE_ASN.mmdb
test/screenshots
yarn.lock
.eslintcache
Expand Down
21 changes: 17 additions & 4 deletions bin/fetch-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -20,7 +20,7 @@ async function fetchAndSaveAsnDomainMap (url) {
});

let pipelinePromise = pipeline(
got.stream(url),
got.stream(`${url}.csv.gz`),
zlib.createGunzip(),
parser,
);
Expand Down Expand Up @@ -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/IPINFO_LITE_ASN.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);
Expand Down
34 changes: 34 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/assets/js/utils/http.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` });
};
147 changes: 104 additions & 43 deletions src/assets/less/components/results-raw-output.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -243,3 +294,13 @@
}
}
}

@keyframes bg-loading {
0% {
background-position: -200% 0;
}

100% {
background-position: 200% 0;
}
}
14 changes: 14 additions & 0 deletions src/assets/less/pages/globalping.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@
}

&_map-block {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
Expand Down Expand Up @@ -905,6 +906,19 @@
margin-top: -32px;
}
}

&_logo-dev-link {
position: absolute;
bottom: -21px;
right: 34px;
font-size: 10.5px;
color: #79849a;
transition: color 100ms ease-in-out;

&:hover {
color: #17233a;
}
}
}

&_details {
Expand Down
Loading
Loading