Show real edge location

This commit is contained in:
Piotr Rogowski 2021-04-09 10:19:10 +02:00
parent 8981701ba1
commit 90090776ca
No known key found for this signature in database
GPG Key ID: F40F61D5587F5673
3 changed files with 206 additions and 5 deletions

View File

@ -21,6 +21,7 @@ import {
FileTextOutlined,
EditOutlined,
DashboardOutlined,
GlobalOutlined,
} from '@ant-design/icons';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
@ -48,6 +49,7 @@ import {
const { TabPane } = Tabs;
const { Content } = Layout;
const { Step } = Steps;
const edgeUnknown = 'Unknown';
const mapStateToProps = (state: AppState) => ({
ui: state.ui,
@ -65,6 +67,7 @@ const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
const [fetchError, setFetchError] = useState<Error>();
const [parseError, setParseError] = useState<Error>();
const [step, setStep] = useState(0);
const [edgeLocation, setEdgeLocation] = useState(edgeUnknown);
const contentRef = useRef<HTMLDivElement | null>(null);
const margin = 30;
const [canvasWidth, setCanvasWidth] = useState(0);
@ -109,9 +112,10 @@ const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
const { signal } = controller;
const loadData = async () => {
try {
const raw = await loadLogs((percent, total) => {
const raw = await loadLogs((percent, total, edge) => {
setProgress(percent);
setFileSize(formatBytes(total));
setEdgeLocation(edge || edgeUnknown);
}, signal);
setFileSize(formatBytes(raw.byteLength));
@ -211,7 +215,11 @@ const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
<Step
title="Downloading"
subTitle={fileSize}
description={fetchError ? fetchError!.message : 'Edge location: FRA53-C1'}
description={
fetchError ? fetchError!.message : <Space>
<GlobalOutlined />{edgeLocation}
</Space>
}
status={fetchError && 'error'}
/>
<Step

View File

@ -0,0 +1,183 @@
{
"EZE51-C1": "Buenos Aires Argentina",
"MEL50-C1": "Melbourne Australia",
"PER50-C1": "Perth Australia",
"SYD1-C1": "Sydney Australia",
"SYD1-C2": "Sydney Australia",
"VIE50-C1": "Vienna Austria",
"BAH53-C1": "Manama Bahrain",
"BRU50-C1": "Brussels Belgium",
"GIG51-C2": "Rio de Janeiro Brazil",
"GRU1-C2": "São Paulo Brazil",
"GRU3-C1": "São Paulo Brazil",
"GRU3-C2": "São Paulo Brazil",
"GRU50-C1": "São Paulo Brazil",
"SOF50-C1": "Sofia Bulgaria",
"YUL62-C1": "Montréal, QC Canada",
"YTO50-C1": "Greater Toronto, ON Canada",
"YTO50-C3": "Greater Toronto, ON Canada",
"YVR50-C1": "Vancouver, BC Canada",
"SCL50-C1": "Santiago Chile",
"BJS": "Beijing Beijing China",
"HKG54-C1": "Hong Kong China",
"HKG60-C1": "Hong Kong China",
"HKG62-C1": "Hong Kong China",
"HKG62-C2": "Hong Kong China",
"SHA": "Shanghai, Shanghai China",
"SZX": "Shenzhen, Shenzhen, GD China",
"TPE50-C1": "Taipei TW China",
"TPE51-C1": "Taipei TW China",
"TPE52-C1": "Taipei TW China",
"ZHY": "Zhongwei, Zhongwei, NX China",
"BOG50-C1": "Bogotá Colombia",
"ZAG50-C1": "Zagreb Croatia",
"PRG50-C1": "Prague Prague Czech Republic",
"CPH50-C1": " Kastrup Copenhagen Denmark",
"CPH50-C2": " Kastrup Copenhagen Denmark",
"HEL50-C1": "Helsinki Finland",
"HEL50-C2": "Helsinki Finland",
"MRS52-C1": "Marseille France",
"CDG3-C1": "Paris France",
"CDG3-C2": "Paris France",
"CDG50-C1": "Paris France",
"CDG50-C2": "Paris France",
"TXL52-C1": "Berlin Germany",
"DUS51-C1": "Düsseldorf Germany",
"FRA2-C2": "Frankfurt Germany",
"FRA6-C1": "Frankfurt Germany",
"FRA50-C1": "Frankfurt Germany",
"FRA53-C1": "Frankfurt Germany",
"FRA56-C1": "Frankfurt Germany",
"FRA56-C2": "Frankfurt Germany",
"HAM50-C1": "Hamburg Germany",
"HAM50-C2": "Hamburg Germany",
"MUC51-C1": "Munich Germany",
"ATH50-C1": "Eleftherios Venizelos Athens Greece",
"BUD50-C1": "Budapest Hungary",
"BLR50-C2": "Bangalore India",
"MAA50-C1": "Chennai India",
"MAA50-C2": "Chennai India",
"MAA51-C1": "Chennai India",
"MAA51-C2": "Chennai India",
"HYD50-C1": "Hyderabad India",
"HYD50-C2": "Hyderabad India",
"CCU50-C1": "Kolkata India",
"CCU50-C2": "Kolkata India",
"BOM50-C1": "Mumbai India",
"BOM51-C1": "Mumbai India",
"BOM51-C2": "Mumbai India",
"BOM52-C1": "Mumbai India",
"DEL51-C1": "New Delhi India",
"DEL54-C1": "New Delhi India",
"DEL54-C3": "New Delhi India",
"CGK52-C1": "Jakarta Indonesia",
"DUB2-C1": "Dublin Ireland",
"TLV50-C2": "Tel Aviv Israel",
"MXP64-C1": "Milan Italy",
"PMO50": "Falcone, Palermo Italy",
"FCO50-C1": "Rome Italy",
"FCO50-C2": "Rome Italy",
"KIX56-C1": "Osaka Japan",
"KIX56-C2": "Osaka Japan",
"NRT12-C2": "Tokyo Japan",
"NRT12-C4": "Tokyo Japan",
"NRT20-C2": "Tokyo Japan",
"NRT20-C3": "Tokyo Japan",
"NRT20-C4": "Tokyo Japan",
"NRT51-C2": "Tokyo Japan",
"NRT51-C3": "Tokyo Japan",
"NRT57-C1": "Tokyo Japan",
"NRT57-C3": "Tokyo Japan",
"NRT57-C4": "Tokyo Japan",
"NBO50-C1": "Nairobi Kenya",
"KUL50-C1": "Kuala Lumpur Malaysia",
"QRO50-C1": "Querétaro Mexico",
"QRO51-C1": "Querétaro Mexico",
"AKL50-C1": "Auckland New Zealand",
"AKL50-C2": "Auckland New Zealand",
"OSL50-C1": " Gardermoen Oslo Norway",
"MNL50-C1": "Manila Philippines",
"WAW50-C1": "Warsaw Poland",
"LIS50-C1": "Lisbon Portugal",
"OTP50-C1": "Bucharest Romania",
"SIN2-C1": "Singapore Singapore",
"SIN5-C1": "Singapore Singapore",
"SIN52-C2": "Singapore Singapore",
"SIN52-C3": "Singapore Singapore",
"CPT52-C1": "Cape Town South Africa",
"JNB50-C1": "Johannesburg South Africa",
"ICN51-C1": "Seoul South Korea",
"ICN51-C2": "Seoul South Korea",
"ICN54-C1": "Seoul South Korea",
"ICN54-C2": "Seoul South Korea",
"ICN55-C1": "Seoul South Korea",
"MAD50-C1": "Madrid Spain",
"MAD51-C2": "Madrid Spain",
"ARN1-C1": "Stockholm Sweden",
"ARN54-C1": "Stockholm Sweden",
"ZRH50-C1": "Zürich Switzerland",
"BKK50-C2": "Bangkok Thailand",
"AMS1-C1": "Schiphol Amsterdam Netherlands",
"AMS50-C1": "Schiphol Amsterdam Netherlands",
"AMS54-C1": "Schiphol Amsterdam Netherlands",
"DXB50-C1": "Dubai United Arab Emirates",
"FJR50-C1": "Fujairah United Arab Emirates",
"LHR3-C2": "London UK",
"LHR52-C1": "London UK",
"LHR61-C2": "London UK",
"LHR62-C1": "London UK",
"LHR62-C3": "London UK",
"LHR62-C4": "London UK",
"MAN50-C3": "Manchester UK",
"IAD50-C2": "Ashburn, VA US",
"IAD66-C1": "Ashburn, VA US",
"IAD66-C2": "Ashburn, VA US",
"IAD79-C2": "Ashburn, VA US",
"IAD79-C3": "Ashburn, VA US",
"IAD89-C3": "Ashburn, VA US",
"ATL50-C1": "Atlanta, GA US",
"ATL51-C1": "Atlanta, GA US",
"ATL56-C1": "Atlanta, GA US",
"ATL56-C3": "Atlanta, GA US",
"BOS50-C1": "Boston, MA US",
"BOS50-C3": "Boston, MA US",
"ORD50-C1": "Chicago, IL US",
"ORD51-C2": "Chicago, IL US",
"ORD52-C2": "Chicago, IL US",
"ORD53-C1": "Chicago, IL US",
"DFW50-C1": "Dallas/Fort Worth, TX US",
"DFW53-C1": "Dallas/Fort Worth, TX US",
"DFW55-C3": "Dallas/Fort Worth, TX US",
"DEN52-C1": "Denver, CO US",
"HIO50-C1": "Hillsboro, OR US",
"HIO50-C2": "Hillsboro, OR US",
"IAH50-C1": "Houston, TX US",
"IAH50-C3": "Houston, TX US",
"JAX1-C1": "Jacksonville, FL US",
"LAX3-C4": "Los Angeles, CA US",
"LAX50-C1": "Los Angeles, CA US",
"LAX50-C3": "Los Angeles, CA US",
"LAX50-C4": "Los Angeles, CA US",
"MIA3-C2": "Miami, FL US",
"MIA3-C3": "Miami, FL US",
"MSP50-C1": "Minneapolis, MN US",
"MSP50-C2": "Minneapolis, MN US",
"JFK51-C1": "New York, NY US",
"EWR50-C1": "Newark, NJ US",
"EWR52-C2": "Newark, NJ US",
"EWR52-C3": "Newark, NJ US",
"EWR52-C4": "Newark, NJ US",
"EWR53-P1": "Newark, NJ US",
"PHL50-C1": "Philadelphia, PA US",
"PHX50-C1": "Phoenix, AZ US",
"PHX50-C2": "Phoenix, AZ US",
"SLC50-C1": "Salt Lake City, UT US",
"SFO5-C1": "San Francisco, CA US",
"SFO5-C3": "San Francisco, CA US",
"SFO20-C1": "San Francisco, CA US",
"SFO53-C1": "San Francisco, CA US",
"SEA19-C1": "Seattle, WA US",
"SEA19-C2": "Seattle, WA US",
"SEA19-C3": "Seattle, WA US",
"IND6": "Indianapolis, South Bend, IN US"
}

View File

@ -1,9 +1,19 @@
export type onProgress = (percent: number, total: number) => void;
import locations from '../data/s3-edge-locations.json';
type LocationsType = { [index: string]: string };
export type onProgress = (percent: number, total: number, edgeLocation: string | null) => void;
export const fetchWithProgress = async (url: string, onProgress?: onProgress, signal?: AbortSignal): Promise<ArrayBuffer> => {
const response = await fetch(url, { signal });
const contentLength = response.headers.get('Content-Length');
const isContentEncoded = !!response.headers.get('Content-Encoding');
const isContentEncoded = response.headers.has('Content-Encoding');
const edgeLocationCode = response.headers.get('x-amz-cf-pop');
let edgeLocation = null;
if (edgeLocationCode) {
edgeLocation = (locations as LocationsType)[edgeLocationCode];
}
if (!contentLength || isContentEncoded) {
// fallback to full buffer
@ -28,7 +38,7 @@ export const fetchWithProgress = async (url: string, onProgress?: onProgress, si
if (onProgress) {
// eslint-disable-next-line no-bitwise
onProgress(~~(at / length * 100), length);
onProgress(~~(at / length * 100), length, edgeLocation);
}
}