@ant-design/icons#ThunderboltFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#ThunderboltFilled.
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: Layout.tsx From jitsu with MIT License | 6 votes |
|
menuItems = [
makeItem(<HomeFilled />, "Home", "/connections", "#77c593"),
makeItem(<ThunderboltFilled />, "Live Events", "/events-stream", "#fccd04"),
makeItem(<AreaChartOutlined />, "Statistics", "/dashboard", "#88bdbc"),
makeItem(<Icon component={KeyIcon} />, "API Keys", "/api-keys", "#d79922"),
makeItem(<ApiFilled />, "Sources", "/sources", "#d83f87"),
makeItem(<NotificationFilled />, "Destinations", "/destinations", "#4056a1"),
makeItem(<Icon component={DbtCloudIcon} />, "dbt Cloud Integration", "/dbtcloud", "#e76e52"),
makeItem(<SettingOutlined />, "Project settings", "/project-settings", "#0d6050"),
makeItem(<Icon component={GlobeIcon} />, "Geo data resolver", "/geo-data-resolver", "#41b3a3"),
makeItem(<CloudFilled />, "Custom Domains", "/domains", "#5ab9ea", f => f.enableCustomDomains),
makeItem(<Icon component={DownloadIcon} />, "Download Config", "/cfg-download", "#14a76c"),
]
Example #2
| Source File: StatusPage.tsx From jitsu with MIT License | 4 votes |
|
StatusPage: React.FC<{}> = () => {
const services = useServices()
const history = useHistory()
const location = useLocation()
const params = new URLSearchParams(location.search)
const [period, setPeriod] = useState(params.get("period") || "month")
const [reloadCount, setReloadCount] = useState(0)
const stats = new StatisticsService(services.backendApiClient, services.activeProject.id, true)
const isSelfHosted = services.features.environment !== "jitsu_cloud"
const now = new Date()
const periodMap = {
month: addSeconds(now, -30 * 24 * 60 * 60),
week: addSeconds(now, -7 * 24 * 60 * 60),
day: addSeconds(now, -24 * 60 * 60),
}
const periods = [
{ label: "Last 30 days", value: "month" },
{ label: "Last 7 days", value: "week" },
{ label: "Last 24 hours", value: "day" },
]
const destinationsOptions = getAllDestinationsAsOptions(true)
const apiKeysOptions = getAllApiKeysAsOptions(true)
const sourcesOptions = getAllSourcesAsOptions(true)
const handlePeriodSelect = value => {
const newPeriod = value.value
setPeriod(newPeriod)
setReloadCount(reloadCount + 1)
const queryParams = new URLSearchParams(window.location.search)
queryParams.set("period", newPeriod)
history.replace({ search: queryParams.toString() })
}
return (
<>
<div className="flex flex-row space-x-2 justify-between items-center mb-4">
<div className="flex-col">
<SelectFilter label="Period" onChange={handlePeriodSelect} options={periods} initialValue={period} />
</div>
<div className="flex-col">
<NavLink to="/events_stream" className="inline-block mr-5">
<Button type="ghost" size="large" icon={<ThunderboltFilled />} className="w-full mb-2">
Live Events
</Button>
</NavLink>
<Button
size="large"
icon={<ReloadOutlined />}
onClick={() => {
setReloadCount(reloadCount + 1)
}}
>
Reload
</Button>
</div>
</div>
{isSelfHosted && (
<Row>
<span className={`text-secondaryText mb-4`}>
Jitsu 1.37 brought an update that enables for serving more fine-grained statistics data. The new charts will
not show the events processed by the previous versions of Jitsu.
</span>
</Row>
)}
<Row gutter={16} className="status-page-cards-row mb-4">
<Col span={12}>
<StatusChart
title={
<span>
Incoming <NavLink to="/api_keys">events</NavLink>
</span>
}
stats={stats}
period={periodMap[period]}
namespace="source"
type="push"
granularity={period === "day" ? "hour" : "day"}
dataToDisplay={["success", "skip", "errors"]}
legendLabels={{ skip: "skip (no dst.)" }}
filterOptions={apiKeysOptions}
reloadCount={reloadCount}
/>
</Col>
<Col span={12}>
<StatusChart
title={
<span>
Processed <NavLink to="/destinations">events</NavLink>
</span>
}
stats={stats}
period={periodMap[period]}
namespace="destination"
type="push"
granularity={period === "day" ? "hour" : "day"}
dataToDisplay={["success", "skip", "errors"]}
filterOptions={destinationsOptions}
reloadCount={reloadCount}
/>
</Col>
</Row>
<StatusChart
title={<span>Rows synchronized from sources</span>}
stats={stats}
period={periodMap[period]}
namespace="source"
type="pull"
granularity={period === "day" ? "hour" : "day"}
dataToDisplay={["success", "skip", "errors"]}
filterOptions={sourcesOptions}
reloadCount={reloadCount}
extra={SyncEventsDocsTooltip}
/>
</>
)
}
Example #3
| Source File: MITMYakScriptLoader.tsx From yakit with GNU Affero General Public License v3.0 | 4 votes |
|
MITMYakScriptLoader = React.memo((p: MITMYakScriptLoaderProps) => {
const {hooks, script, onSubmitYakScriptId} = p;
const i = script;
return <Card
size={"small"}
bodyStyle={{paddingLeft: 12, paddingTop: 8, paddingBottom: 8, paddingRight: 12}}
style={{
width: "100%", marginBottom: 4,
// backgroundColor: hooks.get(i.ScriptName) ? "#d6e4ff" : undefined
}} hoverable={true}
>
<div style={{display: "flex", flexDirection: "row", width: "100%"}}>
<Checkbox
style={{marginRight: 6}}
checked={!!hooks.get(i.ScriptName)}
onClick={() => {
const checked = !!hooks.get(i.ScriptName);
if (checked) {
ipcRenderer.invoke("mitm-remove-hook", {
HookName: [],
RemoveHookID: [i.ScriptName],
} as any)
return
}
if (!p.onSubmitYakScriptId) {
return
}
if ((script.Params || []).length > 0 && script.Type !== "port-scan") {
let m2 = showModal({
title: `设置 [${script.ScriptName}] 的参数`,
content: <>
<YakScriptParamsSetter
{...script}
onParamsConfirm={(p: YakExecutorParam[]) => {
clearMITMPluginCache()
onSubmitYakScriptId && onSubmitYakScriptId(script.Id, p)
m2.destroy()
}}
submitVerbose={"设置 MITM 参数"}
/>
</>, width: "50%",
})
} else {
clearMITMPluginCache()
p.onSubmitYakScriptId && p.onSubmitYakScriptId(script.Id, [])
}
}}
>
<OneLine overflow={"hidden"} maxWidth={200}>
{!!i.ScriptName ? i.ScriptName : `{hot-patched}`}
</OneLine>
{/*<div style={{marginRight: 6, maxWidth: p.maxWidth || 260, overflowX: "hidden", textOverflow: "ellipsis"}}>*/}
{/*</div>*/}
</Checkbox>
{script.Help && <Tooltip title={script.Help}>
<a href={"#"}><QuestionCircleOutlined/></a>
</Tooltip>}
<div style={{flex: 1, textAlign: "right"}}>
<OneLine>
{script.Author && <Tooltip title={script.Author}>
<a href={"#"}>
<UserOutlined/>
</a>
</Tooltip>}
<Popconfirm
disabled={!p.onSendToPatch}
title={"发送到【热加载】中调试代码？"}
onConfirm={() => {
let _ = p.onSendToPatch && p.onSendToPatch(script.Content);
}}
>
<Button
disabled={!p.onSendToPatch}
type={"link"}
size={"small"}
icon={<ThunderboltFilled/>}>
</Button>
</Popconfirm>
</OneLine>
</div>
</div>
</Card>
})
Example #4
| Source File: PayloadManager.tsx From yakit with GNU Affero General Public License v3.0 | 4 votes |
|
PayloadManagerPage: React.FC<PayloadManagerPageProp> = (props) => {
const [groups, setGroups] = useState<string[]>([])
const [selected, setSelected] = useState("")
const [response, setResponse] = useState<QueryGeneralResponse<Payload>>()
const [params, setParams] = useState<QueryPayloadParams>({
Keyword: "",
Group: "",
Pagination: {Page: 1, Limit: 20, Order: "desc", OrderBy: "updated_at"}
})
const [selectedRows, setSelectedRows] = useState<Payload[]>([])
const [loading, setLoading] = useState(false)
const rowSelection = {
selectedRowKeys: selectedRows.map((item) => item.Id),
onChange: (selectedRowKeys, selectedRows) => setSelectedRows(selectedRows),
fixed: true
}
const pagination: PaginationSchema | undefined = response?.Pagination
const updateGroup = () => {
ipcRenderer
.invoke("GetAllPayloadGroup")
.then((data: { Groups: string[] }) => {
setGroups(data.Groups || [])
})
.catch((e: any) => {
failed(e?.details || "call GetAllPayloadGroup failed")
})
.finally()
}
const updateDict = (page?: number, limit?: number) => {
ipcRenderer
.invoke("QueryPayload", {
...params,
Group: selected,
Pagination: {
...params.Pagination,
Page: page || params.Pagination.Page,
Limit: limit || params.Pagination.Limit
}
} as QueryPayloadParams)
.then((data) => {
setResponse(data)
})
.catch((e: any) => {
failed(e?.details || "query payload failed")
})
}
const delDictContent = (id?: number) => {
let params: any = {}
if (id !== undefined) params.Id = +id
else params.Ids = selectedRows.map((item) => +item.Id)
ipcRenderer
.invoke("DeletePayloadByContent", params)
.then(() => {
setSelectedRows([])
updateDict()
})
.catch((e: any) => {
failed("batch delete failed")
})
}
useEffect(() => {
updateGroup()
}, [])
useEffect(() => {
if (!selected) {
return
}
updateDict()
}, [selected])
return (
<div className='payload-manager-page'>
<PageHeader
title={"Payload / 字典管理"}
subTitle={`增加 / 删除 / 管理字典，可以通过 fuzz 模块 {{x(字典名)}} 来渲染`}
/>
<Row gutter={18} style={{flexGrow: 1}}>
<Col span={8}>
<AutoCard
title={"选择 / 查看已有字典"}
size={"small"} loading={loading}
bordered={false}
bodyStyle={{overflow: "auto"}}
extra={
!props.readOnly && <Form size={"small"} onSubmitCapture={(e) => e.preventDefault()}>
<Form.Item style={{marginBottom: 0}} label={" "} colon={false}>
<Button.Group>
<Button
size={"small"}
onClick={() => {
let m = showModal({
title: "创建新的 Payload 组/字典",
content: (
<>
<CreatePayloadGroup
onLoading={() => {
setLoading(true)
}}
onLoadingFinished={() => {
setTimeout(() => setLoading(false), 300)
}}
Group={""}
onFinished={(e) => {
info("创建/修改 Payload 字典/组成功")
updateGroup()
m.destroy()
}}
/>
</>
),
width: "60%"
})
}}
>
新增 / 扩充字典
</Button>
<Button
size={"small"}
onClick={() => {
let m = showModal({
title: "上传新的 Payload 组/字典",
content: (
<>
<UploadPayloadGroup
Group={""}
onFinished={(e) => {
info("上传 Payload 字典/组成功")
updateGroup()
m.destroy()
}}
/>
</>
),
width: "60%",
maskClosable: false
})
}}
>
上传字典
</Button>
</Button.Group>
</Form.Item>
</Form>
}
>
<List<string>
style={{height: 200}}
dataSource={groups}
renderItem={(element, index) => {
return (
<List.Item id={index.toString()}>
<Button.Group style={{width: "100%", textAlign: "left"}}>
<Button
style={{width: "100%", textAlign: "left"}}
type={selected === element ? "primary" : undefined}
onClick={(e) => setSelected(element)}
>
字典分组名：{element}
</Button>
{props.selectorHandle && <Popconfirm title={"确定要使用该字典？"}
onConfirm={() => {
props.selectorHandle && props.selectorHandle(fuzzTag(element))
}}
>
<Button type={"primary"} icon={<ThunderboltFilled/>}/>
</Popconfirm>}
{!props.readOnly && <Popconfirm
title={"确定删除该字典吗？"}
onConfirm={(e) => {
ipcRenderer
.invoke("DeletePayloadByGroup", {
Group: element
})
.then(() => {
updateGroup()
if (selected === element) {
setSelected("")
setResponse(undefined)
}
})
.catch((e: any) => {
failed("Delete Payload By Group failed")
})
}}
>
<Button
danger={true}
icon={<DeleteOutlined/>}
type={selected === element ? "primary" : undefined}
/>
</Popconfirm>}
</Button.Group>
</List.Item>
)
}}
/>
</AutoCard>
</Col>
<Col span={16}>
<AutoCard
title={
<>
<span>字典内容</span>
{selectedRows.length > 0 && !props.readOnly && (
<Button size='small' type='link' danger onClick={() => delDictContent()}>
批量删除
</Button>
)}
</>
}
size={"small"}
bordered={false}
bodyStyle={{overflow: "auto", padding: 0}}
extra={
props.readOnly ?
(
!!props.selectorHandle ? <Button size={"small"} type={"primary"} onClick={() => {
props.selectorHandle && props.selectorHandle(`{{x(${selected})}}`)
}}>
选择该Fuzz标签
</Button> : <CopyToClipboard
text={`{{x(${selected})}}`}
onCopy={(text, ok) => {
if (ok) success("已复制到粘贴板")
}}
>
<Button size={"small"}>复制Fuzz标签</Button>
</CopyToClipboard>
) : <Form
size={"small"}
onSubmitCapture={(e) => {
e.preventDefault()
updateDict(1, 20)
}}
layout={"inline"}
style={{marginBottom: 0}}
>
<Form.Item style={{marginBottom: 0}}>
{selected && <Tag color={"geekblue"}>{selected}</Tag>}
</Form.Item>
<InputItem
label={"搜索"}
style={{marginBottom: 0}}
setValue={(Keyword) => setParams({...params, Keyword})}
value={params.Keyword}
/>
<Form.Item colon={false} label={" "} style={{marginBottom: 0}}>
<Button.Group>
<Button type='primary' htmlType='submit'>
{" "}
Search{" "}
</Button>
{!!props.selectorHandle ? <Button type={"primary"} onClick={() => {
props.selectorHandle && props.selectorHandle(`{{x(${selected})}}`)
}}>
选择该Fuzz标签
</Button> : <CopyToClipboard
text={`{{x(${selected})}}`}
onCopy={(text, ok) => {
if (ok) success("已复制到粘贴板")
}}
>
<Button>复制Fuzz标签</Button>
</CopyToClipboard>}
</Button.Group>
</Form.Item>
</Form>
}
>
<Table<Payload>
style={{height: 200}}
bordered={true}
size={"small"}
rowKey={(row) => row.Id}
rowSelection={rowSelection}
columns={[
{title: "所属字典", render: (e: Payload) => <Tag>{e.Group}</Tag>},
{
title: "字典内容",
render: (e: Payload) => (
<Text style={{width: 500}} ellipsis={{tooltip: true}}>
{e.Content}
</Text>
)
},
{
title: "操作",
fixed: "right",
render: (e: Payload) => (
<Button danger onClick={() => delDictContent(e.Id)}>
删除
</Button>
)
}
]}
onChange={(p) => {
updateDict(p.current, p.pageSize)
}}
pagination={{
size: "small",
pageSize: pagination?.Limit || 10,
total: response?.Total || 0,
showTotal: (i) => <Tag>共{i}条历史记录</Tag>
}}
dataSource={response?.Data}
/>
</AutoCard>
</Col>
</Row>
</div>
)
}
Example #5
| Source File: editors.tsx From yakit with GNU Affero General Public License v3.0 | 4 votes |
|
HTTPPacketEditor: React.FC<HTTPPacketEditorProp> = React.memo((props) => {
const isResponse = props.isResponse || (new Buffer(props.originValue.subarray(0, 5)).toString("utf8")).startsWith("HTTP/")
const [mode, setMode] = useState("text");
const [strValue, setStrValue] = useState(new Buffer(props.originValue).toString('utf8'));
const [hexValue, setHexValue] = useState<Uint8Array>(new Buffer(props.originValue))
const [searchValue, setSearchValue] = useState("");
const [monacoEditor, setMonacoEditor] = useState<IMonacoEditor>();
const [fontSize, setFontSize] = useState(12);
const [highlightDecorations, setHighlightDecorations] = useState<any[]>([]);
const [noWordwrap, setNoWordwrap] = useState(false);
const highlightActive = useMemoizedFn((search: string, regexp?: boolean) => {
if (!monacoEditor) {
return
}
// @ts-ignore
// let range = monacoEditor?.getModel().findMatches(search, false, !!regexp, false, null, false)
// if (range && range.length > 0) {
// const decs = monacoEditor.deltaDecorations(highlightDecorations, range.map(i => {
// return {
// id: `highlight[${searchValue}]`,
// range: i.range,
// options: {
// isWholeLine: false,
// inlineClassName: 'monacoInlineHighlight'
// }
// } as any
// }))
// setHighlightDecorations(decs)
// }
})
/*如何实现 monaco editor 高亮？*/
// https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-line-and-inline-decorations
// hex editor
const [nonce, setNonce] = useState(0);
// The callback facilitates updates to the source data.
const handleSetValue = React.useCallback((offset, value) => {
hexValue[offset] = value;
setNonce(v => (v + 1));
setHexValue(new Buffer(hexValue))
}, [hexValue]);
useEffect(() => {
if (!props.defaultHeight) {
return
}
setStrValue(props.defaultStringValue || "")
setHexValue(Buffer.from(props.defaultStringValue || ""))
}, [props.defaultStringValue])
useEffect(() => {
if (monacoEditor) {
props.onEditor && props.onEditor(monacoEditor)
monacoEditor.setSelection({startColumn: 0, startLineNumber: 0, endLineNumber: 0, endColumn: 0})
}
if (!props.simpleMode && !props.hideSearch && monacoEditor) {
setHighlightDecorations(monacoEditor.deltaDecorations(highlightDecorations, []))
}
}, [monacoEditor])
useEffect(() => {
if (props.readOnly) {
setStrValue(new Buffer(props.originValue).toString('utf8'))
setHexValue(new Buffer(props.originValue))
}
if (props.readOnly && monacoEditor) {
monacoEditor.setSelection({startColumn: 0, startLineNumber: 0, endLineNumber: 0, endColumn: 0})
}
}, [
props.originValue,
props.readOnly,
// monacoEditor,
])
useEffect(() => {
if (props.readOnly) {
return
}
setStrValue(new Buffer(props.originValue).toString('utf8'))
setHexValue(new Buffer(props.originValue))
}, [props.refreshTrigger])
useEffect(() => {
props.onChange && props.onChange(Buffer.from(strValue))
}, [strValue])
useEffect(() => {
props.onChange && props.onChange(hexValue)
}, [hexValue])
const empty = !!props.emptyOr && props.originValue.length == 0
return <div style={{width: "100%", height: "100%"}}>
<Card
className={"flex-card"}
size={"small"} loading={props.loading}
bordered={props.bordered}
style={{height: "100%", width: "100%"}}
title={!props.noHeader && <Space>
{!props.noTitle && <span>{isResponse ? "Response" : "Request"}</span>}
{!props.simpleMode ? (!props.noHex && <SelectOne
label={" "}
colon={false} value={mode}
setValue={e => {
if (mode === "text" && e === "hex") {
setHexValue(new Buffer(strValue))
}
if (mode === "hex" && e === "text") {
setStrValue(Buffer.from(hexValue).toString("utf8"))
}
setMode(e)
}}
data={[
{text: "TEXT", value: "text"},
{text: "HEX", value: "hex"},
]} size={"small"} formItemStyle={{marginBottom: 0}}
/>) : <Form.Item style={{marginBottom: 0}}>
<Tag color={"geekblue"}>{mode.toUpperCase()}</Tag>
</Form.Item>}
{mode === "text" && !props.hideSearch && !props.simpleMode && <Input.Search
size={"small"} value={searchValue}
onChange={e => {
setSearchValue(e.target.value)
}} enterButton={true}
onSearch={e => {
highlightActive(searchValue)
}}
/>}
</Space>}
bodyStyle={{padding: 0, width: "100%", display: "flex", flexDirection: "column"}}
extra={!props.noHeader && <Space size={2}>
{props.extra}
{props.sendToWebFuzzer && <Button
size={"small"}
type={"primary"}
icon={<ThunderboltFilled/>}
onClick={() => {
ipcRenderer.invoke("send-to-tab", {
type: "fuzzer",
data: {isHttps: props.defaultHttps || false, request: strValue}
})
}}
>FUZZ</Button>}
<Tooltip title={"不自动换行"}>
<Button
size={"small"}
type={noWordwrap ? "link" : "primary"}
icon={<EnterOutlined/>}
onClick={() => {
setNoWordwrap(!noWordwrap)
}}
/>
</Tooltip>
{!props.simpleMode && <Popover
title={"配置编辑器"}
content={<>
<Form
onSubmitCapture={e => {
e.preventDefault()
}} size={"small"}
layout={"horizontal"}
wrapperCol={{span: 16}}
labelCol={{span: 8}}
>
<SelectOne
formItemStyle={{marginBottom: 4}}
label={"字号"}
data={[
{text: "小", value: 12},
{text: "中", value: 16},
{text: "大", value: 20},
]} value={fontSize} setValue={setFontSize}
/>
<Form.Item label={"全屏"}>
<Button
size={"small"}
type={"link"}
icon={<FullscreenOutlined/>}
onClick={() => {
showDrawer({
title: "全屏", width: "100%",
content: <div style={{height: "100%", width: "100%"}}>
<HTTPPacketEditor
{...props} disableFullscreen={true}
defaultHeight={670}
/>
</div>
})
}}
/>
</Form.Item>
</Form>
</>}
>
<Button
icon={<SettingOutlined/>}
type={"link"} size={"small"}
/>
</Popover>}
</Space>}
>
<div style={{flex: 1}}>
{empty && props.emptyOr}
{mode === "text" && !empty && <YakEditor
loading={props.loading}
type={props.language || (isResponse ? "html" : "http")}
value={
props.readOnly && props.originValue.length > 0 ?
new Buffer(props.originValue).toString() : strValue
}
readOnly={props.readOnly}
setValue={setStrValue} noWordWrap={noWordwrap}
fontSize={fontSize}
actions={[
...(props.actions || []),
...MonacoEditorCodecActions,
...(props.noPacketModifier ? [] : MonacoEditorMutateHTTPRequestActions),
...(props.noPacketModifier ? [] : MonacoEditorFullCodecActions),
]}
editorDidMount={editor => {
setMonacoEditor(editor)
}}
{...props.extraEditorProps}
/>}
{mode === "hex" && !empty && <HexEditor
className={props.system === 'Windows_NT' ? 'hex-editor-style' : ''}
showAscii={true}
data={hexValue}
showRowLabels={true}
showColumnLabels={false}
nonce={nonce}
onSetValue={props.readOnly ? undefined : handleSetValue}
/>}
</div>
</Card>
</div>
})
