feat(ui): TE-2448 added namespace config tab in configuration page (#…

…1604)

* feat(ui): TE-2448 added namespace config tab in configuration page

* added update and reset actions

* handle disabled state

* show full json

* tab name chaged to Settings

* fixes

---------

Co-authored-by: Nalin Patidar <[email protected]>

thirdeye-ui/src/app/components/configuration-page-header/configuration-page-header.component.tsx

@@ -21,6 +21,7 @@ import {
     getEventsAllPath,
     getMetricsPath,
     getSubscriptionGroupsPath,
+    getNamespaceConfigPath,
 } from "../../utils/routes/routes.util";
 import { PageHeader } from "../page-header/page-header.component";
 import { ConfigurationPageHeaderProps } from "./configuration-page-header.interfaces";
@@ -57,6 +58,10 @@ export const ConfigurationPageHeader: FunctionComponent<ConfigurationPageHeaderP
                         link: getEventsAllPath(),
                         label: t("label.events"),
                     },
+                    {
+                        link: getNamespaceConfigPath(),
+                        label: t("label.settings"),
+                    },
                 ]}
                 subNavigationSelected={selectedIndex}
                 title={t("label.configuration")}

thirdeye-ui/src/app/locale/languages/en-us.json

@@ -418,6 +418,7 @@
         "multidimensional-alert": "Multi-dimensional alert",
         "name": "Name",
         "name-of-your-alert": "Name of your alert",
+        "namespace": "Namespace",
         "need-help": "Need help",
         "new-user": "New user",
         "next": "Next",
@@ -521,6 +522,7 @@
         "selected-time-range": "selected time range",
         "sendgrid-api-key": "SendGrid API Key",
         "sensitivity": "Sensitivity",
+        "settings": "Settings",
         "setup-entity": "Setup {{entity}}",
         "show-all": "Show All",
         "show-count-optional-properties": "Show {{count}} optional properties",

thirdeye-ui/src/app/pages/namespace-configuration/api/index.tsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright 2024 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at http://www.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+import { useEffect, useState } from "react";
+import { ActionStatus } from "../../../rest/actions.interfaces";
+import {
+    useGetWorkspaceConfiguration,
+    useResetWorkspaceConfiguration,
+    useUpdateWorkspaceConfiguration,
+} from "../../../rest/workspace/workspace-action";
+import { isEmpty, isEqual } from "lodash";
+import { notifyIfErrors } from "../../../utils/notifications/notifications.util";
+import { useNotificationProviderV1 } from "../../../platform/components";
+import { useTranslation } from "react-i18next";
+import { WorkspaceConfiguration } from "../../../rest/dto/workspace.interfaces";
+
+type WorkspaceApiReques = {
+    isError: boolean;
+    isLoading: boolean;
+    isUpdateDisabled: boolean;
+    namespaceConfig: WorkspaceConfiguration | null;
+    workspaceConfiguration: WorkspaceConfiguration | null;
+    setNamespaceConfig: (config: WorkspaceConfiguration) => void;
+    getWorkspaceConfiguration: () => Promise<
+        WorkspaceConfiguration | undefined
+    >;
+    resetWorkspaceConfiguration: () => Promise<
+        WorkspaceConfiguration | undefined
+    >;
+    updateWorkspaceConfiguration: (
+        config: WorkspaceConfiguration
+    ) => Promise<WorkspaceConfiguration | undefined>;
+};
+
+export const useWorkspaceApiRequests = (): WorkspaceApiReques => {
+    const [namespaceConfig, setNamespaceConfig] =
+        useState<WorkspaceConfiguration | null>(null);
+
+    const { notify } = useNotificationProviderV1();
+    const { t } = useTranslation();
+
+    const {
+        workspaceConfiguration,
+        getWorkspaceConfiguration,
+        status: workspaceStatus,
+        errorMessages: workspaceErrorMessages,
+    } = useGetWorkspaceConfiguration();
+
+    const {
+        resetWorkspaceConfiguration,
+        status: resetStaus,
+        errorMessages: resetErrorMessages,
+    } = useResetWorkspaceConfiguration();
+
+    const {
+        updateWorkspaceConfiguration,
+        status: updateStatus,
+        errorMessages: updateErrorMessages,
+    } = useUpdateWorkspaceConfiguration();
+
+    useEffect(() => {
+        getWorkspaceConfiguration();
+    }, []);
+
+    useEffect(() => {
+        if (!isEmpty(workspaceConfiguration)) {
+            setNamespaceConfig(workspaceConfiguration);
+        }
+    }, [workspaceConfiguration]);
+
+    useEffect(() => {
+        notifyIfErrors(
+            workspaceStatus,
+            workspaceErrorMessages,
+            notify,
+            t("message.error-while-fetching", {
+                entity: t("label.settings"),
+            })
+        );
+    }, [workspaceStatus]);
+
+    useEffect(() => {
+        if (resetStaus === ActionStatus.Done) {
+            getWorkspaceConfiguration();
+        }
+        notifyIfErrors(
+            resetStaus,
+            resetErrorMessages,
+            notify,
+            t("message.update-error", {
+                entity: t("label.settings"),
+            })
+        );
+    }, [resetStaus]);
+
+    useEffect(() => {
+        if (updateStatus === ActionStatus.Done) {
+            getWorkspaceConfiguration();
+        }
+        notifyIfErrors(
+            updateStatus,
+            updateErrorMessages,
+            notify,
+            t("message.update-error", {
+                entity: t("label.settings"),
+            })
+        );
+    }, [updateStatus]);
+
+    const isError = workspaceStatus === ActionStatus.Error;
+
+    const isLoading =
+        workspaceStatus === ActionStatus.Working ||
+        updateStatus === ActionStatus.Working ||
+        resetStaus === ActionStatus.Working;
+
+    const isUpdateDisabled = isEqual(namespaceConfig, workspaceConfiguration);
+
+    return {
+        isError,
+        isLoading,
+        isUpdateDisabled,
+        namespaceConfig,
+        workspaceConfiguration,
+        setNamespaceConfig,
+        getWorkspaceConfiguration,
+        resetWorkspaceConfiguration,
+        updateWorkspaceConfiguration,
+    };
+};

