fix: dark mode is fixed (#2220)

This commit is contained in:
palashgdev 2023-02-10 13:40:50 +05:30 committed by GitHub
parent be14f1c32c
commit 9a184f5740
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 50 deletions

View File

@ -1,5 +1,4 @@
import { Input, Select } from 'antd'; import { Form, Input, Select } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { LabelFilterStatement } from 'container/CreateAlertChannels/config'; import { LabelFilterStatement } from 'container/CreateAlertChannels/config';
import React from 'react'; import React from 'react';
@ -10,7 +9,7 @@ const { Option } = Select;
// point // point
function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element { function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element {
return ( return (
<FormItem name="label_filter" label="Notify When (Optional)"> <Form.Item name="label_filter" label="Notify When (Optional)">
<Input.Group compact> <Input.Group compact>
<Select <Select
defaultValue="Severity" defaultValue="Severity"
@ -51,7 +50,7 @@ function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element {
}} }}
/> />
</Input.Group> </Input.Group>
</FormItem> </Form.Item>
); );
} }

View File

@ -1,5 +1,4 @@
import { Input } from 'antd'; import { Form, Input } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -11,7 +10,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
const { t } = useTranslation('channels'); const { t } = useTranslation('channels');
return ( return (
<> <>
<FormItem name="routing_key" label={t('field_pager_routing_key')} required> <Form.Item name="routing_key" label={t('field_pager_routing_key')} required>
<Input <Input
onChange={(event): void => { onChange={(event): void => {
setSelectedConfig((value) => ({ setSelectedConfig((value) => ({
@ -20,9 +19,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})); }));
}} }}
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="description" name="description"
help={t('help_pager_description')} help={t('help_pager_description')}
label={t('field_pager_description')} label={t('field_pager_description')}
@ -38,9 +37,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
} }
placeholder={t('placeholder_pager_description')} placeholder={t('placeholder_pager_description')}
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="severity" name="severity"
help={t('help_pager_severity')} help={t('help_pager_severity')}
label={t('field_pager_severity')} label={t('field_pager_severity')}
@ -53,9 +52,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="details" name="details"
help={t('help_pager_details')} help={t('help_pager_details')}
label={t('field_pager_details')} label={t('field_pager_details')}
@ -69,9 +68,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="component" name="component"
help={t('help_pager_component')} help={t('help_pager_component')}
label={t('field_pager_component')} label={t('field_pager_component')}
@ -84,9 +83,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="group" name="group"
help={t('help_pager_group')} help={t('help_pager_group')}
label={t('field_pager_group')} label={t('field_pager_group')}
@ -99,9 +98,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="class" name="class"
help={t('help_pager_class')} help={t('help_pager_class')}
label={t('field_pager_class')} label={t('field_pager_class')}
@ -114,8 +113,8 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="client" name="client"
help={t('help_pager_client')} help={t('help_pager_client')}
label={t('field_pager_client')} label={t('field_pager_client')}
@ -128,9 +127,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="client_url" name="client_url"
help={t('help_pager_client_url')} help={t('help_pager_client_url')}
label={t('field_pager_client_url')} label={t('field_pager_client_url')}
@ -143,7 +142,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
</> </>
); );
} }

View File

