Skip to content

Harshil/UI changes #1758

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harshilvelotio wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Harshil/UI changes #1758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5676ec8
fix(ui): UI Changes
harshilvelotio Jan 17, 2025
49154d0
fix(ui): Updated UI Changes
harshilvelotio Jan 17, 2025
7d31ba7
fix(ui): Title card style update
harshilvelotio Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 4 additions & 17 deletions thirdeye-ui/src/app/components/admin-page/recent-failures/recent-failures.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and limitations under
* the License.
*/
import { Box, Grid, Link, Typography } from "@material-ui/core";
import { Box, Grid, Link } from "@material-ui/core";
import { sortBy } from "lodash";
import React, { FunctionComponent, useMemo } from "react";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -235,20 +235,7 @@ export const RecentFailures: FunctionComponent = () => {
return (
<>
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="h5">
{t("label.recent-anomaly-detection-failures")}
</Typography>
<Typography variant="body1">
<LoadingErrorStateSwitch
isError={false}
isLoading={isLoading}
loadingState={<SkeletonV1 animation="pulse" />}
>
{t("label.latest-errors-in-your-alerts")}
</LoadingErrorStateSwitch>
</Typography>
</Grid>
<Grid item />
<Grid item>
<TimeRangeSelectorButton
end={endTime}
Expand All @@ -261,7 +248,7 @@ export const RecentFailures: FunctionComponent = () => {
</Grid>
</Grid>
<Box paddingTop={2} />
<PageContentsCardV1>
<PageContentsCardV1 disablePadding>
<LoadingErrorStateSwitch
errorState={
<Box
Expand Down Expand Up @@ -291,7 +278,7 @@ export const RecentFailures: FunctionComponent = () => {
</>
}
>
<Box height="100vh">
<Box height="90vh">
<DataGridV1<any>
disableSearch
disableSelection
Expand Down
19 changes: 0 additions & 19 deletions thirdeye-ui/src/app/components/anomalies-page-header/anomalies-page-header.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,15 @@ import { Link as RouterLink, useLocation } from "react-router-dom";
import { PageHeaderActionsV1 } from "../../platform/components";
import {
AppRouteRelative,
getAnomaliesAllPath,
getAnomaliesCreatePath,
} from "../../utils/routes/routes.util";
import { Crumb } from "../breadcrumbs/breadcrumbs.interfaces";
import { anomaliesBasicHelpCards } from "../help-drawer-v1/help-drawer-card-contents.utils";
import { HelpDrawerV1 } from "../help-drawer-v1/help-drawer-v1.component";
import { PageHeader } from "../page-header/page-header.component";

export const AnomaliesPageHeader: FunctionComponent = () => {
const { search, pathname } = useLocation();
const { t } = useTranslation();
const crumbs: Crumb[] = [
{
label: t("label.anomalies"),
link: getAnomaliesAllPath(),
},
];

if (pathname.indexOf(AppRouteRelative.ANOMALIES_METRICS_REPORT) > -1) {
crumbs.push({
label: t("label.metrics-report"),
});
} else if (pathname.indexOf(AppRouteRelative.ANOMALIES_LIST) > -1) {
crumbs.push({
label: t("label.anomalies-list"),
});
}

const selectedSubNavigation: number =
[
Expand All @@ -57,7 +39,6 @@ export const AnomaliesPageHeader: FunctionComponent = () => {
return (
<>
<PageHeader
breadcrumbs={crumbs}
customActions={
<PageHeaderActionsV1>
<HelpDrawerV1
Expand Down
4 changes: 4 additions & 0 deletions thirdeye-ui/src/app/components/data-grid/styled-data-grid.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ const useStyles = makeStyles(() => ({
fontWeight: "500",
},
},

"& .MuiDataGrid-columnSeparator": {
display: "none",
},
},
}));

Expand Down
34 changes: 21 additions & 13 deletions ...e-ui/src/app/components/home-page/latest-active-alerts/latest-active-alerts.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
*/
import {
Box,
Grid,
Link,
TableBody,
TableCell,
Expand Down Expand Up @@ -48,9 +49,26 @@ export const LatestActiveAlerts: React.FunctionComponent<LatestActiveAlertsProps

return (
<>
<Typography className={styles.title} variant="h5">
{t("label.latest-active-alerts")}
</Typography>
<Grid container justifyContent="space-between">
<Grid item>
<Typography className={styles.title} variant="h5">
{t("label.latest-active-alerts")}
</Typography>
</Grid>
<Grid item>
<Link
className={styles.allAlertsLink}
component={RouterLink}
to={getAlertsAllPath()}
>
{t("label.view-all-entities", {
entity: t("label.alerts"),
})}
<ArrowForward className={styles.alertsLinkIcon} />
</Link>
</Grid>
</Grid>

<LoadingErrorStateSwitch
errorState={
<NoDataIndicator>
Expand Down Expand Up @@ -143,16 +161,6 @@ export const LatestActiveAlerts: React.FunctionComponent<LatestActiveAlertsProps
</TableBody>
</TitleCardTable>
</LoadingErrorStateSwitch>
<Link
className={styles.allAlertsLink}
component={RouterLink}
to={getAlertsAllPath()}
>
{t("label.view-all-entities", {
entity: t("label.alerts"),
})}
<ArrowForward className={styles.alertsLinkIcon} />
</Link>
</>
);
};
38 changes: 23 additions & 15 deletions .../components/home-page/latest-subscription-groups/latest-subscription-groups.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
*/
import {
Box,
Grid,
Link,
TableBody,
TableCell,
Expand Down Expand Up @@ -83,11 +84,28 @@ export const LatestSubscriptionGroups: React.FunctionComponent<LatestSubscriptio

return (
<>
<Typography className={styles.title} variant="h5">
{t("label.latest-entity", {
entity: t("label.subscription-groups"),
})}
</Typography>
<Grid container justifyContent="space-between">
<Grid item>
<Typography className={styles.title} variant="h5">
{t("label.latest-entity", {
entity: t("label.subscription-groups"),
})}
</Typography>
</Grid>
<Grid item>
<Link
className={styles.allAlertsLink}
component={RouterLink}
to={getSubscriptionGroupsAllPath()}
>
{t("label.view-all-entities", {
entity: t("label.subscriptions"),
})}
<ArrowForward className={styles.alertsLinkIcon} />
</Link>
</Grid>
</Grid>

<LoadingErrorStateSwitch
errorState={
<NoDataIndicator>
Expand Down Expand Up @@ -160,16 +178,6 @@ export const LatestSubscriptionGroups: React.FunctionComponent<LatestSubscriptio
</TableBody>
</TitleCardTable>
</LoadingErrorStateSwitch>
<Link
className={styles.allAlertsLink}
component={RouterLink}
to={getSubscriptionGroupsAllPath()}
>
{t("label.show-entities", {
entity: t("label.subscriptions"),
})}
<ArrowForward className={styles.alertsLinkIcon} />
</Link>
</>
);
};
22 changes: 14 additions & 8 deletions ...eye-ui/src/app/components/home-page/recent-anomalies-v2/recent-anomalies-v2.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and limitations under
* the License.
*/
import { Box, Button, Grid, Link, Typography } from "@material-ui/core";
import { Box, Grid, Link, Typography } from "@material-ui/core";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import { capitalize, sortBy } from "lodash";
Expand All @@ -32,9 +32,12 @@ import {
} from "../title-card-table/title-card-table.component";
import { AnomalyRowV2 } from "./anomaly-row-v2/anomaly-row-v2.component";
import { useFetchQuery } from "../../../rest/hooks/useFetchQuery";
import { useLatestSubscriptionGroupsStyles } from "../latest-subscription-groups/latest-subscription-groups.styles";
import { ArrowForward } from "@material-ui/icons";

export const RecentAnomaliesV2: FunctionComponent = () => {
const { t } = useTranslation();
const styles = useLatestSubscriptionGroupsStyles();

const startTime = DateTime.local()
.minus({ month: 1 })
Expand Down Expand Up @@ -67,7 +70,7 @@ export const RecentAnomaliesV2: FunctionComponent = () => {

return (
<>
<Grid container direction="row">
<Grid container alignItems="center" justifyContent="space-between">
<Grid item>
<Typography style={{ marginBottom: 8 }} variant="h5">
{t("label.recent-entity", {
Expand All @@ -76,12 +79,15 @@ export const RecentAnomaliesV2: FunctionComponent = () => {
</Typography>
</Grid>
<Grid item>
<Link component={RouterLink} to={getAnomaliesAllPath()}>
<Button color="primary" size="large" variant="outlined">
{t("label.view-all-entities", {
entity: t("label.anomalies"),
})}
</Button>
<Link
className={styles.allAlertsLink}
component={RouterLink}
to={getAnomaliesAllPath()}
>
{t("label.view-all-entities", {
entity: t("label.anomalies"),
})}
<ArrowForward className={styles.alertsLinkIcon} />
</Link>
</Grid>
</Grid>
Expand Down
29 changes: 15 additions & 14 deletions ...ponents/home-page/recommended-documentation-v2/recommended-documentation-v2.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@ import CreateAlertImage from "../../../../assets/images/create-alert.png";
import GettingStartedImage from "../../../../assets/images/getting-started.png";
import InvestigateAnomaliesImage from "../../../../assets/images/investigate-anomalies.png";
import { THIRDEYE_DOC_LINK } from "../../../utils/constants/constants.util";
import { useLatestSubscriptionGroupsStyles } from "../latest-subscription-groups/latest-subscription-groups.styles";
import { useRecommendedDocumentationV2Styles } from "./recommended-documentation-v2.styles";

export const RecommendedDocumentationV2: FunctionComponent = () => {
const { t } = useTranslation();
const styles = useRecommendedDocumentationV2Styles();
const linkStyles = useLatestSubscriptionGroupsStyles();

const items = useMemo(
() => [
Expand Down Expand Up @@ -80,25 +82,24 @@ export const RecommendedDocumentationV2: FunctionComponent = () => {
</Grid>
<Grid item>
<Link
className={linkStyles.allAlertsLink}
component={Link}
href={THIRDEYE_DOC_LINK}
target="_blank"
>
<Button color="primary" variant="text">
<Grid container alignItems="center">
<Grid item>
{t("label.view-all-entities", {
entity: t("label.documentation"),
})}
</Grid>
<Grid item>
<ArrowForward
color="primary"
fontSize="small"
/>
</Grid>
<Grid container alignItems="center">
<Grid item>
{t("label.view-all-entities", {
entity: t("label.documentation"),
})}
</Grid>
</Button>
<Grid item>
<ArrowForward
color="primary"
fontSize="small"
/>
</Grid>
</Grid>
</Link>
</Grid>
</Grid>
Expand Down
2 changes: 2 additions & 0 deletions thirdeye-ui/src/app/components/home-page/title-card-table/title-card-table.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export const useTitleCardTableStyles = makeStyles((theme) => ({
table: {
borderRadius: theme.shape.borderRadius,
border: `1px solid ${PaletteV1.BorderColorGrey}`,
borderCollapse: "separate",
overflow: "hidden",
},
header: {
backgroundColor: PaletteV1.BackgroundColorLight,
Expand Down
2 changes: 1 addition & 1 deletion thirdeye-ui/src/app/components/page-header/page-header.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
<Grid item {...(headerGridContainerProps || {})}>
{title && (
<Typography variant="h4">
{title}
<b>{title}</b>
</Typography>
)}
{children}
Expand Down
5 changes: 3 additions & 2 deletions thirdeye-ui/src/app/locale/languages/en-us.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"add-to-chart": "Add to Chart",
"additional-chart-items": "Additional Chart Items",
"admin": "Admin",
"admin-dashboard": "Admin dashboard",
"admin-dashboard": "Admin Dashboard",
"advanced": "Advanced",
"advanced-alert": "Advanced Alert",
"advanced-alert-old": "Advanced Alert",
Expand Down Expand Up @@ -247,6 +247,7 @@
"delete": "Delete",
"delete-entity": "Delete {{entity}}",
"description": "Description",
"deselect-all": "Deselect All",
"details": "Details",
"detection-algorithm": "Detection algorithm",
"detection-configuration": "Detection Configuration",
Expand Down Expand Up @@ -897,7 +898,7 @@
"select-a-date-range-to-filter-data-by": "Select a date range to filter the data by",
"select-a-dimension-to-generate-the-anomaly-preview": "Select a dimension to generate the anomaly preview",
"select-a-metric": "Select a metric",
"select-a-metric-to-detect-anomalies": "Select a metric to detect anomalies",
"select-a-metric-to-detect-anomalies": "A metric is a column of the dataset",
"select-a-template-to-monitor-an-detect-anomalies": "Select a template to monitor an detect anomalies",
"select-a-template-to-preview": "Select a template to preview the alert",
"select-aggregation-function": "Select aggregation function",
Expand Down
2 changes: 1 addition & 1 deletion ...pp/pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1133,7 +1133,7 @@ export const AlertsCreateEasyPage: FunctionComponent = () => {
) =>
m.name
);
a.unshift(
a.push(
t(
"label.custom-metric-aggregation"
)
Expand Down
3 changes: 1 addition & 2 deletions ...deye-ui/src/app/pages/welcome-page/create-datasource/create-datasource-page.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* the License.
*/

import { Box, Button, Grid, Typography } from "@material-ui/core";
import { Box, Grid, Typography } from "@material-ui/core";
import React, { FunctionComponent, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Outlet, useLocation } from "react-router-dom";
Expand Down Expand Up @@ -73,7 +73,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"
)}
Expand Down
Loading
Loading