@ant-design/icons#NodeIndexOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#NodeIndexOutlined.
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: AddSubscription.tsx From leek with Apache License 2.0 | 4 votes |
|
AddSubscription = (props) => {
return (
<Modal
title={
<Space>
<NodeIndexOutlined />
Add Subscription
</Space>
}
visible={props.visible}
onCancel={props.reset}
footer={[
<Button key="cancel" size="small" onClick={props.reset}>
Cancel
</Button>,
<Button
form="addSubscription"
key="submit"
htmlType="submit"
size="small"
type="primary"
loading={props.loading}
>
Create
</Button>,
]}
>
<Form
onFinish={props.onAdd}
form={props.form}
id="addSubscription"
initialValues={{ type: "RabbitMQ" }}
>
<FormItem name="type">
<Select>
<Option value="RabbitMQ">RabbitMQ</Option>
<Option value="Redis">Redis</Option>
<Option value="SQS" disabled>
SQS (Not Yet Supported)
</Option>
</Select>
</FormItem>
<FormItem
name="broker"
rules={[{ required: true, message: "Please input broker url!" }]}
>
<Input
prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
placeholder="Broker"
/>
</FormItem>
<FormItem name="backend" rules={[]}>
<Input
prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
placeholder="Backend"
/>
</FormItem>
<FormItem
name="app_env"
rules={[
{
required: true,
message: "Please input environment tag!",
},
{
pattern: /^[a-z]*$/g,
message: "Wrong env tag, only lowercase letters allowed!",
},
]}
>
<Input placeholder="Environment Tag - eg: prod" />
</FormItem>
<Divider />
<FormItem name="exchange" rules={[]}>
<Input placeholder="Exchange - default: celeryev" />
</FormItem>
<FormItem name="queue" rules={[]}>
<Input placeholder="Queue - default: leek.fanout" />
</FormItem>
<FormItem name="routing_key" rules={[]}>
<Input placeholder="Routing Key - default: #" />
</FormItem>
<FormItem
name="prefetch_count"
rules={[
({ __ }) => ({
validator(_, value) {
if (value && (value < 1000 || value > 10000)) {
return Promise.reject(
new Error("Should be between 1000 and 10000")
);
}
return Promise.resolve();
},
}),
]}
>
<InputNumber
min={1000}
max={10000}
step={1}
placeholder="Prefetch count - default: 1000"
style={{ width: "100%" }}
/>
</FormItem>
<Divider />
<FormItem name="concurrency_pool_size" rules={[]}>
<InputNumber
min={1}
max={20}
step={1}
placeholder="Concurrency pool size - default: 1"
style={{ width: "100%" }}
/>
</FormItem>
{/* Batch */}
<FormItem
name="batch_max_size_in_mb"
rules={[
({ __ }) => ({
validator(_, value) {
if (value && (value < 1 || value > 10)) {
return Promise.reject(
new Error("Should be between 1 and 10")
);
}
return Promise.resolve();
},
}),
]}
>
<InputNumber
min={1}
max={10}
step={1}
placeholder="Batch max size in MB - default: 1"
style={{ width: "100%" }}
/>
</FormItem>
<FormItem
name="batch_max_number_of_messages"
dependencies={["prefetch_count"]}
rules={[
({ getFieldValue }) => ({
validator(_, value) {
if (!value && !getFieldValue("prefetch_count")) {
return Promise.resolve();
}
if (value && (value < 1000 || value > 10000)) {
return Promise.reject(
new Error("Should be between 1000 and 10000")
);
}
if (
value &&
!getFieldValue("prefetch_count") &&
value == 1000
) {
return Promise.resolve();
} else if (
value &&
getFieldValue("prefetch_count") &&
value <= getFieldValue("prefetch_count")
) {
return Promise.resolve();
}
return Promise.reject(
new Error(
"Batch max number of messages should be <= prefetch count!"
)
);
},
}),
]}
>
<InputNumber
min={1000}
max={10000}
step={1}
placeholder="Batch max number of messages - default: 1000"
style={{ width: "100%" }}
/>
</FormItem>
<FormItem
name="batch_max_window_in_seconds"
rules={[
({ __ }) => ({
validator(_, value) {
if (value && (value < 5 || value > 20)) {
return Promise.reject(
new Error("Should be between 5 and 20")
);
}
return Promise.resolve();
},
}),
]}
>
<InputNumber
min={5}
max={20}
step={1}
placeholder="Batch max window in seconds - default: 5"
style={{ width: "100%" }}
/>
</FormItem>
</Form>
</Modal>
);
}
Example #3
| Source File: Subscriptions.tsx From leek with Apache License 2.0 | 4 votes |
|
Subscriptions = (props) => {
const [form] = Form.useForm();
const service = new AgentService();
const { currentApp } = useApplication();
const [subscriptions, setSubscriptions] = useState<any>([]);
const [addSubscriptionModalVisible, setAddSubscriptionModalVisible] =
useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
getSubscriptions();
}, [currentApp]);
const getSubscriptions = () => {
setLoading(true);
service
.getSubscriptions(currentApp)
.then(handleAPIResponse)
.then((subscriptions: any) => {
setSubscriptions(subscriptions);
}, handleAPIError)
.catch(handleAPIError)
.finally(() => setLoading(false));
};
function doAddSubscription(subscription) {
setLoading(true);
// TODO: Uncomment after supporting multiple brokers types
delete subscription.type;
service
.addSubscription(currentApp, subscription)
.then(handleAPIResponse)
.then((subscription: any) => {
setSubscriptions([...subscriptions, subscription]);
reset();
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function doDeleteSubscription(subscription_name) {
setLoading(true);
service
.deleteSubscription(currentApp, subscription_name)
.then(handleAPIResponse)
.then((_: any) => {
setSubscriptions(
subscriptions.filter((item) => item.name != subscription_name)
);
message.info("Subscription deleted!");
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setLoading(false);
});
}
function reset() {
setAddSubscriptionModalVisible(false);
form.resetFields();
}
return (
<Row style={{ width: "100%", marginBottom: "16px" }}>
<AddSubscription
visible={addSubscriptionModalVisible}
loading={loading}
form={form}
onAdd={doAddSubscription}
reset={reset}
/>
<Card
size="small"
style={{ width: "100%" }}
bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
loading={loading}
title={
<Row justify="space-between">
<Col>
<Space>
<NodeIndexOutlined />
<Text strong>Brokers Subscriptions</Text>
</Space>
</Col>
<Col>
<Button
onClick={() => setAddSubscriptionModalVisible(true)}
size="small"
type="primary"
ghost
icon={<AppstoreAddOutlined />}
/>
</Col>
</Row>
}
>
<Table
dataSource={subscriptions}
columns={SubscriptionDataColumns({
handleDeleteSubscription: doDeleteSubscription,
loading: loading,
})}
showHeader={false}
pagination={false}
size="small"
rowKey="name"
style={{ width: "100%" }}
scroll={{ x: "100%" }}
locale={{
emptyText: (
<div style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>
No <a href="#API">subscription</a> found
</span>
}
/>
</div>
),
}}
expandable={{
expandedRowRender: (record) => (
<>
<Row justify="space-between" style={{ marginBottom: 6 }}>
<Col span={6}>
<List.Item.Meta
title={"Exchange"}
description={<Tag>{record.exchange}</Tag>}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Queue"}
description={<Tag>{record.queue}</Tag>}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Routing key"}
description={<Tag>{record.routing_key}</Tag>}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Prefetch count"}
description={<Tag>{record.prefetch_count}</Tag>}
/>
</Col>
</Row>
<Row justify="space-between" style={{ marginBottom: 6 }}>
<Col span={6}>
<List.Item.Meta
title={"Batch size"}
description={
<Tag>{`${record.batch_max_size_in_mb}mb`}</Tag>
}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Batch length"}
description={
<Tag>{record.batch_max_number_of_messages}</Tag>
}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Batch window"}
description={
<Tag>{`${record.batch_max_window_in_seconds}s`}</Tag>
}
/>
</Col>
<Col span={6}>
<List.Item.Meta
title={"Pool size"}
description={<Tag>{record.concurrency_pool_size}</Tag>}
/>
</Col>
</Row>
</>
),
rowExpandable: (record) => true,
}}
/>
</Card>
</Row>
);
}
Example #4
| Source File: Indices.tsx From leek with Apache License 2.0 | 4 votes |
|
Indices = (props) => {
const service = new ApplicationService();
const [indicesLoading, setIndicesLoading] = useState<boolean>();
const [indicesDetails, setIndicesDetails] = useState<any>("");
const [indicesSummary, setIndicesSummary] = useState<any>("");
const [indicesDetailsVisible, setIndicesDetailsVisible] =
useState<boolean>(false);
const buildIndicesSummary = () => {
if (!(indicesDetails && indicesDetails.indices)) return;
setIndicesSummary(
Object.entries(indicesDetails.indices).map(([name, details]: any) => {
return {
name: name,
docs_count: details.primaries.docs.count,
size: `${Math.ceil(
details.primaries.store.size_in_bytes / 1000000
)}mb`,
index_total: details.primaries.indexing.index_total,
index_time: `${
details.primaries.indexing.index_time_in_millis / 1000
} sec`,
};
})
);
};
useEffect(() => {
listIndices();
}, [props.selectedApp]);
function listIndices() {
if (props.selectedApp) {
setIndicesLoading(true);
service
.listApplicationIndices(props.selectedApp.app_name)
.then(handleAPIResponse)
.then((result: any) => {
setIndicesDetails(result);
}, handleAPIError)
.catch(handleAPIError)
.finally(() => {
setIndicesLoading(false);
});
}
}
useEffect(() => {
buildIndicesSummary();
}, [indicesDetails]);
return (
<Row style={{ width: "100%" }}>
<Card
size="small"
style={{ width: "100%" }}
bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
extra={
<Radio.Group
onChange={(v) => {
v.target.value === "SUMMARY"
? setIndicesDetailsVisible(false)
: setIndicesDetailsVisible(true);
}}
defaultValue="SUMMARY"
size="small"
>
<Radio.Button value="SUMMARY">SUMMARY</Radio.Button>
<Radio.Button value="DETAILS">DETAILS</Radio.Button>
</Radio.Group>
}
title={
<Row justify="space-between">
<Col>
<Space>
<NodeIndexOutlined />
<Text strong>Indices</Text>
</Space>
</Col>
</Row>
}
>
{!indicesDetailsVisible && (
<Table
dataSource={indicesSummary}
columns={IndicesData()}
showHeader={true}
pagination={false}
size="small"
rowKey="name"
style={{ width: "100%" }}
scroll={{ x: "100%" }}
loading={indicesLoading}
locale={{
emptyText: (
<div style={{ textAlign: "center" }}>
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={
<span>
No <a href="#API">indices</a> found
</span>
}
/>
</div>
),
}}
/>
)}
{indicesDetailsVisible && indicesDetails && indicesDetails.indices && (
<SyntaxHighlighter
customStyle={{ width: "100%" }}
style={atelierCaveDark}
language="json"
>
{JSON.stringify(indicesDetails.indices, null, 2)}
</SyntaxHighlighter>
)}
</Card>
</Row>
);
}
