From 90090776ca8b59017d9a7647fa150f42390bdcbc Mon Sep 17 00:00:00 2001 From: Piotr Rogowski Date: Fri, 9 Apr 2021 10:19:10 +0200 Subject: [PATCH] Show real edge location --- src/components/Log.tsx | 12 ++- src/data/s3-edge-locations.json | 183 ++++++++++++++++++++++++++++++++ src/utils/http.ts | 16 ++- 3 files changed, 206 insertions(+), 5 deletions(-) create mode 100644 src/data/s3-edge-locations.json diff --git a/src/components/Log.tsx b/src/components/Log.tsx index f93599a..4c0d281 100644 --- a/src/components/Log.tsx +++ b/src/components/Log.tsx @@ -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(); const [parseError, setParseError] = useState(); const [step, setStep] = useState(0); + const [edgeLocation, setEdgeLocation] = useState(edgeUnknown); const contentRef = useRef(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 }) => { + {edgeLocation} + + } status={fetchError && 'error'} /> 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 => { 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); } }