Skip to content
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

Jump to bottom

fix(ui): TE-2346 landing page improvements #1472

Merged
merged 1 commit into from
Jul 30, 2024
Merged

fix(ui): TE-2346 landing page improvements #1472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 10 additions & 3 deletions .../src/app/components/home-page/active-alerts-count-v2/active-alerts-count-v2.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,17 @@
* See the License for the specific language governing permissions and limitations under
* the License.
*/
import { Box, Grid, Typography } from "@material-ui/core";
import { Box, Grid, Link, Typography } from "@material-ui/core";
import AddCircleOutline from "@material-ui/icons/AddCircleOutline";
import React, { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
// eslint-disable-next-line no-restricted-imports
import { Link as RouterLink } from "react-router-dom";
import { SkeletonV1 } from "../../../platform/components";
import { getAlertsCreatePath } from "../../../utils/routes/routes.util";
import {
getAlertsAllPath,
getAlertsCreatePath,
} from "../../../utils/routes/routes.util";
import IconLink from "../../icon-link/icon-link.component";
import { NoDataIndicator } from "../../no-data-indicator/no-data-indicator.component";
import { LoadingErrorStateSwitch } from "../../page-states/loading-error-state-switch/loading-error-state-switch.component";
Expand Down Expand Up @@ -65,7 +70,9 @@ export const ActiveAlertsCountV2: FunctionComponent<ActiveAlertsCountProps> = ({
</LoadingErrorStateSwitch>
</Grid>
<Grid item>
<Typography>{t("label.active-alerts")}</Typography>
<Link component={RouterLink} to={getAlertsAllPath()}>
<Typography>{t("label.active-alerts")}</Typography>
</Link>
</Grid>
</Grid>
</Grid>
Expand Down
97 changes: 59 additions & 38 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 @@ -22,6 +22,7 @@ import {
} from "@material-ui/core";
import * as React from "react";
import { useTranslation } from "react-i18next";
// eslint-disable-next-line no-restricted-imports
import { Link as RouterLink } from "react-router-dom";
import { SkeletonV1 } from "../../../platform/components";
import { NoDataIndicator } from "../../no-data-indicator/no-data-indicator.component";
Expand Down Expand Up @@ -75,50 +76,70 @@ export const LatestActiveAlerts: React.FunctionComponent<LatestActiveAlertsProps
<TableCell>{t("label.created")}</TableCell>
</TitleCardTableHead>
<TableBody>
{alertsQuery.data?.slice(0, 5).map((alert) => (
<TableRow
className={styles.tableRow}
key={alert.id}
>
<TableCell>
<Link
component={RouterLink}
to={getAlertsAlertPath(alert.id)}
>
{alert.name}
</Link>
</TableCell>
<TableCell>
<Box
className={
styles.statusCellContainer
}
{alertsQuery?.data?.length ? (
alertsQuery.data
?.sort((a, b) => {
return (
new Date(b.created).getTime() -
new Date(a.created).getTime()
);
})
.slice(0, 5)
.map((alert) => (
<TableRow
className={styles.tableRow}
key={alert.id}
>
{alert.active ? (
<CheckCircle
<TableCell>
<Link
component={RouterLink}
to={getAlertsAlertPath(
alert.id
)}
>
{alert.name}
</Link>
</TableCell>
<TableCell>
<Box
className={
styles.healthyIcon
styles.statusCellContainer
}
/>
) : (
<WarningOutlined
className={
styles.unhealthyIcon
}
/>
)}
{t(
alert.active
? "label.healthy"
: "label.unhealthy"
)}
</Box>
</TableCell>
>
{alert.active ? (
<CheckCircle
className={
styles.healthyIcon
}
/>
) : (
<WarningOutlined
className={
styles.unhealthyIcon
}
/>
)}
{t(
alert.active
? "label.healthy"
: "label.unhealthy"
)}
</Box>
</TableCell>
<TableCell>
{formatDateAndTimeV1(
alert.created
)}
</TableCell>
</TableRow>
))
) : (
<TableRow className={styles.tableRow}>
<TableCell>
{formatDateAndTimeV1(alert.created)}
{t("message.no-active-alerts")}
</TableCell>
</TableRow>
))}
)}
</TableBody>
</TitleCardTable>
</LoadingErrorStateSwitch>
Expand Down
107 changes: 81 additions & 26 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 @@ -22,6 +22,7 @@ import {
} from "@material-ui/core";
import * as React from "react";
import { useTranslation } from "react-i18next";
// eslint-disable-next-line no-restricted-imports
import { Link as RouterLink } from "react-router-dom";
import { SkeletonV1 } from "../../../platform/components";
import { NoDataIndicator } from "../../no-data-indicator/no-data-indicator.component";
Expand All @@ -31,19 +32,54 @@ import {
TitleCardTableHead,
} from "../title-card-table/title-card-table.component";

import { ArrowForward } from "@material-ui/icons";
import {
ArrowForward,
KeyboardArrowDown,
KeyboardArrowUp,
} from "@material-ui/icons";
import { formatDateAndTimeV1 } from "../../../platform/utils";
import {
getSubscriptionGroupsAllPath,
getSubscriptionGroupsViewPath,
} from "../../../utils/routes/routes.util";
import { LatestSubscriptionGroupsProps } from "./latest-subscription-groups.interfaces";
import {
LatestSubscriptionChangeCreatedSort,
LatestSubscriptionGroupsProps,
} from "./latest-subscription-groups.interfaces";
import { useLatestSubscriptionGroupsStyles } from "./latest-subscription-groups.styles";
import { SortableTableHeader } from "../../rca/top-contributors-table/top-contributors-table.component";
import { SubscriptionGroup } from "../../../rest/dto/subscription-group.interfaces";

export const LatestSubscriptionGroups: React.FunctionComponent<LatestSubscriptionGroupsProps> =
({ subscriptionGroupsQuery }) => {
const { t } = useTranslation();
const styles = useLatestSubscriptionGroupsStyles();
const [changeCreatedSort, setChangeCreatedSort] =
React.useState<LatestSubscriptionChangeCreatedSort | null>(null);

const toggleSort = (): void => {
if (changeCreatedSort === LatestSubscriptionChangeCreatedSort.ASC) {
setChangeCreatedSort(LatestSubscriptionChangeCreatedSort.DESC);
} else {
setChangeCreatedSort(LatestSubscriptionChangeCreatedSort.ASC);
}
};

const sortFunction = (
a: SubscriptionGroup,
b: SubscriptionGroup
): number => {
if (changeCreatedSort === LatestSubscriptionChangeCreatedSort.ASC) {
return (
new Date(a.created).getTime() -
new Date(b.created).getTime()
);
}

return (
new Date(b.created).getTime() - new Date(a.created).getTime()
);
};

return (
<>
Expand Down Expand Up @@ -75,33 +111,52 @@ export const LatestSubscriptionGroups: React.FunctionComponent<LatestSubscriptio
<TableCell>
{t("label.subscription-name")}
</TableCell>
<TableCell>{t("label.created")}</TableCell>
<SortableTableHeader onClick={toggleSort}>
<strong>{t("label.created")}</strong>
{changeCreatedSort === null ? (
<></>
) : changeCreatedSort ===
LatestSubscriptionChangeCreatedSort.ASC ? (
<KeyboardArrowUp />
) : (
<KeyboardArrowDown />
)}
</SortableTableHeader>
</TitleCardTableHead>
<TableBody>
{subscriptionGroupsQuery.data
?.slice(0, 5)
.map((subscriptionGroup) => (
<TableRow
className={styles.tableRow}
key={subscriptionGroup.id}
>
<TableCell>
<Link
component={RouterLink}
to={getSubscriptionGroupsViewPath(
subscriptionGroup.id
{subscriptionGroupsQuery?.data?.length ? (
subscriptionGroupsQuery.data
.sort(sortFunction)
.slice(0, 5)
.map((subscriptionGroup) => (
<TableRow
className={styles.tableRow}
key={subscriptionGroup.id}
>
<TableCell>
<Link
component={RouterLink}
to={getSubscriptionGroupsViewPath(
subscriptionGroup.id
)}
>
{subscriptionGroup.name}
</Link>
</TableCell>
<TableCell>
{formatDateAndTimeV1(
subscriptionGroup.created
)}
>
{subscriptionGroup.name}
</Link>
</TableCell>
<TableCell>
{formatDateAndTimeV1(
subscriptionGroup.created
)}
</TableCell>
</TableRow>
))}
</TableCell>
</TableRow>
))
) : (
<TableRow className={styles.tableRow}>
<TableCell>
{t("message.no-subscription-groups")}
</TableCell>
</TableRow>
)}
</TableBody>
</TitleCardTable>
</LoadingErrorStateSwitch>
Expand Down
5 changes: 5 additions & 0 deletions .../components/home-page/latest-subscription-groups/latest-subscription-groups.interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,8 @@ import { SubscriptionGroup } from "../../../rest/dto/subscription-group.interfac
export interface LatestSubscriptionGroupsProps {
subscriptionGroupsQuery: UseQueryResult<SubscriptionGroup[], AxiosError>;
}

export enum LatestSubscriptionChangeCreatedSort {
ASC = "asc",
DESC = "desc",
}
19 changes: 13 additions & 6 deletions ...me-page/total-subscription-group-count-v2/total-subscription-group-count-v2.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@
* See the License for the specific language governing permissions and limitations under
* the License.
*/
import { Box, Grid, Typography } from "@material-ui/core";
import { Box, Grid, Link, Typography } from "@material-ui/core";
import SettingsIcon from "@material-ui/icons/Settings";
import React, { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
// eslint-disable-next-line no-restricted-imports
import { Link as RouterLink } from "react-router-dom";
import { SkeletonV1 } from "../../../platform/components";
import { getSubscriptionGroupsAllPath } from "../../../utils/routes/routes.util";
import IconLink from "../../icon-link/icon-link.component";
Expand Down Expand Up @@ -62,11 +64,16 @@ export const TotalSubscriptionGroupCountV2: FunctionComponent<TotalSubscriptionG
</LoadingErrorStateSwitch>
</Grid>
<Grid item>
<Typography>
{t("label.active-entity", {
entity: t("label.groups"),
})}
</Typography>
<Link
component={RouterLink}
to={getSubscriptionGroupsAllPath()}
>
<Typography>
{t("label.active-entity", {
entity: t("label.groups"),
})}
</Typography>
</Link>
</Grid>
</Grid>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion ...eye-ui/src/app/components/rca/top-contributors-table/top-contributors-table.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import {
isValidChangePercentage,
} from "./top-contributors-table.utils";

const SortableTableHeader = withStyles(() => ({
export const SortableTableHeader = withStyles(() => ({
root: {
cursor: "pointer",
display: "flex",
Expand Down
2 changes: 2 additions & 0 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 @@ -740,6 +740,7 @@
"needs-to-be-an-array": "\"{{propertyKey}}\" needs to be an array",
"needs-to-be-an-object": "\"{{propertyKey}}\" needs to be an object",
"no-access-to-support-tooltip-msg": "If you dont have access to the support page, reach out to your AE (Account Executive) or join our community: https://dev.startree.ai/docs/community",
"no-active-alerts": "No active alerts",
"no-alerts-created": "No alerts created. Visit",
"no-alerts-were-subscribed-to": "No alerts were subscribed to",
"no-data": "No data available",
Expand All @@ -760,6 +761,7 @@
"no-saved-investigations": "No saved investigations for Anomaly",
"no-search-results": "No search results available",
"no-specific-top-contributor-is-detected": "No specific top contributor is detected",
"no-subscription-groups": "No subscription groups",
"no-subscription-groups-created": "No subscription groups created",
"no-subscription-groups-for-alert": "No subscription groups have been configured for alert",
"no-this-is-an-anomaly": "No, this is not an anomaly",
Expand Down
Loading