mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 19:24:05 +00:00
feat: add filters for list components
This commit is contained in:
Qiuxia Fan
parent
d9cb7500c8
commit
3d6fe887a5
@ -20,10 +20,10 @@ import router from "./router";
|
||||
import { store } from "./store";
|
||||
import components from "@/components";
|
||||
import i18n from "./locales";
|
||||
import "element-plus/dist/index.css";
|
||||
import "./styles/lib.scss";
|
||||
import "./styles/reset.scss";
|
||||
import ElementPlus from "element-plus";
|
||||
import "element-plus/dist/index.css";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
|
||||
@ -15,20 +15,23 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
body {
|
||||
body {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
color: #3d444f;
|
||||
font-family: 'Helvetica', 'Arial', 'Source Han Sans CN', 'Microsoft YaHei', 'sans-serif';
|
||||
font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei",
|
||||
sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div,
|
||||
header,
|
||||
footer,
|
||||
@ -53,6 +56,7 @@ a,
|
||||
img {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
@ -60,41 +64,51 @@ button {
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
@ -102,57 +116,76 @@ blockquote {
|
||||
border-left: 4px solid #cacaca;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
font-family: Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
/*webkit core*/
|
||||
|
||||
/* webkit core */
|
||||
.scroll_hide::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.scroll_hide::-webkit-scrollbar-button {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-webkit-scrollbar-track-piece {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-webkit-scrollbar-corner {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-webkit-scrollbar-resizer {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
/*o core*/
|
||||
|
||||
/* o core */
|
||||
.scroll_hide .-o-scrollbar {
|
||||
-moz-appearance: none !important;
|
||||
background: rgba(0, 255, 0, 0) !important;
|
||||
appearance: none !important;
|
||||
background: rgb(0 255 0 / 0%) !important;
|
||||
}
|
||||
|
||||
.scroll_hide::-o-scrollbar-button {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-o-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-o-scrollbar-track-piece {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-o-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-o-scrollbar-corner {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.scroll_hide::-o-scrollbar-resizer {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
/*IE10,IE11,IE12*/
|
||||
|
||||
/* IE10,IE11,IE12 */
|
||||
.scroll_hide {
|
||||
-ms-scroll-chaining: chained;
|
||||
-ms-overflow-style: none;
|
||||
@ -160,18 +193,20 @@ pre {
|
||||
-ms-scroll-rails: none;
|
||||
-ms-content-zoom-limit-min: 100%;
|
||||
-ms-content-zoom-limit-max: 500%;
|
||||
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
|
||||
-ms-overflow-style: none;
|
||||
scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scroll_bar_style::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scroll_bar_style::-webkit-scrollbar-track {
|
||||
background-color: #3d444f;
|
||||
}
|
||||
|
||||
.scroll_bar_style::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(196, 200, 225, .2);
|
||||
background: rgb(196 200 225 / 20%);
|
||||
}
|
||||
|
||||
@ -370,7 +370,7 @@ export default defineComponent({
|
||||
|
||||
.render-chart {
|
||||
padding: 5px;
|
||||
height: 360px;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -405,7 +405,7 @@ export default defineComponent({
|
||||
.no-data {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 350px;
|
||||
line-height: 400px;
|
||||
}
|
||||
|
||||
span.active {
|
||||
|
||||
@ -14,6 +14,21 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
placeholder="Please input instance name"
|
||||
class="input-with-search"
|
||||
size="small"
|
||||
@change="searchList"
|
||||
>
|
||||
<template #append>
|
||||
<el-button size="small" @click="searchList">
|
||||
<Icon size="lg" iconName="search" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="chartLoading"
|
||||
:data="endpoints"
|
||||
@ -62,8 +77,10 @@ defineProps({
|
||||
});
|
||||
const selectorStore = useSelectorStore();
|
||||
const chartLoading = ref<boolean>(false);
|
||||
const endpoints = ref<{ label: string; value: string }[]>([]);
|
||||
const endpoints = ref<{ layer: string; label: string }[]>([]);
|
||||
const searchEndpoints = ref<{ layer: string; label: string }[]>([]);
|
||||
const pageSize = 7;
|
||||
const searchText = ref<string>("");
|
||||
|
||||
onBeforeMount(async () => {
|
||||
chartLoading.value = true;
|
||||
@ -79,23 +96,13 @@ onBeforeMount(async () => {
|
||||
function changePage(pageIndex: number) {
|
||||
endpoints.value = selectorStore.endpoints.splice(pageIndex - 1, pageSize);
|
||||
}
|
||||
function searchList() {
|
||||
searchEndpoints.value = selectorStore.instances.filter(
|
||||
(d: { label: string }) => d.label.includes(searchText.value)
|
||||
);
|
||||
endpoints.value = searchEndpoints.value.splice(0, pageSize);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
@import "./style.scss";
|
||||
</style>
|
||||
|
||||
@ -14,6 +14,21 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
placeholder="Please input instance name"
|
||||
class="input-with-search"
|
||||
size="small"
|
||||
@change="searchList"
|
||||
>
|
||||
<template #append>
|
||||
<el-button size="small" @click="searchList">
|
||||
<Icon size="lg" iconName="search" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="chartLoading"
|
||||
:data="instances"
|
||||
@ -36,8 +51,8 @@ limitations under the License. -->
|
||||
class="pagination"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="6"
|
||||
:total="selectorStore.instances.length"
|
||||
:page-size="pageSize"
|
||||
:total="searchInstances.length"
|
||||
@current-change="changePage"
|
||||
@prev-click="changePage"
|
||||
@next-click="changePage"
|
||||
@ -62,8 +77,10 @@ defineProps({
|
||||
});
|
||||
const selectorStore = useSelectorStore();
|
||||
const chartLoading = ref<boolean>(false);
|
||||
const instances = ref<any[]>([]);
|
||||
const instances = ref<{ layer: string; label: string }[]>([]);
|
||||
const searchInstances = ref<{ layer: string; label: string }[]>([]);
|
||||
const pageSize = 7;
|
||||
const searchText = ref<string>("");
|
||||
|
||||
onBeforeMount(async () => {
|
||||
chartLoading.value = true;
|
||||
@ -74,28 +91,19 @@ onBeforeMount(async () => {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
instances.value = selectorStore.instances.splice(0, pageSize);
|
||||
searchInstances.value = selectorStore.instances;
|
||||
instances.value = searchInstances.value.splice(0, pageSize);
|
||||
});
|
||||
function changePage(pageIndex: number) {
|
||||
instances.value = selectorStore.instances.splice(pageIndex - 1, pageSize);
|
||||
instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
|
||||
}
|
||||
function searchList() {
|
||||
searchInstances.value = selectorStore.instances.filter(
|
||||
(d: { label: string }) => d.label.includes(searchText.value)
|
||||
);
|
||||
instances.value = searchInstances.value.splice(0, pageSize);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
@import "./style.scss";
|
||||
</style>
|
||||
|
||||
@ -14,6 +14,21 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="search">
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
placeholder="Please input instance name"
|
||||
class="input-with-search"
|
||||
size="small"
|
||||
@change="searchList"
|
||||
>
|
||||
<template #append>
|
||||
<el-button size="small" @click="searchList">
|
||||
<Icon size="lg" iconName="search" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="chartLoading"
|
||||
:data="services"
|
||||
@ -63,7 +78,9 @@ defineProps({
|
||||
const selectorStore = useSelectorStore();
|
||||
const chartLoading = ref<boolean>(false);
|
||||
const pageSize = 6;
|
||||
const services = ref<{ label: string; layer: string }>([]);
|
||||
const services = ref<{ label: string; layer: string }[]>([]);
|
||||
const searchServices = ref<{ layer: string; label: string }[]>([]);
|
||||
const searchText = ref<string>("");
|
||||
|
||||
onBeforeMount(async () => {
|
||||
chartLoading.value = true;
|
||||
@ -78,23 +95,13 @@ onBeforeMount(async () => {
|
||||
function changePage(pageIndex: number) {
|
||||
services.value = selectorStore.services.splice(pageIndex - 1, pageSize);
|
||||
}
|
||||
function searchList() {
|
||||
searchServices.value = selectorStore.instances.filter(
|
||||
(d: { label: string }) => d.label.includes(searchText.value)
|
||||
);
|
||||
services.value = searchServices.value.splice(0, pageSize);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
@import "./style.scss";
|
||||
</style>
|
||||
|
||||
41
src/views/dashboard/graphs/style.scss
Normal file
41
src/views/dashboard/graphs/style.scss
Normal file
@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Licensed to the 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.
|
||||
* The 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.
|
||||
*/
|
||||
.table {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.input-with-search {
|
||||
width: 400px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user