@@ -399,17 +431,29 @@ export default function BillingContainer(): JSX.Element {
) : null}
-
+
+ }
+ >
+ Download CSV
+
+
+
{licensesData?.payload?.onTrial &&
diff --git a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
index 0aecc5d102..3afee8d0d6 100644
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
@@ -166,6 +166,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
),
yAxisUnit: '',
isBillingUsageGraphs: true,
+ isDarkMode,
}),
],
}),
diff --git a/frontend/src/container/BillingContainer/BillingUsageGraph/generateCsvData.ts b/frontend/src/container/BillingContainer/BillingUsageGraph/generateCsvData.ts
new file mode 100644
index 0000000000..b70526aaa8
--- /dev/null
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/generateCsvData.ts
@@ -0,0 +1,129 @@
+import dayjs from 'dayjs';
+
+export interface QuantityData {
+ metric: string;
+ values: [number, number][];
+ queryName: string;
+ legend: string;
+ quantity: number[];
+ unit: string;
+}
+
+interface DataPoint {
+ date: string;
+ metric: {
+ total: number;
+ cost: number;
+ };
+ trace: {
+ total: number;
+ cost: number;
+ };
+ log: {
+ total: number;
+ cost: number;
+ };
+}
+
+interface CsvData {
+ Date: string;
+ 'Metrics Vol (Mn samples)': number;
+ 'Metrics Cost ($)': number;
+ 'Traces Vol (GBs)': number;
+ 'Traces Cost ($)': number;
+ 'Logs Vol (GBs)': number;
+ 'Logs Cost ($)': number;
+}
+
+const formatDate = (timestamp: number): string =>
+ dayjs.unix(timestamp).format('MM/DD/YYYY');
+
+const getQuantityData = (
+ data: QuantityData[],
+ metricName: string,
+): QuantityData => {
+ const defaultData: QuantityData = {
+ metric: metricName,
+ values: [],
+ queryName: metricName,
+ legend: metricName,
+ quantity: [],
+ unit: '',
+ };
+ return data.find((d) => d.metric === metricName) || defaultData;
+};
+
+const generateCsvData = (quantityData: QuantityData[]): any[] => {
+ const convertData = (data: QuantityData[]): DataPoint[] => {
+ const metricsData = getQuantityData(data, 'Metrics');
+ const tracesData = getQuantityData(data, 'Traces');
+ const logsData = getQuantityData(data, 'Logs');
+
+ const timestamps = metricsData.values.map((value) => value[0]);
+
+ return timestamps.map((timestamp, index) => {
+ const date = formatDate(timestamp);
+
+ return {
+ date,
+ metric: {
+ total: metricsData.quantity[index] ?? 0,
+ cost: metricsData.values[index]?.[1] ?? 0,
+ },
+ trace: {
+ total: tracesData.quantity[index] ?? 0,
+ cost: tracesData.values[index]?.[1] ?? 0,
+ },
+ log: {
+ total: logsData.quantity[index] ?? 0,
+ cost: logsData.values[index]?.[1] ?? 0,
+ },
+ };
+ });
+ };
+
+ const formattedData = convertData(quantityData);
+
+ // Calculate totals
+ const totals = formattedData.reduce(
+ (acc, dataPoint) => {
+ acc.metric.total += dataPoint.metric.total;
+ acc.metric.cost += dataPoint.metric.cost;
+ acc.trace.total += dataPoint.trace.total;
+ acc.trace.cost += dataPoint.trace.cost;
+ acc.log.total += dataPoint.log.total;
+ acc.log.cost += dataPoint.log.cost;
+ return acc;
+ },
+ {
+ metric: { total: 0, cost: 0 },
+ trace: { total: 0, cost: 0 },
+ log: { total: 0, cost: 0 },
+ },
+ );
+
+ const csvData: CsvData[] = formattedData.map((dataPoint) => ({
+ Date: dataPoint.date,
+ 'Metrics Vol (Mn samples)': parseFloat(dataPoint.metric.total.toFixed(2)),
+ 'Metrics Cost ($)': parseFloat(dataPoint.metric.cost.toFixed(2)),
+ 'Traces Vol (GBs)': parseFloat(dataPoint.trace.total.toFixed(2)),
+ 'Traces Cost ($)': parseFloat(dataPoint.trace.cost.toFixed(2)),
+ 'Logs Vol (GBs)': parseFloat(dataPoint.log.total.toFixed(2)),
+ 'Logs Cost ($)': parseFloat(dataPoint.log.cost.toFixed(2)),
+ }));
+
+ // Add totals row
+ csvData.push({
+ Date: 'Total',
+ 'Metrics Vol (Mn samples)': parseFloat(totals.metric.total.toFixed(2)),
+ 'Metrics Cost ($)': parseFloat(totals.metric.cost.toFixed(2)),
+ 'Traces Vol (GBs)': parseFloat(totals.trace.total.toFixed(2)),
+ 'Traces Cost ($)': parseFloat(totals.trace.cost.toFixed(2)),
+ 'Logs Vol (GBs)': parseFloat(totals.log.total.toFixed(2)),
+ 'Logs Cost ($)': parseFloat(totals.log.cost.toFixed(2)),
+ });
+
+ return csvData;
+};
+
+export default generateCsvData;
diff --git a/frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts b/frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts
index d40c8a6097..5123d59329 100644
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts
@@ -1,6 +1,12 @@
+import { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import dayjs from 'dayjs';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
import { isEmpty, isNull } from 'lodash-es';
+import { unparse } from 'papaparse';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import generateCsvData, { QuantityData } from './generateCsvData';
+
export const convertDataToMetricRangePayload = (
data: any,
): MetricRangePayloadProps => {
@@ -58,10 +64,7 @@ export const convertDataToMetricRangePayload = (
};
};
-export function fillMissingValuesForQuantities(
- data: any,
- timestampArray: number[],
-): MetricRangePayloadProps {
+export function quantityDataArr(data: any, timestampArray: number[]): any[] {
const { result } = data.data;
const transformedResultArr: any[] = [];
@@ -76,6 +79,14 @@ export function fillMissingValuesForQuantities(
);
transformedResultArr.push({ ...item, quantity: quantityArray });
});
+ return transformedResultArr;
+}
+
+export function fillMissingValuesForQuantities(
+ data: any,
+ timestampArray: number[],
+): MetricRangePayloadProps {
+ const transformedResultArr = quantityDataArr(data, timestampArray);
return {
data: {
@@ -85,3 +96,36 @@ export function fillMissingValuesForQuantities(
},
};
}
+
+const formatDate = (timestamp: number): string =>
+ dayjs.unix(timestamp).format('MM/DD/YYYY');
+
+export function csvFileName(csvData: QuantityData[]): string {
+ if (!csvData.length) {
+ return `billing-usage.csv`;
+ }
+
+ const { values } = csvData[0];
+
+ const timestamps = values.map((item) => item[0]);
+ const startDate = formatDate(Math.min(...timestamps));
+ const endDate = formatDate(Math.max(...timestamps));
+
+ return `billing_usage_(${startDate}-${endDate}).csv`;
+}
+
+export function prepareCsvData(
+ data: Partial
,
+): {
+ csvData: string;
+ fileName: string;
+} {
+ const graphCompatibleData = convertDataToMetricRangePayload(data);
+ const chartData = getUPlotChartData(graphCompatibleData);
+ const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
+
+ return {
+ csvData: unparse(generateCsvData(quantityMapArr)),
+ fileName: csvFileName(quantityMapArr),
+ };
+}
diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
index 60bf658e5d..cd837b666b 100644
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
+++ b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
@@ -12,6 +12,30 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
const optionList = getOptionList(t);
+ function handleRedirection(option: AlertTypes): void {
+ let url = '';
+ switch (option) {
+ case AlertTypes.METRICS_BASED_ALERT:
+ url =
+ 'https://signoz.io/docs/alerts-management/metrics-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+ break;
+ case AlertTypes.LOGS_BASED_ALERT:
+ url =
+ 'https://signoz.io/docs/alerts-management/log-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+ break;
+ case AlertTypes.TRACES_BASED_ALERT:
+ url =
+ 'https://signoz.io/docs/alerts-management/trace-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+ break;
+ case AlertTypes.EXCEPTIONS_BASED_ALERT:
+ url =
+ 'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+ break;
+ default:
+ break;
+ }
+ window.open(url, '_blank');
+ }
const renderOptions = useMemo(
() => (
<>
@@ -23,7 +47,16 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
onSelect(option.selection);
}}
>
- {option.description}
+ {option.description}{' '}
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ handleRedirection(option.selection);
+ }}
+ >
+ Click here to see how to create a sample alert.
+ {' '}
))}
diff --git a/frontend/src/container/CreateAlertRule/defaults.ts b/frontend/src/container/CreateAlertRule/defaults.ts
index 677f4accc4..20cd020158 100644
--- a/frontend/src/container/CreateAlertRule/defaults.ts
+++ b/frontend/src/container/CreateAlertRule/defaults.ts
@@ -130,7 +130,7 @@ export const exceptionAlertDefaults: AlertDef = {
disabled: false,
},
},
- queryType: EQueryType.QUERY_BUILDER,
+ queryType: EQueryType.CLICKHOUSE,
panelType: PANEL_TYPES.TIME_SERIES,
unit: undefined,
},
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
index 8af1e4ad0a..2076b858f9 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -1,18 +1,27 @@
+.explorer-options-container {
+ position: fixed;
+ bottom: 24px;
+ left: calc(50% + 240px);
+ transform: translate(calc(-50% - 120px), 0);
+ transition: left 0.2s linear;
+
+ display: flex;
+ gap: 16px;
+ background-color: transparent;
+}
+
.hide-update {
left: calc(50% - 72px) !important;
}
+
.explorer-update {
- position: fixed;
- bottom: 24px;
- left: calc(50% - 352px);
- display: flex;
+ display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 50px;
border: 1px solid var(--bg-slate-400);
background: rgba(22, 24, 29, 0.6);
- box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(20px);
.action-icon {
@@ -38,16 +47,10 @@
}
.explorer-options {
- position: fixed;
- bottom: 24px;
- left: calc(50% + 240px);
padding: 10px 12px;
- transform: translate(calc(-50% - 120px), 0);
- transition: left 0.2s linear;
border: 1px solid var(--bg-slate-400);
border-radius: 50px;
background: rgba(22, 24, 29, 0.6);
- box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(20px);
cursor: default;
@@ -124,7 +127,7 @@
.app-content {
&.collapsed {
- .explorer-options {
+ .explorer-options-container {
left: calc(50% + 72px);
}
}
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index 7253b45b94..1aaf22f796 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -289,7 +289,7 @@ function ExplorerOptions({
const isEditDeleteSupported = allowedRoles.includes(role as string);
return (
- <>
+
{isQueryUpdated && !isExplorerOptionHidden && (
-
+
+
+
+
diff --git a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
index 184c34e77b..02d71ed9bb 100644
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -15,7 +15,6 @@ import {
} from 'container/NewWidget/RightContainer/timeItems';
import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
import { useChartMutable } from 'hooks/useChartMutable';
import useUrlQuery from 'hooks/useUrlQuery';
import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
@@ -71,7 +70,7 @@ function FullView({
enum: widget?.timePreferance || 'GLOBAL_TIME',
});
- const updatedQuery = useStepInterval(widget?.query);
+ const updatedQuery = widget?.query;
const [requestData, setRequestData] = useState(() => {
if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -204,7 +203,7 @@ function FullView({
l.i === widget.id,
+ );
+
+ // added the cloned panel on the top as it is given most priority when arranging
+ // in the layout. React_grid_layout assigns priority from top, hence no random position for cloned panel
const layout = [
- ...(selectedDashboard.data.layout || []),
{
i: uuid,
- w: 6,
+ w: originalPanelLayout?.w || 6,
x: 0,
- h: 6,
+ h: originalPanelLayout?.h || 6,
y: 0,
},
+ ...(selectedDashboard.data.layout || []),
];
updateDashboardMutation.mutateAsync(
diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
index a553fe7241..28c67ae92e 100644
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -3,7 +3,6 @@ import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config';
import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
@@ -90,7 +89,7 @@ function GridCardGraph({
}
}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
- const updatedQuery = useStepInterval(widget?.query);
+ const updatedQuery = widget?.query;
const isEmptyWidget =
widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
@@ -109,6 +108,7 @@ function GridCardGraph({
query: updatedQuery,
globalSelectedInterval,
variables: getDashboardVariables(variables),
+ fillGaps: widget.fillSpans,
};
}
updatedQuery.builder.queryData[0].pageSize = 10;
@@ -123,6 +123,7 @@ function GridCardGraph({
limit: updatedQuery.builder.queryData[0].limit || 0,
},
},
+ fillGaps: widget.fillSpans,
};
});
@@ -153,6 +154,7 @@ function GridCardGraph({
widget?.query,
widget?.panelTypes,
widget.timePreferance,
+ widget.fillSpans,
requestData,
],
retry(failureCount, error): boolean {
diff --git a/frontend/src/container/GridTableComponent/index.tsx b/frontend/src/container/GridTableComponent/index.tsx
index 26bdda1a49..171f09da07 100644
--- a/frontend/src/container/GridTableComponent/index.tsx
+++ b/frontend/src/container/GridTableComponent/index.tsx
@@ -62,10 +62,11 @@ function GridTableComponent({
mutateDataSource = mutateDataSource.map(
(val): RowData => {
- const newValue = val;
+ const newValue = { ...val };
Object.keys(val).forEach((k) => {
if (columnUnits[k]) {
newValue[k] = getYAxisFormattedValue(String(val[k]), columnUnits[k]);
+ newValue[`${k}_without_unit`] = val[k];
}
});
return newValue;
@@ -81,7 +82,6 @@ function GridTableComponent({
applyColumnUnits,
originalDataSource,
]);
-
useEffect(() => {
if (tableProcessedDataRef) {
// eslint-disable-next-line no-param-reassign
diff --git a/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx b/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx
new file mode 100644
index 0000000000..76403a1884
--- /dev/null
+++ b/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+
+interface AlertInfoCardProps {
+ header: string;
+ subheader: string;
+ link: string;
+}
+
+function AlertInfoCard({
+ header,
+ subheader,
+ link,
+}: AlertInfoCardProps): JSX.Element {
+ return (
+
{
+ window.open(link, '_blank');
+ }}
+ >
+
+
+ {header}
+
+
+ {subheader}
+
+
+
+
+ );
+}
+
+export default AlertInfoCard;
diff --git a/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.styles.scss b/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.styles.scss
new file mode 100644
index 0000000000..c852b5833b
--- /dev/null
+++ b/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.styles.scss
@@ -0,0 +1,251 @@
+.alert-list-container {
+ margin-top: 104px;
+ margin-bottom: 30px;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+
+ .alert-list-view-content {
+ width: calc(100% - 30px);
+ max-width: 836px;
+
+ .alert-list-title-container {
+ .title {
+ color: var(--bg-vanilla-100);
+ font-size: var(--font-size-lg);
+ font-style: normal;
+ font-weight: var(--font-weight-normal);
+ line-height: 28px; /* 155.556% */
+ letter-spacing: -0.09px;
+ }
+
+ .subtitle {
+ color: var(--bg-vanilla-400);
+ font-size: var(--font-size-sm);
+ font-style: normal;
+ font-weight: var(--font-weight-normal);
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+ }
+
+ .empty-alert-info-container {
+ display: flex;
+ padding: 71px 193.5px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 6px;
+ border: 1px dashed var(--bg-slate-500);
+ margin-top: 16px;
+
+ .alert-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+
+ .heading {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ .icons {
+ color: white;
+ }
+
+ .empty-alert-action {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px; /* 171.429% */
+ letter-spacing: -0.07px;
+ }
+
+ .empty-info {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: -0.07px;
+ }
+ }
+
+ .action-container {
+ display: flex;
+ gap: 24px;
+ align-items: center;
+ padding-top: 24px;
+ padding-bottom: 24px;
+ width: 100%;
+ }
+ }
+ }
+
+ .get-started-text {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ width: 100%;
+
+ .ant-divider::before,
+ .ant-divider::after {
+ border-bottom: 2px dotted var(--bg-slate-300);
+ border-top: 2px dotted var(--bg-slate-300);
+ height: 8px;
+ }
+
+ .ant-typography {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 166.667% */
+ letter-spacing: 0.48px;
+ text-transform: uppercase;
+ padding-top: 8px;
+ }
+ }
+
+ .alert-info-card {
+ display: flex;
+ padding: 16px;
+ justify-content: space-between;
+ align-items: center;
+
+ border-radius: 6px;
+ border: 1px solid var(--bg-slate-500);
+ background: var(--bg-ink-400);
+ margin-bottom: 16px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .alert-card-text {
+ display: flex;
+ gap: 2px;
+ flex-direction: column;
+
+ .alert-card-text-header {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+
+ .alert-card-text-subheader {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ }
+ }
+ }
+ }
+}
+
+.info-text {
+ color: var(--bg-robin-400) !important;
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 16px; /* 133.333% */
+ letter-spacing: -0.06px;
+}
+
+.info-link-container {
+ .anticon {
+ color: var(--bg-robin-400);
+ }
+
+ :hover {
+ cursor: pointer;
+ }
+}
+
+.lightMode {
+ .alert-list-container {
+ .alert-list-view-content {
+ .alert-list-title-container {
+ .title {
+ color: var(--bg-slate-400);
+ }
+
+ .subtitle {
+ color: var(--bg-slate-100);
+ }
+ }
+
+ .empty-alert-info-container {
+ border: 1px dashed var(--bg-vanilla-400);
+
+ .alert-content {
+ .heading {
+ .icons {
+ color: white;
+ }
+
+ .empty-alert-action {
+ color: var(--bg-slate-100);
+ }
+
+ .empty-info {
+ color: var(--bg-slate-400);
+ }
+ }
+ }
+ }
+
+ .get-started-text {
+ .ant-divider::before,
+ .ant-divider::after {
+ border-bottom: 2px dotted var(--bg-vanilla-400);
+ border-top: 2px dotted var(--bg-vanilla-400);
+ }
+
+ .ant-typography {
+ color: var(--bg-slate-100);
+ }
+ }
+
+ .alert-info-card {
+ border: 1px solid var(--bg-vanilla-200);
+ background: var(--bg-vanilla-100);
+
+ .alert-card-text {
+ .alert-card-text-header {
+ color: var(--bg-slate-400);
+ }
+
+ .alert-card-text-subheader {
+ color: var(--bg-slate-100);
+ }
+ }
+ }
+ }
+ }
+
+ .info-text {
+ color: var(--bg-robin-600) !important;
+ }
+
+ .info-link-container {
+ .anticon {
+ color: var(--bg-robin-400);
+ }
+ }
+}
diff --git a/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx b/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx
new file mode 100644
index 0000000000..0f388053c0
--- /dev/null
+++ b/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx
@@ -0,0 +1,127 @@
+import './AlertsEmptyState.styles.scss';
+
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Divider, Typography } from 'antd';
+import ROUTES from 'constants/routes';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
+
+import AlertInfoCard from './AlertInfoCard';
+import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
+import InfoLinkText from './InfoLinkText';
+
+export function AlertsEmptyState(): JSX.Element {
+ const { t } = useTranslation('common');
+ const { role, featureResponse } = useSelector
(
+ (state) => state.app,
+ );
+ const [addNewAlert] = useComponentPermission(
+ ['add_new_alert', 'action'],
+ role,
+ );
+
+ const { notifications: notificationsApi } = useNotifications();
+
+ const handleError = useCallback((): void => {
+ notificationsApi.error({
+ message: t('something_went_wrong'),
+ });
+ }, [notificationsApi, t]);
+
+ const [loading, setLoading] = useState(false);
+
+ const onClickNewAlertHandler = useCallback(() => {
+ setLoading(true);
+ featureResponse
+ .refetch()
+ .then(() => {
+ setLoading(false);
+ history.push(ROUTES.ALERTS_NEW);
+ })
+ .catch(handleError)
+ .finally(() => setLoading(false));
+ }, [featureResponse, handleError]);
+
+ return (
+
+
+
+ Alert Rules
+
+ Create and manage alert rules for your resources.
+
+
+
+
+
+ 
+
+
+ No Alert rules yet.{' '}
+
+
+ Create an Alert Rule to get started
+
+
+
+
+ }
+ disabled={!addNewAlert}
+ loading={loading}
+ type="primary"
+ data-testid="add-alert"
+ >
+ New Alert Rule
+
+
+
+
+ {ALERT_INFO_LINKS.map((info) => (
+
+ ))}
+
+
+
+
+ Or get started with these sample alerts
+
+
+
+
+ {ALERT_CARDS.map((card) => (
+
+ ))}
+
+