@ -1,5 +1,4 @@
import { Input } from 'antd'; import { Form, Input } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -12,7 +11,7 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
return ( return (
<> <>
<FormItem name="api_url" label={t('field_webhook_url')}> <Form.Item name="api_url" label={t('field_webhook_url')}>
<Input <Input
onChange={(event): void => { onChange={(event): void => {
setSelectedConfig((value) => ({ setSelectedConfig((value) => ({
@ -21,9 +20,9 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
})); }));
}} }}
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="channel" name="channel"
help={t('slack_channel_help')} help={t('slack_channel_help')}
label={t('field_slack_recipient')} label={t('field_slack_recipient')}
@ -36,9 +35,9 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem name="title" label={t('field_slack_title')}> <Form.Item name="title" label={t('field_slack_title')}>
<TextArea <TextArea
rows={4} rows={4}
// value={`[{{ .Status | toUpper }}{{ if eq .Status \"firing\" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}\n{{- if gt (len .CommonLabels) (len .GroupLabels) -}}\n{{\" \"}}(\n{{- with .CommonLabels.Remove .GroupLabels.Names }}\n {{- range $index, $label := .SortedPairs -}}\n {{ if $index }}, {{ end }}\n {{- $label.Name }}=\"{{ $label.Value -}}\"\n {{- end }}\n{{- end -}}\n)\n{{- end }}`} // value={`[{{ .Status | toUpper }}{{ if eq .Status \"firing\" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}\n{{- if gt (len .CommonLabels) (len .GroupLabels) -}}\n{{\" \"}}(\n{{- with .CommonLabels.Remove .GroupLabels.Names }}\n {{- range $index, $label := .SortedPairs -}}\n {{ if $index }}, {{ end }}\n {{- $label.Name }}=\"{{ $label.Value -}}\"\n {{- end }}\n{{- end -}}\n)\n{{- end }}`}
@ -49,9 +48,9 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
})) }))
} }
/> />
</FormItem> </Form.Item>
<FormItem name="text" label={t('field_slack_description')}> <Form.Item name="text" label={t('field_slack_description')}>
<TextArea <TextArea
onChange={(event): void => onChange={(event): void =>
setSelectedConfig((value) => ({ setSelectedConfig((value) => ({
@ -61,7 +60,7 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
} }
placeholder={t('placeholder_slack_description')} placeholder={t('placeholder_slack_description')}
/> />
</FormItem> </Form.Item>
</> </>
); );
} }

View File

@ -1,5 +1,4 @@
import { Input } from 'antd'; import { Form, Input } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -10,7 +9,7 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
return ( return (
<> <>
<FormItem name="api_url" label={t('field_webhook_url')}> <Form.Item name="api_url" label={t('field_webhook_url')}>
<Input <Input
onChange={(event): void => { onChange={(event): void => {
setSelectedConfig((value) => ({ setSelectedConfig((value) => ({
@ -19,8 +18,8 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
})); }));
}} }}
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="username" name="username"
label={t('field_webhook_username')} label={t('field_webhook_username')}
help={t('help_webhook_username')} help={t('help_webhook_username')}
@ -33,8 +32,8 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
})); }));
}} }}
/> />
</FormItem> </Form.Item>
<FormItem <Form.Item
name="password" name="password"
label="Password (optional)" label="Password (optional)"
help={t('help_webhook_password')} help={t('help_webhook_password')}
@ -48,7 +47,7 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
})); }));
}} }}
/> />
</FormItem> </Form.Item>
</> </>
); );
} }

View File

@ -1,5 +1,4 @@
import { Form, FormInstance, Input, Select, Typography } from 'antd'; import { Form, FormInstance, Input, Select, Typography } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { Store } from 'antd/lib/form/interface'; import { Store } from 'antd/lib/form/interface';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import { import {
@ -59,7 +58,7 @@ function FormAlertChannels({
<Title level={3}>{title}</Title> <Title level={3}>{title}</Title>
<Form initialValues={initialValue} layout="vertical" form={formInstance}> <Form initialValues={initialValue} layout="vertical" form={formInstance}>
<FormItem label={t('field_channel_name')} labelAlign="left" name="name"> <Form.Item label={t('field_channel_name')} labelAlign="left" name="name">
<Input <Input
disabled={editing} disabled={editing}
onChange={(event): void => { onChange={(event): void => {
@ -69,9 +68,9 @@ function FormAlertChannels({
})); }));
}} }}
/> />
</FormItem> </Form.Item>
<FormItem label={t('field_channel_type')} labelAlign="left" name="type"> <Form.Item label={t('field_channel_type')} labelAlign="left" name="type">
<Select disabled={editing} onChange={onTypeChangeHandler} value={type}> <Select disabled={editing} onChange={onTypeChangeHandler} value={type}>
<Option value="slack" key="slack"> <Option value="slack" key="slack">
Slack Slack
@ -83,11 +82,11 @@ function FormAlertChannels({
Pagerduty Pagerduty
</Option> </Option>
</Select> </Select>
</FormItem> </Form.Item>
<FormItem>{renderSettings()}</FormItem> <Form.Item>{renderSettings()}</Form.Item>
<FormItem> <Form.Item>
<Button <Button
disabled={savingState} disabled={savingState}
loading={savingState} loading={savingState}
@ -110,7 +109,7 @@ function FormAlertChannels({
> >
{t('button_return')} {t('button_return')}
</Button> </Button>
</FormItem> </Form.Item>
</Form> </Form>
</> </>
); );