diff --git a/.eslintrc.yml b/.eslintrc.yml
index ce7062dd..c1b61443 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -37,3 +37,4 @@ rules:
},
],
}
+ignorePatterns: ['node_modules/', 'build/', '*.test.js', '*.test.jsx']
\ No newline at end of file
diff --git a/src/components/Collections/CollectionCluster/ClusterInfo.jsx b/src/components/Collections/CollectionCluster/ClusterInfo.jsx
new file mode 100644
index 00000000..febddae8
--- /dev/null
+++ b/src/components/Collections/CollectionCluster/ClusterInfo.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card, CardHeader, Table, TableBody } from '@mui/material';
+import { CopyButton } from '../../Common/CopyButton';
+import ClusterInfoHead from './ClusterInfoHead';
+import ClusterShardRow from './ClusterShardRow';
+
+const ClusterInfo = ({ collectionCluster, ...other }) => {
+ const shards = [
+ ...(collectionCluster.result?.local_shards || []),
+ ...(collectionCluster.result?.remote_shards || []),
+ ];
+
+ const shardRows = shards.map((shard) => (
+
+ ));
+
+ return (
+
+ }
+ />
+
+
+ );
+};
+
+ClusterInfo.defaultProps = {
+ collectionCluster: {
+ result: {},
+ },
+};
+
+ClusterInfo.propTypes = {
+ collectionCluster: PropTypes.shape({
+ result: PropTypes.shape({
+ peer_id: PropTypes.number,
+ local_shards: PropTypes.arrayOf(
+ PropTypes.shape({
+ shard_id: PropTypes.number,
+ state: PropTypes.string,
+ })
+ ),
+ remote_shards: PropTypes.arrayOf(
+ PropTypes.shape({
+ shard_id: PropTypes.number,
+ peer_id: PropTypes.number,
+ state: PropTypes.string,
+ })
+ ),
+ }),
+ }).isRequired,
+ other: PropTypes.object,
+};
+
+export default ClusterInfo;
diff --git a/src/components/Collections/CollectionCluster/ClusterInfoHead.jsx b/src/components/Collections/CollectionCluster/ClusterInfoHead.jsx
new file mode 100644
index 00000000..4a0bc1cc
--- /dev/null
+++ b/src/components/Collections/CollectionCluster/ClusterInfoHead.jsx
@@ -0,0 +1,28 @@
+import { TableCell, TableHead, TableRow, Typography } from '@mui/material';
+import React from 'react';
+
+const ClusterInfoHead = () => {
+ return (
+
+
+
+
+ Shard ID
+
+
+
+
+ Location
+
+
+
+
+ Status
+
+
+
+
+ );
+};
+
+export default ClusterInfoHead;
diff --git a/src/components/Collections/CollectionCluster/ClusterShardRow.jsx b/src/components/Collections/CollectionCluster/ClusterShardRow.jsx
new file mode 100644
index 00000000..95a182f0
--- /dev/null
+++ b/src/components/Collections/CollectionCluster/ClusterShardRow.jsx
@@ -0,0 +1,36 @@
+import { TableCell, TableRow, Typography } from '@mui/material';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ClusterShardRow = ({ shard, clusterPeerId }) => {
+ return (
+
+
+
+ {shard.shard_id}
+
+
+
+
+ {shard.peer_id ? `Remote (${shard.peer_id})` : `Local (${clusterPeerId ?? 'unknown'})`}
+
+
+
+
+ {shard.state}
+
+
+
+ );
+};
+
+ClusterShardRow.propTypes = {
+ shard: PropTypes.shape({
+ shard_id: PropTypes.number,
+ peer_id: PropTypes.number,
+ state: PropTypes.string,
+ }).isRequired,
+ clusterPeerId: PropTypes.number,
+};
+
+export default ClusterShardRow;
diff --git a/src/components/Collections/CollectionCluster/collectionCluster.test.jsx b/src/components/Collections/CollectionCluster/collectionCluster.test.jsx
new file mode 100644
index 00000000..a1965b70
--- /dev/null
+++ b/src/components/Collections/CollectionCluster/collectionCluster.test.jsx
@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ClusterInfo from './ClusterInfo';
+import ClusterShardRow from './ClusterShardRow';
+
+const CLUSTER_INFO = {
+ result: {
+ peer_id: 5644950770669488,
+ shard_count: 3,
+ local_shards: [
+ {
+ shard_id: 0,
+ points_count: 62223,
+ state: 'Active',
+ },
+ {
+ shard_id: 2,
+ points_count: 65999,
+ state: 'Active',
+ },
+ ],
+ remote_shards: [
+ {
+ shard_id: 0,
+ peer_id: 5255497362296823,
+ state: 'Active',
+ },
+ {
+ shard_id: 1,
+ peer_id: 5255497362296823,
+ state: 'Active',
+ },
+ {
+ shard_id: 1,
+ peer_id: 8741461806010521,
+ state: 'Active',
+ },
+ {
+ shard_id: 2,
+ peer_id: 8741461806010521,
+ state: 'Active',
+ },
+ ],
+ shard_transfers: [],
+ },
+ status: 'ok',
+ time: 0.00002203,
+};
+
+describe('collection cluster info', () => {
+ it('should render ClusterShardRow with given data', () => {
+ const shard = CLUSTER_INFO.result.remote_shards[0];
+ render(
+
+ );
+ expect(screen.getByTestId('shard-row').children[0].children[0].textContent).toBe(shard.shard_id.toString());
+ expect(screen.getByText(`Remote (${shard.peer_id})`)).toBeTruthy();
+ expect(screen.getByText(shard.state)).toBeTruthy();
+ });
+
+ it('should render CollectionClusterInfo with given data', () => {
+ const shardReplicasCount = CLUSTER_INFO.result.local_shards.length + CLUSTER_INFO.result.remote_shards.length;
+ render();
+ expect(screen.getByText('Collection Cluster Info')).toBeTruthy();
+ expect(screen.getAllByTestId('shard-row').length).toBe(shardReplicasCount);
+ });
+});
diff --git a/src/components/Collections/CollectionInfo.jsx b/src/components/Collections/CollectionInfo.jsx
new file mode 100644
index 00000000..061fc18b
--- /dev/null
+++ b/src/components/Collections/CollectionInfo.jsx
@@ -0,0 +1,79 @@
+import React, { memo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Card, CardContent, CardHeader, Typography } from '@mui/material';
+import { useClient } from '../../context/client-context';
+import { DataGridList } from '../Points/DataGridList';
+import { CopyButton } from '../Common/CopyButton';
+import { Dot } from '../Common/Dot';
+import ClusterInfo from './CollectionCluster/ClusterInfo';
+import { useSnackbar } from 'notistack';
+import { getSnackbarOptions } from '../Common/utils/snackbarOptions';
+
+export const CollectionInfo = ({ collectionName }) => {
+ const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+ const { client: qdrantClient } = useClient();
+ const [collection, setCollection] = React.useState({});
+ const [clusterInfo, setClusterInfo] = React.useState(null);
+
+ useEffect(() => {
+ qdrantClient
+ .getCollection(collectionName)
+ .then((res) => {
+ setCollection(() => {
+ return { ...res };
+ });
+ })
+ .catch((err) => {
+ enqueueSnackbar(err.message, getSnackbarOptions('error', closeSnackbar));
+ });
+
+ qdrantClient
+ .api('cluster')
+ .collectionClusterInfo({ collection_name: collectionName })
+ .then((res) => {
+ setClusterInfo(() => {
+ return { ...res.data };
+ });
+ })
+ .catch((err) => {
+ enqueueSnackbar(err.message, getSnackbarOptions('error', closeSnackbar));
+ });
+ }, [collectionName]);
+
+ return (
+
+
+ }
+ />
+
+
+ {collection.status}
+
+ ),
+ }}
+ />
+
+
+
+ {clusterInfo && }
+
+ );
+};
+
+CollectionInfo.displayName = 'CollectionInfo';
+
+CollectionInfo.propTypes = {
+ collectionName: PropTypes.string.isRequired,
+};
+
+export default memo(CollectionInfo);
diff --git a/src/components/Common/Dot.jsx b/src/components/Common/Dot.jsx
new file mode 100644
index 00000000..719278ae
--- /dev/null
+++ b/src/components/Common/Dot.jsx
@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+
+/**
+ * Status indicator dot.
+ * @type {StyledComponent, JSX.IntrinsicElements[string], {}>}
+ */
+export const Dot = styled('div')(
+ ({ color }) => `
+ border-radius: 50%;
+ background-color: ${color};
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+`
+);
diff --git a/src/components/Points/DataGridList.jsx b/src/components/Points/DataGridList.jsx
new file mode 100644
index 00000000..8ecf64d1
--- /dev/null
+++ b/src/components/Points/DataGridList.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { JsonViewer } from '@textea/json-viewer';
+import { useTheme } from '@mui/material/styles';
+import { Divider, Grid, Typography } from '@mui/material';
+
+/**
+ * A list of key-value pairs, where the value is either a string or an object.
+ * if the value is an object, it will be rendered as a JSON tree.
+ * @param {Object} data - key-value pairs to render
+ * @param {Object} specialCases - key-value pairs to render, where the value is JSX element
+ * @return {unknown[]} - array of JSX elements
+ */
+export const DataGridList = function ({ data = {}, specialCases = {} }) {
+ const theme = useTheme();
+ const specialKeys = Object.keys(specialCases) || [];
+
+ return Object.keys(data).map((key) => {
+ return (
+
+
+
+
+ {key}
+
+
+
+
+ {/* special cases */}
+ {specialKeys?.includes(key) && specialCases[key]}
+
+ {/* objects */}
+ {typeof data[key] === 'object' && !specialKeys.includes(key) && (
+
+ {' '}
+ {' '}
+
+ )}
+
+ {/* other types of values */}
+ {typeof data[key] !== 'object' && !specialKeys.includes(key) && (
+
+ {'\t'} {data[key].toString()}
+
+ )}
+
+
+
+
-
-
-
- {key}
-
-
-
-
- {typeof data.payload[key] === 'object' ? (
-
- {' '}
- {' '}
-
- ) : (
-
- {'\t'} {data.payload[key].toString()}
-
- )}
-
-
-
-