This is an automated email from the ASF dual-hosted git repository.
gongchao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new 3ab94a751 [Improve] optimize the dashboard page and adapt to the new
theme (#3730)
3ab94a751 is described below
commit 3ab94a751b70618292e8f6317c0d6c0c8c1be628
Author: DeleiGuo <[email protected]>
AuthorDate: Sun Sep 7 23:00:12 2025 +0800
[Improve] optimize the dashboard page and adapt to the new theme (#3730)
Co-authored-by: Calvin <[email protected]>
Co-authored-by: Tom <[email protected]>
---
web-app/src/app/layout/basic/basic.component.less | 1 +
.../app/layout/basic/widgets/search.component.less | 2 +-
.../app/routes/dashboard/dashboard.component.html | 864 +++++++++++----------
.../app/routes/dashboard/dashboard.component.less | 38 +-
.../app/routes/dashboard/dashboard.component.ts | 47 +-
5 files changed, 530 insertions(+), 422 deletions(-)
diff --git a/web-app/src/app/layout/basic/basic.component.less
b/web-app/src/app/layout/basic/basic.component.less
index 12ba3b486..d9f7b0fd2 100644
--- a/web-app/src/app/layout/basic/basic.component.less
+++ b/web-app/src/app/layout/basic/basic.component.less
@@ -133,6 +133,7 @@
z-index: 11 !important;
display: flex !important;
align-items: center !important;
+ justify-content: center !important;
}
/* Fix notification badge positioning */
diff --git a/web-app/src/app/layout/basic/widgets/search.component.less
b/web-app/src/app/layout/basic/widgets/search.component.less
index 82cd1dd41..58e3e3ab5 100644
--- a/web-app/src/app/layout/basic/widgets/search.component.less
+++ b/web-app/src/app/layout/basic/widgets/search.component.less
@@ -1,6 +1,6 @@
.search-input-group {
margin: 10px 0;
- border-radius: 8px;
+ border-radius: 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html
b/web-app/src/app/routes/dashboard/dashboard.component.html
index a3aa73891..8717762ea 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.html
+++ b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -18,428 +18,504 @@
-->
<div class="mobile-hide">
- <ngx-slick-carousel nz-row class="carousel" [config]="slideConfig">
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountService.size
}}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="cloud" nzTheme="outline"></i>
- {{ 'monitor.category.service' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountService.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountService.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountService.unManageSize }}</span>
- </nz-tag>
+ <div nz-row nzGutter="16">
+ <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 24
}" style="height: 100%">
+ <ngx-slick-carousel nz-row class="carousel" [config]="slideConfig">
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountService.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="cloud" nzTheme="outline"></i>
+ {{ 'monitor.category.service' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountService.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountService.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountService.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountProgram.size
}}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="code" nzTheme="outline"></i>
- {{ 'monitor.category.program' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountProgram.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountProgram.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountProgram.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountProgram.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="code" nzTheme="outline"></i>
+ {{ 'monitor.category.program' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountProgram.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountProgram.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountProgram.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountDb.size }}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="database" nzTheme="outline"></i>
- {{ 'monitor.category.db' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountDb.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountDb.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountDb.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountDb.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="database" nzTheme="outline"></i>
+ {{ 'monitor.category.db' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountDb.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountDb.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountDb.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountCache.size }}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="group" nzTheme="outline"></i>
- {{ 'monitor.category.cache' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCache.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCache.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCache.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountCache.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="group" nzTheme="outline"></i>
+ {{ 'monitor.category.cache' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCache.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCache.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCache.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountOs.size }}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="windows" nzTheme="outline"></i>
- {{ 'monitor.category.os' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountOs.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountOs.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountOs.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountOs.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="windows" nzTheme="outline"></i>
+ {{ 'monitor.category.os' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountOs.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountOs.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountOs.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountMid.size }}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="merge-cells" nzTheme="outline"></i>
- {{ 'monitor.category.mid' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountMid.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountMid.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountMid.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountMid.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="merge-cells" nzTheme="outline"></i>
+ {{ 'monitor.category.mid' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountMid.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountMid.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountMid.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountBigdata.size
}}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="dot-chart" nzTheme="outline"></i>
- {{ 'monitor.category.bigdata' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountBigdata.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountBigdata.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountBigdata.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountBigdata.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="dot-chart" nzTheme="outline"></i>
+ {{ 'monitor.category.bigdata' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountBigdata.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountBigdata.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountBigdata.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountWebserver.size
}}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="database" nzTheme="outline"></i>
- {{ 'monitor.category.webserver' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountWebserver.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span
- ><span style="font-weight: bolder">{{
appCountWebserver.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span
- ><span style="font-weight: bolder">{{
appCountWebserver.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountWebserver.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="database" nzTheme="outline"></i>
+ {{ 'monitor.category.webserver' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountWebserver.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span
+ ><span style="font-weight: bolder">{{
appCountWebserver.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span
+ ><span style="font-weight: bolder">{{
appCountWebserver.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountCn.size }}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="cloud-server" nzTheme="outline"></i>
- {{ 'monitor.category.cn' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCn.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCn.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCn.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountCn.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="cloud-server" nzTheme="outline"></i>
+ {{ 'monitor.category.cn' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCn.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCn.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCn.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountNetwork.size
}}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="global" nzTheme="outline"></i>
- {{ 'monitor.category.network' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountNetwork.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountNetwork.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountNetwork.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountNetwork.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="global" nzTheme="outline"></i>
+ {{ 'monitor.category.network' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountNetwork.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountNetwork.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountNetwork.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
- <div class="mb-md hoverCard">
- <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
- <div nz-col nzSpan="9" class="p-md text-white">
- <div class="h2 mt0 font-weight-bold">{{ appCountCustom.size
}}</div>
- <p class="h5 text-nowrap mb0">
- <i nz-icon nzType="project" nzTheme="outline"></i>
- {{ 'monitor.category.custom' | i18n }}
- </p>
- </div>
- <div nz-col nzSpan="15">
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.up' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCustom.availableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.down' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
- </nz-tag>
- <nz-tag class="mb-xs">
- <span>{{ 'monitor.status.paused' | i18n }} </span><span
style="font-weight: bolder">{{ appCountCustom.unManageSize }}</span>
- </nz-tag>
+ <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
+ <div class="hoverCard">
+ <div nz-row nzAlign="middle" class="bg-primary dashboard-rounded">
+ <div nz-col nzSpan="9" class="p-md text-white">
+ <div class="h2 mt0 font-weight-bold">{{ appCountCustom.size
}}</div>
+ <p class="h5 text-nowrap mb0">
+ <i nz-icon nzType="project" nzTheme="outline"></i>
+ {{ 'monitor.category.custom' | i18n }}
+ </p>
+ </div>
+ <div nz-col nzSpan="15">
+ <div class="dashboard-slider-tag">
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.up' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCustom.availableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.down' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCustom.unAvailableSize }}</span>
+ </nz-tag>
+ <nz-tag [nzBordered]="false" class="mb-xs">
+ <span>{{ 'monitor.status.paused' | i18n }} </span>
+ <span style="font-weight: bolder">{{
appCountCustom.unManageSize }}</span>
+ </nz-tag>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
+ </ngx-slick-carousel>
</div>
- </ngx-slick-carousel>
-</div>
-
-<div nz-row nzGutter="16" style="margin-top: 25px; height: 500px">
- <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }"
style="height: 100%">
- <nz-spin [nzSpinning]="wordCloudDataLoading">
- <angular-tag-cloud
- class="br-4"
- *ngIf="!wordCloudDataLoading"
- (clicked)="onLabelCloudClick($event)"
- [font]="'italic bold 6px monospace'"
- [data]="wordCloudData"
- [width]="1"
- [height]="1"
- [step]="2"
- [strict]="true"
- [randomizeAngle]="true"
- [realignOnResize]="true"
- [delay]="300"
- [zoomOnHover]="{ scale: 1.4, transitionTime: 0.6, delay: 0.4 }"
- [overflow]="false"
- [background]="theme == 'dark' ? '#141414' : 'white'"
- >
- </angular-tag-cloud>
- </nz-spin>
- </div>
- <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 12
}" style="height: 100%">
- <nz-spin [nzSpinning]="appsCountLoading">
- <div
- echarts
- [options]="appsCountEChartOption"
- theme="default"
- [autoResize]="true"
- [loading]="appsCountLoading"
- (chartClick)="onChartClick($event)"
- (chartInit)="onAppsCountChartInit($event)"
- style="width: 100%; height: inherit"
- ></div>
- </nz-spin>
</div>
- <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }"
style="height: 100%">
- <nz-spin [nzSpinning]="collectorsLoading">
- <div style="overflow-y: auto; height: inherit">
- <nz-card
- *ngFor="let item of collectors; let i = index"
- class="rounded-lg collectors"
- nzBordered="false"
- [nzTitle]="collectorCardTitle"
- >
- <ng-template #collectorCardTitle>
- <span style="font-size: medium; font-weight: bold" nz-tooltip
[nzTooltipTitle]="item.collector.name">
- <span nz-icon nzType="bug" nzTheme="outline"
style="margin-right: 4px"></span>
- <span>{{ 'collector' | i18n }} : {{ item.collector.name }}</span>
- </span>
- </ng-template>
- <nz-card-tab>
- <nz-tabset nzSize="small"
[(nzSelectedIndex)]="collectorsTabSelectedIndex">
- <nz-tab [nzTitle]="'collector.status' | i18n" />
- <nz-tab [nzTitle]="'collector.task' | i18n" />
- <nz-tab [nzTitle]="'collector.start-time' | i18n" />
- <nz-tab [nzTitle]="'collector.ip' | i18n" />
- <nz-tab [nzTitle]="'collector.node' | i18n" />
- </nz-tabset>
- </nz-card-tab>
- <ng-container *ngIf="collectorsTabSelectedIndex === 0">
- <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
- <span [style]="'font-size: x-large; font-weight: bolder;' +
(item.collector.status == 0 ? 'color: green' : 'color: red')">
- {{ item.collector.status == 0 ?
('monitor.collector.status.online' | i18n) :
('monitor.collector.status.offline' | i18n) }}
- </span>
- </div>
- </ng-container>
- <ng-container *ngIf="collectorsTabSelectedIndex === 1">
- <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
- <span style="font-size: xxx-large; font-weight: bolder; color:
white">
- {{ item.pinMonitorNum + item.dispatchMonitorNum }}
- </span>
- <br />
- <nz-tag style="margin-bottom: 4%; font-weight: bolder">{{
'collector.pinned' | i18n }}: {{ item.pinMonitorNum }}</nz-tag>
- <nz-tag style="margin-bottom: 4%; font-weight: bolder"
- >{{ 'collector.dispatched' | i18n }}: {{
item.dispatchMonitorNum }}</nz-tag
- >
- </div>
- </ng-container>
- <ng-container *ngIf="collectorsTabSelectedIndex === 2">
- <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
- <span style="font-size: x-large; font-weight: bolder; color:
white">{{
- (item.collector.gmtUpdate | date : 'YYYY-MM-dd
HH:mm:ss')?.trim()
- }}</span>
- </div>
- </ng-container>
- <ng-container *ngIf="collectorsTabSelectedIndex === 3">
- <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
- <span style="font-size: x-large; font-weight: bolder; color:
white">{{ item.collector.ip }}</span>
- </div>
- </ng-container>
- <ng-container *ngIf="collectorsTabSelectedIndex === 4">
- <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
- <span style="font-size: x-large; font-weight: bolder; color:
white">{{ item.collector.name }}</span>
- </div>
- </ng-container>
+
+ <div nz-row nzGutter="16" style="margin-top: 20px; height: 500px">
+ <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6
}" style="height: 100%">
+ <nz-spin [nzSpinning]="wordCloudDataLoading">
+ <nz-card class="dashboard-chart-card" style="border-radius: 16px
!important; height: 100%; width: 100%">
+ <angular-tag-cloud
+ class="br-4"
+ *ngIf="!wordCloudDataLoading"
+ (clicked)="onLabelCloudClick($event)"
+ [font]="'italic bold 6px monospace'"
+ [data]="wordCloudData"
+ [width]="1"
+ [height]="1"
+ [step]="2"
+ [strict]="true"
+ [randomizeAngle]="true"
+ [realignOnResize]="true"
+ [delay]="300"
+ [zoomOnHover]="{ scale: 1.2, transitionTime: 0.6, delay: 0.4 }"
+ [overflow]="false"
+ [background]="'transparent'"
+ >
+ </angular-tag-cloud>
</nz-card>
- </div>
- </nz-spin>
+ </nz-spin>
+ </div>
+ <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 12
}" style="height: 100%">
+ <nz-spin [nzSpinning]="appsCountLoading">
+ <nz-card class="dashboard-chart-card" style="border-radius: 16px
!important; height: inherit; overflow: hidden">
+ <div
+ echarts
+ [options]="appsCountEChartOption"
+ theme="default"
+ [autoResize]="true"
+ [loading]="appsCountLoading"
+ (chartClick)="onChartClick($event)"
+ (chartInit)="onAppsCountChartInit($event)"
+ style="width: 100%; height: inherit"
+ ></div>
+ </nz-card>
+ </nz-spin>
+ </div>
+ <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6
}" style="height: 100%">
+ <nz-spin [nzSpinning]="collectorsLoading">
+ <div style="overflow-y: auto; height: inherit">
+ <nz-card
+ *ngFor="let item of collectors; let i = index"
+ class="dashboard-chart-card"
+ nzBordered="false"
+ [nzTitle]="collectorCardTitle"
+ style="border-radius: 16px !important"
+ >
+ <ng-template #collectorCardTitle>
+ <span style="font-size: medium; font-weight: bold" nz-tooltip
[nzTooltipTitle]="item.collector.name">
+ <span nz-icon nzType="bug" nzTheme="outline"
style="margin-right: 4px"></span>
+ <span>{{ 'collector' | i18n }} : {{ item.collector.name
}}</span>
+ </span>
+ </ng-template>
+ <nz-card-tab>
+ <nz-tabset nzSize="small"
[(nzSelectedIndex)]="collectorsTabSelectedIndex">
+ <nz-tab [nzTitle]="'collector.status' | i18n" />
+ <nz-tab [nzTitle]="'collector.task' | i18n" />
+ <nz-tab [nzTitle]="'collector.start-time' | i18n" />
+ <nz-tab [nzTitle]="'collector.ip' | i18n" />
+ <nz-tab [nzTitle]="'collector.node' | i18n" />
+ </nz-tabset>
+ </nz-card-tab>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 0">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: transparent; padding: 2%">
+ <span [style]="'font-size: x-large; font-weight: bolder;' +
(item.collector.status == 0 ? 'color: green' : 'color: red')">
+ {{
+ item.collector.status == 0 ?
('monitor.collector.status.online' | i18n) :
('monitor.collector.status.offline' | i18n)
+ }}
+ </span>
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 1">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: transparent; padding: 2%">
+ <span style="font-size: xxx-large; font-weight: bolder">
+ {{ item.pinMonitorNum + item.dispatchMonitorNum }}
+ </span>
+ <br />
+ <nz-tag style="margin-bottom: 4%; font-weight: bolder">{{
'collector.pinned' | i18n }}: {{ item.pinMonitorNum }}</nz-tag>
+ <nz-tag style="margin-bottom: 4%; font-weight: bolder"
+ >{{ 'collector.dispatched' | i18n }}: {{
item.dispatchMonitorNum }}</nz-tag
+ >
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 2">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: transparent; padding: 2%">
+ <span style="font-size: x-large; font-weight: bolder">{{
+ (item.collector.gmtUpdate | date : 'YYYY-MM-dd
HH:mm:ss')?.trim()
+ }}</span>
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 3">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: transparent; padding: 2%">
+ <span style="font-size: x-large; font-weight: bolder">{{
item.collector.ip }}</span>
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 4">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: transparent; padding: 2%">
+ <span style="font-size: x-large; font-weight: bolder">{{
item.collector.name }}</span>
+ </div>
+ </ng-container>
+ </nz-card>
+ </div>
+ </nz-spin>
+ </div>
</div>
-</div>
-<div nz-row nzGutter="16" style="margin-top: 25px; height: 420px">
- <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 15
}" class="mb-md timeline-card" style="height: 100%">
- <nz-spin [nzSpinning]="alertContentLoading">
- <nz-card nzHoverable [nzTitle]="alertCardTitleTemplate"
[nzExtra]="extraTemplate" style="height: inherit; overflow: hidden">
- <nz-timeline nzMode="left">
- <nz-timeline-item *ngFor="let alert of alerts; let i = index"
[nzLabel]="(alert.activeAt | date : 'YYYY-MM-dd HH:mm:ss')?.trim()">
- <p style="font-weight: 400">
- <nz-tag *ngIf="alert.labels.severity == 'emergency'"
nzColor="red">
- <i nz-icon nzType="bell" nzTheme="outline"></i>
- <span>{{ 'alert.severity.0' | i18n }}</span>
- </nz-tag>
- <nz-tag *ngIf="alert.labels.severity == 'critical'"
nzColor="orange">
- <i nz-icon nzType="bell" nzTheme="outline"></i>
- <span>{{ 'alert.severity.1' | i18n }}</span>
- </nz-tag>
- <nz-tag *ngIf="alert.labels.severity == 'warning'"
nzColor="yellow">
- <i nz-icon nzType="bell" nzTheme="outline"></i>
- <span>{{ 'alert.severity.2' | i18n }}</span>
- </nz-tag>
- <nz-tag *ngIf="alert.labels.alertname">
- <span>{{ alert.labels.alertname }}</span>
- </nz-tag>
- {{ alert.content }}
- </p>
- </nz-timeline-item>
- </nz-timeline>
+ <div nz-row nzGutter="16" style="margin-top: 20px; height: 420px">
+ <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 24
}" class="timeline-card" style="height: 100%">
+ <nz-card
+ nzHoverable
+ [nzTitle]="alertCardTitleTemplate"
+ [nzExtra]="extraTemplate"
+ class="dashboard-card-alert"
+ style="border-radius: 16px !important; height: inherit; overflow:
hidden"
+ >
+ <div nz-row nzGutter="16" style="margin: 0; height: 100%">
+ <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{
span: 15 }" class="timeline-card" style="height: 100%">
+ <nz-spin [nzSpinning]="alertContentLoading">
+ <nz-timeline nzMode="left">
+ <nz-timeline-item
+ *ngFor="let alert of alerts; let i = index"
+ [nzLabel]="(alert.activeAt | date : 'YYYY-MM-dd
HH:mm:ss')?.trim()"
+ >
+ <p style="font-weight: 400">
+ <nz-tag *ngIf="alert.labels.severity == 'emergency'"
nzColor="red">
+ <i nz-icon nzType="bell" nzTheme="outline"></i>
+ <span>{{ 'alert.severity.0' | i18n }}</span>
+ </nz-tag>
+ <nz-tag *ngIf="alert.labels.severity == 'critical'"
nzColor="orange">
+ <i nz-icon nzType="bell" nzTheme="outline"></i>
+ <span>{{ 'alert.severity.1' | i18n }}</span>
+ </nz-tag>
+ <nz-tag *ngIf="alert.labels.severity == 'warning'"
nzColor="yellow">
+ <i nz-icon nzType="bell" nzTheme="outline"></i>
+ <span>{{ 'alert.severity.2' | i18n }}</span>
+ </nz-tag>
+ <nz-tag *ngIf="alert.labels.alertname">
+ <span>{{ alert.labels.alertname }}</span>
+ </nz-tag>
+ {{ alert.content }}
+ </p>
+ </nz-timeline-item>
+ </nz-timeline>
+ </nz-spin>
+ </div>
+ <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{
span: 9 }" class="timeline-card" style="height: 100%">
+ <nz-spin [nzSpinning]="alertsLoading">
+ <div
+ echarts
+ [options]="alertsEChartOption"
+ theme="default"
+ [autoResize]="true"
+ [loading]="alertsLoading"
+ (chartInit)="onAlertNumChartInit($event)"
+ style="width: 100%; height: inherit"
+ ></div>
+ </nz-spin>
+ </div>
+ </div>
</nz-card>
- </nz-spin>
- </div>
- <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 12 }" [nzMd]="{ span: 9 }"
class="mb-md" style="height: 100%">
- <nz-spin [nzSpinning]="alertsLoading">
- <div
- echarts
- [options]="alertsEChartOption"
- theme="default"
- [autoResize]="true"
- [loading]="alertsLoading"
- (chartInit)="onAlertNumChartInit($event)"
- style="width: 100%; height: inherit; padding-left: 30px"
- class="ant-card ant-card-bordered ant-card-hoverable"
- ></div>
- </nz-spin>
+ </div>
</div>
-</div>
-<ng-template #extraTemplate>
- <a [routerLink]="['/alert/center']" style="font-weight: bold">{{
'dashboard.alerts.enter' | i18n }}</a>
-</ng-template>
+ <ng-template #extraTemplate>
+ <a [routerLink]="['/alert/center']" style="font-weight: bold">{{
'dashboard.alerts.enter' | i18n }}</a>
+ </ng-template>
-<ng-template #alertCardTitleTemplate>
- <span style="font-size: 14px; font-weight: bold">{{ 'dashboard.alerts.title'
| i18n }}</span>
-</ng-template>
+ <ng-template #alertCardTitleTemplate>
+ <span style="font-size: 14px; font-weight: bold">{{
'dashboard.alerts.title' | i18n }}</span>
+ </ng-template>
+</div>
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.less
b/web-app/src/app/routes/dashboard/dashboard.component.less
index 0f8756cb6..4f13f5978 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.less
+++ b/web-app/src/app/routes/dashboard/dashboard.component.less
@@ -1,3 +1,5 @@
+@import '@delon/theme/index';
+@import '../../../styles/theme.less';
:host ::ng-deep {
.ant-timeline {
.ant-timeline-label {
@@ -54,11 +56,39 @@
overflow-y: auto;
margin-bottom: 12px;
}
+ .ant-timeline{
+ margin-top: 20px !important;
+ }
+ }
+ }
+ .dashboard-chart-card{
+ .ant-card-body {
+ padding: 10px !important;
+ height: inherit !important;
}
}
- .collectors {
+ .dashboard-card-alert {
.ant-card-body {
- padding: 6px;
+ padding: 20px 10px !important;
+ }
+ }
+ .dashboard-slider-tag{
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ padding:0 16px;
+ }
+ .slick-prev{
+ left: -12px;
+ }
+ .slick-next{
+ right: -12px;
+ }
+ .slick-prev,
+ .slick-next {
+ z-index:10;
+ &:before {
+ color: @primary-color !important;
}
}
}
@@ -115,6 +145,10 @@
}
}
+.dashboard-rounded{
+ border-radius: 16px !important;
+}
+
.hoverCard {
&:hover {
transform: scale(104%);
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts
b/web-app/src/app/routes/dashboard/dashboard.component.ts
index 21496e04b..e73c58e9a 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.ts
+++ b/web-app/src/app/routes/dashboard/dashboard.component.ts
@@ -186,13 +186,14 @@ export class DashboardComponent implements OnInit,
OnDestroy {
title: {
text: `{a|${this.i18nSvc.fanyi('dashboard.monitors.title')}}`,
subtext: `{b|${this.i18nSvc.fanyi('dashboard.monitors.sub-title')}}`,
+ show: false,
left: 'center',
textStyle: {
rich: {
a: {
fontWeight: 'bolder',
align: 'center',
- fontSize: 26
+ fontSize: 14
}
}
},
@@ -201,7 +202,7 @@ export class DashboardComponent implements OnInit,
OnDestroy {
b: {
fontWeight: 'normal',
align: 'center',
- fontSize: 14
+ fontSize: 12
}
}
}
@@ -246,34 +247,23 @@ export class DashboardComponent implements OnInit,
OnDestroy {
length: 30
},
label: {
- formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}} {per|{d}%} ',
- backgroundColor: '#F6F8FC',
- borderColor: '#8C8D8E',
- borderWidth: 1,
+ formatter: '{b|{b}}{per|({d}%)}',
+ backgroundColor: 'transparent',
+ borderColor: '#D9D9D9',
+ borderWidth: 0.5,
borderRadius: 4,
rich: {
- a: {
- color: '#6E7079',
- lineHeight: 22,
- align: 'center'
- },
- hr: {
- borderColor: '#8C8D8E',
- width: '100%',
- borderWidth: 1,
- height: 0
- },
b: {
- color: '#4C5058',
- fontSize: 14,
+ color: '#6E7079',
+ lineHeight: 30,
fontWeight: 'bold',
- lineHeight: 33
+ align: 'center',
+ padding: [4, 4]
},
per: {
- color: '#fff',
- backgroundColor: '#4C5058',
- padding: [3, 4],
- borderRadius: 4
+ color: '#6E7079',
+ align: 'center',
+ padding: [4, 4]
}
}
}
@@ -300,12 +290,19 @@ export class DashboardComponent implements OnInit,
OnDestroy {
type: 'shadow'
}
},
+ grid: {
+ top: '20%',
+ right: 0,
+ bottom: '20%',
+ left: 0
+ },
xAxis: {
type: 'category',
data: [this.i18nSvc.fanyi('alert.severity.2'),
this.i18nSvc.fanyi('alert.severity.1'), this.i18nSvc.fanyi('alert.severity.0')]
},
yAxis: {
- type: 'value'
+ type: 'value',
+ show: false
},
series: [
{
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
