+
{{ 'observability.metrics.total-series' | i18n }}{{ series.length }}
{{ 'observability.metrics.title' | i18n }}
>
-
-
{{ 'observability.metrics.trend' | i18n }}
{{ series.length }}
-
-
-
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+ | {{ 'observability.column.time' | i18n }} | {{ 'observability.column.value' | i18n }} | {{ 'observability.column.labels' | i18n }} |
+
+
+ | {{ row.timestamp | date : 'yyyy-MM-dd HH:mm:ss' }} | {{ row.value }} | {{ labelText(row.labels) }} |
+
+
+
+
-
-
{{ 'observability.metrics.samples' | i18n }}
- {{ rows.length }}
-
-
- | {{ 'observability.column.time' | i18n }} | {{ 'observability.column.value' | i18n }} | {{ 'observability.column.labels' | i18n }} |
-
-
- | {{ row.timestamp | date : 'yyyy-MM-dd HH:mm:ss' }} | {{ row.value }} | {{ labelText(row.labels) }} |
-
-
-
-
-
-
-
- - {{ label.key }}
- {{ label.value }}
-
-
-
-
+
+
+ - {{ label.key }}
- {{ label.value }}
+
+
+
+
+
diff --git a/web-app/src/app/routes/metrics/metrics-manage.component.less b/web-app/src/app/routes/metrics/metrics-manage.component.less
index 277be38e3ac..7994969001d 100644
--- a/web-app/src/app/routes/metrics/metrics-manage.component.less
+++ b/web-app/src/app/routes/metrics/metrics-manage.component.less
@@ -1,95 +1,31 @@
@import '~src/styles/theme';
-.signal-page {
- min-height: 100%;
+.metrics-query-fields {
+ grid-template-columns: minmax(320px, 1fr) 150px 112px;
}
-.page-heading {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- padding-bottom: 18px;
- border-bottom: 1px solid @border-color-split;
-}
-
-.page-heading h1 {
- margin: 0 0 5px;
- font-weight: 600;
- font-size: 24px;
-}
-
-.page-heading p,
-.result-count {
- margin: 0;
- color: @text-color-secondary;
-}
-
-.heading-actions {
- display: flex;
- gap: 16px;
- align-items: center;
-}
-
-.query-toolbar {
- display: grid;
- grid-template-columns: minmax(400px, 1fr) 140px auto;
- gap: 8px;
- align-items: center;
- padding: 16px 0;
-}
-
-.query-toolbar app-signal-time-range {
- grid-column: 1 / -1;
+.metrics-overview {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
}
.promql-input {
width: 100%;
}
-.chart-region {
- min-height: 240px;
- background: @component-background;
- border: 1px solid @border-color-split;
-}
-
.metric-chart {
- height: 240px;
-}
-
-.overview-strip {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- margin-bottom: 0;
- border: 1px solid @border-color-split;
-}
-
-.overview-strip div {
- display: flex;
- flex-direction: column;
- gap: 5px;
- padding: 10px 16px;
- border-right: 1px solid @border-color-split;
+ height: 196px;
}
-.overview-strip div:last-child {
- border-right: 0;
-}
-
-.overview-strip span {
- color: @text-color-secondary;
- font-size: 12px;
-}
-
-.overview-strip strong {
- font-size: 20px;
+.loading-region {
+ opacity: 0.55;
}
.series-strip {
display: flex;
gap: 6px;
- padding: 8px 0;
+ padding: 8px 12px;
overflow-x: auto;
- border-bottom: 1px solid @border-color-split;
+ border-top: 1px solid @border-color-split;
}
.series-strip button {
@@ -100,31 +36,6 @@
text-overflow: ellipsis;
}
-.chart-region nz-empty {
- display: block;
- padding-top: 60px;
-}
-
-.loading-region {
- opacity: 0.55;
-}
-
-.section-title {
- display: flex;
- gap: 8px;
- align-items: center;
- margin: 18px 0 10px;
-}
-
-.section-title h2 {
- margin: 0;
- font-size: 16px;
-}
-
-.section-title span {
- color: @text-color-secondary;
-}
-
.mono {
max-width: 640px;
overflow: hidden;
@@ -149,12 +60,9 @@
.detail-list dt {
color: @text-color-secondary;
}
-@media (max-width: 1400px) {
- .query-toolbar {
- grid-template-columns: minmax(320px, 1fr) 130px auto;
- }
- .query-toolbar > button:last-child {
- grid-column: -2 / -1;
+@media (max-width: 1000px) {
+ .metrics-query-fields {
+ grid-template-columns: minmax(260px, 1fr) 130px 104px;
}
}
diff --git a/web-app/src/app/routes/metrics/metrics-manage.component.ts b/web-app/src/app/routes/metrics/metrics-manage.component.ts
index a6d8dfe0695..61242623dd0 100644
--- a/web-app/src/app/routes/metrics/metrics-manage.component.ts
+++ b/web-app/src/app/routes/metrics/metrics-manage.component.ts
@@ -42,6 +42,7 @@ import {
} from '../observability/signal-query-context';
import { SignalStorageGuideComponent } from '../observability/signal-storage-guide.component';
import { SignalTimeRangeComponent } from '../observability/signal-time-range.component';
+import { SignalWorkspaceComponent } from '../observability/signal-workspace.component';
interface MetricTableRow {
timestamp: number;
@@ -64,7 +65,8 @@ interface MetricTableRow {
NzAutocompleteModule,
SignalNavigationComponent,
SignalStorageGuideComponent,
- SignalTimeRangeComponent
+ SignalTimeRangeComponent,
+ SignalWorkspaceComponent
],
templateUrl: './metrics-manage.component.html',
styleUrl: './metrics-manage.component.less'
diff --git a/web-app/src/app/routes/observability/signal-navigation.component.ts b/web-app/src/app/routes/observability/signal-navigation.component.ts
index c1bd3389fef..d60b1615b29 100644
--- a/web-app/src/app/routes/observability/signal-navigation.component.ts
+++ b/web-app/src/app/routes/observability/signal-navigation.component.ts
@@ -31,10 +31,12 @@ type SignalKind = 'metrics' | 'logs' | 'traces';
standalone: true,
imports: [I18nPipe, RouterModule, SharedModule],
template: `
-
-