diff --git a/src/app/NotFound/NotFound.tsx b/src/app/NotFound/NotFound.tsx index 37f54d3e8..89b89b2b5 100644 --- a/src/app/NotFound/NotFound.tsx +++ b/src/app/NotFound/NotFound.tsx @@ -36,14 +36,56 @@ * SOFTWARE. */ import * as React from 'react'; -import { NavLink } from 'react-router-dom'; -import { Alert, PageSection } from '@patternfly/react-core'; +import { Link } from 'react-router-dom'; +import { NotFoundCard } from './NotFoundCard'; +import { + Button, + EmptyState, + EmptyStateIcon, + EmptyStateBody, + EmptyStateSecondaryActions, + Title +} from '@patternfly/react-core'; +import '@app/app.css' +import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-marked-alt-icon'; const NotFound: React.FunctionComponent = () => ( - -
- Take me home -
- ) + + + + 404: We couldn't find that page + + + One of the following pages might have what you're looking for. + + + + + + + + + +) export { NotFound }; diff --git a/src/app/NotFound/NotFoundCard.tsx b/src/app/NotFound/NotFoundCard.tsx new file mode 100644 index 000000000..487b44b3b --- /dev/null +++ b/src/app/NotFound/NotFoundCard.tsx @@ -0,0 +1,53 @@ +/* + * Copyright The Cryostat Authors + * + * The Universal Permissive License (UPL), Version 1.0 + * + * Subject to the condition set forth below, permission is hereby granted to any + * person obtaining a copy of this software, associated documentation and/or data + * (collectively the "Software"), free of charge and under any and all copyright + * rights in the Software, and any and all patent rights owned or freely + * licensable by each licensor hereunder covering either (i) the unmodified + * Software as contributed to or provided by such licensor, or (ii) the Larger + * Works (as defined below), to deal in both + * + * (a) the Software, and + * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if + * one is included with the Software (each a "Larger Work" to which the Software + * is contributed by such licensors), + * + * without restriction, including without limitation the rights to copy, create + * derivative works of, display, perform, and distribute the Software and make, + * use, sell, offer for sale, import, export, have made, and have sold the + * Software and the Larger Work(s), and to sublicense the foregoing rights on + * either these or other terms. + * + * This license is subject to the following condition: + * The above copyright notice and either this complete permission notice or at + * a minimum a reference to the UPL must be included in all copies or + * substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core'; + +export const NotFoundCard = ({title, bodyText, linkText, linkPath}) => { + return(<> + + {title} + {bodyText} + + {linkText} + + + ); +} \ No newline at end of file diff --git a/src/app/app.css b/src/app/app.css index df7e11487..67a8dd244 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -43,6 +43,16 @@ html, body, #root { height: 8em; } +.pf-c-card-not-found { + text-align: left; + margin-left: 1rem; + width: 20rem; +} + +.pf-c-card-not-found__footer { + padding-top: 2rem; +} + .cryostat-logo { height: 2em; }