thirdeye-ui/src/app/pages/namespace-configuration/index.tsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright 2024 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at http://www.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+import React from "react";
+import { ConfigurationPageHeader } from "../../components/configuration-page-header/configuration-page-header.component";
+import {
+    JSONEditorV1,
+    PageContentsGridV1,
+    PageV1,
+} from "../../platform/components";
+import { LoadingErrorStateSwitch } from "../../components/page-states/loading-error-state-switch/loading-error-state-switch.component";
+
+import { Box, Button, Grid } from "@material-ui/core";
+import { WorkspaceConfiguration } from "../../rest/dto/workspace.interfaces";
+import { useWorkspaceApiRequests } from "./api";
+
+export const NamespaceConfiguration = (): JSX.Element => {
+    const {
+        isError,
+        isLoading,
+        isUpdateDisabled,
+        namespaceConfig,
+        setNamespaceConfig,
+        resetWorkspaceConfiguration,
+        updateWorkspaceConfiguration,
+    } = useWorkspaceApiRequests();
+
+    const handleNamespaceConfigChange = (value: string): void => {
+        setNamespaceConfig(JSON.parse(value));
+    };
+    const handleReset = (): void => {
+        resetWorkspaceConfiguration();
+    };
+    const handleUpdate = async (): Promise<void> => {
+        updateWorkspaceConfiguration(namespaceConfig as WorkspaceConfiguration);
+    };
+
+    return (
+        <PageV1>
+            <ConfigurationPageHeader selectedIndex={6} />
+            <PageContentsGridV1 fullHeight>
+                <Grid container justifyContent="flex-end">
+                    <Grid item xs={12}>
+                        <LoadingErrorStateSwitch
+                            wrapInCard
+                            wrapInGrid
+                            isError={isError}
+                            isLoading={isLoading}
+                        >
+                            <JSONEditorV1<any>
+                                hideValidationSuccessIcon
+                                value={namespaceConfig}
+                                onChange={handleNamespaceConfigChange}
+                            />
+                        </LoadingErrorStateSwitch>
+                    </Grid>
+                    <Grid item>
+                        <Box display="flex" gridGap={12}>
+                            <Button
+                                color="primary"
+                                disabled={isUpdateDisabled}
+                                variant="outlined"
+                                onClick={handleUpdate}
+                            >
+                                Update
+                            </Button>
+                            <Button
+                                color="primary"
+                                variant="outlined"
+                                onClick={handleReset}
+                            >
+                                Reset
+                            </Button>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </PageContentsGridV1>
+        </PageV1>
+    );
+};

