13 | Oops!
14 | Something went wrong...
15 | {message}
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/internal/webui/src/components/GridActions/GridActions.styles.ts:
--------------------------------------------------------------------------------
1 | import { makeStyles } from 'tss-react/mui';
2 |
3 | export const useGridActionsStyles = makeStyles()(
4 | () => ({
5 | root: {
6 | display: "flex",
7 | width: "100%",
8 | justifyContent: "space-between",
9 | },
10 | }),
11 | );
12 |
--------------------------------------------------------------------------------
/internal/webui/src/components/GridActions/GridActions.tsx:
--------------------------------------------------------------------------------
1 | import DeleteIcon from "@mui/icons-material/Delete";
2 | import EditIcon from "@mui/icons-material/Edit";
3 | import { IconButton } from "@mui/material";
4 | import { useGridActionsStyles } from "./GridActions.styles";
5 |
6 | type Props = {
7 | handleEditClick: () => void;
8 | handleDeleteClick: () => void;
9 | children?: React.ReactNode;
10 | };
11 |
12 | export const GridActions = (props: Props) => {
13 | const { children, handleDeleteClick, handleEditClick } = props;
14 | const { classes } = useGridActionsStyles();
15 |
16 | return (
17 |
18 |
19 |
21 |
22 |
24 | {children}
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/internal/webui/src/components/GridToolbar/GridToolbar.tsx:
--------------------------------------------------------------------------------
1 | import AddIcon from "@mui/icons-material/Add";
2 | import { Button } from '@mui/material';
3 | import { GridToolbarColumnsButton, GridToolbarContainer, GridToolbarFilterButton } from "@mui/x-data-grid";
4 |
5 | type Props = {
6 | onNewClick: () => void;
7 | children?: React.ReactNode;
8 | };
9 |
10 | export const GridToolbar = (props: Props) => {
11 | const { onNewClick, children } = props;
12 |
13 | return (
14 |
9 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/internal/webui/src/components/MetricPopUp/MetricPopUp.consts.tsx:
--------------------------------------------------------------------------------
1 | import { GridColDef } from "@mui/x-data-grid";
2 |
3 | export const useMetricPopUpColumns = (): GridColDef[] => ([
4 | {
5 | field: "name",
6 | headerName: "Name",
7 | flex: 1,
8 | },
9 | {
10 | field: "interval",
11 | headerName: "Update interval",
12 | align: "center",
13 | headerAlign: "center",
14 | flex: 1,
15 | },
16 | ]);
17 |
--------------------------------------------------------------------------------
/internal/webui/src/components/MetricPopUp/MetricPopUp.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, useState } from "react";
2 | import TableViewIcon from "@mui/icons-material/TableView";
3 | import { Dialog, DialogContent, IconButton } from "@mui/material";
4 | import { DataGrid } from "@mui/x-data-grid";
5 | import { useMetricPopUpColumns } from "./MetricPopUp.consts";
6 |
7 | type MetricRows = {
8 | name: string;
9 | interval: number;
10 | };
11 |
12 | type Props = {
13 | Metrics?: Record
16 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/MetricFormDialog/components/MetricForm/MetricForm.types.ts:
--------------------------------------------------------------------------------
1 | import { MetricFormSteps } from "./MetricForm.consts";
2 |
3 | export type MetricFormStep = keyof typeof MetricFormSteps;
4 |
5 | type MetricFormGeneral = {
6 | Name: string;
7 | StorageName?: string | null;
8 | NodeStatus?: string | null;
9 | Description?: string | null;
10 | };
11 |
12 | type MetricFormSettings = {
13 | Gauges?: string | null;
14 | InitSQL?: string | null;
15 | IsInstanceLevel: boolean;
16 | };
17 |
18 | type MetricFormSQL = {
19 | SQLs: string;
20 | };
21 |
22 | export type MetricFormValues = MetricFormGeneral & MetricFormSettings & MetricFormSQL;
23 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx:
--------------------------------------------------------------------------------
1 | import { FormControl, FormHelperText, InputLabel, OutlinedInput } from "@mui/material";
2 | import { useFormContext } from "react-hook-form";
3 | import { useFormStyles } from "styles/form";
4 | import { MetricFormValues } from "../MetricForm.types";
5 |
6 | export const MetricFormStepSQL = () => {
7 | const { register, formState: { errors } } = useFormContext
22 |
27 | SQLs
28 | {getError("SQLs")}
43 |
44 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSettings.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox, FormControl, FormControlLabel, FormHelperText, InputLabel, OutlinedInput } from "@mui/material";
2 | import { useController, useFormContext } from "react-hook-form";
3 | import { useFormStyles } from "styles/form";
4 | import { MetricFormValues } from "../MetricForm.types";
5 |
6 | export const MetricFormStepSettings = () => {
7 | const { register, control } = useFormContext
14 |
18 | Gauges
19 | Write every gauge with a new line
28 |
29 |
33 | Init SQL
34 |
42 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/StepButtons/StepButtons.consts.ts:
--------------------------------------------------------------------------------
1 | import { MetricFormSteps } from "../../MetricForm.consts";
2 |
3 | export const formErrors = {
4 | [MetricFormSteps.General]: ["Name"],
5 | [MetricFormSteps.Settings]: [""],
6 | [MetricFormSteps.SQLs]: ["SQLs"],
7 | };
8 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/StepButtons/StepButtons.tsx:
--------------------------------------------------------------------------------
1 | import { ToggleButton, ToggleButtonGroup } from "@mui/material";
2 | import { useFormContext } from "react-hook-form";
3 | import { MetricFormSteps } from "../../MetricForm.consts";
4 | import { MetricFormStep, MetricFormValues } from "../../MetricForm.types";
5 | import { formErrors } from "./StepButtons.consts";
6 |
7 | type Props = {
8 | currentStep: MetricFormStep;
9 | setCurrentStep: React.Dispatch
15 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/PresetFormDialog/components/PresetForm/PresetForm.types.ts:
--------------------------------------------------------------------------------
1 | import { PresetFormSteps } from "./PresetForm.consts";
2 |
3 | export type PresetFormStep = keyof typeof PresetFormSteps;
4 |
5 | type PresetFormGeneral = {
6 | Name: string;
7 | Description?: string;
8 | };
9 |
10 | type PresetFormMetrics = {
11 | Metrics: {
12 | Name: string;
13 | Interval: number;
14 | }[];
15 | };
16 |
17 | export type PresetFormValues = PresetFormGeneral & PresetFormMetrics;
18 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/PresetFormDialog/components/PresetForm/components/PresetFormStepGeneral.tsx:
--------------------------------------------------------------------------------
1 | import { FormControl, FormHelperText, InputLabel, OutlinedInput } from "@mui/material";
2 | import { useFormContext } from "react-hook-form";
3 | import { useFormStyles } from "styles/form";
4 | import { PresetFormValues } from "../PresetForm.types";
5 |
6 | export const PresetFormStepGeneral = () => {
7 | const { register, formState: { errors } } = useFormContext
19 |
24 | Name
25 | {getError("Name")}
32 |
33 |
37 | Description
38 |
46 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/PresetFormDialog/components/PresetForm/components/StepButtons/StepButtons.consts.ts:
--------------------------------------------------------------------------------
1 | import { PresetFormSteps } from "../../PresetForm.consts";
2 |
3 | export const formErrors = {
4 | [PresetFormSteps.General]: ["Name"],
5 | [PresetFormSteps.Metrics]: ["Metrics", "Name", "Interval"],
6 | };
7 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/PresetFormDialog/components/PresetForm/components/StepButtons/StepButtons.tsx:
--------------------------------------------------------------------------------
1 | import { ToggleButton, ToggleButtonGroup } from "@mui/material";
2 | import { useFormContext } from "react-hook-form";
3 | import { PresetFormSteps } from "../../PresetForm.consts";
4 | import { PresetFormStep, PresetFormValues } from "../../PresetForm.types";
5 | import { formErrors } from "./StepButtons.consts";
6 |
7 | type Props = {
8 | currentStep: PresetFormStep;
9 | setCurrentStep: React.Dispatch
16 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/SourceFormDialog/components/SourceForm/SourceForm.types.ts:
--------------------------------------------------------------------------------
1 | import { SourceFormSteps } from "./SourceForm.consts";
2 |
3 | export type SourceFormStep = keyof typeof SourceFormSteps;
4 |
5 | type SourceFormGeneral = {
6 | Name: string;
7 | Group: string;
8 | ConnStr: string;
9 | Kind: string;
10 | IncludePattern?: string | null;
11 | ExcludePattern?: string | null;
12 | IsEnabled: boolean;
13 | };
14 |
15 | type SourceFormMetrics = {
16 | Metrics?: {
17 | Name: string;
18 | Value: number;
19 | }[] | null;
20 | MetricsStandby?: {
21 | Name: string;
22 | Value: number;
23 | }[] | null;
24 | PresetMetrics?: string | null;
25 | PresetMetricsStandby?: string | null;
26 | OnlyIfMaster: boolean;
27 | };
28 |
29 | type SourceFormTags = {
30 | CustomTags?: {
31 | Name: string;
32 | Value: string;
33 | }[] | null,
34 | };
35 |
36 | export type SourceFormValues =
37 | SourceFormGeneral &
38 | SourceFormMetrics &
39 | SourceFormTags;
40 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/StepButtons/StepButtons.consts.ts:
--------------------------------------------------------------------------------
1 | import { SourceFormSteps } from "../../SourceForm.consts";
2 |
3 | export const formErrors = {
4 | [SourceFormSteps.General]: ["Name", "Group", "ConnStr", "Kind"],
5 | [SourceFormSteps.Metrics]: ["Metrics", "MetricsStandby", "PresetMetrics"],
6 | [SourceFormSteps.Tags]: ["CustomTags"],
7 | };
8 |
--------------------------------------------------------------------------------
/internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/StepButtons/StepButtons.tsx:
--------------------------------------------------------------------------------
1 | import { ToggleButton, ToggleButtonGroup } from "@mui/material";
2 | import { useFormContext } from "react-hook-form";
3 | import { SourceFormSteps } from "../../SourceForm.consts";
4 | import { SourceFormStep, SourceFormValues } from "../../SourceForm.types";
5 | import { formErrors } from "./StepButtons.consts";
6 |
7 | type Props = {
8 | currentStep: SourceFormStep;
9 | setCurrentStep: React.Dispatch
35 |
11 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/LoginPage/components/LoginForm/LoginForm.consts.ts:
--------------------------------------------------------------------------------
1 | import * as Yup from "yup";
2 |
3 | export const loginFormValuesValidationSchema = Yup.object({
4 | user: Yup.string().required("User is required"),
5 | password: Yup.string().required("Password is required"),
6 | });
7 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/LoginPage/components/LoginForm/LoginForm.styles.ts:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "tss-react/mui";
2 |
3 | export const useLoginFormStyles = makeStyles()(
4 | () => ({
5 | form: {
6 | width: "270px",
7 | display: "flex",
8 | flexDirection: "column",
9 | gap: "24px",
10 | },
11 | })
12 | );
13 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/LoginPage/components/LoginForm/LoginForm.types.ts:
--------------------------------------------------------------------------------
1 | export type LoginFormValues = {
2 | user: string;
3 | password: string;
4 | };
5 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/LogsPage/LogsPage.tsx:
--------------------------------------------------------------------------------
1 | import { usePageStyles } from "styles/page";
2 | import { Logs } from "./components/Logs";
3 |
4 | export const LogsPage = () => {
5 | const { classes } = usePageStyles();
6 |
7 | return (
8 |
9 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/LogsPage/components/Logs.styles.ts:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "tss-react/mui";
2 |
3 | export const useLogsStyles = makeStyles()(
4 | () => ({
5 | root: {
6 | backgroundColor: "black",
7 | flexGrow: 1,
8 | position: "relative",
9 | width: "100%",
10 | height: "100%",
11 | },
12 | grid: {
13 | color: "white",
14 | position: "absolute",
15 | inset: "1em",
16 | overflowY: "auto",
17 | overflowX: "hidden",
18 | wordWrap: "break-word",
19 | whiteSpace: "pre-wrap",
20 | fontSize: "14px",
21 | margin: 0
22 | },
23 | log: {
24 | margin: "0 0 0.5em",
25 | },
26 | }),
27 | );
28 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/LogsPage/components/Logs.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { Loading } from "components/Loading/Loading";
3 | import { ReadyState } from "react-use-websocket";
4 | import { usePageStyles } from "styles/page";
5 | import { useLogs } from "queries/Log";
6 | import { useAlert } from "utils/AlertContext";
7 | import { useLogsStyles } from "./Logs.styles";
8 | import { LogOutput } from "./components/LogOutput";
9 |
10 | export const Logs = () => {
11 | const { classes: pageClasses } = usePageStyles();
12 | const { classes: logsClasses } = useLogsStyles();
13 |
14 | const [logsHistory, setLogsHistory] = useState
40 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/LogsPage/components/components/LogOutput.consts.ts:
--------------------------------------------------------------------------------
1 |
2 | export const logEventColor: Record
41 | {readyState === ReadyState.CONNECTING &&
48 |
43 | {[...logsHistory].reverse().map((log, index) => (
44 |
47 | 20 | { 21 | splittedLog.map((val, idx) => { 22 | if (logEventColor[val]) { 23 | return ( {val}); 24 | } else { 25 | if (idx === 0) { 26 | return val; 27 | } 28 | return " " + val; 29 | } 30 | }) 31 | } 32 |
33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /internal/webui/src/pages/MetricsPage/MetricsPage.tsx: -------------------------------------------------------------------------------- 1 | import { usePageStyles } from "styles/page"; 2 | import { MetricsGrid } from "./components/MetricsGrid/MetricsGrid"; 3 | 4 | export const MetricsPage = () => { 5 | 6 | const { classes } = usePageStyles(); 7 | 8 | return ( 9 |
10 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.types.ts:
--------------------------------------------------------------------------------
1 | import { Metric } from "types/Metric/Metric";
2 |
3 | export type MetricGridRow = {
4 | Key: string;
5 | Metric: Metric;
6 | };
7 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/MetricsGridActions/MetricsGridActions.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { GridActions } from "components/GridActions/GridActions";
3 | import { WarningDialog } from "components/WarningDialog/WarningDialog";
4 | import { useMetricFormContext } from "contexts/MetricForm/MetricForm.context";
5 | import { useDeleteMetric } from "queries/Metric";
6 | import { MetricGridRow } from "../../MetricsGrid.types";
7 |
8 | type Props = {
9 | metric: MetricGridRow;
10 | };
11 |
12 | export const MetricsGridActions = ({ metric }: Props) => {
13 | const { setData, handleOpen } = useMetricFormContext();
14 | const [dialogOpen, setDialogOpen] = useState(false);
15 | const { mutate, isSuccess } = useDeleteMetric();
16 |
17 | useEffect(() => {
18 | isSuccess && handleDialogClose();
19 | }, [isSuccess]);
20 |
21 | const handleDialogClose = () => setDialogOpen(false);
22 |
23 | const handleEditClick = () => {
24 | setData(metric);
25 | handleOpen();
26 | };
27 |
28 | const handleDeleteClick = () => setDialogOpen(true);
29 |
30 | const handleSubmit = () => mutate(metric.Key);
31 |
32 | const message = `Are you sure want to delete metric "${metric.Key}"`;
33 |
34 | return (
35 | <>
36 |
9 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.consts.tsx:
--------------------------------------------------------------------------------
1 | import { GridColDef } from "@mui/x-data-grid";
2 | import { MetricPopUp } from "../../../../components/MetricPopUp/MetricPopUp";
3 | import { PresetGridRow } from "./PresetsGrid.types";
4 | import { PresetsGridActions } from "./components/PresetsGridActions/PresetsGridActions";
5 |
6 | export const usePresetsGridColumns = (): GridColDef
9 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx:
--------------------------------------------------------------------------------
1 | import { DataGrid } from "@mui/x-data-grid";
2 | import { Error } from "components/Error/Error";
3 | import { Loading } from "components/Loading/Loading";
4 | import { SourceFormDialog } from "containers/SourceFormDialog/SourceFormDialog";
5 | import { SourceFormProvider } from "contexts/SourceForm/SourceForm.provider";
6 | import { useGridColumnVisibility } from 'hooks/useGridColumnVisibility';
7 | import { usePageStyles } from "styles/page";
8 | import { useSources } from "queries/Source";
9 | import { useSourcesGridColumns } from "./SourcesGrid.consts";
10 | import { SourcesGridToolbar } from "./components/SourcesGridToolbar";
11 |
12 | export const SourcesGrid = () => {
13 | const { classes } = usePageStyles();
14 |
15 | const { data, isLoading, isError, error } = useSources();
16 |
17 | const columns = useSourcesGridColumns();
18 | const { columnVisibility, onColumnVisibilityChange } = useGridColumnVisibility('SOURCES_GRID', columns);
19 |
20 | if (isLoading) {
21 | return (
22 |
35 |
36 | row.Name}
38 | columns={columns}
39 | rows={data ?? []}
40 | rowsPerPageOptions={[]}
41 | components={{ Toolbar: () =>
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/CustomTagsPopUp/CustomTagsPopUp.consts.ts:
--------------------------------------------------------------------------------
1 | import { GridColDef } from "@mui/x-data-grid";
2 |
3 | export const useCustomTagsPopUpColumns = (): GridColDef[] => ([
4 | {
5 | field: "name",
6 | headerName: "Name",
7 | flex: 1,
8 | },
9 | {
10 | field: "value",
11 | headerName: "Value",
12 | align: "center",
13 | headerAlign: "center",
14 | flex: 1,
15 | },
16 | ]);
17 |
--------------------------------------------------------------------------------
/internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/CustomTagsPopUp/CustomTagsPopUp.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, useState } from "react";
2 | import TableViewIcon from "@mui/icons-material/TableView";
3 | import { Dialog, DialogContent, IconButton } from "@mui/material";
4 | import { DataGrid } from "@mui/x-data-grid";
5 | import { useCustomTagsPopUpColumns } from "./CustomTagsPopUp.consts";
6 |
7 |
8 | type CustomTagsRows = {
9 | name: string;
10 | value: string;
11 | };
12 |
13 | type Props = {
14 | CustomTags?: Record