open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2026-07-18 18:44:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加新建订阅

Browse Source
This commit is contained in:
whyour
2022-05-10 14:38:06 +08:00
parent 85d8565241
commit ebb6290468
13 changed files with 489 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/crontab/modal.tsx
+2
View File
@@ -49,6 +49,7 @@ const CronModal = ({
title={cron ? '编辑任务' : '新建任务'}
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
@@ -166,6 +167,7 @@ const CronLabelModal = ({
title="批量修改标签"
visible={visible}
footer={buttons}
centered
forceRender
onCancel={() => handleCancel(false)}
confirmLoading={loading}
src/pages/dependence/modal.tsx
+1
View File
@@ -71,6 +71,7 @@ const DependenceModal = ({
title={dependence ? '编辑依赖' : '新建依赖'}
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
src/pages/env/editNameModal.tsx
Vendored
+1
View File
@@ -41,6 +41,7 @@ const EditNameModal = ({
title="修改环境变量名称"
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
src/pages/env/modal.tsx
Vendored
+1
View File
@@ -61,6 +61,7 @@ const EnvModal = ({
title={env ? '编辑变量' : '新建变量'}
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
src/pages/script/editNameModal.tsx
+1
View File
@@ -56,6 +56,7 @@ const EditScriptNameModal = ({
title="新建文件"
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
src/pages/script/saveModal.tsx
+1
View File
@@ -43,6 +43,7 @@ const SaveModal = ({
title="保存文件"
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
src/pages/script/setting.tsx
+1
View File
@@ -43,6 +43,7 @@ const SettingModal = ({
title="运行设置"
visible={visible}
forceRender
centered
onCancel={() => handleCancel()}
>
<Form
src/pages/setting/appModal.tsx
+1
View File
@@ -43,6 +43,7 @@ const AppModal = ({
title={app ? '编辑应用' : '新建应用'}
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
src/pages/subscription/modal.tsx
+188 -16
View File
@@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react';
import { Modal, message, Input, Form, Button } from 'antd';
import { Modal, message, InputNumber, Form, Radio, Select, Input } from 'antd';
import { request } from '@/utils/http';
import config from '@/utils/config';
import cron_parser from 'cron-parser';
import EditableTagGroup from '@/components/tag';
const { Option } = Select;
const SubscriptionModal = ({
subscription,
handleCancel,
@@ -16,6 +17,9 @@ const SubscriptionModal = ({
}) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const [type, setType] = useState('public-repo');
const [scheduleType, setScheduleType] = useState('crontab');
const [pullType, setPullType] = useState<'ssh-key' | 'user-pwd'>('ssh-key');
const handleOk = async (values: any) => {
setLoading(true);
@@ -45,6 +49,96 @@ const SubscriptionModal = ({
}
};
const typeChange = (e) => {
setType(e.target.value);
};
const scheduleTypeChange = (e) => {
setScheduleType(e.target.value);
form.setFieldsValue({ schedule: '' });
};
const pullTypeChange = (e) => {
setPullType(e.target.value);
};
const IntervalSelect = ({
value,
onChange,
}: {
value?: any;
onChange?: (param: any) => void;
}) => {
const [intervalType, setIntervalType] = useState('days');
const [intervalNumber, setIntervalNumber] = useState<number>();
const intervalTypeChange = (e) => {
setIntervalType(e.target.value);
onChange?.({ [e.target.value]: intervalNumber });
};
const numberChange = (value: number) => {
setIntervalNumber(value);
onChange?.({ [intervalType]: value });
};
useEffect(() => {
if (value) {
const key = Object.keys(value)[0];
if (key) {
setIntervalType(key);
setIntervalNumber(value[key]);
}
}
}, [value]);
return (
<Input.Group compact>
<InputNumber
addonBefore="每"
precision={0}
min={1}
defaultValue={intervalNumber}
style={{ width: 'calc(100% - 58px)' }}
onChange={numberChange}
/>
<Select defaultValue={intervalType} onChange={intervalTypeChange}>
<Option value="days">天</Option>
<Option value="hours">时</Option>
<Option value="minutes">分</Option>
<Option value="seconds">秒</Option>
</Select>
</Input.Group>
);
};
const PullOptions = ({
value,
onChange,
type,
}: {
value?: any;
type: 'ssh-key' | 'user-pwd';
onChange?: (param: any) => void;
}) => {
return type === 'ssh-key' ? (
<Form.Item name="private_key" label="私钥" rules={[{ required: true }]}>
<Input.TextArea rows={4} autoSize={true} placeholder="请输入私钥" />
</Form.Item>
) : (
<>
<Form.Item name="username" label="用户名" rules={[{ required: true }]}>
<Input placeholder="请输入认证用户名" />
</Form.Item>
<Form.Item
name="password"
tooltip="Github已不支持密码认证，请使用Token方式"
label="密码/Token"
rules={[{ required: true }]}
>
<Input placeholder="请输入密码或者Token" />
</Form.Item>
</>
);
};
useEffect(() => {
form.resetFields();
}, [subscription, visible]);
@@ -54,6 +148,7 @@ const SubscriptionModal = ({
title={subscription ? '编辑订阅' : '新建订阅'}
visible={visible}
forceRender
centered
onOk={() => {
form
.validateFields()
@@ -69,23 +164,25 @@ const SubscriptionModal = ({
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={subscription}
layout="vertical"
>
<Form.Item name="name" label="名称">
<Input placeholder="请输入订阅名称" />
<Form.Item name="name" label="别名">
<Input placeholder="请输入订阅别名" />
</Form.Item>
<Form.Item name="url" label="链接" rules={[{ required: true }]}>
<Input placeholder="请输入订阅链接" />
</Form.Item>
<Form.Item
name="command"
label="命令"
rules={[{ required: true, whitespace: true }]}
name="schedule_type"
label="定时类型"
initialValue={'crontab'}
>
<Input.TextArea
rows={4}
autoSize={true}
placeholder="请输入要执行的命令"
/>
<Radio.Group onChange={scheduleTypeChange}>
<Radio value="crontab">crontab</Radio>
<Radio value="interval">interval</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name="schedule"
@@ -94,7 +191,11 @@ const SubscriptionModal = ({
{ required: true },
{
validator: (rule, value) => {
if (!value || cron_parser.parseExpression(value).hasNext()) {
if (
scheduleType === 'interval' ||
!value ||
cron_parser.parseExpression(value).hasNext()
) {
return Promise.resolve();
} else {
return Promise.reject('Subscription表达式格式有误');
@@ -103,11 +204,82 @@ const SubscriptionModal = ({
},
]}
>
<Input placeholder="秒(可选) 分 时 天 月 周" />
{scheduleType === 'interval' ? (
<IntervalSelect />
) : (
<Input placeholder="秒(可选) 分 时 天 月 周" />
)}
</Form.Item>
<Form.Item name="labels" label="标签">
<EditableTagGroup />
<Form.Item name="type" label="类型" initialValue={'public-repo'}>
<Radio.Group onChange={typeChange}>
<Radio value="public-repo">公开仓库</Radio>
<Radio value="private-repo">私有仓库</Radio>
<Radio value="file">单个文件</Radio>
</Radio.Group>
</Form.Item>
{type !== 'file' && (
<>
<Form.Item
name="command"
label="白名单"
rules={[{ whitespace: true }]}
tooltip="多个关键词竖线分割，支持正则表达式"
>
<Input.TextArea
rows={4}
autoSize={true}
placeholder="请输入脚本筛选白名单关键词，多个关键词竖线分割"
/>
</Form.Item>
<Form.Item
name="command"
label="黑名单"
rules={[{ whitespace: true }]}
tooltip="多个关键词竖线分割，支持正则表达式"
>
<Input.TextArea
rows={4}
autoSize={true}
placeholder="请输入脚本筛选黑名单关键词，多个关键词竖线分割"
/>
</Form.Item>
<Form.Item
name="command"
label="依赖文件"
rules={[{ whitespace: true }]}
tooltip="多个关键词竖线分割，支持正则表达式"
>
<Input.TextArea
rows={4}
autoSize={true}
placeholder="请输入脚本依赖文件关键词，多个关键词竖线分割"
/>
</Form.Item>
{type === 'private-repo' && (
<>
<Form.Item
name="pull_type"
label="拉取方式"
initialValue={'ssh-key'}
>
<Radio.Group onChange={pullTypeChange}>
<Radio value="ssh-key">私钥</Radio>
<Radio value="user-pwd">用户名密码/Token</Radio>
</Radio.Group>
</Form.Item>
<PullOptions type={pullType} />
</>
)}
<Form.Item
name="alias"
label="唯一值"
rules={[{ required: true }]}
tooltip="唯一值用于日志目录和私钥别名"
>
<Input placeholder="自动生成" disabled />
</Form.Item>
</>
)}
</Form>
</Modal>
);