-
- OK
-
+
+ OK
+
{okData.length === 0 && (
No alerts
)}
@@ -472,7 +484,7 @@ export default function AlertsPage() {
}
+ icon={}
color="gray"
py="xs"
mt="md"
diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 3a4ec5bf1..994e18bfe 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -14,8 +14,19 @@ import {
UnstyledButton,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
+import {
+ IconBook,
+ IconBrandDiscord,
+ IconBulb,
+ IconChevronDown,
+ IconChevronRight,
+ IconChevronUp,
+ IconHelp,
+ IconLogout,
+ IconSettings,
+ IconUserCog,
+} from '@tabler/icons-react';
-import { Icon } from '@/components/Icon';
import InstallInstructionModal from '@/InstallInstructionsModal';
import { useSources } from '@/source';
@@ -132,7 +143,7 @@ export const AppNavUserMenu = ({
-
+
>
)}
@@ -146,14 +157,14 @@ export const AppNavUserMenu = ({
data-testid="team-settings-menu-item"
href="/team"
component={Link}
- leftSection={
}
+ leftSection={
}
>
Team Settings
)}
}
+ leftSection={
}
onClick={onClickUserPreferences}
>
User Preferences
@@ -164,7 +175,7 @@ export const AppNavUserMenu = ({
}
+ leftSection={
}
component={Link}
href={logoutUrl}
>
@@ -221,7 +232,7 @@ export const AppNavHelpMenu = ({
-
+
@@ -239,13 +250,13 @@ export const AppNavHelpMenu = ({
data-testid="documentation-menu-item"
href="https://clickhouse.com/docs/use-cases/observability/clickstack"
component="a"
- leftSection={
}
+ leftSection={
}
>
Documentation
}
+ leftSection={
}
component="a"
href="https://hyperdx.io/discord"
target="_blank"
@@ -254,7 +265,7 @@ export const AppNavHelpMenu = ({
}
+ leftSection={
}
onClick={onAddDataClick}
>
Setup Instructions
@@ -321,11 +332,11 @@ export const AppNavLink = ({
size="sm"
onClick={onToggle}
>
-
+ {isExpanded ? (
+
+ ) : (
+
+ )}
)}
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 31de4307d..6bf5f7029 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -27,10 +27,15 @@ import {
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import {
IconBell,
+ IconBellFilled,
IconChartDots,
+ IconChevronDown,
+ IconChevronRight,
+ IconCommand,
IconDeviceLaptop,
IconLayoutGrid,
IconLayoutSidebarLeftCollapse,
+ IconSearch,
IconSettings,
IconSitemap,
IconTable,
@@ -135,7 +140,7 @@ function SearchInput({
return (
{window.navigator.platform?.toUpperCase().includes('MAC') ? (
-
+
) : (
Ctrl
)}
@@ -161,7 +166,7 @@ function SearchInput({
onChange={(e: React.ChangeEvent
) =>
onChange(e.currentTarget.value)
}
- leftSection={}
+ leftSection={}
onKeyDown={handleKeyDown}
rightSection={
value ? (
@@ -208,7 +213,11 @@ const AppNavGroupLabel = ({
}) => {
return (
-
+ {collapsed ? (
+
+ ) : (
+
+ )}
{name}
);
@@ -486,20 +495,25 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
draggable
data-savedsearchid={savedSearch.id}
>
- {savedSearch.name}
- {Array.isArray(savedSearch.alerts) && savedSearch.alerts.length > 0 ? (
- savedSearch.alerts.some(a => a.state === AlertState.ALERT) ? (
-
- ) : (
-
- )
- ) : null}
+
+ {savedSearch.name}
+ {Array.isArray(savedSearch.alerts) &&
+ savedSearch.alerts.length > 0 ? (
+ savedSearch.alerts.some(a => a.state === AlertState.ALERT) ? (
+
+ ) : (
+
+ )
+ ) : null}
+
),
[
diff --git a/packages/app/src/AuthPage.tsx b/packages/app/src/AuthPage.tsx
index 70f03870f..6434a6177 100644
--- a/packages/app/src/AuthPage.tsx
+++ b/packages/app/src/AuthPage.tsx
@@ -14,6 +14,7 @@ import {
Stack,
TextInput,
} from '@mantine/core';
+import { IconAt, IconLock } from '@tabler/icons-react';
import api from './api';
import * as config from './config';
@@ -150,7 +151,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
withAsterisk={false}
placeholder="you@company.com"
type="email"
- leftSection={}
+ leftSection={}
error={errors.email?.message}
required
{...form.email}
@@ -159,7 +160,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
size="md"
label="Password"
withAsterisk={false}
- leftSection={}
+ leftSection={}
error={errors.password?.message}
required
placeholder="Password"
@@ -179,7 +180,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
size="md"
required
withAsterisk={false}
- leftSection={}
+ leftSection={}
error={errors.confirmPassword?.message}
placeholder="Confirm Password"
{...form.confirmPassword}
diff --git a/packages/app/src/ClickhousePage.tsx b/packages/app/src/ClickhousePage.tsx
index 88585ffeb..2f0e2d439 100644
--- a/packages/app/src/ClickhousePage.tsx
+++ b/packages/app/src/ClickhousePage.tsx
@@ -22,6 +22,7 @@ import {
Text,
Tooltip,
} from '@mantine/core';
+import { IconRefresh } from '@tabler/icons-react';
import ReactCodeMirror from '@uiw/react-codemirror';
import { ConnectionSelectControlled } from '@/components/ConnectionSelect';
@@ -529,7 +530,7 @@ function ClickhousePage() {
aria-label="Refresh dashboard"
px="xs"
>
-
+
diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
index 44dab3b7a..61ea08710 100644
--- a/packages/app/src/DBChartPage.tsx
+++ b/packages/app/src/DBChartPage.tsx
@@ -17,6 +17,11 @@ import {
Text,
} from '@mantine/core';
import { notifications } from '@mantine/notifications';
+import {
+ IconChevronDown,
+ IconChevronUp,
+ IconInfoCircle,
+} from '@tabler/icons-react';
import api from '@/api';
import { DEFAULT_CHART_CONFIG, Granularity } from '@/ChartUtils';
@@ -120,7 +125,7 @@ function AIAssistant({
}
+ icon={}
variant="outline"
withCloseButton
onClose={() => setAlertDismissed(true)}
@@ -150,9 +155,9 @@ function AIAssistant({
>
{opened ? (
-
+
) : (
-
+
)}
AI Assistant [A]
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 5acff88a2..5e16fed07 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -46,7 +46,19 @@ import {
} from '@mantine/core';
import { useHover } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';
-import { IconBell, IconFilterEdit, IconPlayerPlay } from '@tabler/icons-react';
+import {
+ IconBell,
+ IconCopy,
+ IconDotsVertical,
+ IconDownload,
+ IconFilterEdit,
+ IconPencil,
+ IconPlayerPlay,
+ IconRefresh,
+ IconTags,
+ IconTrash,
+ IconUpload,
+} from '@tabler/icons-react';
import { ContactSupportText } from '@/components/ContactSupportText';
import EditTimeChartForm from '@/components/DBEditTimeChartForm';
@@ -277,7 +289,7 @@ const Tile = forwardRef(
onClick={onDuplicateClick}
title="Duplicate"
>
-
+
) : (
@@ -505,7 +517,7 @@ function DashboardName({
size="xs"
onClick={() => setEditing(true)}
>
-
+
)}
@@ -944,7 +956,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
size="xs"
style={{ flexShrink: 0 }}
>
-
+
{dashboard?.tags?.length || 0}{' '}
{dashboard?.tags?.length === 1 ? 'Tag' : 'Tags'}
@@ -954,14 +966,14 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {