refactor: clean up code formatting and improve readability across multiple components

This commit is contained in:
Nawaz Dhandala
2026-03-25 19:08:11 +00:00
parent e0ae2701ba
commit d5a136a662
17 changed files with 178 additions and 162 deletions

View File

@@ -186,15 +186,22 @@ const KubernetesEnvVarsTab: FunctionComponent<ComponentProps> = (
{/* Search bar */}
<Card
title="Environment Variables"
description={`${totalEnvCount} variable${totalEnvCount !== 1 ? "s" : ""} across ${allContainers.filter((c: KubernetesContainerSpec) => { return c.env.length > 0; }).length} container${allContainers.filter((c: KubernetesContainerSpec) => { return c.env.length > 0; }).length !== 1 ? "s" : ""}`}
description={`${totalEnvCount} variable${totalEnvCount !== 1 ? "s" : ""} across ${
allContainers.filter((c: KubernetesContainerSpec) => {
return c.env.length > 0;
}).length
} container${
allContainers.filter((c: KubernetesContainerSpec) => {
return c.env.length > 0;
}).length !== 1
? "s"
: ""
}`}
>
<div className="flex items-center gap-3">
<div className="relative flex-1">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<Icon
icon={IconProp.Search}
className="h-4 w-4 text-gray-400"
/>
<Icon icon={IconProp.Search} className="h-4 w-4 text-gray-400" />
</div>
<Input
placeholder="Search environment variables..."

View File

@@ -7,6 +7,7 @@ import React, {
import MetricView from "../../Components/Metrics/MetricView";
import MetricViewData from "Common/Types/Metrics/MetricViewData";
import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData";
import InBetween from "Common/Types/BaseDatabase/InBetween";
import RangeStartAndEndDateTime, {
RangeStartAndEndDateTimeUtil,
} from "Common/Types/Time/RangeStartAndEndDateTime";
@@ -34,20 +35,17 @@ const KubernetesMetricsTab: FunctionComponent<ComponentProps> = (
const handleTimeRangeChange: (
newTimeRange: RangeStartAndEndDateTime,
) => void = useCallback(
(newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
const dateRange =
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
setMetricViewData((prev: MetricViewData) => {
return {
...prev,
startAndEndDate: dateRange,
};
});
},
[],
);
) => void = useCallback((newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
const dateRange: InBetween<Date> =
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
setMetricViewData((prev: MetricViewData) => {
return {
...prev,
startAndEndDate: dateRange,
};
});
}, []);
return (
<div>

View File

@@ -186,15 +186,22 @@ const KubernetesVolumeMountsTab: FunctionComponent<ComponentProps> = (
{/* Search bar */}
<Card
title="Volume Mounts"
description={`${totalMountCount} mount${totalMountCount !== 1 ? "s" : ""} across ${allContainers.filter((c: KubernetesContainerSpec) => { return c.volumeMounts.length > 0; }).length} container${allContainers.filter((c: KubernetesContainerSpec) => { return c.volumeMounts.length > 0; }).length !== 1 ? "s" : ""}`}
description={`${totalMountCount} mount${totalMountCount !== 1 ? "s" : ""} across ${
allContainers.filter((c: KubernetesContainerSpec) => {
return c.volumeMounts.length > 0;
}).length
} container${
allContainers.filter((c: KubernetesContainerSpec) => {
return c.volumeMounts.length > 0;
}).length !== 1
? "s"
: ""
}`}
>
<div className="flex items-center gap-3">
<div className="relative flex-1">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<Icon
icon={IconProp.Search}
className="h-4 w-4 text-gray-400"
/>
<Icon icon={IconProp.Search} className="h-4 w-4 text-gray-400" />
</div>
<Input
placeholder="Search by volume name or mount path..."

View File

@@ -329,7 +329,9 @@ const DashboardLogsViewer: FunctionComponent<ComponentProps> = (
return undefined;
}
const attributes: Record<string, string> | undefined = (props.logQuery as any).attributes as Record<string, string> | undefined;
const attributes: Record<string, string> | undefined = (
props.logQuery as any
).attributes as Record<string, string> | undefined;
if (!attributes || Object.keys(attributes).length === 0) {
return undefined;

View File

@@ -465,7 +465,11 @@ const MetricView: FunctionComponent<ComponentProps> = (
{metricResultsError && <ErrorMessage message={metricResultsError} />}
{!isMetricResultsLoading && !metricResultsError && (
<div className={props.hideCardInCharts ? "" : "grid grid-cols-1 gap-4 mt-3"}>
<div
className={
props.hideCardInCharts ? "" : "grid grid-cols-1 gap-4 mt-3"
}
>
{/** charts */}
<MetricCharts
hideCard={props.hideCardInCharts}

View File

@@ -28,6 +28,7 @@ import MetricQueryConfigData, {
ChartSeries,
} from "Common/Types/Metrics/MetricQueryConfigData";
import MetricViewData from "Common/Types/Metrics/MetricViewData";
import InBetween from "Common/Types/BaseDatabase/InBetween";
import RangeStartAndEndDateTime, {
RangeStartAndEndDateTimeUtil,
} from "Common/Types/Time/RangeStartAndEndDateTime";
@@ -281,19 +282,17 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
const handleTimeRangeChange: (
newTimeRange: RangeStartAndEndDateTime,
) => void = useCallback(
(newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
const dateRange = RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
setMetricViewData((prev: MetricViewData) => {
return {
...prev,
startAndEndDate: dateRange,
};
});
},
[],
);
) => void = useCallback((newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
const dateRange: InBetween<Date> =
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange);
setMetricViewData((prev: MetricViewData) => {
return {
...prev,
startAndEndDate: dateRange,
};
});
}, []);
if (isLoading) {
return <PageLoader isVisible={true} />;

View File

@@ -32,9 +32,11 @@ import TimeRange from "Common/Types/Time/TimeRange";
import RangeStartAndEndDateView from "Common/UI/Components/Date/RangeStartAndEndDateView";
import InBetween from "Common/Types/BaseDatabase/InBetween";
// ──────────────────────────────────────────────────────────────────────────────
// Query builder helper
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Query builder helper
* ──────────────────────────────────────────────────────────────────────────────
*/
interface MetricQuerySpec {
variable: string;
@@ -87,9 +89,11 @@ function buildMetricViewData(
};
}
// ──────────────────────────────────────────────────────────────────────────────
// Section component — Card with time picker in rightElement
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Section component — Card with time picker in rightElement
* ──────────────────────────────────────────────────────────────────────────────
*/
interface SectionProps {
title: string;
@@ -130,9 +134,11 @@ const ControlPlaneSection: FunctionComponent<SectionProps> = (
);
};
// ──────────────────────────────────────────────────────────────────────────────
// Metric specs: etcd
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Metric specs: etcd
* ──────────────────────────────────────────────────────────────────────────────
*/
function getEtcdQueries(cluster: string): Array<MetricQueryConfigData> {
return [
@@ -241,9 +247,11 @@ function getEtcdQueries(cluster: string): Array<MetricQueryConfigData> {
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Metric specs: API Server
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Metric specs: API Server
* ──────────────────────────────────────────────────────────────────────────────
*/
function getApiServerQueries(cluster: string): Array<MetricQueryConfigData> {
return [
@@ -326,9 +334,11 @@ function getApiServerQueries(cluster: string): Array<MetricQueryConfigData> {
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Metric specs: Scheduler
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Metric specs: Scheduler
* ──────────────────────────────────────────────────────────────────────────────
*/
function getSchedulerQueries(cluster: string): Array<MetricQueryConfigData> {
return [
@@ -400,9 +410,11 @@ function getSchedulerQueries(cluster: string): Array<MetricQueryConfigData> {
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Metric specs: Controller Manager
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Metric specs: Controller Manager
* ──────────────────────────────────────────────────────────────────────────────
*/
function getControllerManagerQueries(
cluster: string,
@@ -474,9 +486,11 @@ function getControllerManagerQueries(
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Metric specs: CoreDNS
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Metric specs: CoreDNS
* ──────────────────────────────────────────────────────────────────────────────
*/
function getCoreDnsQueries(cluster: string): Array<MetricQueryConfigData> {
return [
@@ -598,9 +612,11 @@ function getCoreDnsQueries(cluster: string): Array<MetricQueryConfigData> {
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Metric specs: kube-proxy
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Metric specs: kube-proxy
* ──────────────────────────────────────────────────────────────────────────────
*/
function getKubeProxyQueries(cluster: string): Array<MetricQueryConfigData> {
return [
@@ -650,8 +666,7 @@ function getKubeProxyQueries(cluster: string): Array<MetricQueryConfigData> {
"Timestamp of the last successful proxy rules sync. Stale values indicate kube-proxy issues.",
legend: "Timestamp",
legendUnit: "",
metricName:
"kubeproxy_sync_proxy_rules_last_timestamp_seconds",
metricName: "kubeproxy_sync_proxy_rules_last_timestamp_seconds",
aggregation: AggregationType.Max,
},
cluster,
@@ -660,8 +675,7 @@ function getKubeProxyQueries(cluster: string): Array<MetricQueryConfigData> {
{
variable: "kubeproxy_service_changes",
title: "Service Changes",
description:
"Number of service change events processed by kube-proxy.",
description: "Number of service change events processed by kube-proxy.",
legend: "Changes",
legendUnit: "",
metricName: "kubeproxy_sync_proxy_rules_service_changes_total",
@@ -685,9 +699,11 @@ function getKubeProxyQueries(cluster: string): Array<MetricQueryConfigData> {
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Main component
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Main component
* ──────────────────────────────────────────────────────────────────────────────
*/
const KubernetesClusterControlPlane: FunctionComponent<
PageComponentProps
@@ -710,15 +726,12 @@ const KubernetesClusterControlPlane: FunctionComponent<
const handleTimeRangeChange: (
newTimeRange: RangeStartAndEndDateTime,
) => void = useCallback(
(newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
setStartAndEndDate(
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange),
);
},
[],
);
) => void = useCallback((newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
setStartAndEndDate(
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange),
);
}, []);
const fetchCluster: PromiseVoidFunction = async (): Promise<void> => {
setIsLoading(true);

View File

@@ -320,13 +320,8 @@ const KubernetesClusterPodDetail: FunctionComponent<
const tag: string | undefined =
parts.length > 1 ? parts[parts.length - 1] : undefined;
return (
<div
key={idx}
className="flex items-center gap-2 text-sm"
>
<span className="font-mono text-gray-900">
{imageName}
</span>
<div key={idx} className="flex items-center gap-2 text-sm">
<span className="font-mono text-gray-900">{imageName}</span>
{tag && (
<span className="inline-flex px-1.5 py-0.5 text-xs font-medium rounded bg-indigo-50 text-indigo-700">
{tag}

View File

@@ -32,9 +32,11 @@ import TimeRange from "Common/Types/Time/TimeRange";
import RangeStartAndEndDateView from "Common/UI/Components/Date/RangeStartAndEndDateView";
import KubernetesResourceUtils from "../Utils/KubernetesResourceUtils";
// ──────────────────────────────────────────────────────────────────────────────
// Query builder helper
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Query builder helper
* ──────────────────────────────────────────────────────────────────────────────
*/
interface MetricQuerySpec {
variable: string;
@@ -87,9 +89,11 @@ function buildMetricViewData(
};
}
// ──────────────────────────────────────────────────────────────────────────────
// Section component
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Section component
* ──────────────────────────────────────────────────────────────────────────────
*/
interface SectionProps {
title: string;
@@ -130,13 +134,13 @@ const MeshSection: FunctionComponent<SectionProps> = (
);
};
// ──────────────────────────────────────────────────────────────────────────────
// Istio metric specs
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Istio metric specs
* ──────────────────────────────────────────────────────────────────────────────
*/
function getIstioTrafficQueries(
cluster: string,
): Array<MetricQueryConfigData> {
function getIstioTrafficQueries(cluster: string): Array<MetricQueryConfigData> {
return [
buildQuery(
{
@@ -246,9 +250,7 @@ function getIstioTrafficQueries(
];
}
function getIstioPilotQueries(
cluster: string,
): Array<MetricQueryConfigData> {
function getIstioPilotQueries(cluster: string): Array<MetricQueryConfigData> {
return [
buildQuery(
{
@@ -319,8 +321,7 @@ function getIstioPilotQueries(
{
variable: "pilot_conflict_outbound",
title: "Outbound Listener Conflicts",
description:
"Number of outbound listener conflicts between services.",
description: "Number of outbound listener conflicts between services.",
legend: "Conflicts",
legendUnit: "",
metricName: "pilot_conflict_outbound_listener_tcp_over_current_tcp",
@@ -401,9 +402,11 @@ function getEnvoyQueries(cluster: string): Array<MetricQueryConfigData> {
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Linkerd metric specs
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Linkerd metric specs
* ──────────────────────────────────────────────────────────────────────────────
*/
function getLinkerdTrafficQueries(
cluster: string,
@@ -551,9 +554,11 @@ function getLinkerdControlPlaneQueries(
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Cilium metric specs
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Cilium metric specs
* ──────────────────────────────────────────────────────────────────────────────
*/
function getCiliumDataPlaneQueries(
cluster: string,
@@ -658,8 +663,7 @@ function getCiliumDataPlaneQueries(
"Time to regenerate BPF programs. High values impact pod readiness.",
legend: "Duration",
legendUnit: "seconds",
metricName:
"cilium_endpoint_regeneration_time_stats_seconds_sum",
metricName: "cilium_endpoint_regeneration_time_stats_seconds_sum",
aggregation: AggregationType.Avg,
},
cluster,
@@ -752,9 +756,7 @@ function getCiliumControlPlaneQueries(
];
}
function getCiliumHubbleQueries(
cluster: string,
): Array<MetricQueryConfigData> {
function getCiliumHubbleQueries(cluster: string): Array<MetricQueryConfigData> {
return [
buildQuery(
{
@@ -823,9 +825,11 @@ function getCiliumHubbleQueries(
];
}
// ──────────────────────────────────────────────────────────────────────────────
// Main component
// ──────────────────────────────────────────────────────────────────────────────
/*
* ──────────────────────────────────────────────────────────────────────────────
* Main component
* ──────────────────────────────────────────────────────────────────────────────
*/
const KubernetesClusterServiceMesh: FunctionComponent<
PageComponentProps
@@ -848,15 +852,12 @@ const KubernetesClusterServiceMesh: FunctionComponent<
const handleTimeRangeChange: (
newTimeRange: RangeStartAndEndDateTime,
) => void = useCallback(
(newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
setStartAndEndDate(
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange),
);
},
[],
);
) => void = useCallback((newTimeRange: RangeStartAndEndDateTime): void => {
setTimeRange(newTimeRange);
setStartAndEndDate(
RangeStartAndEndDateTimeUtil.getStartAndEndDate(newTimeRange),
);
}, []);
const fetchCluster: PromiseVoidFunction = async (): Promise<void> => {
setIsLoading(true);

View File

@@ -6,9 +6,7 @@ import BadDataException from "Common/Types/Exception/BadDataException";
import { JSONObject } from "Common/Types/JSON";
import MasterAdminAuthorization from "Common/Server/Middleware/MasterAdminAuthorization";
import UserService from "Common/Server/Services/UserService";
import Markdown, {
MarkdownContentType,
} from "Common/Server/Types/Markdown";
import Markdown, { MarkdownContentType } from "Common/Server/Types/Markdown";
import Express, {
ExpressRequest,
ExpressResponse,

View File

@@ -591,7 +591,12 @@ export class LogAggregationService {
statement: Statement,
request: Pick<
HistogramRequest,
"serviceIds" | "severityTexts" | "bodySearchText" | "traceIds" | "spanIds" | "attributes"
| "serviceIds"
| "severityTexts"
| "bodySearchText"
| "traceIds"
| "spanIds"
| "attributes"
>,
): void {
if (request.serviceIds && request.serviceIds.length > 0) {

View File

@@ -38,10 +38,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
return index === props.charts.length - 1;
};
type GetChartContentFunction = (
chart: Chart,
index: number,
) => ReactElement;
type GetChartContentFunction = (chart: Chart, index: number) => ReactElement;
const getChartContent: GetChartContentFunction = (
chart: Chart,

View File

@@ -345,6 +345,7 @@ const Legend: React.ForwardRefExoticComponent<
Legend.displayName = "Legend";
/* eslint-disable react/no-unused-prop-types */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type PayloadItem = {
category: string;
@@ -355,6 +356,7 @@ type PayloadItem = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
payload: any;
};
/* eslint-enable react/no-unused-prop-types */
const ChartLegend: (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -461,14 +463,7 @@ const ChartTooltip: ({
)}
>
<div className={cx("border-b border-inherit px-4 py-2")}>
<p
className={cx(
"font-medium",
"text-gray-900",
)}
>
{label}
</p>
<p className={cx("font-medium", "text-gray-900")}>{label}</p>
</div>
<div className={cx("space-y-1 px-4 py-2")}>
{legendPayload.map(
@@ -745,10 +740,7 @@ const AreaChart: React.ForwardRefExoticComponent<
}
fill=""
stroke=""
className={cx(
"text-xs",
"fill-gray-500",
)}
className={cx("text-xs", "fill-gray-500")}
tickLine={false}
axisLine={false}
minTickGap={tickGap}
@@ -773,10 +765,7 @@ const AreaChart: React.ForwardRefExoticComponent<
tick={{ transform: "translate(-3, 0)" }}
fill=""
stroke=""
className={cx(
"text-xs",
"fill-gray-500",
)}
className={cx("text-xs", "fill-gray-500")}
tickFormatter={valueFormatter}
allowDecimals={allowDecimals}
>
@@ -803,8 +792,8 @@ const AreaChart: React.ForwardRefExoticComponent<
content={({ active, payload, label }: any) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const cleanPayload: TooltipProps["payload"] = payload
// eslint-disable-next-line @typescript-eslint/no-explicit-any
? payload.map((item: any) => {
? // eslint-disable-next-line @typescript-eslint/no-explicit-any
payload.map((item: any) => {
return {
category: item.dataKey,
value: item.value,

View File

@@ -27,8 +27,10 @@ export default class XAxisUtil {
const totalWeeks: number = totalDays / 7;
const totalMonths: number = totalDays / 30;
// Thresholds are chosen so that the number of tick labels
// stays between ~6 and ~15 for any range, keeping the axis readable.
/*
* Thresholds are chosen so that the number of tick labels
* stays between ~6 and ~15 for any range, keeping the axis readable.
*/
if (totalSeconds <= 15) {
return XAxisPrecision.EVERY_SECOND;

View File

@@ -130,9 +130,7 @@ const ConditionsTable: FunctionComponent<ComponentProps> = (
disableSort: true,
getElement: (condition: Condition): ReactElement => {
return (
<span className="text-gray-600">
{condition.reason || "-"}
</span>
<span className="text-gray-600">{condition.reason || "-"}</span>
);
},
},

View File

@@ -71,7 +71,11 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
.filter((filter: Filter<T>) => {
if (filter.isAdvancedFilter) {
// Hide advanced filters if not toggled on, or if they are still loading/errored
return showMoreFilters && !props.isFilterLoading && !props.filterError;
return (
showMoreFilters &&
!props.isFilterLoading &&
!props.filterError
);
}
return true;
})

View File

@@ -37,10 +37,7 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700"
title={`${filter.displayKey}: ${filter.displayValue} (applied filter)`}
>
<Icon
icon={IconProp.Lock}
className="h-2.5 w-2.5 text-gray-400"
/>
<Icon icon={IconProp.Lock} className="h-2.5 w-2.5 text-gray-400" />
<span className="font-medium text-gray-500">
{filter.displayKey}:
</span>