@ant-design/icons#UnorderedListOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#UnorderedListOutlined.
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: Header.tsx From leek with Apache License 2.0 | 6 votes |
|
tabs = [
{ key: "workers", name: "Workers", icon: <RobotFilled /> },
{ key: "tasks", name: "Tasks", icon: <UnorderedListOutlined /> },
{ key: "control", name: "Control", icon: <ControlOutlined /> },
{ key: "queues", name: "Queues", icon: <BoxPlotOutlined /> },
{ key: "issues", name: "Issues", icon: <BugOutlined /> },
{ key: "monitor", name: "Monitor", icon: <RadarChartOutlined /> },
{ key: "agent", name: "Agent", icon: <DeploymentUnitOutlined /> },
{ key: "applications", name: "Applications", icon: <AppstoreOutlined /> },
]
Example #2
| Source File: index.tsx From memex with MIT License | 6 votes |
|
BLOCK_TYPES = [
{ label: 'H1', style: 'header-one' },
{ label: 'H2', style: 'header-two' },
{ label: 'H3', style: 'header-three' },
// {label: 'H4', style: 'header-four'},
// {label: 'H5', style: 'header-five'},
// {label: 'H6', style: 'header-six'},
{ label: 'Blockquote', style: 'blockquote', icon: <MenuUnfoldOutlined /> },
{
label: 'Unordered List',
style: 'unordered-list-item',
icon: <UnorderedListOutlined />,
},
{
label: 'Ordered List',
style: 'ordered-list-item',
icon: <OrderedListOutlined />,
},
{ label: 'Code Block', style: 'code-block', icon: <CodeOutlined /> },
]
Example #3
| Source File: AvatarDropdown.tsx From ant-design-pro-V4 with MIT License | 5 votes |
|
render(): React.ReactNode {
const { todoList } = this.props?.todo
// const todoNum = todoList.filter((item: any) => item.status === 0).length
const todoNum = todoList?.filter((item: any) => {
if (item != null) {
return item.status === 0
}
}).length
const {
currentUser = {
avatar: '',
name: '',
},
menu,
} = this.props;
const menuHeaderDropdown = (
<Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
{menu && (
<Menu.Item key="center">
<UserOutlined />
个人中心
</Menu.Item>
)}
{menu && (
<Menu.Item key="settings">
<SettingOutlined />
个人设置
</Menu.Item>
)}
{menu && <Menu.Divider />}
<Menu.Item key="todo">
<UnorderedListOutlined />
待办事项
<Badge count={todoNum} offset={[10, -5]} />
</Menu.Item>
{menu && <Menu.Divider />}
<Menu.Item key="logout">
<LogoutOutlined />
退出登录
</Menu.Item>
</Menu>
);
return currentUser && currentUser.name ? (
<HeaderDropdown overlay={menuHeaderDropdown}>
<span className={`${styles.action} ${styles.account}`}>
<Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
<span className={`${styles.name} anticon`}>{currentUser.name}
<Badge count={todoNum} dot={true} /></span>
</span>
</HeaderDropdown>
) : (
<span className={`${styles.action} ${styles.account}`}>
<Spin
size="small"
style={{
marginLeft: 8,
marginRight: 8,
}}
/>
</span>
);
}
Example #4
| Source File: PluginCard.tsx From posthog-foss with MIT License | 4 votes |
|
export function PluginCard({
plugin,
error,
maintainer,
showUpdateButton,
order,
maxOrder,
rearranging,
DragColumn = ({ children }) => <Col className="order-handle">{children}</Col>,
unorderedPlugin = false,
}: PluginCardProps): JSX.Element {
const {
name,
description,
url,
plugin_type: pluginType,
pluginConfig,
tag,
latest_tag: latestTag,
id: pluginId,
updateStatus,
hasMoved,
is_global,
organization_id,
organization_name,
} = plugin
const {
editPlugin,
toggleEnabled,
installPlugin,
resetPluginConfigError,
rearrange,
showPluginLogs,
showPluginMetrics,
} = useActions(pluginsLogic)
const { loading, installingPluginUrl, checkingForUpdates, pluginUrlToMaintainer } = useValues(pluginsLogic)
const { user } = useValues(userLogic)
const hasSpecifiedMaintainer = maintainer || (plugin.url && pluginUrlToMaintainer[plugin.url])
const pluginMaintainer = maintainer || pluginUrlToMaintainer[plugin.url || '']
return (
<Col
style={{ width: '100%', marginBottom: 20 }}
className={`plugins-scene-plugin-card-col${rearranging ? ` rearranging` : ''}`}
data-attr={`plugin-card-${pluginConfig ? 'installed' : 'available'}`}
>
<Card className="plugins-scene-plugin-card">
<Row align="middle" className="plugin-card-row">
{typeof order === 'number' && typeof maxOrder === 'number' ? (
<DragColumn>
<div className={`arrow${order === 1 ? ' hide' : ''}`}>
<DownOutlined />
</div>
<div>
<Tag color={hasMoved ? '#bd0225' : '#555'} onClick={rearrange}>
{order}
</Tag>
</div>
<div className={`arrow${order === maxOrder ? ' hide' : ''}`}>
<DownOutlined />
</div>
</DragColumn>
) : null}
{unorderedPlugin ? (
<Tooltip title="This plugin does not do any processing in order." placement="topRight">
<Col>
<Tag color="#555">-</Tag>
</Col>
</Tooltip>
) : null}
{pluginConfig && (
<Col>
<Popconfirm
placement="topLeft"
title={`Are you sure you wish to ${
pluginConfig.enabled ? 'disable' : 'enable'
} this plugin?`}
onConfirm={() =>
pluginConfig.id
? toggleEnabled({ id: pluginConfig.id, enabled: !pluginConfig.enabled })
: editPlugin(pluginId || null, { __enabled: true })
}
okText="Yes"
cancelText="No"
disabled={rearranging}
>
<Switch checked={pluginConfig.enabled ?? false} disabled={rearranging} />
</Popconfirm>
</Col>
)}
<Col className={pluginConfig ? 'hide-plugin-image-below-500' : ''}>
<PluginImage pluginType={pluginType} url={url} />
</Col>
<Col style={{ flex: 1 }}>
<div>
<strong style={{ marginRight: 8 }}>{name}</strong>
{hasSpecifiedMaintainer && (
<CommunityPluginTag isCommunity={pluginMaintainer === 'community'} />
)}
{pluginConfig?.error ? (
<PluginError
error={pluginConfig.error}
reset={() => resetPluginConfigError(pluginConfig?.id || 0)}
/>
) : error ? (
<PluginError error={error} />
) : null}
{is_global && (
<Tag color="blue">
<GlobalOutlined /> Managed by {organization_name}
</Tag>
)}
{canInstallPlugins(user?.organization, organization_id) && (
<>
{url?.startsWith('file:') ? <LocalPluginTag url={url} title="Local" /> : null}
{updateStatus?.error ? (
<Tag color="red">
<WarningOutlined /> Error checking for updates
</Tag>
) : checkingForUpdates &&
!updateStatus &&
pluginType !== PluginInstallationType.Source &&
!url?.startsWith('file:') ? (
<Tag color="blue">
<LoadingOutlined /> Checking for updates…
</Tag>
) : url && latestTag && tag ? (
tag === latestTag ? (
<Tag color="green">
<CheckOutlined /> Up to date
</Tag>
) : (
<UpdateAvailable url={url} tag={tag} latestTag={latestTag} />
)
) : null}
{pluginType === PluginInstallationType.Source ? <SourcePluginTag /> : null}
</>
)}
</div>
<div>{endWithPunctation(description)}</div>
</Col>
<Col>
<Space>
{url && <PluginAboutButton url={url} disabled={rearranging} />}
{showUpdateButton && pluginId ? (
<PluginUpdateButton
updateStatus={updateStatus}
pluginId={pluginId}
rearranging={rearranging}
/>
) : pluginId ? (
<>
{Object.keys(plugin.metrics || {}).length > 0 ? (
<Space>
<Tooltip title="Metrics">
<Button onClick={() => showPluginMetrics(pluginId)}>
<LineChartOutlined />
</Button>
</Tooltip>
</Space>
) : null}
<Tooltip
title={
pluginConfig?.id
? 'Logs'
: 'Logs – enable the plugin for the first time to view them'
}
>
<Button
className="padding-under-500"
disabled={rearranging || !pluginConfig?.id}
onClick={() => showPluginLogs(pluginId)}
data-attr="plugin-logs"
>
<UnorderedListOutlined />
</Button>
</Tooltip>
<Tooltip title="Configure">
<Button
type="primary"
className="padding-under-500"
disabled={rearranging}
onClick={() => editPlugin(pluginId)}
data-attr="plugin-configure"
>
<SettingOutlined />
</Button>
</Tooltip>
</>
) : !pluginId ? (
<Button
type="primary"
className="padding-under-500"
loading={loading && installingPluginUrl === url}
disabled={loading && installingPluginUrl !== url}
onClick={
url ? () => installPlugin(url, PluginInstallationType.Repository) : undefined
}
icon={<CloudDownloadOutlined />}
data-attr="plugin-install"
>
<span className="show-over-500">Install</span>
</Button>
) : null}
</Space>
</Col>
</Row>
</Card>
</Col>
)
}
Example #5
| Source File: SavedInsights.tsx From posthog-foss with MIT License | 4 votes |
|
export function SavedInsights(): JSX.Element {
const { loadInsights, updateFavoritedInsight, renameInsight, duplicateInsight, setSavedInsightsFilters } =
useActions(savedInsightsLogic)
const { insights, count, insightsLoading, filters, sorting } = useValues(savedInsightsLogic)
const { hasDashboardCollaboration } = useValues(organizationLogic)
const { currentTeamId } = useValues(teamLogic)
const { members } = useValues(membersLogic)
const { tab, createdBy, layoutView, search, insightType, dateFrom, dateTo, page } = filters
const startCount = (page - 1) * INSIGHTS_PER_PAGE + 1
const endCount = page * INSIGHTS_PER_PAGE < count ? page * INSIGHTS_PER_PAGE : count
const columns: LemonTableColumns<InsightModel> = [
{
key: 'id',
className: 'icon-column',
width: 0,
render: function renderType(_, insight) {
const typeMetadata = INSIGHT_TYPES_METADATA[insight.filters?.insight || InsightType.TRENDS]
if (typeMetadata && typeMetadata.icon) {
return <typeMetadata.icon style={{ display: 'block', fontSize: '2rem' }} />
}
},
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: function renderName(name: string, insight) {
return (
<>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Link to={urls.insightView(insight.short_id, insight.filters)} className="row-name">
{name || <i>{UNNAMED_INSIGHT_NAME}</i>}
</Link>
<div
style={{ cursor: 'pointer', width: 'fit-content', marginLeft: 8 }}
onClick={() => updateFavoritedInsight(insight, !insight.favorited)}
>
{insight.favorited ? (
<StarFilled className="text-warning" />
) : (
<StarOutlined className="star-outlined" />
)}
</div>
</div>
{hasDashboardCollaboration && insight.description && (
<span className="row-description">{insight.description}</span>
)}
</>
)
},
},
...(hasDashboardCollaboration
? [
{
title: 'Tags',
dataIndex: 'tags' as keyof InsightModel,
key: 'tags',
render: function renderTags(tags: string[]) {
return <ObjectTags tags={tags} staticOnly />
},
},
]
: []),
...(tab === SavedInsightsTabs.Yours
? []
: [createdByColumn() as LemonTableColumn<InsightModel, keyof InsightModel | undefined>]),
createdAtColumn() as LemonTableColumn<InsightModel, keyof InsightModel | undefined>,
{
title: 'Last modified',
sorter: true,
dataIndex: 'updated_at',
render: function renderLastModified(updated_at: string) {
return <div style={{ whiteSpace: 'nowrap' }}>{updated_at && <TZLabel time={updated_at} />}</div>
},
},
{
width: 0,
render: function Render(_, insight) {
return (
<More
overlay={
<>
<LemonButton
type="stealth"
to={urls.insightView(insight.short_id, insight.filters)}
fullWidth
>
View
</LemonButton>
<LemonButton
type="stealth"
onClick={() => renameInsight(insight)}
data-attr={`insight-item-${insight.short_id}-dropdown-rename`}
fullWidth
>
Rename
</LemonButton>
<LemonButton
type="stealth"
onClick={() => duplicateInsight(insight)}
data-attr={`insight-item-${insight.short_id}-dropdown-duplicate`}
fullWidth
>
Duplicate
</LemonButton>
<LemonSpacer />
<LemonButton
type="stealth"
style={{ color: 'var(--danger)' }}
onClick={() =>
deleteWithUndo({
object: insight,
endpoint: `projects/${currentTeamId}/insights`,
callback: loadInsights,
})
}
data-attr={`insight-item-${insight.short_id}-dropdown-remove`}
fullWidth
>
Delete insight
</LemonButton>
</>
}
/>
)
},
},
]
return (
<div className="saved-insights">
<PageHeader title="Insights" buttons={<NewInsightButton />} />
<Tabs
activeKey={tab}
style={{ borderColor: '#D9D9D9' }}
onChange={(t) => setSavedInsightsFilters({ tab: t as SavedInsightsTabs })}
>
<TabPane tab="All Insights" key={SavedInsightsTabs.All} />
<TabPane tab="Your Insights" key={SavedInsightsTabs.Yours} />
<TabPane tab="Favorites" key={SavedInsightsTabs.Favorites} />
</Tabs>
<Row style={{ paddingBottom: 16, justifyContent: 'space-between', gap: '0.75rem' }}>
<Col>
<Input.Search
allowClear
enterButton
placeholder="Search for insights"
style={{ width: 240 }}
onChange={(e) => setSavedInsightsFilters({ search: e.target.value })}
value={search || ''}
onSearch={() => loadInsights()}
/>
</Col>
<Row style={{ gap: '0.75rem' }}>
<Col>
Type:
<Select
className="insight-type-icon-dropdown"
value={insightType}
style={{ paddingLeft: 8, width: 140 }}
onChange={(it) => setSavedInsightsFilters({ insightType: it })}
>
{Object.entries({
['All types']: {
name: 'All types',
inMenu: false,
} as InsightTypeMetadata,
...INSIGHT_TYPES_METADATA,
}).map(([listedInsightType, listedInsightTypeMetadata], index) => (
<Select.Option key={index} value={listedInsightType}>
<div className="insight-type-icon-wrapper">
{listedInsightTypeMetadata.icon ? (
<div className="icon-container">
<div className="icon-container-inner">
{<listedInsightTypeMetadata.icon color="#747EA2" noBackground />}
</div>
</div>
) : null}
<div>{listedInsightTypeMetadata.name}</div>
</div>
</Select.Option>
))}
</Select>
</Col>
<Col>
Last modified:
<DateFilter
style={{ paddingLeft: 8 }}
defaultValue="All time"
disabled={false}
bordered={true}
dateFrom={dateFrom}
dateTo={dateTo}
onChange={(fromDate, toDate) =>
setSavedInsightsFilters({ dateFrom: fromDate, dateTo: toDate })
}
/>
</Col>
{tab !== SavedInsightsTabs.Yours ? (
<Col>
Created by:
<Select
value={createdBy}
style={{ paddingLeft: 8, width: 140 }}
onChange={(cb) => {
setSavedInsightsFilters({ createdBy: cb })
}}
>
<Select.Option value={'All users'}>All users</Select.Option>
{members.map((member) => (
<Select.Option key={member.user.id} value={member.user.id}>
{member.user.first_name}
</Select.Option>
))}
</Select>
</Col>
) : null}
</Row>
</Row>
<Row className="list-or-card-layout">
{count
? `${startCount}${endCount - startCount > 1 ? '-' + endCount : ''} of ${count} insight${
count === 1 ? '' : 's'
}`
: 'No insights yet'}
<div>
<Radio.Group
onChange={(e) => setSavedInsightsFilters({ layoutView: e.target.value })}
value={layoutView}
buttonStyle="solid"
>
<Radio.Button value={LayoutView.List}>
<UnorderedListOutlined className="mr-05" />
List
</Radio.Button>
<Radio.Button value={LayoutView.Card}>
<AppstoreFilled className="mr-05" />
Card
</Radio.Button>
</Radio.Group>
</div>
</Row>
{!insightsLoading && insights.count < 1 ? (
<SavedInsightsEmptyState />
) : (
<>
{layoutView === LayoutView.List ? (
<LemonTable
loading={insightsLoading}
columns={columns}
dataSource={insights.results}
pagination={{
controlled: true,
pageSize: INSIGHTS_PER_PAGE,
currentPage: page,
entryCount: count,
onBackward: () =>
setSavedInsightsFilters({
page: page - 1,
}),
onForward: () =>
setSavedInsightsFilters({
page: page + 1,
}),
}}
disableSortingCancellation
sorting={sorting}
onSort={(newSorting) =>
setSavedInsightsFilters({
order: newSorting
? `${newSorting.order === -1 ? '-' : ''}${newSorting.columnKey}`
: undefined,
})
}
rowKey="id"
nouns={['insight', 'insights']}
/>
) : (
<Row gutter={[16, 16]}>
{insights &&
insights.results.map((insight: InsightModel, index: number) => (
<Col
xs={24}
sm={24}
md={24}
lg={12}
xl={12}
xxl={8}
key={insight.short_id}
style={{ height: 340 }}
>
<DashboardItem
item={{ ...insight, color: null }}
key={insight.short_id + '_user'}
loadDashboardItems={() => {
loadInsights()
}}
dashboardMode={null}
index={index}
isOnEditMode={false}
footer={
<div className="dashboard-item-footer">
{
<>
Saved {dayjs(insight.created_at).fromNow()} by{' '}
{insight.created_by?.first_name ||
insight.created_by?.email ||
'unknown'}
</>
}
</div>
}
/>
</Col>
))}
</Row>
)}
</>
)}
</div>
)
}
Example #6
| 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 #7
| Source File: Header.tsx From slim with Apache License 2.0 | 4 votes |
|
render (): React.ReactNode {
var user = null
if (this.props.user !== undefined) {
const userMenuItems = []
if (this.props.onUserLogout !== undefined) {
userMenuItems.push(
{
label: 'Logout',
key: 'user-logout',
onClick: () => {
if (this.props.onUserLogout !== undefined) {
this.props.onUserLogout()
}
}
}
)
}
const userMenu = <Menu items={userMenuItems} />
user = (
<Dropdown overlay={userMenu} trigger={['click']}>
<Button
icon={UserOutlined}
onClick={e => e.preventDefault()}
label={`${this.props.user.name} (${this.props.user.email})`}
/>
</Dropdown>
)
}
let worklistButton
if (this.props.showWorklistButton) {
worklistButton = (
<NavLink to='/'>
<Button icon={UnorderedListOutlined} tooltip='Go to worklist' />
</NavLink>
)
}
const infoButton = (
<Button
icon={InfoOutlined}
tooltip='Get app info'
onClick={this.handleInfoButtonClick}
/>
)
let serverSelectionButton
if (this.props.showServerSelectionButton) {
serverSelectionButton = (
<Button
icon={ApiOutlined}
tooltip='Select server'
onClick={this.handleServerSelectionButtonClick}
/>
)
}
const handleServerSelectionInput = (event: any): void => {
const value = event.target.value
let isDisabled = true
if (value != null) {
try {
const url = new URL(value)
if (url.protocol.startsWith('http') && url.pathname.length > 0) {
isDisabled = false
}
} catch (TypeError) {}
}
this.setState({
selectedServerUrl: value,
isServerSelectionDisabled: isDisabled
})
}
const handleServerSelectionCancellation = (event: any): void => {
this.setState({
selectedServerUrl: undefined,
isServerSelectionModalVisible: false,
isServerSelectionDisabled: true
})
}
const handleServerSelection = (event: any): void => {
const url = this.state.selectedServerUrl
let closeModal = false
if (url != null && url !== '') {
if (url.startsWith('http://') || url.startsWith('https://')) {
this.props.onServerSelection({ url })
closeModal = true
}
}
this.setState({
selectedServerUrl: undefined,
isServerSelectionModalVisible: !closeModal,
isServerSelectionDisabled: true
})
}
const logoUrl = process.env.PUBLIC_URL + '/logo.svg'
return (
<>
<Layout.Header style={{ width: '100%', padding: '0 14px' }}>
<Row>
<Col>
<Space align='center' direction='horizontal'>
<img
src={logoUrl}
alt=''
style={{ height: '64px', margin: '-14px' }}
/>
</Space>
</Col>
<Col flex='auto' />
<Col>
<Space direction='horizontal'>
{worklistButton}
{infoButton}
{serverSelectionButton}
{user}
</Space>
</Col>
</Row>
</Layout.Header>
<Modal
visible={this.state.isServerSelectionModalVisible}
title='Select DICOMweb server'
onOk={handleServerSelection}
onCancel={handleServerSelectionCancellation}
>
<Input
placeholder='Enter base URL of DICOMweb Study Service'
onChange={handleServerSelectionInput}
onPressEnter={handleServerSelection}
addonAfter={
this.state.isServerSelectionDisabled
? <StopOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
: <CheckOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
}
/>
</Modal>
</>
)
}
Example #8
| Source File: DestinationStatistics.tsx From jitsu with MIT License | 4 votes |
|
DestinationStatistics: React.FC<CommonDestinationPageProps> = () => {
const history = useHistory()
const services = useServices()
const params = useParams<StatisticsPageParams>()
const destination = destinationsStore.list.find(d => d._id === params.id)
const destinationUid = destination?._uid
const destinationReference = destinationsStore.getDestinationReferenceById(destinationUid)
const statisticsService = useMemo<IStatisticsService>(
() => new StatisticsService(services.backendApiClient, services.activeProject.id, true),
[]
)
const isSelfHosted = services.features.environment !== "jitsu_cloud"
// Events last 30 days
const lastMonthPushEvents = useLoaderAsObject<CombinedStatisticsDatePoint[]>(
monthlyDataLoader(destinationUid, destinationReference, "push", statisticsService),
[destinationUid]
)
const lastMonthPullEvents = useLoaderAsObject<CombinedStatisticsDatePoint[]>(
monthlyDataLoader(destinationUid, destinationReference, "pull", statisticsService),
[destinationUid]
)
// Last 24 hours
const lastDayPushEvents = useLoaderAsObject<CombinedStatisticsDatePoint[]>(
hourlyDataLoader(destinationUid, destinationReference, "push", statisticsService),
[destinationUid]
)
const lastDayPullEvents = useLoaderAsObject<CombinedStatisticsDatePoint[]>(
hourlyDataLoader(destinationUid, destinationReference, "pull", statisticsService),
[destinationUid]
)
const somethingIsLoading =
lastMonthPushEvents.isLoading ||
lastMonthPullEvents.isLoading ||
lastDayPushEvents.isLoading ||
lastDayPullEvents.isLoading
useEffect(() => {
currentPageHeaderStore.setBreadcrumbs(
{ title: "Destinations", link: projectRoute(destinationPageRoutes.root) },
{
title: (
<PageHeader
title={destinationReference ? params.id : "Destination Not Found"}
icon={destinationReference?.ui.icon}
mode={destinationReference ? "statistics" : null}
/>
),
}
)
}, [])
return destinationReference ? (
<>
<div className="flex flex-row space-x-2 justify-end mb-4">
<Button
type="ghost"
icon={<EditOutlined />}
size="large"
onClick={() =>
history.push(
projectRoute(destinationPageRoutes.editExact, {
id: params.id,
})
)
}
>
{"Edit Destination"}
</Button>
<Button
type="ghost"
icon={<UnorderedListOutlined />}
size="large"
onClick={() => history.push(projectRoute(destinationPageRoutes.root))}
>
{"Destinations List"}
</Button>
</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={"mb-4"}>
<Col span={12}>
<Card title="Incoming events (last 30 days)" bordered={false} className="w-full" loading={somethingIsLoading}>
<StatisticsChart data={lastMonthPushEvents.data || []} granularity={"day"} />
</Card>
</Col>
<Col span={12}>
<Card
title="Incoming events (last 24 hours)"
bordered={false}
className="w-full"
loading={somethingIsLoading}
>
<StatisticsChart data={lastDayPushEvents.data || []} granularity={"hour"} />
</Card>
</Col>
</Row>
{destinationReference.syncFromSourcesStatus === "supported" && (
<Row gutter={16}>
<Col span={12}>
<Card
title="Rows synchronized from sources (last 30 days)"
bordered={false}
className="w-full"
loading={somethingIsLoading}
>
<StatisticsChart
data={lastMonthPullEvents.data || []}
granularity={"day"}
dataToDisplay={["success", "skip"]}
/>
</Card>
</Col>
<Col span={12}>
<Card
title="Rows synchronized from sources (last 24 hours)"
bordered={false}
className="w-full"
loading={somethingIsLoading}
>
<StatisticsChart
data={lastDayPullEvents.data || []}
granularity={"hour"}
dataToDisplay={["success", "skip"]}
/>
</Card>
</Col>
</Row>
)}
</>
) : (
<DestinationNotFound destinationId={params.id} />
)
}
Example #9
| Source File: Stats.tsx From leek with Apache License 2.0 | 4 votes |
|
function Stats(stats: any) {
return [
{
number: stats.SEEN_TASKS,
text: "Total Tasks",
icon: <UnorderedListOutlined />,
tooltip: "Seen tasks names",
},
{
number: stats.SEEN_WORKERS,
text: "Total Workers",
icon: <RobotFilled />,
tooltip: "The total offline/online and beat workers",
},
{
number: stats.PROCESSED_EVENTS,
text: "Events Processed",
icon: <ThunderboltOutlined />,
tooltip: "The total processed events",
},
{
number: stats.PROCESSED_TASKS,
text: "Tasks Processed",
icon: <SyncOutlined />,
tooltip: "The total processed tasks",
},
{
number: stats.QUEUED,
text: "Tasks Queued",
icon: <EllipsisOutlined />,
tooltip: "The total tasks in the queues",
},
{
number: stats.RETRY,
text: "To Retry",
icon: <RetweetOutlined style={{ color: STATES_COLORS.RETRY }} />,
tooltip: "Tasks that are failed and waiting for retry",
},
{
number: stats.RECEIVED,
text: "Received",
icon: <SendOutlined style={{ color: STATES_COLORS.RECEIVED }} />,
tooltip: "Tasks were received by a worker. but not yet started",
},
{
number: stats.STARTED,
text: "Started",
icon: <LoadingOutlined style={{ color: STATES_COLORS.STARTED }} />,
tooltip:
"Tasks that were started by a worker and still active, set (task_track_started) to True on worker level to report started tasks",
},
{
number: stats.SUCCEEDED,
text: "Succeeded",
icon: <CheckCircleOutlined style={{ color: STATES_COLORS.SUCCEEDED }} />,
tooltip: "Tasks that were succeeded",
},
{
number: stats.RECOVERED,
text: "Recovered",
icon: <IssuesCloseOutlined style={{ color: STATES_COLORS.RECOVERED }} />,
tooltip: "Tasks that were succeeded after retries.",
},
{
number: stats.FAILED,
text: "Failed",
icon: <WarningOutlined style={{ color: STATES_COLORS.FAILED }} />,
tooltip: "Tasks that were failed",
},
{
number: stats.CRITICAL,
text: "Critical",
icon: <CloseCircleOutlined style={{ color: STATES_COLORS.CRITICAL }} />,
tooltip: "Tasks that were failed after max retries.",
},
{
number: stats.REJECTED,
text: "Rejected",
icon: <RollbackOutlined style={{ color: STATES_COLORS.REJECTED }} />,
tooltip:
"Tasks that were rejected by workers and requeued, or moved to a dead letter queue",
},
{
number: stats.REVOKED,
text: "Revoked",
icon: <StopOutlined style={{ color: STATES_COLORS.REVOKED }} />,
tooltip: "Tasks that were revoked by workers, but still in the queue.",
},
];
}
Example #10
| 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>
);
}
