@ant-design/icons#ToolOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#ToolOutlined.
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: router.js From credit with Apache License 2.0 | 5 votes |
|
superviseRoutes = [
{
path: "/admin/supervisedashboard",
component: SuperviseDashboard,
exact: true,
isShow: true,
title: "监管信息面板",
icon: AreaChartOutlined
},
{
path: "/admin/dataapproval",
component: dataApproval,
exact: true,
isShow: true,
title: "信息审核",
icon: CopyOutlined
},
{
path: "/admin/punish",
component: punish,
exact: true,
isShow: true,
title: "违约处罚",
icon: ToolOutlined
},
{
path: "/admin/ceriticateApprove",
component: certificateApprove,
exact: true,
isShow: true,
title: "认证签名",
icon: VerifiedOutlined
},
{
path: "/admin/contributionverify",
component: contributionVerify,
exact: true,
isShow: true,
title: "贡献审核",
icon: SolutionOutlined
},
]
Example #2
| Source File: index.jsx From ui with MIT License | 4 votes |
|
ExplorationViewPage = ({
experimentId, experimentData,
}) => {
const dispatch = useDispatch();
const layout = useSelector((state) => state.layout);
const { windows, panel } = layout;
const [selectedTab, setSelectedTab] = useState(panel);
const [addMenuVisible, setAddMenuVisible] = useState(false);
const { method } = useSelector((state) => (
state.experimentSettings.processing?.configureEmbedding?.embeddingSettings
)) || false;
useEffect(() => {
setSelectedTab(panel);
}, [panel]);
useEffect(() => {
if (!method) {
dispatch(loadProcessingSettings(experimentId));
}
}, []);
const methodUppercase = method ? method.toUpperCase() : ' ';
const embeddingTitle = `${methodUppercase} Embedding`;
useEffect(() => {
if (method && windows) {
dispatch(updateLayout({
...windows,
first: {
...windows.first,
first: {
...windows.first.first,
first: methodUppercase,
},
},
}));
}
}, [method]);
const TILE_MAP = {
[methodUppercase]: {
toolbarControls: <MosaicCloseButton key='remove-button-embedding' />,
component: (width, height) => (
<Embedding
experimentId={experimentId}
width={width}
height={height}
/>
),
},
Heatmap: {
toolbarControls: (
<>
<HeatmapSettings componentType={COMPONENT_TYPE} key='heatmap-settings' />
<MosaicCloseButton key='remove-button-heatmap' />
</>
),
component: (width, height) => (
<HeatmapPlot experimentId={experimentId} width={width} height={height} />
),
},
Genes: {
toolbarControls: <MosaicCloseButton key='remove-button-genes' />,
component: (width, height) => (
<Tabs
size='small'
activeKey={selectedTab}
onChange={(key) => { setSelectedTab(key); }}
>
<TabPane tab='Gene list' key='Gene list'>
<GeneListTool experimentId={experimentId} width={width} height={height} />
</TabPane>
<TabPane tab='Differential expression' key='Differential expression'>
<DiffExprManager
experimentId={experimentId}
view='compute'
width={width}
height={height}
/>
</TabPane>
</Tabs>
),
},
'Data Management': {
toolbarControls: <MosaicCloseButton key='remove-button-data-management' />,
component: (width, height) => (
<CellSetsTool
experimentId={experimentId}
width={width}
height={height}
/>
),
},
};
const categoryItems = {
Genes: [
{
description: 'Create and manage interesting groupings of cells.',
key: 'Data Management',
},
{
description: 'Find, organize, and annotate genes in your data set.',
key: 'Gene list',
group: 'Genes',
},
{
description: 'Find and explore the most characteristic genes in a set of cells.',
key: 'Differential expression',
group: 'Genes',
},
],
Plots: [
{
key: `${methodUppercase}`,
description: `Visualize cells clustered by genetic expression using a ${embeddingTitle}.`,
},
{
key: 'Heatmap',
description: 'Gain a high-level understanding of expression levels across large groups of genes and cells.',
},
],
};
const categoryInfo = {
Plots: <PictureOutlined />,
Tools: <ToolOutlined />,
};
const searchMenu = (
<SearchMenu
options={categoryItems}
categoryInfo={categoryInfo}
onSelect={(key, category, belongsToGroup) => {
dispatch(addWindow(key, belongsToGroup));
setAddMenuVisible(false);
}}
/>
);
return (
<>
<Header
experimentId={experimentId}
experimentData={experimentData}
title='Data Exploration'
extra={[(
<Dropdown
trigger={['click']}
key='search-menu-dropdown'
overlay={searchMenu}
visible={addMenuVisible}
onVisibleChange={(visible) => setAddMenuVisible(visible)}
>
<Button type='primary' onClick={() => setAddMenuVisible(!addMenuVisible)}>
Add
{' '}
<DownOutlined />
</Button>
</Dropdown>
)]}
/>
<MultiTileContainer
tileMap={TILE_MAP}
initialArrangement={windows}
/>
</>
);
}
Example #3
| Source File: App.js From art-dashboard-ui with Apache License 2.0 | 4 votes |
|
render() {
const { Header, Footer, Sider, Content } = Layout;
const release_number_whats_new_cookie = Cookies.get("release_number_whats_new_cookie");
const release_number_env = process.env.REACT_APP_RELEASE_NUMBER_WHATS_NEW;
if(release_number_whats_new_cookie === undefined || release_number_whats_new_cookie !== release_number_env){
this.openNotification();
Cookies.set("release_number_whats_new_cookie", release_number_env);
}
return (
<Router>
<div>
<Layout>
<Sider collapsed={this.state.collapsed_sider}>
<div>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="release_status_menu_item" icon={<HistoryOutlined />}>
<Link to="/release/status/?type=all">
Release
</Link>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<SettingOutlined />
<span>Build</span>
</span>
}
>
<Menu.Item key="build_menu_item" icon={<HistoryOutlined />}>
<Link to="/build/history">
History
</Link>
</Menu.Item>
<Menu.Item key="build_health_item" icon={<SmileOutlined/>} >
<Link to="/health/daily/overview">
Health
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key={"incidents"} icon={<FireFilled/>}>
<Link to={"/incidents"}>
Incidents
</Link>
</Menu.Item>
<Menu.Item key={"whats_news"} icon={<ToolOutlined/>}>
<Link to={"/help"}>
Help
</Link>
</Menu.Item>
</Menu>
</div>
</Sider>
<Layout>
<Header style={{background: "white", height: "120px", float: "left"}}>
<div className="left">
{React.createElement(this.state.collapsed_sider ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle_side,
})}
</div>
<div className="center">
<h1 style={{color: "#316DC1", margin: "20px"}}>OpenShift Release Portal</h1>
</div>
</Header>
<Content>
<Switch>
<Route component={Daily_overview_table} path="/health/daily/overview" exact/>
<Route path="/build/history" exact component={Build_history_home} name="build_history"/>
<Route path="/release/status/:branch" exact component={Release_home_page} name="release_status"/>
<Route component={Daily_overview_expand_home} path="/health/daily/detail/:date" exact/>
<Route path="/health/daily/build/:date" exact render={(props) => <Build_record_table {...props}/>} name="daily_build_by_date"/>
<Route path="/help" exact component={Whatsnew_carousel}/>
<Route path="/release/advisory/overview/:advisoryid" exact component={Advisory_Overview_Home} name="advisory_overview_home"/>
<Route path="/incidents" exact component={Incident_home}/>
<Redirect exact from="" to={"/release/status/"+process.env.REACT_APP_OPENSHIFT_VERSION_RELEASE_HOME_PAGE}/>
</Switch>
</Content>
<Footer style={{ textAlign: 'center' }}>
RedHat ©2020
</Footer>
</Layout>
</Layout>
</div>
</Router>
);
}
Example #4
| Source File: newtask.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
return (
<>
<PageHeader
title="New Task"
extra={[
<Upload
key="Import Config"
accept=".json"
maxCount={1}
showUploadList={false}
onChange={this.onClickImportConfig}
beforeUpload={() => {return false;}}
>
<Button
type="text"
icon={<ImportOutlined />}
loading={this.state.isLoadingImportConfig}
>
Import Config
</Button>
</Upload>,
<Button
key="Export Config"
type="text"
icon={<ExportOutlined />}
onClick={this.onClickExportConfig}
loading={this.state.isLoadingExportConfig}
>
Export Config
</Button>
]}
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={[16]}>
<Col span={4}>
<Steps direction="vertical" current={this.state.step} onChange={this.onChangeStep}>
<Step title="Target" icon={<AimOutlined />} description="Select Target" />
<Step title="Attack" icon={<ToolOutlined />} description="Configure Attack" />
<Step title="Advanced" icon={<ExperimentOutlined />} description="Advanced Options" />
<Step title="Output" icon={<ExportOutlined />} description="Set Output" />
<Step title="Finalize" icon={<FileDoneOutlined />} description="Review and Finalize" />
</Steps>
</Col>
<Col span={20}>
<div className="steps-content">
{this.state.step === 0 ? (
<Form layout="vertical">
<Form.Item
label="Hash"
>
<Select
showSearch
style={{ width: "100%" }}
size="large"
placeholder="Select Hash"
value={this.state.hash}
onChange={this.onChangeHash}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._hashes.map(hash =>
<Option value={hash} key={hash} title={hash}>{filename(hash)}</Option>
)}
</Select>
</Form.Item>
<Form.Item
label="Algorithm"
>
<Select
showSearch
style={{ width: "100%" }}
size="large"
placeholder="Select Algorithm"
value={this.state.algorithm}
onChange={this.onChangeAlgorithm}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Object.keys(this.state._algorithms).map(key =>
<Option value={Number(key)} key={Number(key)}>{key + " - " + this.state._algorithms[key]}</Option>
)}
</Select>
</Form.Item>
</Form>
) : this.state.step === 1 ? (
<Form layout="vertical" requiredMark="optional">
<Form.Item
label="Attack Mode"
required
>
<Radio.Group value={this.state.attackMode} onChange={this.onChangeAttackMode}>
<Radio value={0}>Dictionary Attack</Radio>
<Radio value={1}>Combinator Attack</Radio>
<Radio value={3}>Mask Attack</Radio>
<Radio value={6}>Hybrid1 (Dictionary + Mask)</Radio>
<Radio value={7}>Hybrid2 (Mask + Dictionary)</Radio>
</Radio.Group>
</Form.Item>
{this.state.attackMode === 0 ? (
<>
<Form.Item
label="Dictionaries"
required
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionaries"
size="large"
onChange={this.onChangeDictionaries}
value={this.state.dictionaries}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
<Form.Item
label="Rules"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder={"Select Rules [max. "+maxRules+"]"}
size="large"
onChange={this.onChangeRules}
value={this.state.rules}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._rules.map(rule =>
<Option value={rule} key={rule} title={rule}>{filename(rule)}</Option>
)}
</Select>
</Form.Item>
</>
) : this.state.attackMode === 1 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
<Row>
<Col span={24}>
<Form.Item
label="Left Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Left Dictionary"
size="large"
onChange={this.onChangeLeftDictionary}
value={this.state.leftDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="Left Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Left Rule"
size="large"
onChange={this.onChangeLeftRule}
value={this.state.leftRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={24}>
<Form.Item
label="Right Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Right Dictionary"
size="large"
onChange={this.onChangeRightDictionary}
value={this.state.rightDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="Right Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Right Rule"
size="large"
onChange={this.onChangeRightRule}
value={this.state.rightRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
) : this.state.attackMode === 3 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
</Row>
) : this.state.attackMode === 6 ? (
<Row gutter={[18, 16]}>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={12}>
<Form.Item
label="Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionary"
size="large"
onChange={this.onChangeLeftDictionary}
value={this.state.leftDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Rule"
size="large"
onChange={this.onChangeLeftRule}
value={this.state.leftRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
</Row>
) : this.state.attackMode === 7 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={12}>
<Form.Item
label="Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionary"
size="large"
onChange={this.onChangeRightDictionary}
value={this.state.rightDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Rule"
size="large"
onChange={this.onChangeRightRule}
value={this.state.rightRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
) : (
"Select Attack Mode"
)}
</Form>
) : this.state.step === 2 ? (
<Form layout="vertical">
<Collapse ghost onChange={this.onChangeAdvancedOptionsCollapse} activeKey={this.state.advancedOptionsCollapse}>
<Panel header="General" key="General">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.quiet}
onChange={this.onChangeQuiet}
>
Quiet
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disablePotFile}
onChange={this.onChangeDisablePotFile}
>
Disable Pot File
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disableLogFile}
onChange={this.onChangeDisableLogFile}
>
Disable Log File
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.enableOptimizedKernel}
onChange={this.onChangeEnableOptimizedKernel}
>
Enable optimized kernel
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.enableSlowerCandidateGenerators}
onChange={this.onChangeEnableSlowerCandidateGenerators}
>
Enable slower candidate generators
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.removeFoundHashes}
onChange={this.onChangeRemoveFoundHashes}
>
Remove found hashes
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.ignoreUsernames}
onChange={this.onChangeIgnoreUsernames}
>
Ignore Usernames
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disableSelfTest}
onChange={this.onChangeDisableSelfTest}
>
Disable self-test (Not Recommended)
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.ignoreWarnings}
onChange={this.onChangeIgnoreWarnings}
>
Ignore warnings (Not Recommended)
</Checkbox>
</Col>
</Row>
</Panel>
<Panel header="Devices" key="Devices">
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Devices IDs"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Devices IDs"
size="large"
onChange={this.onChangeDevicesIDs}
value={this.state.devicesIDs}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Array.from(Array(16)).map((x,i) =>
<Option value={i+1} key={i+1}>{"Device #"+(i+1)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="Devices Types"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Devices Types"
size="large"
onChange={this.onChangeDevicesTypes}
value={this.state.devicesTypes}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>CPU</Option>
<Option value={2} key={2}>GPU</Option>
<Option value={3} key={3}>FPGA, DSP, Co-Processor</Option>
</Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="Workload Profile"
tooltip={
<Table
columns={[
{
title: 'Performance',
dataIndex: 'performance',
key: 'Performance'
},
{
title: 'Runtime',
dataIndex: 'runtime',
key: 'Runtime'
},
{
title: 'Power Consumption',
dataIndex: 'powerConsumption',
key: 'Power Consumption'
},
{
title: 'Desktop Impact',
dataIndex: 'desktopImpact',
key: 'Desktop Impact'
}
]}
dataSource={[
{
key: '1',
performance: 'Low',
runtime: '2 ms',
powerConsumption: 'Low',
desktopImpact: 'Minimal'
},
{
key: '2',
performance: 'Default',
runtime: '12 ms',
powerConsumption: 'Economic',
desktopImpact: 'Noticeable'
},
{
key: '3',
performance: 'High',
runtime: '96 ms',
powerConsumption: 'High',
desktopImpact: 'Unresponsive'
},
{
key: '4',
performance: 'Nightmare',
runtime: '480 ms',
powerConsumption: 'Insane',
desktopImpact: 'Headless'
}
]}
size="small"
pagination={false}
style={{ overflow: 'auto' }}
/>
}
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Workload Profile"
size="large"
onChange={this.onChangeWorkloadProfile}
value={this.state.workloadProfile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>Low</Option>
<Option value={2} key={2}>Default</Option>
<Option value={3} key={3}>High</Option>
<Option value={4} key={4}>Nightmare</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={[18, 16]}>
<Col>
<Button
loading={this.state.isLoadingDevicesInfo}
onClick={this.onClickDevicesInfo}
>
Devices Info
</Button>
</Col>
<Col>
<Button
loading={this.state.isLoadingBenchmark}
onClick={this.onClickBenchmark}
>
Benchmark
</Button>
</Col>
</Row>
</Panel>
<Panel header="Markov" key="Markov">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.markovDisable}
onChange={this.onChangeMarkovDisable}
>
Disables markov-chains, emulates classic brute-force
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.markovClassic}
onChange={this.onChangeMarkovClassic}
>
Enables classic markov-chains, no per-position
</Checkbox>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Threshold X when to stop accepting new markov-chains"
>
<InputNumber
value={this.state.markovThreshold}
onChange={this.onChangeMarkovThreshold}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
</Panel>
<Panel header="Monitor" key="Monitor">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.disableMonitor}
onChange={this.onChangeDisableMonitor}
>
Disable Monitor
</Checkbox>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Temp Abort (°C)"
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Temp Abort (°C)"
size="large"
onChange={this.onChangeTempAbort}
value={this.state.tempAbort}
disabled={this.state.disableMonitor}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={60} key={60}>60 °C</Option>
<Option value={65} key={65}>65 °C</Option>
<Option value={70} key={70}>70 °C</Option>
<Option value={75} key={75}>75 °C</Option>
<Option value={80} key={80}>80 °C</Option>
<Option value={85} key={85}>85 °C</Option>
<Option value={90} key={90}>90 °C</Option>
<Option value={95} key={95}>95 °C</Option>
<Option value={100} key={100}>100 °C</Option>
</Select>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
</Panel>
<Panel header="Extra Arguments" key="Extra Arguments">
<Form.Item
label="Extra Arguments"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Extra Arguments"
size="large"
onChange={this.onChangeExtraArguments}
value={this.state.extraArguments.join(" ")}
/>
</Form.Item>
</Panel>
<Panel header="Misc" key="Misc">
<Form.Item
label="Status Timer"
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Status Timer"
size="large"
onChange={this.onChangeStatusTimer}
value={this.state.statusTimer}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={10} key={10}>10 Seconds</Option>
<Option value={20} key={20}>20 Seconds</Option>
<Option value={30} key={30}>30 Seconds</Option>
<Option value={45} key={45}>45 Seconds</Option>
<Option value={60} key={60}>60 Seconds</Option>
<Option value={90} key={90}>90 Seconds</Option>
<Option value={120} key={120}>120 Seconds</Option>
<Option value={300} key={300}>300 Seconds</Option>
</Select>
</Form.Item>
</Panel>
</Collapse>
</Form>
) : this.state.step === 3 ? (
<Form layout="vertical">
<Form.Item
label="Output File"
extra={this.state.outputFile ? this.state.outputFile : null}
>
<Button
type="primary"
onClick={this.onChangeOutputFile}
loading={this.state.isLoadingSetOutputFile}
>
Set Output File
</Button>
</Form.Item>
<Form.Item
label="Output Format"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Output Format"
size="large"
onChange={this.onChangeOutputFormat}
value={this.state.outputFormat}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>hash[:salt]</Option>
<Option value={2} key={2}>plain</Option>
<Option value={3} key={3}>hex_plain</Option>
<Option value={4} key={4}>crack_pos</Option>
<Option value={5} key={5}>timestamp absolute</Option>
<Option value={6} key={6}>timestamp relative</Option>
</Select>
</Form.Item>
</Form>
) : this.state.step === 4 ? (
<Space direction="vertical">
<Form layout="vertical">
<Form.Item
label="Priority"
tooltip={
<Typography>
Tasks are started automatically in a descending order of priority.
<br />
Set to -1 to disable auto-start.
</Typography>
}
>
<InputNumber
min={-1}
max={999}
value={this.state.priority}
onChange={this.onChangePriority}
bordered={true}
/>
</Form.Item>
</Form>
<Space size="large" direction="horizontal">
<Button
type="primary"
icon={<PlusOutlined />}
onClick={this.onClickCreateTask}
loading={this.state.isLoadingCreateTask}
>
Create Task
</Button>
<Checkbox
checked={this.state.preserveTaskConfig}
onChange={this.onChangePreserveTaskConfig}
>
Preserve task config
</Checkbox>
</Space>
</Space>
) : null }
</div>
</Col>
</Row>
</Content>
</>
)
}
