Feature : add 'trigger optimizers' button to collection info (#210)

Author: kartik-gupta-ij

src/components/Collections/CollectionInfo.jsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Card, CardContent, CardHeader, Typography } from '@mui/material';
+import { Box, Button, Card, CardContent, CardHeader, Typography } from '@mui/material';
 import { useClient } from '../../context/client-context';
 import { DataGridList } from '../Points/DataGridList';
 import { CopyButton } from '../Common/CopyButton';
@@ -17,6 +17,21 @@ export const CollectionInfo = ({ collectionName }) => {
   const [clusterInfo, setClusterInfo] = React.useState(null);
 
   useEffect(() => {
+    fetchCollection();
+    qdrantClient
+      .api('cluster')
+      .collectionClusterInfo({ collection_name: collectionName })
+      .then((res) => {
+        setClusterInfo(() => {
+          return { ...res.data };
+        });
+      })
+      .catch((err) => {
+        enqueueSnackbar(err.message, getSnackbarOptions('error', closeSnackbar));
+      });
+  }, [collectionName]);
+
+  const fetchCollection = () => {
     qdrantClient
       .getCollection(collectionName)
       .then((res) => {
@@ -27,19 +42,21 @@ export const CollectionInfo = ({ collectionName }) => {
       .catch((err) => {
         enqueueSnackbar(err.message, getSnackbarOptions('error', closeSnackbar));
       });
+  };
 
+  const triggerOptimizers = () => {
     qdrantClient
-      .api('cluster')
-      .collectionClusterInfo({ collection_name: collectionName })
-      .then((res) => {
-        setClusterInfo(() => {
-          return { ...res.data };
-        });
+      .updateCollection(collectionName, {
+        optimizers_config: {},
+      })
+      .then(() => {
+        enqueueSnackbar('Optimizers triggered', getSnackbarOptions('success', closeSnackbar));
+        fetchCollection();
       })
       .catch((err) => {
         enqueueSnackbar(err.message, getSnackbarOptions('error', closeSnackbar));
       });
-  }, [collectionName]);
+  };
 
   return (
     <Box pt={2}>
@@ -57,9 +74,17 @@ export const CollectionInfo = ({ collectionName }) => {
             data={collection}
             specialCases={{
               status: (
-                <Typography variant="subtitle1" color="text.secondary">
-                  {collection.status} <Dot color={collection.status} />
-                </Typography>
+                <Box display="flex" alignItems="center" justifyContent={'space-between'}>
+                  <Typography variant="subtitle1" color="text.secondary">
+                    {collection.status} <Dot color={collection.status} />
+                  </Typography>
+                  {(collection.status === 'grey' ||
+                    collection.optimizer_status?.error === `optimizations pending, awaiting update operation`) && (
+                    <Button variant="outlined" size="small" onClick={triggerOptimizers}>
+                      Trigger optimizers
+                    </Button>
+                  )}
+                </Box>
               ),
             }}
           />