import React from "react"; import { Breadcrumb } from "antd"; import { Link, withRouter } from "react-router-dom"; import styled from "styled-components"; const BreadCrumbWrapper = styled.div` padding-top: 20px; padding-left: 20px; `; const breadcrumbNameMap: any = { // PNOTE - TO DO - Remove any and do typechecking - like https://stackoverflow.com/questions/56568423/typescript-no-index-signature-with-a-parameter-of-type-string-was-found-on-ty "/application": "Application", "/traces": "Traces", "/service-map": "Service Map", "/usage-explorer": "Usage Explorer", "/add-instrumentation": "Add instrumentation", "/settings": "Settings", }; const ShowBreadcrumbs = withRouter((props) => { const { location } = props; const pathSnippets = location.pathname.split("/").filter((i) => i); const extraBreadcrumbItems = pathSnippets.map((_, index) => { const url = `/${pathSnippets.slice(0, index + 1).join("/")}`; if (breadcrumbNameMap[url] === undefined) { return ( {url.split("/").slice(-1)[0]} ); } else { return ( {breadcrumbNameMap[url]} ); } }); const breadcrumbItems = [ Home , ].concat(extraBreadcrumbItems); return ( {breadcrumbItems} ); }); export default ShowBreadcrumbs;