github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

feat: replace RangeStartAndEndDateEdit with RangeStartAndEndDateView and wrap metrics in Card component in KubernetesMetricsTab and MonitorMetrics

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-03-25 12:54:15 +00:00
parent d03056be2d
commit 208e8b1fdb
3 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
App/FeatureSet/Dashboard/src/Components/Kubernetes/KubernetesMetricsTab.tsx
View File

@@ -11,7 +11,8 @@ import RangeStartAndEndDateTime, {
RangeStartAndEndDateTimeUtil,
} from "Common/Types/Time/RangeStartAndEndDateTime";
import TimeRange from "Common/Types/Time/TimeRange";
import RangeStartAndEndDateEdit from "Common/UI/Components/Date/RangeStartAndEndDateEdit";
import RangeStartAndEndDateView from "Common/UI/Components/Date/RangeStartAndEndDateView";
import Card from "Common/UI/Components/Card/Card";
export interface ComponentProps {
queryConfigs: Array<MetricQueryConfigData>;
@@ -37,7 +38,8 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
) => void = useCallback(
(newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
const dateRange = RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
const dateRange =
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
setMetricViewData((prev: MetricViewData) => {
return {
...prev,
@@ -49,15 +51,16 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
);
return (
<div>
<div className="mb-4 flex items-center justify-end">
<div className="w-64">
<RangeStartAndEndDateEdit
value={timeRange}
onChange={handleTimeRangeChange}
/>
</div>
</div>
<Card
title="Metrics"
description="Resource utilization metrics for this pod."
rightElement={
<RangeStartAndEndDateView
dashboardStartAndEndDate={timeRange}
onChange={handleTimeRangeChange}
/>
}
>
<MetricView
data={{
...metricViewData,
@@ -65,6 +68,7 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
}}
hideQueryElements={true}
hideStartAndEndDate={true}
hideCardInCharts={true}
onChange={(data: MetricViewData) => {
setMetricViewData({
...data,
@@ -73,7 +77,7 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
});
}}
/>
</div>
</Card>
);
};

25
App/FeatureSet/Dashboard/src/Components/Monitor/MonitorMetrics.tsx
View File

@@ -32,7 +32,8 @@ import RangeStartAndEndDateTime, {
RangeStartAndEndDateTimeUtil,
} from "Common/Types/Time/RangeStartAndEndDateTime";
import TimeRange from "Common/Types/Time/TimeRange";
import RangeStartAndEndDateEdit from "Common/UI/Components/Date/RangeStartAndEndDateEdit";
import RangeStartAndEndDateView from "Common/UI/Components/Date/RangeStartAndEndDateView";
import Card from "Common/UI/Components/Card/Card";
export interface ComponentProps {
monitorId: ObjectID;
@@ -307,19 +308,21 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
}
return (
<div>
<div className="mb-4 flex items-center justify-end">
<div className="w-64">
<RangeStartAndEndDateEdit
value={timeRange}
onChange={handleTimeRangeChange}
/>
</div>
</div>
<Card
title="Monitor Metrics"
description="Performance metrics collected from this monitor."
rightElement={
<RangeStartAndEndDateView
dashboardStartAndEndDate={timeRange}
onChange={handleTimeRangeChange}
/>
}
>
<MetricView
data={metricViewData}
hideQueryElements={true}
hideStartAndEndDate={true}
hideCardInCharts={true}
onChange={(data: MetricViewData) => {
setMetricViewData({
...data,
@@ -328,7 +331,7 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
});
}}
/>
</div>
</Card>
);
};

11
Common/UI/Components/Charts/ChartGroup/ChartGroup.tsx
View File

@@ -37,6 +37,10 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
const gridCols: string =
props.charts.length > 1 ? "lg:grid-cols-2" : "lg:grid-cols-1";
const isLastChart: (index: number) => boolean = (index: number): boolean => {
return index === props.charts.length - 1;
};
return (
<div
className={`grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0`}
@@ -46,6 +50,11 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
? ""
: "rounded-lg border border-gray-200 bg-white shadow-sm";
const dividerClass: string =
props.hideCard && !isLastChart(index)
? "border-b border-gray-200 pb-5"
: "";
const chartContent: ReactElement = (() => {
switch (chart.type) {
case ChartType.LINE:
@@ -83,7 +92,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
return (
<div
key={index}
className={`p-5 ${cardClass} ${props.chartCssClass || ""}`}
className={`p-5 ${cardClass} ${dividerClass} ${props.chartCssClass || ""}`}
>
<h2
data-testid="card-details-heading"