@ant-design/icons#AlertOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#AlertOutlined.
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: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #2
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
SideMenu: FC = () => {
const { t, i18n } = useTranslation();
const menuList = [
{
key: 'targets',
icon: <DatabaseOutlined />,
title: t('监控对象'),
children: [
{
key: '/targets',
title: t('对象列表'),
},
],
},
{
key: 'monitor',
icon: <LineChartOutlined />,
title: t('监控看图'),
children: [
{
key: '/metric/explorer',
title: t('即时查询'),
},
{
key: '/object/explorer',
title: t('快捷视图'),
},
{
key: '/dashboards',
title: t('监控大盘'),
},
],
},
{
key: 'alarm',
icon: <AlertOutlined />,
title: t('告警管理'),
children: [
{
key: '/alert-rules',
title: t('告警规则'),
},
{
key: '/alert-mutes',
title: t('屏蔽规则'),
},
{
key: '/alert-subscribes',
title: t('订阅规则'),
},
{
key: '/alert-cur-events',
title: t('活跃告警'),
},
{
key: '/alert-his-events',
title: t('历史告警'),
},
],
},
{
key: 'job',
icon: <CodeOutlined />,
title: t('告警自愈'),
children: [
{
key: '/job-tpls',
title: t('自愈脚本'),
},
{
key: '/job-tasks',
title: t('执行历史'),
},
],
},
{
key: 'manage',
icon: <UserOutlined />,
title: t('人员组织'),
children: [
{
key: '/users',
title: t('用户管理'),
},
{
key: '/user-groups',
title: t('团队管理'),
},
{
key: '/busi-groups',
title: t('业务组管理'),
},
],
},
{
key: 'help',
icon: <Icon component={SystemInfoSvg as any} />,
title: t('系统信息'),
children: [
{
key: '/help/version',
title: t('系统版本'),
},
{
key: '/help/contact',
title: t('联系我们'),
},
{
key: '/help/migrate',
title: t('管理员迁移'),
},
],
},
];
const [menus, setMenus] = useState(menuList);
const history = useHistory();
const location = useLocation();
const { pathname } = location;
let { profile } = useSelector<AccountRootState, accountStoreState>((state) => state.account);
const [collapsed, setCollapsed] = useState(localStorage.getItem('menuCollapsed') === '1');
const [selectedKeys, setSelectedKeys] = useState<string[]>([defaultSelectedKey(menus, pathname)]);
const [openKeys, setOpenKeys] = useState<string[]>(collapsed ? [] : [getDefaultOpenKey(menus, pathname)]);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
localStorage.setItem('menuCollapsed', !collapsed ? '1' : '0');
};
const handleClick: MenuClickEventHandler = ({ key }) => {
setSelectedKeys([key as string]);
// 写两个key as string 感觉有点傻
if (key === 'changeLanguage') {
let language = i18n.language == 'en' ? 'zh' : 'en';
i18n.changeLanguage(language);
localStorage.setItem('language', language);
}
if ((key as string).startsWith('/')) {
history.push(key as string);
}
};
const hideSideMenu = () => location.pathname === '/login' || location.pathname.startsWith('/chart/') || location.pathname === '/callback';
useEffect(() => {
setSelectedKeys([defaultSelectedKey(menus, pathname)]);
if (!collapsed) {
setOpenKeys(_.union([...openKeys, getDefaultOpenKey(menus, pathname)]));
}
}, [pathname, collapsed]);
useEffect(() => {
if (profile.roles.length > 0) {
if (profile.roles.indexOf('Admin') === -1) {
getMenuPerm().then((res) => {
const { dat } = res;
const newMenus = [...menuList];
newMenus.forEach((menu) => {
menu.children = menu.children.filter((item) => dat.includes(item.key));
});
setMenus(newMenus);
});
} else {
setMenus(menuList);
}
}
}, [profile.roles]);
return hideSideMenu() ? null : (
<div
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<div className={`home ${collapsed ? 'collapse' : ''}`}>
<div className='name' onClick={() => history.push('/metric/explorer')} key='overview'>
<img src={collapsed ? '/image/logo.svg' : '/image/logo-l.svg'} alt='' className='logo' />
</div>
</div>
<Menu
className='left-menu-container'
theme='dark'
inlineCollapsed={collapsed}
openKeys={openKeys}
selectedKeys={selectedKeys}
onClick={handleClick}
mode='inline'
onOpenChange={(openKeys: string[]) => {
setOpenKeys(openKeys);
}}
>
{_.map(menus, (subMenus) => {
return (
subMenus.children.length > 0 && (
<SubMenu key={subMenus.key} icon={subMenus.icon} title={subMenus.title}>
{_.map(subMenus.children, (menu) => {
return <Menu.Item key={menu.key}>{menu.title}</Menu.Item>;
})}
</SubMenu>
)
);
})}
{lazyMenu.sort((a, b) => b.weight - a.weight).map((item) => item.content)}
</Menu>
<Button type='text' onClick={toggleCollapsed} className='collapseBtn'>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</Button>
</div>
);
}
Example #3
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
Event: React.FC = () => {
const history = useHistory();
const { t } = useTranslation();
const [view, setView] = useState<'card' | 'list'>('card');
const dispatch = useDispatch();
const [severity, setSeverity] = useState<number>();
const [curClusterItems, setCurClusterItems] = useState<string[]>([]);
const { hourRange, queryContent } = useSelector<RootState, eventStoreState>((state) => state.event);
const DateRangeItems: RelativeRange[] = useMemo(
() => [
{ num: 6, unit: 'hours', description: t('hours') },
{ num: 12, unit: 'hours', description: t('hours') },
{ num: 1, unit: 'day', description: t('天') },
{ num: 2, unit: 'days', description: t('天') },
{ num: 3, unit: 'days', description: t('天') },
{ num: 7, unit: 'days', description: t('天') },
{ num: 14, unit: 'days', description: t('天') },
{ num: 30, unit: 'days', description: t('天') },
{ num: 60, unit: 'days', description: t('天') },
{ num: 90, unit: 'days', description: t('天') },
],
[],
);
const tableRef = useRef({
handleReload() {},
});
const cardRef = useRef({
reloadCard() {},
});
const isAddTagToQueryInput = useRef(false);
const [curBusiId, setCurBusiId] = useState<number>(-1);
const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
const [interval, setInterval] = useState<number>(0);
useInterval(
() => {
view === 'list' ? tableRef.current.handleReload() : cardRef.current.reloadCard();
},
interval > 0 ? interval * 1000 : undefined,
);
const columns = [
{
title: t('集群'),
dataIndex: 'cluster',
width: 120,
},
{
title: t('规则标题&事件标签'),
dataIndex: 'rule_name',
render(title, { id, tags }) {
const content =
tags &&
tags.map((item) => (
<Tag
color='blue'
key={item}
onClick={(e) => {
if (!queryContent.includes(item)) {
isAddTagToQueryInput.current = true;
saveData('queryContent', queryContent ? `${queryContent.trim()} ${item}` : item);
}
}}
>
{item}
</Tag>
));
return (
<>
<div>
<a style={{ padding: 0 }} onClick={() => history.push(`/alert-cur-events/${id}`)}>
{title}
</a>
</div>
<div>
<span className='event-tags'>{content}</span>
</div>
</>
);
},
},
{
title: t('触发时间'),
dataIndex: 'trigger_time',
width: 120,
render(value) {
return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss');
},
},
{
title: t('操作'),
dataIndex: 'operate',
width: 120,
render(value, record) {
return (
<>
<Button
size='small'
type='link'
onClick={() => {
history.push('/alert-mutes/add', {
cluster: record.cluster,
tags: record.tags.map((tag) => {
const [key, value] = tag.split('=');
return {
func: '==',
key,
value,
};
}),
});
}}
>
屏蔽
</Button>
<Button
size='small'
type='link'
danger
onClick={() =>
deleteAlertEventsModal(curBusiId, [record.id], () => {
setSelectedRowKeys(selectedRowKeys.filter((key) => key !== record.id));
view === 'list' && tableRef.current.handleReload();
})
}
>
删除
</Button>
</>
);
},
},
];
function saveData(prop, data) {
dispatch({
type: 'event/saveData',
prop,
data,
});
}
function renderLeftHeader() {
const intervalItems: RelativeRange[] = [
{ num: 0, unit: 'second', description: 'off' },
{ num: 5, unit: 'seconds', description: 's' },
{ num: 30, unit: 'seconds', description: 's' },
{ num: 60, unit: 'seconds', description: 's' },
];
const menu = (
<Menu
onClick={(e) => {
setInterval(e.key as any);
}}
>
{intervalItems.map(({ num, description }) => (
<Menu.Item key={num}>
{num > 0 && <span className='num'>{num}</span>}
{description}
</Menu.Item>
))}
</Menu>
);
return (
<div className='table-operate-box' style={{ background: '#fff' }}>
<div className='left'>
<Button icon={<AppstoreOutlined />} onClick={() => setView('card')} />
<Button icon={<UnorderedListOutlined />} onClick={() => setView('list')} style={{ marginLeft: 8, marginRight: 8 }} />
<DateRangePicker
showRight={false}
leftList={DateRangeItems}
value={hourRange}
onChange={(range: RelativeRange) => {
if (range.num !== hourRange.num || range.unit !== hourRange.unit) {
saveData('hourRange', range);
}
}}
/>
<ColumnSelect
onSeverityChange={(e) => setSeverity(e)}
onBusiGroupChange={(e) => setCurBusiId(typeof e === 'number' ? e : -1)}
onClusterChange={(e) => setCurClusterItems(e)}
/>
<Input
className='search-input'
prefix={<SearchOutlined />}
placeholder='模糊搜索规则和标签(多个关键词请用空格分隔)'
value={queryContent}
onChange={(e) => saveData('queryContent', e.target.value)}
onPressEnter={(e) => view === 'list' && tableRef.current.handleReload()}
/>
</div>
<div className='right'>
{view === 'list' && (
<Button
danger
style={{ marginRight: 8 }}
disabled={selectedRowKeys.length === 0}
onClick={() =>
deleteAlertEventsModal(curBusiId, selectedRowKeys, () => {
setSelectedRowKeys([]);
view === 'list' && tableRef.current.handleReload();
})
}
>
批量删除
</Button>
)}
<RefreshIcon
onClick={() => {
view === 'list' && tableRef.current.handleReload();
view === 'card' && cardRef.current.reloadCard()
}}
/>
<Dropdown overlay={menu}>
<Button className='interval-btn' icon={<DownOutlined />}>
{interval > 0 ? interval + 's' : 'off'}
</Button>
</Dropdown>
</div>
</div>
);
}
useEffect(() => {
if (isAddTagToQueryInput.current) {
view === 'list' && tableRef.current.handleReload();
isAddTagToQueryInput.current = false;
}
}, [queryContent]);
useEffect(() => {
view === 'list' && tableRef.current.handleReload();
}, [curClusterItems, severity, hourRange, curBusiId, view]);
return (
<PageLayout icon={<AlertOutlined />} title={t('活跃告警')} hideCluster>
<div className='event-content cur-events'>
<div className='table-area' style={{ padding: view === 'card' ? 0 : undefined }}>
{view === 'card' ? (
<div style={{ width: '100%', height: '100%', background: '#eee' }}>
<Card
ref={cardRef}
header={renderLeftHeader()}
filter={Object.assign(
{ hours: hourRange.unit !== 'hours' ? hourRange.num * 24 : hourRange.num },
curClusterItems.length ? { clusters: curClusterItems.join(',') } : {},
severity ? { severity } : {},
queryContent ? { query: queryContent } : {},
{ bgid: curBusiId },
)}
/>
</div>
) : (
<DataTable
ref={tableRef}
antProps={{
rowKey: 'id',
rowClassName: (record: { severity: number }, index) => {
return SeverityColor[record.severity - 1] + '-left-border';
},
rowSelection: {
selectedRowKeys: selectedRowKeys,
onChange(selectedRowKeys, selectedRows) {
setSelectedRowKeys(selectedRowKeys.map((key) => Number(key)));
},
},
// scroll: { x: 'max-content' },
}}
url={`/api/n9e/alert-cur-events/list`}
customQueryCallback={(data) =>
Object.assign(
data,
{ hours: hourRange.unit !== 'hours' ? hourRange.num * 24 : hourRange.num },
curClusterItems.length ? { clusters: curClusterItems.join(',') } : {},
severity ? { severity } : {},
queryContent ? { query: queryContent } : {},
{ bgid: curBusiId },
)
}
pageParams={{
curPageName: 'p',
pageSizeName: 'limit',
pageSize: 30,
pageSizeOptions: ['30', '100', '200', '500'],
}}
apiCallback={({ dat: { list: data, total } }) => ({
data,
total,
})}
columns={columns}
reloadBtnType='btn'
reloadBtnPos='right'
showReloadBtn
filterType='flex'
leftHeader={renderLeftHeader()}
/>
)}
</div>
</div>
</PageLayout>
);
}
Example #4
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
Event: React.FC = () => {
const history = useHistory();
const { t } = useTranslation();
const dispatch = useDispatch();
const tableRef = useRef({
handleReload() {},
});
const { hisHourRange, hisQueryContent } = useSelector<RootState, eventStoreState>((state) => state.event);
const [hisSeverity, setHisSeverity] = useState<number>();
const [hisEventType, setHisEventType] = useState<number>();
const [curClusterItems, setCurClusterItems] = useState<string[]>([]);
const isAddTagToQueryInput = useRef(false);
const [curBusiId, setCurBusiId] = useState<number>(-1);
const DateRangeItems: RelativeRange[] = useMemo(
() => [
{ num: 6, unit: 'hours', description: t('hours') },
{ num: 12, unit: 'hours', description: t('hours') },
{ num: 1, unit: 'day', description: t('天') },
{ num: 2, unit: 'days', description: t('天') },
{ num: 3, unit: 'days', description: t('天') },
{ num: 7, unit: 'days', description: t('天') },
{ num: 14, unit: 'days', description: t('天') },
{ num: 30, unit: 'days', description: t('天') },
{ num: 60, unit: 'days', description: t('天') },
{ num: 90, unit: 'days', description: t('天') },
],
[],
);
const columns = [
{
title: t('集群'),
dataIndex: 'cluster',
width: 120,
},
{
title: t('规则标题&事件标签'),
dataIndex: 'rule_name',
render(title, { id, tags }) {
const content =
tags &&
tags.map((item) => (
<Tag
color='blue'
key={item}
onClick={(e) => {
if (!hisQueryContent.includes(item)) {
isAddTagToQueryInput.current = true;
saveData('hisQueryContent', hisQueryContent ? `${hisQueryContent.trim()} ${item}` : item);
}
}}
>
{item}
</Tag>
));
return (
<>
<div>
<a style={{ padding: 0 }} onClick={() => history.push(`/alert-his-events/${id}`)}>
{title}
</a>
</div>
<div>
<span className='event-tags'>{content}</span>
</div>
</>
);
},
},
{
title: t('计算时间'),
dataIndex: 'last_eval_time',
width: 120,
render(value) {
return moment((value ? value : 0) * 1000).format('YYYY-MM-DD HH:mm:ss');
},
},
];
function renderLeftHeader() {
return (
<div className='table-operate-box'>
<div className='left'>
<DateRangePicker
showRight={false}
leftList={DateRangeItems}
value={hisHourRange}
onChange={(range: RelativeRange) => {
if (range.num !== hisHourRange.num || range.unit !== hisHourRange.unit) {
saveData('hisHourRange', range);
}
}}
/>
<ColumnSelect
onSeverityChange={(e) => setHisSeverity(e)}
onEventTypeChange={(e) => setHisEventType(e)}
onBusiGroupChange={(e) => setCurBusiId(typeof e === 'number' ? e : -1)}
onClusterChange={(e) => setCurClusterItems(e)}
/>
<Input
className='search-input'
prefix={<SearchOutlined />}
placeholder='模糊搜索规则和标签(多个关键词请用空格分隔)'
value={hisQueryContent}
onChange={(e) => saveData('hisQueryContent', e.target.value)}
onPressEnter={(e) => tableRef.current.handleReload()}
/>
</div>
</div>
);
}
function saveData(prop, data) {
dispatch({
type: 'event/saveData',
prop,
data,
});
}
useEffect(() => {
if (isAddTagToQueryInput.current) {
tableRef.current.handleReload();
isAddTagToQueryInput.current = false;
}
}, [hisQueryContent]);
useEffect(() => {
tableRef.current.handleReload();
}, [curClusterItems, hisSeverity, hisHourRange, hisEventType, curBusiId]);
return (
<PageLayout icon={<AlertOutlined />} title={t('历史告警')} hideCluster>
<div className='event-content'>
<div className='table-area'>
<DataTable
ref={tableRef}
antProps={{
rowKey: 'id',
rowClassName: (record: { severity: number; is_recovered: number }, index) => {
return SeverityColor[record.is_recovered ? 3 : record.severity - 1] + '-left-border';
},
// scroll: { x: 'max-content' },
}}
url={`/api/n9e/alert-his-events/list`}
customQueryCallback={(data) =>
Object.assign(
data,
{ hours: hisHourRange.unit !== 'hours' ? hisHourRange.num * 24 : hisHourRange.num },
curClusterItems.length ? { clusters: curClusterItems.join(',') } : {},
hisSeverity !== undefined ? { severity: hisSeverity } : {},
hisQueryContent ? { query: hisQueryContent } : {},
hisEventType !== undefined ? { is_recovered: hisEventType } : {},
{ bgid: curBusiId },
)
}
pageParams={{
curPageName: 'p',
pageSizeName: 'limit',
pageSize: 30,
pageSizeOptions: ['30', '100', '200', '500'],
}}
apiCallback={({ dat: { list: data, total } }) => ({
data,
total,
})}
columns={columns}
reloadBtnType='btn'
reloadBtnPos='left'
filterType='flex'
leftHeader={renderLeftHeader()}
/>
</div>
</div>
</PageLayout>
);
}
