From 95e82cf254d51783260ffd410e21fafd1e4feec2 Mon Sep 17 00:00:00 2001 From: Yashaswee Kesharwani Date: Sat, 12 Jul 2025 23:17:41 +0530 Subject: [PATCH 1/6] feat: resolve #2598 improve timezone search UX --- .../Create/Components/Tabs/Settings.jsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx b/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx index a1ba117b0..5ed9bb122 100644 --- a/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx +++ b/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx @@ -4,7 +4,7 @@ import { TabPanel } from "@mui/lab"; import ConfigBox from "../../../../../Components/ConfigBox"; import Checkbox from "../../../../../Components/Inputs/Checkbox"; import TextInput from "../../../../../Components/Inputs/TextInput"; -import Select from "../../../../../Components/Inputs/Select"; +import Search from "../../../../../Components/Inputs/Search"; import ImageUpload from "../../../../../Components/Inputs/ImageUpload"; import ColorPicker from "../../../../../Components/Inputs/ColorPicker"; import Progress from "../Progress"; @@ -14,6 +14,8 @@ import { useTheme } from "@emotion/react"; import timezones from "../../../../../Utils/timezones.json"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; +import { useState } from "react"; + const TabSettings = ({ isCreate, @@ -28,6 +30,7 @@ const TabSettings = ({ // Utils const theme = useTheme(); const { t } = useTranslation(); + const [timezoneValue, setTimezoneValue] = useState(""); return ( @@ -101,13 +104,21 @@ const TabSettings = ({ - setRawInput(val)} + handleChange={handleTimezoneChange} + isAdorned={false} + unit="timezone" /> diff --git a/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx b/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx index de47cfc78..0bc6426bc 100644 --- a/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx +++ b/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx @@ -14,7 +14,7 @@ import { useTheme } from "@emotion/react"; import timezones from "../../../../../Utils/timezones.json"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; -import { useState } from "react"; +import { useMemo, useState, useCallback } from "react"; const TabSettings = ({ isCreate, @@ -29,7 +29,25 @@ const TabSettings = ({ // Utils const theme = useTheme(); const { t } = useTranslation(); - const [timezoneValue, setTimezoneValue] = useState(""); + const [rawInput, setRawInput] = useState(""); + + const selectedTimezone = useMemo( + () => timezones.find((tz) => tz._id === form.timezone) ?? null, + [form.timezone, timezones] + ); + + const handleTimezoneChange = useCallback( + (newValue) => { + setRawInput(""); + handleFormChange({ + target: { + name: "timezone", + value: newValue?._id ?? "", + }, + }); + }, + [handleFormChange] + ); return ( @@ -108,16 +126,12 @@ const TabSettings = ({ label={t("settingsDisplayTimezone")} options={timezones} filteredBy="name" - value={timezones.find((tz) => tz._id === form.timezone) || null} - inputValue={timezoneValue} - handleInputChange={(newVal) => setTimezoneValue(newVal)} - handleChange={(newValue) => { - setTimezoneValue(""); - handleFormChange({ - target: { name: "timezone", value: newValue?._id || "" }, - }); - }} + value={selectedTimezone} + inputValue={rawInput} + handleInputChange={(newVal) => setRawInput(newVal)} + handleChange={handleTimezoneChange} isAdorned={false} + unit="timezone" /> diff --git a/client/src/locales/en.json b/client/src/locales/en.json index ddc07f166..1018d6c4e 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -224,6 +224,9 @@ "unknownError": "Unknown error" } }, + "general": { + "noOptionsFound": "No {{unit}} found" + }, "commonSave": "Save", "commonSaving": "Saving...", "companyName": "Company name", @@ -505,7 +508,6 @@ "failureAddDemoMonitors": "Failed to add demo monitors", "successAddDemoMonitors": "Successfully added demo monitors" }, - "monitorState": { "active": "Active", "paused": "Paused", From 39779b9dd55ad02c5e570bb5dca373c054d3f0f7 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 14 Jul 2025 16:26:24 -0700 Subject: [PATCH 4/6] refacotr interval to be self documenting --- server/controllers/diagnosticController.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/server/controllers/diagnosticController.js b/server/controllers/diagnosticController.js index 4410a28a5..e5368866a 100755 --- a/server/controllers/diagnosticController.js +++ b/server/controllers/diagnosticController.js @@ -56,12 +56,13 @@ class DiagnosticController { async getCPUUsage() { try { const startUsage = process.cpuUsage(); - await new Promise((resolve) => setTimeout(resolve, 1000)); + const timingPeriod = 1000; // measured in ms + await new Promise((resolve) => setTimeout(resolve, timingPeriod)); const endUsage = process.cpuUsage(startUsage); const cpuUsage = { userUsageMs: endUsage.user / 1000, systemUsageMs: endUsage.system / 1000, - usagePercentage: ((endUsage.user + endUsage.system) / 1000 / 1000) * 100, + usagePercentage: ((endUsage.user + endUsage.system) / 1000 / timingPeriod) * 100, }; return cpuUsage; } catch (error) { From f62350fea093756450dce8cdee5de971e39dd41d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 14 Jul 2025 16:26:34 -0700 Subject: [PATCH 5/6] add refresh button --- client/src/Hooks/logHooks.js | 28 ++++++++++++--------- client/src/Pages/Logs/Diagnostics/index.jsx | 14 +++++++++-- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/client/src/Hooks/logHooks.js b/client/src/Hooks/logHooks.js index 4b8657cbf..b954efb4b 100644 --- a/client/src/Hooks/logHooks.js +++ b/client/src/Hooks/logHooks.js @@ -89,22 +89,26 @@ const useFetchDiagnostics = () => { const [error, setError] = useState(undefined); const [diagnostics, setDiagnostics] = useState(undefined); + const fetchDiagnostics = async () => { + try { + setIsLoading(true); + const response = await networkService.getDiagnostics(); + setDiagnostics(response.data.data); + } catch (error) { + createToast({ + body: error.message, + }); + setError(error); + } finally { + setIsLoading(false); + } + }; + useEffect(() => { - const fetchDiagnostics = async () => { - try { - setIsLoading(true); - const response = await networkService.getDiagnostics(); - setDiagnostics(response.data.data); - } catch (error) { - setError(error); - } finally { - setIsLoading(false); - } - }; fetchDiagnostics(); }, []); - return [diagnostics, isLoading, error]; + return [diagnostics, fetchDiagnostics, isLoading, error]; }; export { useFetchLogs, useFetchQueueData, useFlushQueue, useFetchDiagnostics }; diff --git a/client/src/Pages/Logs/Diagnostics/index.jsx b/client/src/Pages/Logs/Diagnostics/index.jsx index e000c05bc..7c5d1f5a9 100644 --- a/client/src/Pages/Logs/Diagnostics/index.jsx +++ b/client/src/Pages/Logs/Diagnostics/index.jsx @@ -4,9 +4,9 @@ import Typography from "@mui/material/Typography"; import Gauges from "./components/gauges"; import Stats from "./components/stats"; import Divider from "@mui/material/Divider"; +import Button from "@mui/material/Button"; import { useTheme } from "@emotion/react"; -import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useFetchDiagnostics } from "../../../Hooks/logHooks"; @@ -16,7 +16,7 @@ const Diagnostics = () => { // Hooks const theme = useTheme(); const { t } = useTranslation(); - const [diagnostics, isLoading, error] = useFetchDiagnostics(); + const [diagnostics, fetchDiagnostics, isLoading, error] = useFetchDiagnostics(); // Setup return ( @@ -36,6 +36,16 @@ const Diagnostics = () => { diagnostics={diagnostics} isLoading={isLoading} /> + + + ); From fe44bc989a8e9e8f5d1920b575dd3c10afe84ff1 Mon Sep 17 00:00:00 2001 From: Yashaswee Kesharwani Date: Wed, 16 Jul 2025 00:59:22 +0530 Subject: [PATCH 6/6] fix: use-memo dependency array and prop-types error --- client/src/Components/Inputs/Search/index.jsx | 3 ++- client/src/Pages/Settings/SettingsTimeZone.jsx | 2 +- .../src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/client/src/Components/Inputs/Search/index.jsx b/client/src/Components/Inputs/Search/index.jsx index f536bd5b5..23318c503 100644 --- a/client/src/Components/Inputs/Search/index.jsx +++ b/client/src/Components/Inputs/Search/index.jsx @@ -288,7 +288,7 @@ Search.propTypes = { options: PropTypes.array.isRequired, filteredBy: PropTypes.string.isRequired, secondaryLabel: PropTypes.string, - value: PropTypes.array, + value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), inputValue: PropTypes.string.isRequired, handleInputChange: PropTypes.func.isRequired, handleChange: PropTypes.func, @@ -299,6 +299,7 @@ Search.propTypes = { startAdornment: PropTypes.object, endAdornment: PropTypes.object, onBlur: PropTypes.func, + unit: PropTypes.string, }; export default Search; diff --git a/client/src/Pages/Settings/SettingsTimeZone.jsx b/client/src/Pages/Settings/SettingsTimeZone.jsx index 4b17f3f81..be255ab52 100644 --- a/client/src/Pages/Settings/SettingsTimeZone.jsx +++ b/client/src/Pages/Settings/SettingsTimeZone.jsx @@ -17,7 +17,7 @@ const SettingsTimeZone = ({ HEADING_SX, handleChange, timezone }) => { const selectedTimezone = useMemo( () => timezones.find((tz) => tz._id === timezone) ?? null, - [timezone, timezones] + [timezone] ); const handleTimezoneChange = useCallback( diff --git a/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx b/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx index 0bc6426bc..4c2842b71 100644 --- a/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx +++ b/client/src/Pages/StatusPage/Create/Components/Tabs/Settings.jsx @@ -33,7 +33,7 @@ const TabSettings = ({ const selectedTimezone = useMemo( () => timezones.find((tz) => tz._id === form.timezone) ?? null, - [form.timezone, timezones] + [form.timezone] ); const handleTimezoneChange = useCallback(