@ant-design/icons#GithubFilled JavaScript Examples
The following examples show how to use
@ant-design/icons#GithubFilled.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: dashboard.js From zeroqueue with GNU General Public License v3.0 | 4 votes |
|
export default function Dashboard() {
const user = useUser({ redirectTo: '/' });
const [showNewQueueForm, setShowNewQueueForm] = useState(false);
const [newQueueLoading, setNewQueueLoading] = useState(false);
const [queues, setQueues] = useState([]);
const [loadingQueues, setLoadingQueues] = useState(false);
useEffect(() => {
const fetchQueues = async () => {
try {
if (!user) return;
setLoadingQueues(true);
const res = await fetch(`/api/queue`);
const { data, error } = await res.json();
switch (res.status) {
case 200:
setQueues(data);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingQueues(false);
}
};
fetchQueues();
}, [user]);
const [redis, setRedis] = useState([]);
const [loadingRedis, setLoadingRedis] = useState(false);
useEffect(() => {
const fetchRedis = async () => {
try {
if (!user) return;
setLoadingRedis(true);
const res = await fetch(`/api/queue/redis`);
const { data, error } = await res.json();
switch (res.status) {
case 200:
setRedis(data);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingRedis(false);
}
};
fetchRedis();
}, [user]);
const onFinishFailed = (errorInfo) => {
console.error('Failed:', errorInfo);
};
const onFinish = async (values) => {
const body = {
name: values.name,
schedule: values.schedule,
};
try {
setNewQueueLoading(true);
const res = await fetch('/api/queue', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const { data, error } = await res.json();
switch (res.status) {
case 200:
message.success('New queue successful');
Router.push(`/queue/${data.id}`);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setNewQueueLoading(false);
}
};
return (
<div>
<Head>
<title>Zero Queue</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{user && (
<Layout className="dashboard-layout">
<Sidebar defaultSelected={'overview'} />
<Layout className="dashboard-layout">
<Header className="dashboard-header">
<div className="dashboard-header__space" />
<Button type="link" href="/api/auth/logout">
Logout
</Button>
</Header>
<Content className="dashboard-content">
<Breadcrumb className="dashboard-content__breadcrumb">
<Breadcrumb.Item>ZeroQueue</Breadcrumb.Item>
<Breadcrumb.Item>Overview</Breadcrumb.Item>
</Breadcrumb>
<Tabs className="dashboard-content__tabs" defaultActiveKey="queues" type="card">
<TabPane tab="Queues" key="queues">
<div className="dashboard-content__background">
<div className="dashboard-overview-header">
<Title className="dashboard-overview-header__title" level={3}>
All Queues
</Title>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => setShowNewQueueForm(true)}
>
New Queue
</Button>
</div>
<Table
rowKey="id"
loading={loadingQueues}
columns={queuesColumns}
dataSource={queues}
/>
</div>
</TabPane>
<TabPane tab="Redis" key="redis">
<div className="dashboard-content__background">
<div className="dashboard-overview-header">
<Title className="dashboard-overview-header__title" level={3}>
Redis Statistics
</Title>
</div>
<Table
rowKey="name"
loading={loadingRedis}
columns={redisColumns}
dataSource={redis}
/>
</div>
</TabPane>
</Tabs>
</Content>
<Footer className="dashboard-footer">
<Button
type="link"
href="https://github.com/thezeroqueue/zeroqueue"
target="blank"
icon={<GithubFilled />}
/>
</Footer>
</Layout>
<Modal
title="Create a new queue"
visible={showNewQueueForm}
onCancel={() => setShowNewQueueForm(false)}
footer={null}
>
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Name"
name="name"
rules={[{ required: true, message: 'Please input your queue name!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Schedule (cron)"
name="schedule"
rules={[
() => ({
validator(_, value) {
if (value && !isValidCron(value)) {
return Promise.reject('Please input a valid cron!');
}
return Promise.resolve();
},
}),
]}
>
<Input />
</Form.Item>
<Form.Item {...tailLayout}>
<Button loading={newQueueLoading} type="primary" htmlType="submit">
Create
</Button>
</Form.Item>
</Form>
</Modal>
</Layout>
)}
</div>
);
}
Example #2
| Source File: index.js From zeroqueue with GNU General Public License v3.0 | 4 votes |
|
export default function Home() {
useUser({ redirectTo: '/dashboard', redirectIfFound: true });
const [loading, setLoading] = useState(false);
const onFinishFailed = (errorInfo) => {
console.error('Failed:', errorInfo);
};
const onFinish = async (values) => {
const body = {
username: values.username,
password: values.password,
remember: values.remember,
};
try {
setLoading(true);
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const { error } = await res.json();
switch (res.status) {
case 200:
message.success('Login successful');
Router.push('/dashboard');
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoading(false);
}
};
return (
<div>
<Head>
<title>Zero Queue</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Layout className="home-body">
<Title className="login-header" level={1} code>
ZeroQueue
</Title>
<Paragraph className="login-sub-header">⏰ A low-code queue management system ⏰</Paragraph>
<Card className="login-card">
<Paragraph className="login-card__header">Log into your account</Paragraph>
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button loading={loading} type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Card>
<Footer className="dashboard-footer">
<Button
type="link"
href="https://github.com/thezeroqueue/zeroqueue"
target="blank"
icon={<GithubFilled />}
/>
</Footer>
</Layout>
</div>
);
}
Example #3
| Source File: [status].js From zeroqueue with GNU General Public License v3.0 | 4 votes |
|
export default function JobStatus() {
const user = useUser({ redirectTo: '/' });
const router = useRouter();
const { id, status } = router.query;
const [jobStatus, setJobStatus] = useState({ jobs: [], count: 0 });
const [jobStatusLoading, setJobStatusLoading] = useState(false);
const fetchJobStatus = async (page, size) => {
if (!id || !status) return;
try {
setJobStatusLoading(true);
const res = await fetch(`/api/queue/${id}/${status}?page=${page}&size=${size}`);
const { data, error } = await res.json();
switch (res.status) {
case 200:
setJobStatus(data);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setJobStatusLoading(false);
}
};
useEffect(() => {
fetchJobStatus(1, 10);
}, [user]);
const onPageChange = (page, pageSize) => {
fetchJobStatus(page, pageSize);
};
const onPageSizeChange = (page, pageSize) => {
fetchJobStatus(page, pageSize);
};
const expandedRowRender = (record) => {
return <ReactJson src={record} />;
};
return (
<div>
<Head>
<title>Zero Queue</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{user && (
<Layout className="dashboard-layout">
<Sidebar />
<Layout className="dashboard-layout">
<Header className="dashboard-header">
<div className="dashboard-header__space" />
<Button type="link" href="/api/auth/logout">
Logout
</Button>
</Header>
<Content className="dashboard-content">
<Breadcrumb className="dashboard-content__breadcrumb">
<Breadcrumb.Item>ZeroQueue</Breadcrumb.Item>
<Breadcrumb.Item>
<Link href={`/dashboard`}>
<a>Queue</a>
</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>
<Link href={`/queue/${id}`}>
<a>{id}</a>
</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>{status}</Breadcrumb.Item>
</Breadcrumb>
<div className="dashboard-content__background">
<div className="dashboard-overview-header">
<Title className="dashboard-overview-header__title" level={3}>
{status}
</Title>
</div>
<Table
rowKey="id"
loading={jobStatusLoading}
columns={columns}
expandable={{
expandedRowRender,
}}
dataSource={jobStatus.jobs.map((job) => ({ queueId: id, ...job }))}
pagination={{
total: jobStatus.count,
onChange: onPageChange,
onShowSizeChange: onPageSizeChange,
}}
/>
</div>
</Content>
<Footer className="dashboard-footer">
<Button
type="link"
href="https://github.com/thezeroqueue/zeroqueue"
target="blank"
icon={<GithubFilled />}
/>
</Footer>
</Layout>
</Layout>
)}
</div>
);
}
Example #4
| Source File: [id].js From zeroqueue with GNU General Public License v3.0 | 4 votes |
|
export default function Queue() {
const user = useUser({ redirectTo: '/' });
const router = useRouter();
const { id } = router.query;
const [queue, setQueue] = useState(null);
const [loadingQueue, setLoadingQueue] = useState(false);
useEffect(() => {
const fetchQueue = async () => {
try {
if (!user) return;
setLoadingQueue(true);
const res = await fetch(`/api/queue/${id}`);
const { data, error } = await res.json();
switch (res.status) {
case 200:
setQueue(data);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingQueue(false);
}
};
fetchQueue();
}, [user]);
const [showNewJobsForm, setShowNewJobsForm] = useState(false);
const [jobs, setJobs] = useState(null);
const [loadingAddJobs, setLoadingAddJobs] = useState(false);
const onAddJob = async () => {
try {
if (!user) return;
setLoadingAddJobs(true);
const res = await fetch(`/api/queue/${id}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: jobs,
});
const { error } = await res.json();
switch (res.status) {
case 200:
location.reload();
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingAddJobs(false);
}
};
const [showWorkerCodeSample, setShowWorkerCodeSample] = useState(false);
const onDropdownClick = ({ key }) => {
switch (key) {
case DROPDOWN_KEYS.CODE_SAMPLE:
return setShowWorkerCodeSample(true);
default:
break;
}
};
const queueName = () => (queue && queue.name) || '...';
const [redis, setRedis] = useState(null);
const [loadingSecret, setLoadingSecret] = useState(null);
const onShowSecret = async (checked) => {
if (!checked) return setRedis(null);
try {
if (!user) return;
setLoadingSecret(true);
const res = await fetch(`/api/config`);
const { data, error } = await res.json();
switch (res.status) {
case 200:
setRedis(data.REDIS_URL);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingSecret(false);
}
};
return (
<div>
<Head>
<title>Zero Queue</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{user && (
<Layout className="dashboard-layout">
<Sidebar />
<Layout className="dashboard-layout">
<Header className="dashboard-header">
<div className="dashboard-header__space" />
<Button type="link" href="/api/auth/logout">
Logout
</Button>
</Header>
<Content className="dashboard-content">
<Breadcrumb className="dashboard-content__breadcrumb">
<Breadcrumb.Item>ZeroQueue</Breadcrumb.Item>
<Breadcrumb.Item>
<Link href={`/dashboard`}>
<a>Queue</a>
</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>{id}</Breadcrumb.Item>
</Breadcrumb>
<div className="dashboard-content__background">
<div className="dashboard-overview-header">
<Title className="dashboard-overview-header__title" level={3}>
{queueName()}
</Title>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => setShowNewJobsForm(true)}
>
New Jobs
</Button>
<Dropdown
overlay={
<Menu onClick={onDropdownClick}>
<Menu.Item key={DROPDOWN_KEYS.CODE_SAMPLE}>
<ApiOutlined /> Code sample
</Menu.Item>
</Menu>
}
>
<Button className="dashboard-overview-header__last-button">
More <DownOutlined />
</Button>
</Dropdown>
</div>
<Table
rowKey="name"
loading={loadingQueue}
columns={columns(id)}
dataSource={(queue && queue.status) || []}
/>
</div>
</Content>
<Footer className="dashboard-footer">
<Button
type="link"
href="https://github.com/thezeroqueue/zeroqueue"
target="blank"
icon={<GithubFilled />}
/>
</Footer>
</Layout>
<Modal
title="Add new jobs"
visible={showNewJobsForm}
onCancel={() => setShowNewJobsForm(false)}
footer={null}
>
<Dragger {...uploadProps(setJobs)}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag JSON file to this area to upload</p>
<p className="ant-upload-hint">See docs to learn more...</p>
</Dragger>
<br />
<Button
loading={loadingAddJobs}
disabled={!jobs}
type="primary"
block
onClick={onAddJob}
>
Add Jobs
</Button>
</Modal>
<Modal
title="Worker code sample"
width="45%"
visible={showWorkerCodeSample}
onCancel={() => setShowWorkerCodeSample(false)}
footer={null}
>
<p>Install dependencies:</p>
<InstallDependencies />
<div className="modal-inline-text">
<p>Use the following template:</p>
<p>
<Switch
unCheckedChildren={<EyeInvisibleOutlined />}
loading={loadingSecret}
onChange={onShowSecret}
/>
</p>
</div>
<Worker queue={queueName()} redis={redis} />
</Modal>
</Layout>
)}
</div>
);
}
Example #5
| Source File: settings.js From zeroqueue with GNU General Public License v3.0 | 4 votes |
|
export default function Settings() {
const user = useUser({ redirectTo: '/' });
const [userUpdateLoading, setUserUpdateLoading] = useState(false);
const updateUser = async (values) => {
if (values.newPassword !== values.confirmPassword) {
message.error("Passwords don't match");
return;
}
const body = {
newUsername: values.newUsername || null,
password: values.password,
newPassword: values.newPassword || null,
};
try {
setUserUpdateLoading(true);
const res = await fetch(`/api/auth/user`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const { error } = await res.json();
switch (res.status) {
case 200:
message.success('User updated successfully');
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setUserUpdateLoading(false);
}
};
const onFinishFailed = (errorInfo) => {
console.error('Failed:', errorInfo);
};
return (
<div>
<Head>
<title>Zero Queue</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{user && (
<Layout className="dashboard-layout">
<Sidebar defaultSelected={'settings'} />
<Layout className="dashboard-layout">
<Header className="dashboard-header">
<div className="dashboard-header__space" />
<Button type="link" href="/api/auth/logout">
Logout
</Button>
</Header>
<Content className="dashboard-content">
<Breadcrumb className="dashboard-content__breadcrumb">
<Breadcrumb.Item>ZeroQueue</Breadcrumb.Item>
<Breadcrumb.Item>Settings</Breadcrumb.Item>
</Breadcrumb>
<div className="dashboard-content__background">
<div className="dashboard-overview-header">
<Title className="dashboard-overview-header__title" level={4}>
Change username
</Title>
</div>
<Form
{...layout}
layout="vertical"
name="update-username"
initialValues={{ remember: true }}
onFinish={updateUser}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="New Username"
name="newUsername"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout}>
<Button loading={userUpdateLoading} type="primary" htmlType="submit">
Save
</Button>
</Form.Item>
</Form>
</div>
<div className="dashboard-content__background">
<div className="dashboard-overview-header">
<Title className="dashboard-overview-header__title" level={4}>
Change password
</Title>
</div>
<Form
{...layout}
layout="vertical"
name="update-password"
initialValues={{ remember: true }}
onFinish={updateUser}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Current Password"
name="password"
rules={[{ required: true, message: 'Please input your current password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="New Password"
name="newPassword"
rules={[{ required: true, message: 'Please input your new password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="Confirm Password"
name="confirmPassword"
rules={[{ required: true, message: 'Please input your new password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout}>
<Button loading={userUpdateLoading} type="primary" htmlType="submit">
Save
</Button>
</Form.Item>
</Form>
</div>
</Content>
<Footer className="dashboard-footer">
<Button
type="link"
href="https://github.com/thezeroqueue/zeroqueue"
target="blank"
icon={<GithubFilled />}
/>
</Footer>
</Layout>
</Layout>
)}
</div>
);
}
