chore: Add Warning on the snapshot page for distributed cluster (#202)

* chore: Add Warning on the snapshot page for distributed cluster * Snapshot warning - variant with a banner (#203) * snapshot warning - variant with a banner * Update src/components/Snapshots/SnapshotsTab.jsx Co-authored-by: Kartik Gupta <[email protected]> --------- Co-authored-by: Kartik Gupta <[email protected]> * npm audit fix --------- Co-authored-by: trean <[email protected]> Co-authored-by: generall <[email protected]>
qdrant · Aug 15, 2024 · 078f643 · 078f643
1 parent 4eba245
commit 078f643
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 1 deletion.
diff --git a/src/components/InfoBanner.jsx b/src/components/InfoBanner.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Box, Collapse } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+
+const InfoBanner = ({ severity, children, onClose }) => {
+  const [open, setOpen] = useState(true);
+
+  const handleClose = () => {
+    onClose && onClose();
+    setOpen(false);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Collapse in={open}>
+        <Alert
+          severity={severity}
+          action={
+            <IconButton aria-label="close" color="inherit" size="small" onClick={handleClose}>
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+          sx={{ my: 2, lineHeight: 1.7 }}
+        >
+          {children}
+        </Alert>
+      </Collapse>
+    </Box>
+  );
+};
+
+InfoBanner.propTypes = {
+  severity: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func,
+};
+
+export default InfoBanner;
diff --git a/src/components/Snapshots/SnapshotsTab.jsx b/src/components/Snapshots/SnapshotsTab.jsx
@@ -3,18 +3,21 @@ import PropTypes from 'prop-types';
 import { useClient } from '../../context/client-context';
 import { useSnackbar } from 'notistack';
 import { getSnackbarOptions } from '../Common/utils/snackbarOptions';
-import { Button, Grid, TableCell, TableContainer, TableRow, Typography } from '@mui/material';
+import { Button, Grid, Link, TableCell, TableContainer, TableRow, Typography } from '@mui/material';
 import PhotoCamera from '@mui/icons-material/PhotoCamera';
 import { TableWithGaps, TableHeadWithGaps, TableBodyWithGaps } from '../Common/TableWithGaps';
 import { SnapshotsTableRow } from './SnapshotsTableRow';
 import { pumpFile, updateProgress } from '../../common/utils';
+import InfoBanner from '../InfoBanner';
 
 export const SnapshotsTab = ({ collectionName }) => {
   const { client: qdrantClient } = useClient();
   const [snapshots, setSnapshots] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const errorSnackbarOptions = getSnackbarOptions('error', closeSnackbar);
+  const [localShards, setLocalShards] = useState([]);
+  const [remoteShards, setRemoteShards] = useState([]);
 
   useEffect(() => {
     setIsLoading(true);
@@ -29,6 +32,21 @@ export const SnapshotsTab = ({ collectionName }) => {
       .finally(() => {
         setIsLoading(false);
       });
+
+    qdrantClient
+      .api('cluster')
+      .collectionClusterInfo({ collection_name: collectionName })
+      .then((res) => {
+        const remoteShards = res.data.result.remote_shards;
+        const localShards = res.data.result.local_shards;
+        if (remoteShards.length > 0) {
+          setRemoteShards(remoteShards);
+          setLocalShards(localShards);
+        }
+      })
+      .catch((err) => {
+        enqueueSnackbar(err.message, errorSnackbarOptions);
+      });
   }, [qdrantClient, collectionName]);
 
   const createSnapshot = () => {
@@ -122,6 +140,43 @@ export const SnapshotsTab = ({ collectionName }) => {
             Take snapshot
           </Button>
         </Grid>
+        {remoteShards && remoteShards.length !== 0 && (
+          <InfoBanner severity={'warning'}>
+            <Typography>
+              Snapshot will not contain the full collection. It will only include shards on the current machine.
+            </Typography>
+
+            {localShards.length > 0 && (
+              <>
+                <Typography>Local shards:</Typography>
+                <ul>
+                  {localShards.map((shard) => (
+                    <Typography component={'li'} key={shard.shard_id}>
+                      Id: {shard.shard_id}
+                    </Typography>
+                  ))}
+                </ul>
+              </>
+            )}
+            <>
+              <Typography>Remote shards (not included in the snapshot):</Typography>
+              <ul>
+                {remoteShards.map((shard) => (
+                  <Typography component={'li'} key={shard.shard_id}>
+                    Id: {shard.shard_id} ({shard.peer_id})
+                  </Typography>
+                ))}
+              </ul>
+            </>
+            <Typography>
+              For more information, please visit the{' '}
+              <Link href={'https://qdrant.tech/documentation/tutorials/create-snapshot/'} target="_blank">
+                documentation
+              </Link>
+              .
+            </Typography>
+          </InfoBanner>
+        )}
         {isLoading && <div>Loading...</div>}
         {!isLoading && snapshots?.length > 0 && (
           <Grid item xs={12}>