fix(ui): TE-XXXX ui review fixes

startreedata · Jan 21, 2025 · 2bfe215 · 2bfe215
1 parent b3ef7cd
commit 2bfe215
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/thirdeye-ui/src/app/components/app-bar/app-header/app-header.component.tsx b/thirdeye-ui/src/app/components/app-bar/app-header/app-header.component.tsx
@@ -20,7 +20,6 @@ import OpenInNewIcon from "@material-ui/icons/OpenInNew";
 import { useTranslation } from "react-i18next";
 import { useNavBarV1 } from "../../../platform/stores/nav-bar-v1/nav-bar-v1.store";
 import { WorkspaceSwitcher } from "./workspace";
-import InfoIconOutlined from "@material-ui/icons/InfoOutlined";
 
 export const Appheader = ({
     isFullScreen,
@@ -49,15 +48,15 @@ export const Appheader = ({
                             quota.totalQuota.detection) *
                         100
                     ).toFixed(2)
-                )}%(${quota.remainingQuota.detection})`;
+                )}%`;
             } else {
                 return `${Number(
                     (
                         (quota.remainingQuota.notification /
                             quota.totalQuota.notification) *
                         100
                     ).toFixed(2)
-                )}%(${quota.remainingQuota.notification})`;
+                )}%`;
             }
         }
 
@@ -76,34 +75,45 @@ export const Appheader = ({
             <div className={compoenentStyles.rightInfoSpace}>
                 {quota && (
                     <div className={compoenentStyles.taskInfoContainer}>
-                        <Typography variant="body2">Remaining Quota</Typography>
                         <Tooltip
                             arrow
                             interactive
-                            placement="top"
+                            placement="bottom-start"
                             title={
-                                <Typography variant="caption">
-                                    {/* <ParseMarkdown {...parseMarkdownProps}> */}
-                                    {t("message.quota-usage")}
-                                    {/* </ParseMarkdown> */}
-                                </Typography>
+                                <div
+                                    className={compoenentStyles.taskInfoPopover}
+                                >
+                                    <div>
+                                        <Typography variant="caption">
+                                            Detection Task:{" "}
+                                            {quota.remainingQuota.detection}{" "}
+                                            detections left
+                                        </Typography>
+                                    </div>
+                                    <div>
+                                        <Typography variant="caption">
+                                            Notification Task:{" "}
+                                            {quota.remainingQuota.notification}{" "}
+                                            notifications left
+                                        </Typography>
+                                    </div>
+                                </div>
                             }
                         >
-                            <InfoIconOutlined
-                                color="secondary"
-                                fontSize="small"
-                            />
-                        </Tooltip>
-                        :
-                        <div className={compoenentStyles.taskInfo}>
-                            <div>Detection: {getQuotaString("detection")}</div>
-                            <div>
-                                Notification: {getQuotaString("notification")}
+                            <div className={compoenentStyles.taskInfo}>
+                                <div className="label">Monthly Quota Left:</div>
+                                <div>
+                                    Detection: {getQuotaString("detection")}
+                                </div>
+                                <div>
+                                    Notification:{" "}
+                                    {getQuotaString("notification")}
+                                </div>
                             </div>
-                        </div>
+                        </Tooltip>
                     </div>
                 )}
-                <Link href="https://startree.cloud/" target="_blank">
+                <Link href="https://startree.cloud/new-user" target="_blank">
                     <div className={compoenentStyles.button}>
                         <div>{t("label.app-header.startree-cloud")}</div>
                         <OpenInNewIcon

diff --git a/thirdeye-ui/src/app/components/app-bar/app-header/app-header.styles.ts b/thirdeye-ui/src/app/components/app-bar/app-header/app-header.styles.ts
@@ -76,6 +76,12 @@ export const useAppHeaderStyles = (
             background: "white",
             padding: "1px 8px",
             borderRadius: 5,
+            "& .label": {
+                fontWeight: "bold",
+            },
+        },
+        taskInfoPopover: {
+            padding: "10px",
         },
     });
 

diff --git a/...deye-ui/src/app/pages/welcome-page/create-datasource/create-datasource-page.component.tsx b/...deye-ui/src/app/pages/welcome-page/create-datasource/create-datasource-page.component.tsx
@@ -13,7 +13,6 @@
  * the License.
  */
 
-import { Button } from "@material-ui/core";
 import React, { FunctionComponent } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
@@ -27,7 +26,6 @@ export const WelcomeOnboardDatasourceWizard: FunctionComponent = () => {
         <PageV1>
             <PageHeader
                 transparentBackground
-                customActions={<Button>{t("label.help")}</Button>}
                 subtitle={t(
                     "message.connect-to-startree-cloud-data-or-add-your-own-pinot-datasource"
                 )}