This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-banyandb.git
The following commit(s) were added to refs/heads/main by this push:
new f9aab65c UI improved in Not Found View (#395)
f9aab65c is described below
commit f9aab65c3f6232cfdd3815e2f58e8a90cfffb2c9
Author: D N Siva Sathyaseelan
<95441117+sivasathyaseee...@users.noreply.github.com>
AuthorDate: Wed Mar 6 18:37:03 2024 +0530
UI improved in Not Found View (#395)
---
ui/src/assets/banyandb.svg | 35 ++++++++++++++++
ui/src/router/index.js | 14 +++++--
ui/src/views/Errors/NotFound.vue | 89 ++++++++++++++++++++++++++++++++++++++++
ui/src/views/NotFoundView.vue | 30 --------------
4 files changed, 134 insertions(+), 34 deletions(-)
diff --git a/ui/src/assets/banyandb.svg b/ui/src/assets/banyandb.svg
new file mode 100644
index 00000000..8b4c1904
--- /dev/null
+++ b/ui/src/assets/banyandb.svg
@@ -0,0 +1,35 @@
+<!--
+ ~ Licensed to Apache Software Foundation (ASF) under one or more contributor
+ ~ license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright
+ ~ ownership. Apache Software Foundation (ASF) licenses this file to you under
+ ~ the Apache License, Version 2.0 (the "License"); you may
+ ~ not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<g clip-path="url(#clip0_271_1230)">
+<path d="M21.8766 7.05302C22.1977 7.6458 22.4718 8.27568 22.692
8.92251C24.9008 15.4098 21.3397 22.4814 14.7414 24.7106C12.4832 25.4736 10.0571
25.572 7.77329 25.0371C10.7614 29.2135 16.2326 31.0698 21.3899 29.3274C27.6683
27.2063 31.0636 20.464 28.9619 14.2911C27.8127 10.9159 25.1702 8.27992 21.8766
7.05302Z" fill="#3987CD"/>
+<path d="M11.7632 16H13.2632V26H11.7632V16Z" fill="#3987CD"/>
+<rect x="8.64258" y="18.3364" width="1.5" height="5.20919" rx="0.75"
transform="rotate(-45 8.64258 18.3364)" fill="#3987CD"/>
+<rect x="15.0464" y="20.0586" width="1.5" height="4.78215" rx="0.75"
transform="rotate(45 15.0464 20.0586)" fill="#3987CD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5132 13.6667C12.0529
13.6667 11.6799 14.0398 11.6799 14.5C11.6799 14.9602 12.0529 15.3333 12.5132
15.3333C12.9734 15.3333 13.3465 14.9602 13.3465 14.5C13.3465 14.0398 12.9734
13.6667 12.5132 13.6667ZM15.0132 14.5C15.0132 15.8807 13.8939 17 12.5132
17C11.1325 17 10.0132 15.8807 10.0132 14.5C10.0132 13.1193 11.1325 12 12.5132
12C13.8939 12 15.0132 13.1193 15.0132 14.5Z" fill="#3987CD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 19.3333C15.6318 19.3333
15.3333 19.6318 15.3333 20C15.3333 20.3682 15.6318 20.6667 16 20.6667C16.3682
20.6667 16.6667 20.3682 16.6667 20C16.6667 19.6318 16.3682 19.3333 16
19.3333ZM18 20C18 21.1046 17.1046 22 16 22C14.8954 22 14 21.1046 14 20C14
18.8954 14.8954 18 16 18C17.1046 18 18 18.8954 18 20Z" fill="#3987CD"/>
+<circle cx="17.9999" cy="17.9999" r="16.4999" stroke="#3987CD"
stroke-width="3"/>
+</g>
+<defs>
+<clipPath id="clip0_271_1230">
+<path d="M0 18C0 8.05887 8.05887 0 18 0V0C27.9411 0 36 8.05887 36 18V18C36
27.9411 27.9411 36 18 36V36C8.05887 36 0 27.9411 0 18V18Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 0b9f104b..e74fc69c 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -19,7 +19,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import Header from '@/components/Header/index.vue'
-import NotFoundView from '../views/NotFoundView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -161,12 +160,19 @@ const router = createRouter({
// will match everything
path: '/:pathMatch(.*)',
name: 'NotFound',
- component: NotFoundView,
+ component: Header,
meta: {
keepAlive: false,
- }
+ },
+ children: [
+ {
+ path: '/:pathMatch(.*)',
+ name: 'property',
+ component: () => import('@/views/Errors/NotFound.vue'),
+ }
+ ]
},
]
})
-export default router
+export default router
\ No newline at end of file
diff --git a/ui/src/views/Errors/NotFound.vue b/ui/src/views/Errors/NotFound.vue
new file mode 100644
index 00000000..17c0a706
--- /dev/null
+++ b/ui/src/views/Errors/NotFound.vue
@@ -0,0 +1,89 @@
+<!--
+ ~ Licensed to Apache Software Foundation (ASF) under one or more contributor
+ ~ license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright
+ ~ ownership. Apache Software Foundation (ASF) licenses this file to you under
+ ~ the Apache License, Version 2.0 (the "License"); you may
+ ~ not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+
+<script setup>
+import { ElImage } from 'element-plus'
+import userImg from '@/assets/banyandb.svg'
+</script>
+
+<template>
+ <div class="display-view">
+ <div class="inner-component">
+ <el-image :src="userImg" class="display-image" fit="fill">
+ <div slot="error" class="image-slot">
+ <i class="el-icon-picture-outline"></i>
+ </div>
+ </el-image>
+ <div class="display-message">
+ <h1 class="message">404 Page Not Found</h1>
+ <router-link to="/" class="go-home-link">Go Home</router-link>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+.display-view {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+
+.inner-component {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+}
+
+.display-image {
+ height: 12rem;
+}
+
+.display-message {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-family: var(--font-family-main);
+}
+
+.message {
+ font-size: 2.5rem;
+}
+
+.go-home-link {
+ text-decoration: none;
+ color: inherit;
+ font-weight: bold;
+ font-size: large;
+ background-color: #ffffff;
+ padding: 1rem;
+ border-radius: 1rem;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+ transition: color 0.3s, transform 0.3s;
+}
+
+.go-home-link:hover {
+ color: #2c3e50;
+ transform: scale(1.1);
+}
+</style>
+
diff --git a/ui/src/views/NotFoundView.vue b/ui/src/views/NotFoundView.vue
deleted file mode 100644
index 1e786759..00000000
--- a/ui/src/views/NotFoundView.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
- ~ Licensed to Apache Software Foundation (ASF) under one or more contributor
- ~ license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright
- ~ ownership. Apache Software Foundation (ASF) licenses this file to you under
- ~ the Apache License, Version 2.0 (the "License"); you may
- ~ not use this file except in compliance with the License.
- ~ You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing,
- ~ software distributed under the License is distributed on an
- ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- ~ KIND, either express or implied. See the License for the
- ~ specific language governing permissions and limitations
- ~ under the License.
--->
-
-<template>
- <h1>
- Not Found
- </h1>
-</template>
-
-<script>
-export default {
- name: 'NotFoundView',
-}
-</script>
