[-] fix sources grid in WebUI, fixes #524 (#525)

docker-compose.yml

@@ -70,6 +70,8 @@ services:
     environment:
       PW_SOURCES: postgresql://pgwatch@postgres:5432/pgwatch
       PW_SINK: postgresql://pgwatch@postgres:5432/pgwatch_metrics
+    # command:
+    #   - "--log-level=debug"
     ports:
       - "8080:8080"
     depends_on:

internal/webui/src/containers/SourceFormDialog/SourceFormDialog.consts.ts

@@ -4,7 +4,7 @@ import { toRecordFromArray } from "utils/toRecordFromArray";
 import { SourceFormValues } from "./components/SourceForm/SourceForm.types";
 
 export const getSourceInitialValues = (data?: Source): SourceFormValues => ({
-  DBUniqueName: data?.DBUniqueName ?? "",
+  Name: data?.Name ?? "",
   Group: data?.Group ?? "default",
   ConnStr: data?.ConnStr ?? "",
   Kind: data?.Kind ?? "postgres",
@@ -21,7 +21,7 @@ export const getSourceInitialValues = (data?: Source): SourceFormValues => ({
 });
 
 export const createSourceRequest = (values: SourceFormValues): Source => ({
-  DBUniqueName: values.DBUniqueName,
+  Name: values.Name,
   Group: values.Group,
   ConnStr: values.ConnStr,
   Kind: values.Kind,

internal/webui/src/containers/SourceFormDialog/SourceFormDialog.tsx

@@ -13,7 +13,7 @@ import { SourceFormValues } from "./components/SourceForm/SourceForm.types";
 
 export const SourceFormDialog = () => {
   const { data, open, action, handleClose } = useSourceFormContext();
-  const [dbUniqueNameOrig, setDbUniqueNameOrig] = useState<string>("");
+  const [nameOrig, setnameOrig] = useState<string>("");
 
   const formMethods = useForm<SourceFormValues>({
     resolver: yupResolver(sourceFormValuesValidationSchema),
@@ -28,8 +28,8 @@ export const SourceFormDialog = () => {
   useEffect(() => {
     const initialValues = getSourceInitialValues(data);
     reset(initialValues);
-    setDbUniqueNameOrig(initialValues.DBUniqueName);
-    if (action === SourceFormActions.Copy) { setValue("DBUniqueName", ""); }
+    setnameOrig(initialValues.Name);
+    if (action === SourceFormActions.Copy) { setValue("Name", ""); }
   }, [data, open, reset, action, setValue]);
 
   useEffect(() => {
@@ -49,7 +49,7 @@ export const SourceFormDialog = () => {
     const source = createSourceRequest(values);
     if (action === SourceFormActions.Edit) {
       editSource.mutate({
-        DBUniqueName: dbUniqueNameOrig,
+        Name: nameOrig,
         data: source,
       });
     } else {

internal/webui/src/containers/SourceFormDialog/components/SourceForm/SourceForm.consts.ts

@@ -24,7 +24,7 @@ const tagsValidationSchema = Yup.object({
 });
 
 export const sourceFormValuesValidationSchema = Yup.object({
-  DBUniqueName: Yup.string().required("Unique name is required"),
+  Name: Yup.string().required("Unique name is required"),
   Group: Yup.string().required("Group is required"),
   ConnStr: Yup.string().required("Connection string is required"),
   Kind: Yup.string().required("Type is required"),

internal/webui/src/containers/SourceFormDialog/components/SourceForm/SourceForm.types.ts

@@ -3,7 +3,7 @@ import { SourceFormSteps } from "./SourceForm.consts";
 export type SourceFormStep = keyof typeof SourceFormSteps;
 
 type SourceFormGeneral = {
-  DBUniqueName: string;
+  Name: string;
   Group: string;
   ConnStr: string;
   Kind: string;

internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/SourceFormStepGeneral.tsx

@@ -32,16 +32,16 @@ export const SourceFormStepGeneral = () => {
     <div className={classes.form}>
       <FormControl
         className={cx(classes.formControlInput, classes.widthDefault)}
-        error={hasError("DBUniqueName")}
+        error={hasError("Name")}
         variant="outlined"
       >
-        <InputLabel htmlFor="DBUniqueName">Unique name</InputLabel>
+        <InputLabel htmlFor="Name">Unique name</InputLabel>
         <OutlinedInput
-          {...register("DBUniqueName")}
+          {...register("Name")}
           id="Unique name"
           label="Unique name"
         />
-        <FormHelperText>{getError("DBUniqueName")}</FormHelperText>
+        <FormHelperText>{getError("Name")}</FormHelperText>
       </FormControl>
       <FormControl
         className={cx(classes.formControlInput, classes.widthDefault)}

internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/StepButtons/StepButtons.consts.ts

@@ -1,7 +1,7 @@
 import { SourceFormSteps } from "../../SourceForm.consts";
 
 export const formErrors = {
-  [SourceFormSteps.General]: ["DBUniqueName", "Group", "ConnStr", "Kind"],
+  [SourceFormSteps.General]: ["Name", "Group", "ConnStr", "Kind"],
   [SourceFormSteps.Metrics]: ["Metrics", "MetricsStandby", "PresetMetrics"],
   [SourceFormSteps.Tags]: ["CustomTags"],
 };

internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.consts.tsx

@@ -16,7 +16,7 @@ const getIcon = (value: boolean) => {
 
 export const useSourcesGridColumns = (): GridColDef<Source>[] => ([
   {
-    field: "DBUniqueName",
+    field: "Name",
     headerName: "Name",
   },
   {

internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx

@@ -32,7 +32,7 @@ export const SourcesGrid = () => {
     <div className={classes.page}>
       <SourceFormProvider>
         <DataGrid
-          getRowId={(row) => row.DBUniqueName}
+          getRowId={(row) => row.Name}
           columns={columns}
           rows={data ?? []}
           rowsPerPageOptions={[]}

internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/SourcesGridActions.tsx

@@ -33,10 +33,10 @@ export const SourcesGridActions = ({ source }: Props) => {
 
   const handleDeleteClick = () => setDialogOpen(true);
 
-  const handleSubmit = () => mutate(source.DBUniqueName);
+  const handleSubmit = () => mutate(source.Name);
 
   const message = useMemo(
-    () => `Are you sure want to delete source "${source.DBUniqueName}"`,
+    () => `Are you sure want to delete source "${source.Name}"`,
     [source],
   );
 

internal/webui/src/services/Source/index.ts

@@ -29,17 +29,17 @@ export default class SourceService {
   };
 
   public async editSource(data: SourceRequestBody) {
-    return await axiosInstance.post("source", data.data, { params: { "name": data.DBUniqueName } }).
+    return await axiosInstance.post("source", data.data, { params: { "name": data.Name } }).
       then(response => response);
   };
 
   public async editSourceEnable(data: Source) {
-    return await axiosInstance.post("source", data, { params: { "name": data.DBUniqueName } }).
+    return await axiosInstance.post("source", data, { params: { "name": data.Name } }).
       then(response => response);
   };
 
   public async editSourceHostConfig(data: Source) {
-    return await axiosInstance.post("source", data, { params: { "name": data.DBUniqueName } });
+    return await axiosInstance.post("source", data, { params: { "name": data.Name } });
   };
 
   public async testSourceConnection(data: string) {

internal/webui/src/types/Source/Source.ts

@@ -1,5 +1,5 @@
 export type Source = {
-  DBUniqueName: string;
+  Name: string;
   Group: string;
   ConnStr: string;
   Metrics: Record<string, number> | null;

internal/webui/src/types/Source/SourceRequestBody.ts

@@ -1,6 +1,6 @@
 import { Source } from "./Source";
 
 export type SourceRequestBody = {
-  DBUniqueName: string;
+  Name: string;
   data: Source;
 };