mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-12 10:39:07 +08:00
fix: show 0 as limit is user has set it to 0 (#5605)
This commit is contained in:
Yunus M
GitHub
parent
38e694cd36
commit
738d62c9cf
@ -34,6 +34,7 @@ import dayjs, { Dayjs } from 'dayjs';
|
|||||||
import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
|
import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
|
||||||
import useDebouncedFn from 'hooks/useDebouncedFunction';
|
import useDebouncedFn from 'hooks/useDebouncedFunction';
|
||||||
import { useNotifications } from 'hooks/useNotifications';
|
import { useNotifications } from 'hooks/useNotifications';
|
||||||
|
import { isNil } from 'lodash-es';
|
||||||
import {
|
import {
|
||||||
ArrowUpRight,
|
ArrowUpRight,
|
||||||
CalendarClock,
|
CalendarClock,
|
||||||
@ -605,243 +606,250 @@ function MultiIngestionSettings(): JSX.Element {
|
|||||||
|
|
||||||
<div className="limits-data">
|
<div className="limits-data">
|
||||||
<div className="signals">
|
<div className="signals">
|
||||||
{SIGNALS.map((signal) => (
|
{SIGNALS.map((signal) => {
|
||||||
<div className="signal" key={signal}>
|
const hasValidDayLimit = !isNil(limits[signal]?.config?.day?.size);
|
||||||
<div className="header">
|
const hasValidSecondLimit = !isNil(
|
||||||
<div className="signal-name">{signal}</div>
|
limits[signal]?.config?.second?.size,
|
||||||
<div className="actions">
|
);
|
||||||
{hasLimits(signal) ? (
|
|
||||||
<>
|
return (
|
||||||
|
<div className="signal" key={signal}>
|
||||||
|
<div className="header">
|
||||||
|
<div className="signal-name">{signal}</div>
|
||||||
|
<div className="actions">
|
||||||
|
{hasLimits(signal) ? (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
className="periscope-btn ghost"
|
||||||
|
icon={<PenLine size={14} />}
|
||||||
|
disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
|
||||||
|
onClick={(e): void => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
enableEditLimitMode(APIKey, limits[signal]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
className="periscope-btn ghost"
|
||||||
|
icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
|
||||||
|
disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
|
||||||
|
onClick={(e): void => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
showDeleteLimitModal(APIKey, limits[signal]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
<Button
|
<Button
|
||||||
className="periscope-btn ghost"
|
className="periscope-btn"
|
||||||
icon={<PenLine size={14} />}
|
size="small"
|
||||||
|
shape="round"
|
||||||
|
icon={<PlusIcon size={14} />}
|
||||||
disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
|
disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
|
||||||
|
// eslint-disable-next-line sonarjs/no-identical-functions
|
||||||
onClick={(e): void => {
|
onClick={(e): void => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
enableEditLimitMode(APIKey, limits[signal]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Button
|
enableEditLimitMode(APIKey, {
|
||||||
className="periscope-btn ghost"
|
id: signal,
|
||||||
icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
|
signal,
|
||||||
disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
|
config: {},
|
||||||
onClick={(e): void => {
|
});
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
showDeleteLimitModal(APIKey, limits[signal]);
|
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
</>
|
Limits
|
||||||
) : (
|
</Button>
|
||||||
<Button
|
)}
|
||||||
className="periscope-btn"
|
</div>
|
||||||
size="small"
|
</div>
|
||||||
shape="round"
|
|
||||||
icon={<PlusIcon size={14} />}
|
|
||||||
disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
|
|
||||||
// eslint-disable-next-line sonarjs/no-identical-functions
|
|
||||||
onClick={(e): void => {
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
enableEditLimitMode(APIKey, {
|
<div className="signal-limit-values">
|
||||||
id: signal,
|
{activeAPIKey?.id === APIKey.id &&
|
||||||
signal,
|
activeSignal?.signal === signal &&
|
||||||
config: {},
|
isEditAddLimitOpen ? (
|
||||||
});
|
<Form
|
||||||
|
name="edit-ingestion-key-limit-form"
|
||||||
|
key="addEditLimitForm"
|
||||||
|
form={addEditLimitForm}
|
||||||
|
autoComplete="off"
|
||||||
|
initialValues={{
|
||||||
|
dailyLimit: bytesToGb(limits[signal]?.config?.day?.size),
|
||||||
|
secondsLimit: bytesToGb(limits[signal]?.config?.second?.size),
|
||||||
}}
|
}}
|
||||||
|
className="edit-ingestion-key-limit-form"
|
||||||
>
|
>
|
||||||
Limits
|
<div className="signal-limit-edit-mode">
|
||||||
</Button>
|
<div className="daily-limit">
|
||||||
|
<div className="heading">
|
||||||
|
<div className="title"> Daily limit </div>
|
||||||
|
<div className="subtitle">
|
||||||
|
Add a limit for data ingested daily{' '}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="size">
|
||||||
|
<Form.Item name="dailyLimit">
|
||||||
|
<InputNumber
|
||||||
|
addonAfter={
|
||||||
|
<Select defaultValue="GiB" disabled>
|
||||||
|
<Option value="TiB"> TiB</Option>
|
||||||
|
<Option value="GiB"> GiB</Option>
|
||||||
|
<Option value="MiB"> MiB </Option>
|
||||||
|
<Option value="KiB"> KiB </Option>
|
||||||
|
</Select>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="second-limit">
|
||||||
|
<div className="heading">
|
||||||
|
<div className="title"> Per Second limit </div>
|
||||||
|
<div className="subtitle">
|
||||||
|
{' '}
|
||||||
|
Add a limit for data ingested every second{' '}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="size">
|
||||||
|
<Form.Item name="secondsLimit">
|
||||||
|
<InputNumber
|
||||||
|
addonAfter={
|
||||||
|
<Select defaultValue="GiB" disabled>
|
||||||
|
<Option value="TiB"> TiB</Option>
|
||||||
|
<Option value="GiB"> GiB</Option>
|
||||||
|
<Option value="MiB"> MiB </Option>
|
||||||
|
<Option value="KiB"> KiB </Option>
|
||||||
|
</Select>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeAPIKey?.id === APIKey.id &&
|
||||||
|
activeSignal.signal === signal &&
|
||||||
|
!isLoadingLimitForKey &&
|
||||||
|
hasCreateLimitForIngestionKeyError &&
|
||||||
|
createLimitForIngestionKeyError &&
|
||||||
|
createLimitForIngestionKeyError?.error && (
|
||||||
|
<div className="error">
|
||||||
|
{createLimitForIngestionKeyError?.error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeAPIKey?.id === APIKey.id &&
|
||||||
|
activeSignal.signal === signal &&
|
||||||
|
!isLoadingLimitForKey &&
|
||||||
|
hasUpdateLimitForIngestionKeyError &&
|
||||||
|
updateLimitForIngestionKeyError && (
|
||||||
|
<div className="error">
|
||||||
|
{updateLimitForIngestionKeyError?.error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeAPIKey?.id === APIKey.id &&
|
||||||
|
activeSignal.signal === signal &&
|
||||||
|
isEditAddLimitOpen && (
|
||||||
|
<div className="signal-limit-save-discard">
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
className="periscope-btn primary"
|
||||||
|
size="small"
|
||||||
|
disabled={
|
||||||
|
isLoadingLimitForKey || isLoadingUpdatedLimitForKey
|
||||||
|
}
|
||||||
|
loading={
|
||||||
|
isLoadingLimitForKey || isLoadingUpdatedLimitForKey
|
||||||
|
}
|
||||||
|
onClick={(): void => {
|
||||||
|
if (!hasLimits(signal)) {
|
||||||
|
handleAddLimit(APIKey, signal);
|
||||||
|
} else {
|
||||||
|
handleUpdateLimit(APIKey, limits[signal]);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="default"
|
||||||
|
className="periscope-btn"
|
||||||
|
size="small"
|
||||||
|
disabled={
|
||||||
|
isLoadingLimitForKey || isLoadingUpdatedLimitForKey
|
||||||
|
}
|
||||||
|
onClick={handleDiscardSaveLimit}
|
||||||
|
>
|
||||||
|
Discard
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Form>
|
||||||
|
) : (
|
||||||
|
<div className="signal-limit-view-mode">
|
||||||
|
<div className="signal-limit-value">
|
||||||
|
<div className="limit-type">
|
||||||
|
Daily <Minus size={16} />{' '}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="limit-value">
|
||||||
|
{hasValidDayLimit ? (
|
||||||
|
<>
|
||||||
|
{getYAxisFormattedValue(
|
||||||
|
(limits[signal]?.metric?.day?.size || 0).toString(),
|
||||||
|
'bytes',
|
||||||
|
)}{' '}
|
||||||
|
/{' '}
|
||||||
|
{getYAxisFormattedValue(
|
||||||
|
(limits[signal]?.config?.day?.size || 0).toString(),
|
||||||
|
'bytes',
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Infinity size={16} /> NO LIMIT
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="signal-limit-value">
|
||||||
|
<div className="limit-type">
|
||||||
|
Seconds <Minus size={16} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="limit-value">
|
||||||
|
{hasValidSecondLimit ? (
|
||||||
|
<>
|
||||||
|
{getYAxisFormattedValue(
|
||||||
|
(limits[signal]?.metric?.second?.size || 0).toString(),
|
||||||
|
'bytes',
|
||||||
|
)}{' '}
|
||||||
|
/{' '}
|
||||||
|
{getYAxisFormattedValue(
|
||||||
|
(limits[signal]?.config?.second?.size || 0).toString(),
|
||||||
|
'bytes',
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Infinity size={16} /> NO LIMIT
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
<div className="signal-limit-values">
|
})}
|
||||||
{activeAPIKey?.id === APIKey.id &&
|
|
||||||
activeSignal?.signal === signal &&
|
|
||||||
isEditAddLimitOpen ? (
|
|
||||||
<Form
|
|
||||||
name="edit-ingestion-key-limit-form"
|
|
||||||
key="addEditLimitForm"
|
|
||||||
form={addEditLimitForm}
|
|
||||||
autoComplete="off"
|
|
||||||
initialValues={{
|
|
||||||
dailyLimit: bytesToGb(limits[signal]?.config?.day?.size),
|
|
||||||
secondsLimit: bytesToGb(limits[signal]?.config?.second?.size),
|
|
||||||
}}
|
|
||||||
className="edit-ingestion-key-limit-form"
|
|
||||||
>
|
|
||||||
<div className="signal-limit-edit-mode">
|
|
||||||
<div className="daily-limit">
|
|
||||||
<div className="heading">
|
|
||||||
<div className="title"> Daily limit </div>
|
|
||||||
<div className="subtitle">
|
|
||||||
Add a limit for data ingested daily{' '}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="size">
|
|
||||||
<Form.Item name="dailyLimit">
|
|
||||||
<InputNumber
|
|
||||||
addonAfter={
|
|
||||||
<Select defaultValue="GiB" disabled>
|
|
||||||
<Option value="TiB"> TiB</Option>
|
|
||||||
<Option value="GiB"> GiB</Option>
|
|
||||||
<Option value="MiB"> MiB </Option>
|
|
||||||
<Option value="KiB"> KiB </Option>
|
|
||||||
</Select>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="second-limit">
|
|
||||||
<div className="heading">
|
|
||||||
<div className="title"> Per Second limit </div>
|
|
||||||
<div className="subtitle">
|
|
||||||
{' '}
|
|
||||||
Add a limit for data ingested every second{' '}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="size">
|
|
||||||
<Form.Item name="secondsLimit">
|
|
||||||
<InputNumber
|
|
||||||
addonAfter={
|
|
||||||
<Select defaultValue="GiB" disabled>
|
|
||||||
<Option value="TiB"> TiB</Option>
|
|
||||||
<Option value="GiB"> GiB</Option>
|
|
||||||
<Option value="MiB"> MiB </Option>
|
|
||||||
<Option value="KiB"> KiB </Option>
|
|
||||||
</Select>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activeAPIKey?.id === APIKey.id &&
|
|
||||||
activeSignal.signal === signal &&
|
|
||||||
!isLoadingLimitForKey &&
|
|
||||||
hasCreateLimitForIngestionKeyError &&
|
|
||||||
createLimitForIngestionKeyError &&
|
|
||||||
createLimitForIngestionKeyError?.error && (
|
|
||||||
<div className="error">
|
|
||||||
{createLimitForIngestionKeyError?.error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeAPIKey?.id === APIKey.id &&
|
|
||||||
activeSignal.signal === signal &&
|
|
||||||
!isLoadingLimitForKey &&
|
|
||||||
hasUpdateLimitForIngestionKeyError &&
|
|
||||||
updateLimitForIngestionKeyError && (
|
|
||||||
<div className="error">
|
|
||||||
{updateLimitForIngestionKeyError?.error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeAPIKey?.id === APIKey.id &&
|
|
||||||
activeSignal.signal === signal &&
|
|
||||||
isEditAddLimitOpen && (
|
|
||||||
<div className="signal-limit-save-discard">
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
className="periscope-btn primary"
|
|
||||||
size="small"
|
|
||||||
disabled={
|
|
||||||
isLoadingLimitForKey || isLoadingUpdatedLimitForKey
|
|
||||||
}
|
|
||||||
loading={
|
|
||||||
isLoadingLimitForKey || isLoadingUpdatedLimitForKey
|
|
||||||
}
|
|
||||||
onClick={(): void => {
|
|
||||||
if (!hasLimits(signal)) {
|
|
||||||
handleAddLimit(APIKey, signal);
|
|
||||||
} else {
|
|
||||||
handleUpdateLimit(APIKey, limits[signal]);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="default"
|
|
||||||
className="periscope-btn"
|
|
||||||
size="small"
|
|
||||||
disabled={
|
|
||||||
isLoadingLimitForKey || isLoadingUpdatedLimitForKey
|
|
||||||
}
|
|
||||||
onClick={handleDiscardSaveLimit}
|
|
||||||
>
|
|
||||||
Discard
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Form>
|
|
||||||
) : (
|
|
||||||
<div className="signal-limit-view-mode">
|
|
||||||
<div className="signal-limit-value">
|
|
||||||
<div className="limit-type">
|
|
||||||
Daily <Minus size={16} />{' '}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="limit-value">
|
|
||||||
{limits[signal]?.config?.day?.size ? (
|
|
||||||
<>
|
|
||||||
{getYAxisFormattedValue(
|
|
||||||
(limits[signal]?.metric?.day?.size || 0).toString(),
|
|
||||||
'bytes',
|
|
||||||
)}{' '}
|
|
||||||
/{' '}
|
|
||||||
{getYAxisFormattedValue(
|
|
||||||
(limits[signal]?.config?.day?.size || 0).toString(),
|
|
||||||
'bytes',
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Infinity size={16} /> NO LIMIT
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="signal-limit-value">
|
|
||||||
<div className="limit-type">
|
|
||||||
Seconds <Minus size={16} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="limit-value">
|
|
||||||
{limits[signal]?.config?.second?.size ? (
|
|
||||||
<>
|
|
||||||
{getYAxisFormattedValue(
|
|
||||||
(limits[signal]?.metric?.second?.size || 0).toString(),
|
|
||||||
'bytes',
|
|
||||||
)}{' '}
|
|
||||||
/{' '}
|
|
||||||
{getYAxisFormattedValue(
|
|
||||||
(limits[signal]?.config?.second?.size || 0).toString(),
|
|
||||||
'bytes',
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Infinity size={16} /> NO LIMIT
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user