Skip to content

Commit

Permalink
feat: add infra monitoring - host lists - usage events (#6536)
Browse files Browse the repository at this point in the history
* feat: add usasge events

* feat: add reqrest early access events
  • Loading branch information
YounixM authored Nov 26, 2024
1 parent e2a4641 commit 3a5aeb2
Show file tree
Hide file tree
Showing 11 changed files with 232 additions and 44 deletions.
3 changes: 2 additions & 1 deletion frontend/public/locales/en-GB/infraMonitoring.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"containers_visualization_message": "The ability to visualise containers is in active development and should be available to you soon.",
"processes_visualization_message": "The ability to visualise processes is in active development and should be available to you soon.",
"working_message": "We're working to extend infrastructure monitoring to take care of a bunch of different cases. Thank you for your patience.",
"waitlist_message": "Join the waitlist for early access or contact support.",
"waitlist_message": "Join the waitlist for early access.",
"waitlist_success_message": "We have received your request for early access. We will get back to you as soon as we launch the feature.",
"contact_support": "Contact Support"
}
3 changes: 2 additions & 1 deletion frontend/public/locales/en/infraMonitoring.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"containers_visualization_message": "The ability to visualise containers is in active development and should be available to you soon.",
"processes_visualization_message": "The ability to visualise processes is in active development and should be available to you soon.",
"working_message": "We're working to extend infrastructure monitoring to take care of a bunch of different cases. Thank you for your patience.",
"waitlist_message": "Join the waitlist for early access or contact support.",
"waitlist_message": "Join the waitlist for early access.",
"waitlist_success_message": "We have received your request for early access. We will get back to you as soon as we launch the feature.",
"contact_support": "Contact Support"
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
.host-containers {
max-width: 600px;
margin: 150px auto;
padding: 0 16px;
gap: 24px;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 auto;
box-sizing: border-box;

.infra-container-card-container {
display: flex;
flex-direction: column;
gap: 24px;
}

.dev-status-container {
display: flex;
flex-direction: column;
gap: 12px;
}

.infra-container-card {
display: flex;
Expand All @@ -17,6 +34,7 @@
width: 400px;
font-family: 'Inter';
margin-top: 12px;
font-weight: 300;
}

.infra-container-working-msg {
Expand Down
42 changes: 25 additions & 17 deletions frontend/src/components/HostMetricsDetail/Containers/Containers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,39 @@ import './Containers.styles.scss';
import { Space, Typography } from 'antd';
import { useTranslation } from 'react-i18next';

import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';

const { Text } = Typography;

function Containers(): JSX.Element {
const { t } = useTranslation(['infraMonitoring']);

return (
<Space direction="vertical" className="host-containers" size={24}>
<div className="infra-container-card">
<img
src="/Icons/infraContainers.svg"
alt="infra-container"
width={32}
height={32}
/>

<Text className="infra-container-card-text">
{t('containers_visualization_message')}
</Text>
</div>
<div className="infra-container-card-container">
<div className="dev-status-container">
<div className="infra-container-card">
<img
src="/Icons/infraContainers.svg"
alt="infra-container"
width={32}
height={32}
/>

<Text className="infra-container-card-text">
{t('containers_visualization_message')}
</Text>
</div>

<div className="infra-container-working-msg">
<Space>
<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
<Text className="infra-container-card-text">{t('working_message')}</Text>
</Space>
</div>
</div>

<div className="infra-container-working-msg">
<Space>
<img src="/Icons/broom.svg" alt="broom" width={16} height={16} />
<Text className="infra-container-card-text">{t('working_message')}</Text>
</Space>
<WaitlistFragment entityType="containers" />
</div>
</Space>
);
Expand Down
31 changes: 31 additions & 0 deletions frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Typography,
} from 'antd';
import { RadioChangeEvent } from 'antd/lib';
import logEvent from 'api/common/logEvent';
import { QueryParams } from 'constants/query';
import {
initialQueryBuilderFormValuesMap,
Expand Down Expand Up @@ -118,6 +119,13 @@ function HostMetricsDetails({
initialFilters,
);

useEffect(() => {
logEvent('Infra Monitoring: Hosts list details page visited', {
host: host?.hostName,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
setLogFilters(initialFilters);
setTracesFilters(initialFilters);
Expand All @@ -143,6 +151,7 @@ function HostMetricsDetails({
const handleTimeChange = useCallback(
(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
setSelectedInterval(interval as Time);

if (interval === 'custom' && dateTimeRange) {
setModalTimeRange({
startTime: Math.floor(dateTimeRange[0] / 1000),
Expand All @@ -156,7 +165,13 @@ function HostMetricsDetails({
endTime: Math.floor(maxTime / 1000000000),
});
}

logEvent('Infra Monitoring: Hosts list details time updated', {
host: host?.hostName,
interval,
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);

Expand All @@ -171,6 +186,10 @@ function HostMetricsDetails({
(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
);

logEvent('Infra Monitoring: Hosts list details logs filters applied', {
host: host?.hostName,
});

return {
op: 'AND',
items: [
Expand All @@ -181,6 +200,7 @@ function HostMetricsDetails({
};
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);

Expand All @@ -190,6 +210,11 @@ function HostMetricsDetails({
const hostNameFilter = prevFilters.items.find(
(item) => item.key?.key === 'host.name',
);

logEvent('Infra Monitoring: Hosts list details traces filters applied', {
host: host?.hostName,
});

return {
op: 'AND',
items: [
Expand All @@ -199,6 +224,7 @@ function HostMetricsDetails({
};
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);

Expand All @@ -211,6 +237,11 @@ function HostMetricsDetails({
urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
}

logEvent('Infra Monitoring: Hosts list details explore clicked', {
host: host?.hostName,
view: selectedView,
});

if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = {
...logFilters,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
.host-processes {
max-width: 600px;
margin: 150px auto;
padding: 0 16px;
gap: 24px;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 auto;
box-sizing: border-box;

.infra-container-card-container {
display: flex;
flex-direction: column;
gap: 24px;
}

.dev-status-container {
display: flex;
flex-direction: column;
gap: 12px;
}

.infra-container-card {
display: flex;
Expand All @@ -17,6 +34,7 @@
width: 400px;
font-family: 'Inter';
margin-top: 12px;
font-weight: 300;
}

.infra-container-working-msg {
Expand Down
40 changes: 24 additions & 16 deletions frontend/src/components/HostMetricsDetail/Processes/Processes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,38 @@ import './Processes.styles.scss';
import { Space, Typography } from 'antd';
import { useTranslation } from 'react-i18next';

import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';

const { Text } = Typography;

function Processes(): JSX.Element {
const { t } = useTranslation(['infraMonitoring']);

return (
<Space direction="vertical" className="host-processes" size={24}>
<div className="infra-container-card">
<img
src="/Icons/infraContainers.svg"
alt="infra-container"
width={32}
height={32}
/>
<Text className="infra-container-card-text">
{t('processes_visualization_message')}
</Text>
</div>
<div className="infra-container-card-container">
<div className="dev-status-container">
<div className="infra-container-card">
<img
src="/Icons/infraContainers.svg"
alt="infra-container"
width={32}
height={32}
/>
<Text className="infra-container-card-text">
{t('processes_visualization_message')}
</Text>
</div>

<div className="infra-container-working-msg">
<Space>
<img src="/Icons/broom.svg" alt="broom" width={24} height={24} />
<Text className="infra-container-card-text">{t('working_message')}</Text>
</Space>
</div>
</div>

<div className="infra-container-working-msg">
<Space>
<img src="/Icons/broom.svg" alt="broom" width={16} height={16} />
<Text className="infra-container-card-text">{t('working_message')}</Text>
</Space>
<WaitlistFragment entityType="processes" />
</div>
</Space>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.wait-list-container {
display: flex;
flex-direction: column;
gap: 8px;

.wait-list-text {
font-weight: 300;
}

.join-waitlist-btn {
width: 160px;
border-radius: 2px;
background: var(--slate-500);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import './WaitListFragment.styles.scss';

import { Color } from '@signozhq/design-tokens';
import { Button, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import { useNotifications } from 'hooks/useNotifications';
import { CheckCircle2, HandPlatter } from 'lucide-react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import AppReducer from 'types/reducer/app';

export default function WaitlistFragment({
entityType,
}: {
entityType: string;
}): JSX.Element {
const { user } = useSelector<AppState, AppReducer>((state) => state.app);
const { t } = useTranslation(['infraMonitoring']);
const { notifications } = useNotifications();

const [isSubmitting, setIsSubmitting] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);

const handleJoinWaitlist = (): void => {
if (!user || !user.email) return;

setIsSubmitting(true);

logEvent('Infra Monitoring: Get Early Access Clicked', {
entity_type: entityType,
userEmail: user.email,
})
.then(() => {
notifications.success({
message: t('waitlist_success_message'),
});

setIsSubmitting(false);
setIsSuccess(true);

setTimeout(() => {
setIsSuccess(false);
}, 4000);
})
.catch((error) => {
console.error('Error logging event:', error);
});
};

return (
<div className="wait-list-container">
<Typography.Text className="wait-list-text">
{t('waitlist_message')}
</Typography.Text>

<Button
className="periscope-btn join-waitlist-btn"
type="default"
loading={isSubmitting}
icon={
isSuccess ? (
<CheckCircle2 size={16} color={Color.BG_FOREST_500} />
) : (
<HandPlatter size={16} />
)
}
onClick={handleJoinWaitlist}
>
Get early access
</Button>
</div>
);
}
Loading

0 comments on commit 3a5aeb2

Please sign in to comment.