github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-17 17:35:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add pagination

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-22 17:52:07 +08:00
parent 3aa77fee66
commit 0dec2fb912
3 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/dashboard/List.vue
View File

@ -117,6 +117,17 @@ limitations under the License. -->
{{ t("import") }} {{ t("import") }}
</label> </label>
</el-button> </el-button>
<el-pagination
class="pagination"
background
small
layout="prev, pager, next"
:page-size="pageSize"
:total="dashboardStore.dashboards.length"
@current-change="changePage"
@prev-click="changePage"
@next-click="changePage"
/>
</div> </div>
</div> </div>
</div> </div>
@ -137,6 +148,7 @@ import { EntityType } from "./data";
const { t } = useI18n(); const { t } = useI18n();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const pageSize = 18;
const dashboards = ref<DashboardItem[]>([]); const dashboards = ref<DashboardItem[]>([]);
const searchText = ref<string>(""); const searchText = ref<string>("");
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
@ -151,7 +163,7 @@ const handleSelectionChange = (val: DashboardItem[]) => {
setList(); setList();
async function setList() { async function setList() {
await dashboardStore.setDashboards(); await dashboardStore.setDashboards();
dashboards.value = dashboardStore.dashboards; searchDashboards();
} }
async function importTemplates(event: any) { async function importTemplates(event: any) {
const arr: any = await readFile(event); const arr: any = await readFile(event);
@ -361,16 +373,20 @@ async function handleDelete(row: DashboardItem) {
sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value)); sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`); sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`);
} }
function searchDashboards() { function searchDashboards(pageIndex?: number) {
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]"); const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
dashboards.value = list.filter((d: { name: string }) => const arr = list.filter((d: { name: string }) =>
d.name.includes(searchText.value) d.name.includes(searchText.value)
); );
dashboards.value = arr.splice(pageIndex || 0, pageSize);
} }
function reloadTemplates() { function reloadTemplates() {
dashboardStore.resetTemplates(); dashboardStore.resetTemplates();
} }
function changePage(pageIndex: number) {
searchDashboards(pageIndex);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header { .header {
@ -401,6 +417,10 @@ function reloadTemplates() {
background-color: #fff; background-color: #fff;
} }
.pagination {
float: right;
}
.btn { .btn {
width: 220px; width: 220px;
font-size: 13px; font-size: 13px;

4
src/views/dashboard/graphs/ServiceList.vue
View File

@ -185,9 +185,7 @@ function clickService(scope: any) {
} }
dashboardStore.setCurrentDashboard(d); dashboardStore.setCurrentDashboard(d);
dashboardStore.setEntity(d.entity); dashboardStore.setEntity(d.entity);
const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name}`;
.split(" ")
.join("-")}`;
router.push(path); router.push(path);
} }

8
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -394,9 +394,7 @@ function handleGoEndpoint(name: string) {
entity: EntityType[2].value, entity: EntityType[2].value,
}); });
dashboardStore.setEntity(p.entity); dashboardStore.setEntity(p.entity);
const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name}`;
.split(" ")
.join("-")}`;
const routeUrl = router.resolve({ path }); const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank"); window.open(routeUrl.href, "_blank");
@ -424,9 +422,7 @@ function handleGoDashboard(name: string) {
entity: EntityType[0].value, entity: EntityType[0].value,
}); });
dashboardStore.setEntity(p.entity); dashboardStore.setEntity(p.entity);
const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name}`;
.split(" ")
.join("-")}`;
const routeUrl = router.resolve({ path }); const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank"); window.open(routeUrl.href, "_blank");