mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-14 17:02:49 +03:00
console: allow users to remove event trigger auto clean-up configuration
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8036 Co-authored-by: Sooraj <8408875+soorajshankar@users.noreply.github.com> GitOrigin-RevId: da8df15ac3591a0fd5dfce8e0be26690479ef066
This commit is contained in:
Varun Choudhary
hasura-bot
parent
4e7fbbc2d6
commit
1971f4f6e4
@ -152,10 +152,14 @@ input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
/*
|
||||
This button style was overriding all disabled buttons in console,
|
||||
which was not allowing the `cursor-not-allowed` class to take effect
|
||||
*/
|
||||
/* button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
} */
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
|
||||
@ -152,10 +152,14 @@ input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
/*
|
||||
This button style was overriding all disabled buttons in console,
|
||||
which was not allowing the `cursor-not-allowed` class to take effect
|
||||
*/
|
||||
/* button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
} */
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
|
||||
@ -67,7 +67,7 @@ class Editor extends React.Component {
|
||||
const saveWithToggle = () => saveFunc(this.toggleEditor);
|
||||
return (
|
||||
<Button
|
||||
type="submit"
|
||||
type="button"
|
||||
mode="primary"
|
||||
isLoading={isProcessing}
|
||||
loadingText="Saving..."
|
||||
@ -87,7 +87,7 @@ class Editor extends React.Component {
|
||||
const removeWithToggle = () => removeFunc(this.toggleEditor);
|
||||
return (
|
||||
<Button
|
||||
type="submit"
|
||||
type="button"
|
||||
mode="destructive"
|
||||
isLoading={isProcessing}
|
||||
loadingText="Removing..."
|
||||
|
||||
@ -307,9 +307,11 @@ const Add: React.FC<Props> = props => {
|
||||
delete newState?.cleanupConfig;
|
||||
}
|
||||
|
||||
/* if auto cleanup is paused while creating event trigger */
|
||||
/* remove the cleanup_config from the state */
|
||||
if (state.cleanupConfig?.paused) {
|
||||
/* don't pass cleanup config if it's empty or just have only paused*/
|
||||
if (
|
||||
JSON.stringify(newState?.cleanupConfig) === '{}' ||
|
||||
JSON.stringify(newState?.cleanupConfig) === '{"paused":true}'
|
||||
) {
|
||||
delete newState?.cleanupConfig;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import defaultState from '../state';
|
||||
import { FaCircle } from 'react-icons/fa';
|
||||
import { Analytics } from '../../../../../features/Analytics';
|
||||
import { Tooltip } from '../../../../../new-components/Tooltip';
|
||||
import { Collapsible } from '../../../../../new-components/Collapsible';
|
||||
import { DropdownButton } from '../../../../../new-components/DropdownButton';
|
||||
import { InputSection } from '../../../../../new-components/InputSetionWithoutForm';
|
||||
@ -21,50 +23,134 @@ const crons = [
|
||||
|
||||
export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
|
||||
const { cleanupConfig, onChange } = props;
|
||||
const isCleanupConfigSet =
|
||||
cleanupConfig && Object.keys(cleanupConfig).length > 0;
|
||||
|
||||
// disable other fields when cleanup is paused
|
||||
const isDisable = isCleanupConfigSet
|
||||
? cleanupConfig?.paused
|
||||
: !cleanupConfig?.paused;
|
||||
|
||||
return (
|
||||
<div className="w-1/2">
|
||||
<Analytics
|
||||
name="open-event-log-auto-cleanup"
|
||||
passHtmlAttributesToChildren
|
||||
>
|
||||
<Collapsible
|
||||
triggerChildren={
|
||||
<h2 className="text-lg font-semibold mb-xs flex items-center mb-0">
|
||||
Auto-cleanup Event Logs
|
||||
<div className="flex items-center">
|
||||
<Tooltip
|
||||
side="top"
|
||||
tooltipContentChildren={
|
||||
isCleanupConfigSet &&
|
||||
!(
|
||||
cleanupConfig?.paused &&
|
||||
Object.keys(cleanupConfig).length === 1
|
||||
)
|
||||
? 'Auto-cleanup has been configured. After clearing/resetting, save changes to remove the configuration.'
|
||||
: 'Auto-cleanup is currently not configured'
|
||||
}
|
||||
className="h-full flex items-center"
|
||||
>
|
||||
{' '}
|
||||
{isCleanupConfigSet &&
|
||||
!(
|
||||
cleanupConfig?.paused &&
|
||||
Object.keys(cleanupConfig).length === 1
|
||||
) ? (
|
||||
<FaCircle className="ml-xs fill-sky-600 text-xs" />
|
||||
) : (
|
||||
<FaCircle className="ml-xs fill-slate-400 text-xs" />
|
||||
)}
|
||||
<Analytics
|
||||
name="event-auto-cleanup-clear-reset-btn"
|
||||
passHtmlAttributesToChildren
|
||||
>
|
||||
<span
|
||||
className="text-sky-500 ml-xs font-thin text-sm"
|
||||
onClick={() => onChange({})}
|
||||
>
|
||||
{isCleanupConfigSet &&
|
||||
!(
|
||||
cleanupConfig?.paused &&
|
||||
Object.keys(cleanupConfig).length === 1
|
||||
)
|
||||
? 'Clear / Reset'
|
||||
: ''}
|
||||
</span>
|
||||
</Analytics>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</h2>
|
||||
}
|
||||
defaultOpen={!!cleanupConfig}
|
||||
>
|
||||
<div className="flex items-center mb-sm">
|
||||
<Tooltip
|
||||
side="right"
|
||||
tooltipContentChildren={
|
||||
isCleanupConfigSet
|
||||
? 'When not enabled, event log cleanup is paused. To completely remove event log cleanup configuration use Clear/Reset button'
|
||||
: 'When not enabled, event log cleanup is paused'
|
||||
}
|
||||
className="flex items-center ml-0"
|
||||
>
|
||||
<Switch
|
||||
checked={!cleanupConfig?.paused}
|
||||
checked={cleanupConfig?.paused === false}
|
||||
onCheckedChange={() => {
|
||||
onChange({
|
||||
...cleanupConfig,
|
||||
paused: !cleanupConfig?.paused,
|
||||
paused: cleanupConfig?.paused === false ? true : false,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span className="ml-xs cursor-pointer">Enable event log cleanup</span>
|
||||
<span className="ml-xs cursor-pointer">
|
||||
Enable event log cleanup
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{
|
||||
<div>
|
||||
<div className="flex items-center mb-sm">
|
||||
<Tooltip
|
||||
side="right"
|
||||
tooltipContentChildren={
|
||||
isDisable
|
||||
? 'Enable event log cleanup to configure'
|
||||
: 'Enabling this will clear event invocation logs along with event logs'
|
||||
}
|
||||
className="flex items-center ml-0"
|
||||
>
|
||||
<Switch
|
||||
checked={cleanupConfig?.clean_invocation_logs}
|
||||
disabled={cleanupConfig?.paused}
|
||||
disabled={isDisable}
|
||||
onCheckedChange={() => {
|
||||
onChange({
|
||||
...cleanupConfig,
|
||||
clean_invocation_logs: !cleanupConfig?.clean_invocation_logs,
|
||||
clean_invocation_logs:
|
||||
!cleanupConfig?.clean_invocation_logs,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span className="ml-xs cursor-pointer">
|
||||
Clean invocation logs with event logs
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<InputSection
|
||||
label="Clear logs older than (hours)"
|
||||
tooltip="Clear event logs older than (in hours, default:168 hours or 7
|
||||
days)"
|
||||
placeholder={
|
||||
defaultState?.cleanupConfig?.clear_older_than?.toString() ?? ''
|
||||
disabled={isDisable}
|
||||
tooltip={
|
||||
isDisable
|
||||
? `Enable event log cleanup to configure. Clear event logs older than (in hours)`
|
||||
: `Clear event logs older than (in hours)`
|
||||
}
|
||||
placeholder="168"
|
||||
required
|
||||
value={cleanupConfig?.clear_older_than?.toString() ?? ''}
|
||||
onChange={value => {
|
||||
onChange({
|
||||
@ -75,8 +161,14 @@ export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
|
||||
/>
|
||||
<InputSection
|
||||
label="Cleanup Frequency"
|
||||
tooltip="Cron expression at which the cleanup should be invoked."
|
||||
placeholder={defaultState?.cleanupConfig?.timeout?.toString() ?? ''}
|
||||
disabled={isDisable}
|
||||
tooltip={
|
||||
isDisable
|
||||
? `Enable event log cleanup to configure. Cron expression at which the cleanup should be invoked.`
|
||||
: `Cron expression at which the cleanup should be invoked.`
|
||||
}
|
||||
placeholder="0 0 * * *"
|
||||
required
|
||||
value={cleanupConfig?.schedule?.toString() ?? ''}
|
||||
onChange={value => {
|
||||
onChange({
|
||||
@ -88,6 +180,7 @@ export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
|
||||
|
||||
<div className="my-sm">
|
||||
<DropdownButton
|
||||
disabled={isDisable}
|
||||
items={[
|
||||
crons.map(cron => (
|
||||
<div
|
||||
@ -111,6 +204,10 @@ export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
|
||||
<span className="font-bold">Frequent Frequencies</span>
|
||||
</DropdownButton>
|
||||
</div>
|
||||
<Analytics
|
||||
name="open-adv-setting-event-log-cleanup"
|
||||
passHtmlAttributesToChildren
|
||||
>
|
||||
<Collapsible
|
||||
triggerChildren={
|
||||
<h2 className="text-lg font-semibold mb-xs flex items-center mb-0">
|
||||
@ -120,8 +217,13 @@ export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
|
||||
>
|
||||
<InputSection
|
||||
label="Timeout (seconds)"
|
||||
tooltip="Timeout for the query (in seconds, default: 60)"
|
||||
placeholder={defaultState.cleanupConfig?.timeout?.toString() ?? ''}
|
||||
disabled={isDisable}
|
||||
tooltip={
|
||||
isDisable
|
||||
? `Enable event log cleanup to configure. Timeout for the query (in seconds, default: 60)`
|
||||
: `Timeout for the query (in seconds, default: 60)`
|
||||
}
|
||||
placeholder="60"
|
||||
value={cleanupConfig?.timeout?.toString() ?? ''}
|
||||
onChange={value => {
|
||||
onChange({
|
||||
@ -133,10 +235,13 @@ export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
|
||||
|
||||
<InputSection
|
||||
label="Batch Size"
|
||||
tooltip="Number of event trigger logs to delete in a batch (default: 10,000)"
|
||||
placeholder={
|
||||
defaultState.cleanupConfig?.batch_size?.toString() ?? ''
|
||||
disabled={isDisable}
|
||||
tooltip={
|
||||
isDisable
|
||||
? `Enable event log cleanup to configure. Number of event trigger logs to delete in a batch (default: 10,000)`
|
||||
: `Number of event trigger logs to delete in a batch (default: 10,000)`
|
||||
}
|
||||
placeholder="10000"
|
||||
value={cleanupConfig?.batch_size?.toString() ?? ''}
|
||||
onChange={value => {
|
||||
onChange({
|
||||
@ -146,7 +251,11 @@ export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
|
||||
}}
|
||||
/>
|
||||
</Collapsible>
|
||||
</Analytics>
|
||||
</div>
|
||||
}
|
||||
</Collapsible>
|
||||
</Analytics>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -339,9 +339,10 @@ const Modify: React.FC<Props> = props => {
|
||||
|
||||
const modifyTriggerState = { ...state };
|
||||
|
||||
/* don't pass cleanup config if it's empty or just have only paused */
|
||||
if (
|
||||
!currentTrigger?.configuration?.cleanup_config &&
|
||||
state.cleanupConfig?.paused
|
||||
JSON.stringify(modifyTriggerState?.cleanupConfig) === '{}' ||
|
||||
JSON.stringify(modifyTriggerState?.cleanupConfig) === '{"paused":true}'
|
||||
) {
|
||||
delete modifyTriggerState?.cleanupConfig;
|
||||
}
|
||||
@ -359,17 +360,20 @@ const Modify: React.FC<Props> = props => {
|
||||
);
|
||||
};
|
||||
|
||||
const submit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
saveWrapper()();
|
||||
};
|
||||
|
||||
const deleteWrapper = () => {
|
||||
dispatch(deleteEventTrigger(currentTrigger));
|
||||
};
|
||||
|
||||
return (
|
||||
<Analytics name="ModifyEventTriggers" {...REDACT_EVERYTHING}>
|
||||
<div
|
||||
key={currentTrigger.name}
|
||||
className="w-full overflow-y-auto bg-gray-50"
|
||||
>
|
||||
<div className="w-full overflow-y-auto bg-gray-50">
|
||||
<div className="max-w-6xl">
|
||||
<form onSubmit={submit}>
|
||||
<TableHeader
|
||||
count={null}
|
||||
triggerName={currentTrigger.name}
|
||||
@ -411,9 +415,7 @@ const Modify: React.FC<Props> = props => {
|
||||
<div className="mb-md">
|
||||
<AutoCleanupForm
|
||||
onChange={setState.cleanupConfig}
|
||||
cleanupConfig={
|
||||
state?.cleanupConfig || defaultState.cleanupConfig
|
||||
}
|
||||
cleanupConfig={state?.cleanupConfig}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -437,7 +439,9 @@ const Modify: React.FC<Props> = props => {
|
||||
requestSampleInputOnChange={requestSampleInputOnChange}
|
||||
requestContentTypeOnChange={requestContentTypeOnChange}
|
||||
requestUrlTransformOnChange={requestUrlTransformOnChange}
|
||||
requestPayloadTransformOnChange={requestPayloadTransformOnChange}
|
||||
requestPayloadTransformOnChange={
|
||||
requestPayloadTransformOnChange
|
||||
}
|
||||
/>
|
||||
{!readOnlyMode && (
|
||||
<div className="mb-md">
|
||||
@ -445,9 +449,6 @@ const Modify: React.FC<Props> = props => {
|
||||
<Button
|
||||
mode="primary"
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
saveWrapper()();
|
||||
}}
|
||||
data-test="save-modify-trigger-changes"
|
||||
>
|
||||
Save Event Trigger
|
||||
@ -463,6 +464,7 @@ const Modify: React.FC<Props> = props => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Analytics>
|
||||
|
||||
@ -56,14 +56,6 @@ export const defaultState: LocalEventTriggerState = {
|
||||
headers: [defaultHeader],
|
||||
source: '',
|
||||
isAllColumnChecked: true,
|
||||
cleanupConfig: {
|
||||
schedule: '0 0 * * *',
|
||||
batch_size: 10000,
|
||||
clear_older_than: 168,
|
||||
timeout: 60,
|
||||
clean_invocation_logs: false,
|
||||
paused: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const parseServerETDefinition = (
|
||||
|
||||
@ -64,7 +64,9 @@ const triggerRoutes = (
|
||||
<Route path=":triggerName" component={TriggerContainerConnector}>
|
||||
<Route
|
||||
path={getETModifyRoute({ type: 'relative' })}
|
||||
component={ModifyEventTrigger}
|
||||
component={props => (
|
||||
<ModifyEventTrigger {...props} key={props?.params?.triggerName} />
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={getETPendingEventsRoute('relative')}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { IconTooltip } from '../Tooltip';
|
||||
|
||||
export const InputSection = (props: {
|
||||
@ -7,8 +8,11 @@ export const InputSection = (props: {
|
||||
onChange: (value: string) => void;
|
||||
placeholder: string;
|
||||
tooltip: string;
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
}) => {
|
||||
const { label, value, onChange, placeholder, tooltip } = props;
|
||||
const { label, value, onChange, placeholder, tooltip, disabled, required } =
|
||||
props;
|
||||
return (
|
||||
<div className="mb-sm">
|
||||
<label className="flex items-center mb-xs font-semibold text-muted">
|
||||
@ -20,7 +24,12 @@ export const InputSection = (props: {
|
||||
value={value}
|
||||
onChange={event => onChange(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="block w-full h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
|
||||
className={clsx(
|
||||
'block w-full h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400',
|
||||
disabled ? 'cursor-not-allowed bg-gray-200' : 'cursor-pointer'
|
||||
)}
|
||||
disabled={disabled}
|
||||
required={required}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user