thirdeye-ui/src/app/rest/dto/workspace.interfaces.ts

@@ -15,3 +15,18 @@
 export interface Workspace {
     id: string | null;
 }
+
+export interface WorkspaceConfiguration {
+    id: number;
+    auth: {
+        namespace: string | null;
+    };
+    timeConfiguration: {
+        timezone: string;
+        dateTimePattern: string;
+        minimumOnboardingStartTime: number;
+    };
+    templateConfiguration: {
+        sqlLimitStatement: number;
+    };
+}

thirdeye-ui/src/app/rest/workspace/workspace-action.ts

@@ -13,9 +13,19 @@
  * the License.
  */
 import { useHTTPAction } from "../create-rest-action";
-import { Workspace } from "../dto/workspace.interfaces";
-import { GetWorkspaces } from "./workspace.interface";
-import { getWorkspaces as getWorkspacesREST } from "./workspace.rest";
+import { Workspace, WorkspaceConfiguration } from "../dto/workspace.interfaces";
+import {
+    GetWorkspaceConfiguration,
+    GetWorkspaces,
+    ResetWorkspaceConfiguration,
+    UpdateWorkspaceConfiguration,
+} from "./workspace.interface";
+import {
+    getWorkspaces as getWorkspacesREST,
+    getWorkspaceConfiguration as getWorkspaceConfigurationREST,
+    updateWorkspaceConfiguration as updateWorkspaceConfigurationREST,
+    resetWorkspaceConfiguration as resetWorkspaceConfigurationREST,
+} from "./workspace.rest";
 
 export const useGetWorkspaces = (): GetWorkspaces => {
     const { data, makeRequest, status, errorMessages, resetData } =
@@ -33,3 +43,66 @@ export const useGetWorkspaces = (): GetWorkspaces => {
         resetData,
     };
 };
+
+export const useGetWorkspaceConfiguration = (): GetWorkspaceConfiguration => {
+    const { data, makeRequest, status, errorMessages, resetData } =
+        useHTTPAction<WorkspaceConfiguration>(getWorkspaceConfigurationREST);
+
+    const getWorkspaceConfiguration = (): Promise<
+        WorkspaceConfiguration | undefined
+    > => {
+        return makeRequest();
+    };
+
+    return {
+        workspaceConfiguration: data,
+        getWorkspaceConfiguration,
+        status,
+        errorMessages,
+        resetData,
+    };
+};
+
+export const useUpdateWorkspaceConfiguration =
+    (): UpdateWorkspaceConfiguration => {
+        const { data, makeRequest, status, errorMessages, resetData } =
+            useHTTPAction<WorkspaceConfiguration>(
+                updateWorkspaceConfigurationREST
+            );
+
+        const updateWorkspaceConfiguration = (
+            config: WorkspaceConfiguration
+        ): Promise<WorkspaceConfiguration | undefined> => {
+            return makeRequest(config);
+        };
+
+        return {
+            workspaceConfiguration: data,
+            updateWorkspaceConfiguration,
+            status,
+            errorMessages,
+            resetData,
+        };
+    };
+
+export const useResetWorkspaceConfiguration =
+    (): ResetWorkspaceConfiguration => {
+        const { data, makeRequest, status, errorMessages, resetData } =
+            useHTTPAction<WorkspaceConfiguration>(
+                resetWorkspaceConfigurationREST
+            );
+
+        const resetWorkspaceConfiguration = (): Promise<
+            WorkspaceConfiguration | undefined
+        > => {
+            return makeRequest();
+        };
+
+        return {
+            workspaceConfiguration: data,
+            resetWorkspaceConfiguration,
+            status,
+            errorMessages,
+            resetData,
+        };
+    };