axiodb 22.3.1 → 22.4.2

package/electron/src/components/dashboard/InMemoryCacheCard.jsx

@@ -0,0 +1,60 @@
+import { ChipIcon } from '@heroicons/react/outline'
+import { useEffect, useState } from 'react'
+
+/**
+ * Component to display the total in-memory cache size in the AxioDB system
+ */
+const InMemoryCacheCard = ({ CacheStorageInfo }) => {
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Simulate API call with dummy data
+    const fetchData = () => {
+      setTimeout(() => {
+        setLoading(false)
+      }, 800)
+    }
+
+    fetchData()
+  }, [])
+
+  // Calculate percentage of cache used
+  const usagePercentage =
+    (CacheStorageInfo.Storage / CacheStorageInfo.Max) * 100
+
+  return (
+    <div className='bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow'>
+      <div className='flex justify-between mb-3'>
+        <div>
+          <h3 className='text-lg font-medium text-ink-900'>In-Memory Cache</h3>
+          {loading
+            ? (
+              <div className='h-8 mt-2 bg-ink-200 rounded animate-pulse w-24' />
+              )
+            : (
+              <p className='text-3xl font-bold text-orange-600 mt-2'>
+                {CacheStorageInfo.Storage}{' '}
+                <span className='text-lg'>{CacheStorageInfo.Unit}</span>
+              </p>
+              )}
+          <p className='text-sm text-ink-500 mt-1'>
+            of {CacheStorageInfo.Max} {CacheStorageInfo.Unit} allocated
+          </p>
+        </div>
+        <div className='p-3 bg-orange-100 rounded-full'>
+          <ChipIcon className='h-8 w-8 text-orange-600' />
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className='w-full bg-ink-200 rounded-full h-2.5 mt-2'>
+        <div
+          className='bg-orange-600 h-2.5 rounded-full'
+          style={{ width: `${loading ? 0 : usagePercentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default InMemoryCacheCard

package/electron/src/components/dashboard/StorageDonut.jsx

@@ -0,0 +1,76 @@
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts'
+import Card, { CardHeader } from '../ui/Card'
+import { Skeleton } from '../ui/Feedback'
+import { formatStorage } from '../../utils/format'
+
+/**
+ * Used-vs-free ring for a storage figure, with the percentage in the middle.
+ *
+ * A donut is the right shape here because the question is "how much of the whole is gone",
+ * not "how has it changed" - there is no time series behind these numbers.
+ */
+const StorageDonut = ({ title, subtitle, used = 0, total = 0, unit = 'MB', loading = false, color = 'var(--color-viz-1)' }) => {
+  const safeTotal = total > 0 ? total : 1
+  const percent = Math.min((used / safeTotal) * 100, 100)
+  const data = [
+    { name: 'Used', value: Math.max(used, 0) },
+    { name: 'Free', value: Math.max(safeTotal - used, 0) }
+  ]
+
+  return (
+    <Card className='flex flex-col'>
+      <CardHeader title={title} subtitle={subtitle} />
+      <div className='flex flex-1 items-center gap-5 p-5'>
+        {loading
+          ? <Skeleton className='h-32 w-32 rounded-full' />
+          : (
+            <div className='relative h-32 w-32 shrink-0'>
+              <ResponsiveContainer width='100%' height='100%'>
+                <PieChart>
+                  <Pie
+                    data={data}
+                    dataKey='value'
+                    innerRadius='72%'
+                    outerRadius='100%'
+                    startAngle={90}
+                    endAngle={-270}
+                    stroke='none'
+                    animationDuration={800}
+                    animationEasing='ease-out'
+                  >
+                    <Cell fill={color} />
+                    <Cell fill='var(--color-ink-200)' />
+                  </Pie>
+                </PieChart>
+              </ResponsiveContainer>
+              <div className='pointer-events-none absolute inset-0 flex flex-col items-center justify-center'>
+                <span className='text-xl font-bold tabular-nums text-ink-900'>
+                  {percent.toFixed(percent < 10 ? 1 : 0)}%
+                </span>
+                <span className='text-[10px] uppercase tracking-wide text-ink-400'>used</span>
+              </div>
+            </div>
+            )}
+
+        <dl className='min-w-0 flex-1 space-y-3'>
+          <div>
+            <dt className='text-xs text-ink-500'>Used</dt>
+            <dd className='text-sm font-semibold tabular-nums text-ink-900'>
+              {loading ? <Skeleton className='h-4 w-20' /> : formatStorage(used, unit)}
+            </dd>
+          </div>
+          <div>
+            <dt className='text-xs text-ink-500'>Available</dt>
+            <dd className='text-sm font-semibold tabular-nums text-ink-900'>
+              {loading
+                ? <Skeleton className='h-4 w-20' />
+                : formatStorage(Math.max(total - used, 0), unit)}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </Card>
+  )
+}
+
+export default StorageDonut

package/electron/src/components/dashboard/StorageUsageCard.jsx

@@ -0,0 +1,59 @@
+import { ServerIcon } from '@heroicons/react/outline'
+import { useEffect, useState } from 'react'
+
+/**
+ * Component to display the total storage used in the AxioDB system
+ */
+const StorageUsageCard = ({ storageInfo }) => {
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Simulate API call with dummy data
+    const fetchData = () => {
+      setTimeout(() => {
+        setLoading(false)
+      }, 800)
+    }
+
+    fetchData()
+  }, [])
+
+  // Calculate percentage of storage used
+  const usagePercentage = (storageInfo?.total / storageInfo?.machine) * 100
+
+  return (
+    <div className='bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow'>
+      <div className='flex justify-between mb-3'>
+        <div>
+          <h3 className='text-lg font-medium text-ink-900'>Storage Used</h3>
+          {loading
+            ? (
+              <div className='h-8 mt-2 bg-ink-200 rounded animate-pulse w-24' />
+              )
+            : (
+              <p className='text-3xl font-bold text-brand-600 mt-2'>
+                {storageInfo?.total}{' '}
+                <span className='text-lg'>{storageInfo?.matrixUnit}</span>
+              </p>
+              )}
+          <p className='text-sm text-ink-500 mt-1'>
+            of {storageInfo?.machine} {storageInfo?.matrixUnit} available
+          </p>
+        </div>
+        <div className='p-3 bg-brand-100 rounded-full'>
+          <ServerIcon className='h-8 w-8 text-brand-600' />
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className='w-full bg-ink-200 rounded-full h-2.5 mt-2'>
+        <div
+          className='bg-brand-600 h-2.5 rounded-full'
+          style={{ width: `${loading ? 0 : usagePercentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default StorageUsageCard

package/electron/src/components/dashboard/TotalCollectionsCard.jsx

@@ -0,0 +1,47 @@
+import { CollectionIcon } from '@heroicons/react/outline'
+import { useEffect, useState } from 'react'
+
+/**
+ * Component to display the total number of collections in the AxioDB system
+ */
+const TotalCollectionsCard = ({ totalCollections }) => {
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Simulate API call with dummy data
+    const fetchData = () => {
+      setTimeout(() => {
+        setLoading(false)
+      }, 600)
+    }
+
+    fetchData()
+  }, [])
+
+  return (
+    <div className='bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow'>
+      <div className='flex justify-between'>
+        <div>
+          {/* <h3 className="text-lg font-medium text-ink-900">
+            Total Collections
+          </h3> */}
+          {loading
+            ? (
+              <div className='h-8 mt-2 bg-ink-200 rounded animate-pulse w-16' />
+              )
+            : (
+              <p className='text-2xl font-bold text-indigo-600 mt-2'>
+                {totalCollections}{' '}
+                {totalCollections <= 1 ? 'Collection' : 'Collections'}
+              </p>
+              )}
+        </div>
+        <div className='p-3 bg-indigo-100 rounded-full'>
+          <CollectionIcon className='h-8 w-8 text-indigo-600' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TotalCollectionsCard

package/electron/src/components/dashboard/TotalDatabasesCard.jsx

@@ -0,0 +1,43 @@
+import { DatabaseIcon } from '@heroicons/react/outline'
+import { useEffect, useState } from 'react'
+
+/**
+ * Component to display the total number of databases in the AxioDB system
+ */
+const TotalDatabasesCard = ({ totalDatabases }) => {
+  // In a real application, this would come from an API
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Simulate fetching total databases count
+    setTimeout(() => {
+      setLoading(false)
+    }, 1000) // Simulate a 1 second delay
+  }, [])
+
+  return (
+    <div className='bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow'>
+      <div className='flex justify-between'>
+        <div>
+          {/* <h3 className="text-lg font-medium text-ink-900">Total Databases</h3> */}
+          {loading
+            ? (
+              <div className='h-8 mt-2 bg-ink-200 rounded animate-pulse w-16 text-center' />
+              )
+            : (
+              <p className='text-2xl font-bold text-brand-700 mt-2 text-center'>
+                {totalDatabases <= 1
+                  ? `${totalDatabases} Database`
+                  : `${totalDatabases} Databases`}
+              </p>
+              )}
+        </div>
+        <div className='p-3 bg-info-50 rounded-full'>
+          <DatabaseIcon className='h-8 w-8 text-brand-700' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TotalDatabasesCard

package/electron/src/components/dashboard/TotalDocumentsCard.jsx

@@ -0,0 +1,44 @@
+import { DocumentTextIcon } from '@heroicons/react/outline'
+import { useEffect, useState } from 'react'
+
+/**
+ * Component to display the total number of documents in the AxioDB system
+ */
+const TotalDocumentsCard = ({ totalDocuments }) => {
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchData = () => {
+      setTimeout(() => {
+        setLoading(false)
+      }, 700)
+    }
+
+    fetchData()
+  }, [])
+
+  return (
+    <div className='bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow'>
+      <div className='flex justify-between'>
+        <div>
+          <h3 className='text-lg font-medium text-ink-900'>Total Documents</h3>
+          {loading
+            ? (
+              <div className='h-8 mt-2 bg-ink-200 rounded animate-pulse w-20' />
+              )
+            : (
+              <p className='text-3xl font-bold text-purple-600 mt-2'>
+                {totalDocuments}
+              </p>
+              )}
+          <p className='text-sm text-ink-500 mt-1'>Across all collections</p>
+        </div>
+        <div className='p-3 bg-purple-100 rounded-full'>
+          <DocumentTextIcon className='h-8 w-8 text-purple-600' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TotalDocumentsCard

package/electron/src/components/database/CreateDatabaseModal.jsx

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+import apiClient from '../../api/client'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'
+import { Input } from '../ui/Field'
+
+const CreateDatabaseModal = ({ isOpen, onClose, onDatabaseCreated }) => {
+  const [databaseName, setDatabaseName] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  // Reset form state when modal is opened/closed
+  const handleClose = () => {
+    setDatabaseName('')
+    setError('')
+    setIsSubmitting(false) // Ensure submission state is reset when closing
+    onClose()
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    // Validate input
+    if (!databaseName.trim()) {
+      setError('Database name is required')
+      return
+    }
+
+    // Alphanumeric validation (plus underscores)
+    if (!/^[a-zA-Z0-9_]+$/.test(databaseName)) {
+      setError(
+        'Database name can only contain letters, numbers, and underscores'
+      )
+      return
+    }
+
+    setIsSubmitting(true)
+    setError('')
+
+    try {
+      const response = await apiClient.post('/api/db/create-database', {
+        name: databaseName
+      })
+
+      if (
+        response.data.statusCode === 200 ||
+        response.data.statusCode === 201
+      ) {
+        onDatabaseCreated(databaseName)
+        setIsSubmitting(false) // Reset submission state on success
+        handleClose()
+      } else {
+        setIsSubmitting(false) // Reset submission state on success
+        throw new Error('Failed to create database')
+      }
+    } catch (error) {
+      console.error('Error creating database:', error)
+      setError(
+        error.response?.data?.message ||
+          'Failed to create database. Please try again.'
+      )
+      setIsSubmitting(false)
+    }
+  }
+  const DatabaseIcon = (
+    <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
+      <ellipse cx='12' cy='6' rx='8' ry='3' />
+      <path d='M4 6v12c0 1.66 3.58 3 8 3s8-1.34 8-3V6' />
+    </svg>
+  )
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title='Create database'
+      icon={DatabaseIcon}
+      size='md'
+      footer={
+        <>
+          <Button variant='secondary' onClick={handleClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={isSubmitting} disabled={!databaseName.trim()}>
+            Create database
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit}>
+        <Input
+          label='Database name'
+          value={databaseName}
+          onChange={(event) => setDatabaseName(event.target.value)}
+          placeholder='AppDB'
+          mono
+          autoFocus
+          error={error || undefined}
+          hint='Letters, numbers and underscores only. The name "config" is reserved by AxioDB.'
+        />
+
+        {/* Lets Enter submit the form without rendering a second visible button. */}
+        <button type='submit' className='hidden' aria-hidden='true' tabIndex={-1} />
+      </form>
+    </Modal>
+  )
+}
+
+export default CreateDatabaseModal

package/electron/src/components/database/DeleteDatabaseModal.jsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import apiClient from '../../api/client'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'
+import { Alert } from '../ui/Feedback'
+
+const WarningIcon = (
+  <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
+    <path strokeLinecap='round' strokeLinejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z' />
+  </svg>
+)
+
+/**
+ * Destructive confirmation. Requires the database name to be typed back before the delete
+ * button unlocks - this removes every collection and document underneath it, and there is no
+ * undo, so a single mis-aimed click should not be enough.
+ */
+const DeleteDatabaseModal = ({ isOpen, dbName, onClose, onConfirmDelete }) => {
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [confirmation, setConfirmation] = useState('')
+  const [error, setError] = useState(null)
+
+  const handleClose = () => {
+    setConfirmation('')
+    setError(null)
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    setError(null)
+
+    try {
+      const response = await apiClient.delete('/api/db/delete-database', {
+        params: { dbName }
+      })
+
+      if (response.status !== 200) throw new Error('Failed to delete database')
+
+      setConfirmation('')
+      onConfirmDelete()
+    } catch (err) {
+      console.error('Error deleting database:', err)
+      setError(err.response?.data?.message || 'Failed to delete database. Please try again.')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title='Delete database'
+      subtitle={dbName}
+      icon={WarningIcon}
+      tone='danger'
+      size='md'
+      footer={
+        <>
+          <Button variant='secondary' onClick={handleClose} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <Button
+            variant='danger'
+            onClick={handleDelete}
+            loading={isDeleting}
+            disabled={confirmation !== dbName}
+          >
+            Delete permanently
+          </Button>
+        </>
+      }
+    >
+      <Alert tone='danger' title='This cannot be undone'>
+        Deleting <strong>{dbName}</strong> removes every collection and document inside it
+        from disk.
+      </Alert>
+
+      <label htmlFor='confirm-db-name' className='mt-5 block text-sm text-ink-700'>
+        Type <span className='font-mono font-semibold text-ink-900'>{dbName}</span> to confirm:
+      </label>
+      <input
+        id='confirm-db-name'
+        value={confirmation}
+        onChange={(event) => setConfirmation(event.target.value)}
+        autoComplete='off'
+        placeholder={dbName}
+        className='mt-2 w-full rounded-lg border border-ink-300 px-3 py-2 font-mono text-sm shadow-sm transition-all focus:border-danger-500 focus:outline-none focus:ring-2 focus:ring-danger-500/25'
+      />
+
+      {error && <Alert tone='danger' className='mt-4'>{error}</Alert>}
+    </Modal>
+  )
+}
+
+export default DeleteDatabaseModal