API Keys: Displaying the names of the chatflows associated with the keys and Warning the user before deletion.

packages/server/src/index.ts

@@ -1135,28 +1135,50 @@ export class App {
         // API Keys
         // ----------------------------------------
 
+        const addChatflowsCount = async (keys: any, res: Response) => {
+            if (keys) {
+                const updatedKeys: any[] = []
+                //iterate through keys and get chatflows
+                for (const key of keys) {
+                    const chatflows = await this.AppDataSource.getRepository(ChatFlow)
+                        .createQueryBuilder('cf')
+                        .where('cf.apikeyid = :apikeyid', { apikeyid: key.id })
+                        .getMany()
+                    const linkedChatFlows: any[] = []
+                    chatflows.map((cf) => {
+                        linkedChatFlows.push({
+                            flowName: cf.name
+                        })
+                    })
+                    key.chatFlows = linkedChatFlows
+                    updatedKeys.push(key)
+                }
+                return res.json(updatedKeys)
+            }
+            return res.json(keys)
+        }
         // Get api keys
         this.app.get('/api/v1/apikey', async (req: Request, res: Response) => {
             const keys = await getAPIKeys()
-            return res.json(keys)
+            return addChatflowsCount(keys, res)
         })
 
         // Add new api key
         this.app.post('/api/v1/apikey', async (req: Request, res: Response) => {
             const keys = await addAPIKey(req.body.keyName)
-            return res.json(keys)
+            return addChatflowsCount(keys, res)
         })
 
         // Update api key
         this.app.put('/api/v1/apikey/:id', async (req: Request, res: Response) => {
             const keys = await updateAPIKey(req.params.id, req.body.keyName)
-            return res.json(keys)
+            return addChatflowsCount(keys, res)
         })
 
         // Delete new api key
         this.app.delete('/api/v1/apikey/:id', async (req: Request, res: Response) => {
             const keys = await deleteAPIKey(req.params.id)
-            return res.json(keys)
+            return addChatflowsCount(keys, res)
         })
 
         // Verify api key

packages/ui/src/views/apikey/index.js

@@ -6,6 +6,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 import {
     Button,
     Box,
+    Chip,
     Stack,
     Table,
     TableBody,
@@ -37,7 +38,7 @@ import useConfirm from 'hooks/useConfirm'
 import useNotifier from 'utils/useNotifier'
 
 // Icons
-import { IconTrash, IconEdit, IconCopy, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
+import { IconTrash, IconEdit, IconCopy, IconCornerDownRight, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
 import APIEmptySVG from 'assets/images/api_empty.svg'
 
 // ==============================|| APIKey ||============================== //
@@ -106,7 +107,10 @@ const APIKey = () => {
     const deleteKey = async (key) => {
         const confirmPayload = {
             title: `Delete`,
-            description: `Delete key ${key.keyName}?`,
+            description:
+                key.chatFlows.length === 0
+                    ? `Delete key [${key.keyName}] ? `
+                    : `Delete key [${key.keyName}] ?\n There are ${key.chatFlows.length} chatflows using this key.`,
             confirmButtonName: 'Delete',
             cancelButtonName: 'Cancel'
         }
@@ -193,6 +197,7 @@ const APIKey = () => {
                                 <TableRow>
                                     <TableCell>Key Name</TableCell>
                                     <TableCell>API Key</TableCell>
+                                    <TableCell>Usage</TableCell>
                                     <TableCell>Created</TableCell>
                                     <TableCell> </TableCell>
                                     <TableCell> </TableCell>
@@ -200,6 +205,7 @@ const APIKey = () => {
                             </TableHead>
                             <TableBody>
                                 {apiKeys.map((key, index) => (
+                                    <>
                                         <TableRow key={index} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                                             <TableCell component='th' scope='row'>
                                                 {key.keyName}
@@ -247,6 +253,7 @@ const APIKey = () => {
                                                     </Typography>
                                                 </Popover>
                                             </TableCell>
+                                            <TableCell>{key.chatFlows.length}</TableCell>
                                             <TableCell>{key.createdAt}</TableCell>
                                             <TableCell>
                                                 <IconButton title='Edit' color='primary' onClick={() => edit(key)}>
@@ -259,6 +266,17 @@ const APIKey = () => {
                                                 </IconButton>
                                             </TableCell>
                                         </TableRow>
+                                        {key.chatFlows.length > 0 && (
+                                            <TableRow sx={{ verticalAlign: 'middle' }}>
+                                                <TableCell colSpan={6}>
+                                                    <IconCornerDownRight />{' '}
+                                                    {key.chatFlows.map((flow, index) => (
+                                                        <Chip key={index} label={flow.flowName} />
+                                                    ))}
+                                                </TableCell>
+                                            </TableRow>
+                                        )}
+                                    </>
                                 ))}
                             </TableBody>
                         </Table>