diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsage.tsx b/apps/studio/components/interfaces/HomeNew/ProjectUsage.tsx
index 921bb85e703..dc54a2294c9 100644
--- a/apps/studio/components/interfaces/HomeNew/ProjectUsage.tsx
+++ b/apps/studio/components/interfaces/HomeNew/ProjectUsage.tsx
@@ -90,6 +90,16 @@ const ProjectUsage = () => {
}
}, [selectedInterval]) // Only recalculate when interval changes
+ // Compute the previous period range for deltas
+ const { previousStart, previousEnd } = useMemo(() => {
+ const currentStart = dayjs(timestampStart)
+ const currentEnd = dayjs(timestampEnd)
+ const durationMs = currentEnd.diff(currentStart)
+ const prevEnd = currentStart
+ const prevStart = currentStart.subtract(durationMs, 'millisecond')
+ return { previousStart: prevStart.toISOString(), previousEnd: prevEnd.toISOString() }
+ }, [timestampStart, timestampEnd])
+
// Fetch per-service event chart data
const dbStats = useProjectUsageStats({
projectRef: projectRef as string,
@@ -126,6 +136,42 @@ const ProjectUsage = () => {
timestampEnd,
})
+ // Fetch previous period data for deltas
+ const dbStatsPrev = useProjectUsageStats({
+ projectRef: projectRef as string,
+ table: LogsTableName.EDGE,
+ timestampStart: previousStart,
+ timestampEnd: previousEnd,
+ })
+
+ const fnEdgeStatsPrev = useProjectUsageStats({
+ projectRef: projectRef as string,
+ table: LogsTableName.FN_EDGE,
+ timestampStart: previousStart,
+ timestampEnd: previousEnd,
+ })
+
+ const authStatsPrev = useProjectUsageStats({
+ projectRef: projectRef as string,
+ table: LogsTableName.AUTH,
+ timestampStart: previousStart,
+ timestampEnd: previousEnd,
+ })
+
+ const storageStatsPrev = useProjectUsageStats({
+ projectRef: projectRef as string,
+ table: LogsTableName.EDGE,
+ timestampStart: previousStart,
+ timestampEnd: previousEnd,
+ })
+
+ const realtimeStatsPrev = useProjectUsageStats({
+ projectRef: projectRef as string,
+ table: LogsTableName.REALTIME,
+ timestampStart: previousStart,
+ timestampEnd: previousEnd,
+ })
+
// Transform eventChartData into LogsBarChart format
type LogsBarChartDatum = {
timestamp: string
@@ -243,8 +289,39 @@ const ProjectUsage = () => {
const totalErrors = enabledServices.reduce((sum, s) => sum + (s.err || 0), 0)
const errorRate = totalRequests > 0 ? (totalErrors / totalRequests) * 100 : 0
- const totalRequestsChangePct = 0
- const errorRateChangePct = 0
+ // Compute previous totals for enabled services
+ const prevServiceTotals = [
+ { enabled: true, stats: dbStatsPrev },
+ { enabled: true, stats: fnEdgeStatsPrev },
+ { enabled: authEnabled, stats: authStatsPrev },
+ { enabled: storageEnabled, stats: storageStatsPrev },
+ { enabled: true, stats: realtimeStatsPrev },
+ ].map((entry) => {
+ const data = toLogsBarChartData(entry.stats.eventChartData)
+ return {
+ enabled: entry.enabled,
+ total: sumTotal(data || []),
+ err: sumErrors(data || []),
+ }
+ })
+
+ const enabledPrev = prevServiceTotals.filter((s) => s.enabled)
+ const prevTotalRequests = enabledPrev.reduce((sum, s) => sum + (s.total || 0), 0)
+ const prevTotalErrors = enabledPrev.reduce((sum, s) => sum + (s.err || 0), 0)
+ const prevErrorRate = prevTotalRequests > 0 ? (prevTotalErrors / prevTotalRequests) * 100 : 0
+
+ const totalRequestsChangePct =
+ prevTotalRequests === 0
+ ? totalRequests > 0
+ ? 100
+ : 0
+ : ((totalRequests - prevTotalRequests) / prevTotalRequests) * 100
+ const errorRateChangePct =
+ prevErrorRate === 0
+ ? errorRate > 0
+ ? 100
+ : 0
+ : ((errorRate - prevErrorRate) / prevErrorRate) * 100
const formatDelta = (v: number) => `${v >= 0 ? '+' : ''}${v.toFixed(1)}%`
const totalDeltaClass = totalRequestsChangePct >= 0 ? 'text-brand' : 'text-destructive'
const errorDeltaClass = errorRateChangePct <= 0 ? 'text-brand' : 'text-destructive'
@@ -325,14 +402,34 @@ const ProjectUsage = () => {
{enabledServices.map((s) => (
-
+
+
+
+
+ {s.href ?
+
+
{(s.total || 0).toLocaleString()}
+
+
+
+
+
{(s.warn || 0).toLocaleString()}
+
+
+
+
{(s.err || 0).toLocaleString()}
+
+
{
)
}
export default ProjectUsage
-
-const PanelHeader = ({
- icon,
- title,
- href,
- total,
- warn,
- err,
-}: {
- icon?: React.ReactNode
- title: string
- href?: string
- total?: number
- warn?: number
- err?: number
-}) => (
-
-
-
-
-
- {href ?
-
-
{(total || 0).toLocaleString()}
-
-
-
-
-
{(warn || 0).toLocaleString()}
-
-
-
-
{(err || 0).toLocaleString()}
-
-
-)
diff --git a/apps/studio/components/interfaces/HomeNew/TopSection.tsx b/apps/studio/components/interfaces/HomeNew/TopSection.tsx
index cf1068d244e..9ebc7fdcb84 100644
--- a/apps/studio/components/interfaces/HomeNew/TopSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/TopSection.tsx
@@ -9,6 +9,7 @@ import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
import { InlineLink } from 'components/ui/InlineLink'
import { ProjectUpgradeFailedBanner } from 'components/ui/ProjectUpgradeFailedBanner'
import { cn, Badge, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import InstanceConfiguration from '../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration'
interface TopSectionProps {
projectName: string
@@ -30,78 +31,66 @@ const TopSection = ({
organization,
isPaused,
}: TopSectionProps) => {
- const [graphLoaded, setGraphLoaded] = useState(false)
-
return (
-
-
-
-
-
-
- {!isMainBranch && (
-
{projectName}
-
-
- {isOrioleDb && (
-
-
- OrioleDB
-
-
- This project is using Postgres with OrioleDB which is currently in preview and
- not suitable for production workloads. View our{' '}
-
- documentation
- {' '}
- for all limitations.
-
-
- )}
-
+
+
+
+
+
+ {!isMainBranch && (
+
{projectName}
-
-
+
+ {isOrioleDb && (
+
+
+ OrioleDB
+
+
+ This project is using Postgres with OrioleDB which is currently in preview and
+ not suitable for production workloads. View our{' '}
+
+ documentation
+ {' '}
+ for all limitations.
+
+
+ )}
+
-
-
-
- setGraphLoaded(true)} />
-
-
-
-
-
+
+
+
-
- {isPaused &&
}
+
+ {isPaused &&
}
)
}
diff --git a/apps/studio/components/interfaces/Linter/LintDetail.tsx b/apps/studio/components/interfaces/Linter/LintDetail.tsx
new file mode 100644
index 00000000000..777baf24850
--- /dev/null
+++ b/apps/studio/components/interfaces/Linter/LintDetail.tsx
@@ -0,0 +1,84 @@
+import Link from 'next/link'
+import ReactMarkdown from 'react-markdown'
+
+import { lintInfoMap } from 'components/interfaces/Linter/Linter.utils'
+import { EntityTypeIcon, LintCTA, LintCategoryBadge, LintEntity } from './Linter.utils'
+import { Lint } from 'data/lint/lint-query'
+import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
+import { AiIconAnimation, Button } from 'ui'
+import { ExternalLink } from 'lucide-react'
+
+interface LintDetailProps {
+ lint: Lint
+ projectRef: string
+}
+
+const LintDetail = ({ lint, projectRef }: LintDetailProps) => {
+ const snap = useAiAssistantStateSnapshot()
+
+ return (
+
+
Entity
+
+
+
+
Issue
+
+ {lint.detail.replace(/\`/g, '`')}
+
+
Description
+
+ {lint.description.replace(/\`/g, '`')}
+
+
+
Resolve
+
+
+
+ Learn more
+
+
+
+
+ )
+}
+
+export default LintDetail
diff --git a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
index a8c8873ecb3..00e7d43d5ce 100644
--- a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
@@ -1,17 +1,19 @@
-import { ExternalLink, X } from 'lucide-react'
-import Link from 'next/link'
+import { X } from 'lucide-react'
import { useRef, useState } from 'react'
import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
import ReactMarkdown from 'react-markdown'
import { useParams } from 'common'
import { LINTER_LEVELS } from 'components/interfaces/Linter/Linter.constants'
-import { LintEntity, NoIssuesFound, lintInfoMap } from 'components/interfaces/Linter/Linter.utils'
+import {
+ LintCategoryBadge,
+ LintEntity,
+ NoIssuesFound,
+ lintInfoMap,
+} from 'components/interfaces/Linter/Linter.utils'
import { Lint } from 'data/lint/lint-query'
import { useRouter } from 'next/router'
-import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
import {
- AiIconAnimation,
Button,
ResizableHandle,
ResizablePanel,
@@ -23,7 +25,8 @@ import {
cn,
} from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import { EntityTypeIcon, LintCTA, LintCategoryBadge } from './Linter.utils'
+import { EntityTypeIcon } from './Linter.utils'
+import LintDetail from './LintDetail'
interface LinterDataGridProps {
isLoading: boolean
@@ -43,7 +46,6 @@ const LinterDataGrid = ({
const gridRef = useRef
(null)
const { ref } = useParams()
const router = useRouter()
- const snap = useAiAssistantStateSnapshot()
const [view, setView] = useState<'details' | 'suggestion'>('details')
@@ -181,109 +183,18 @@ const LinterDataGrid = ({
<>
- {
- setView(value)
- }}
- >
-
-
- Overview
-
-
-
- {selectedLint && (
-
-
-
- {lintInfoMap.find((item) => item.name === selectedLint.name)?.title}
-
-
-
-
-
-
-
Issue
-
- {selectedLint.detail.replace(/\\`/g, '`')}
-
-
-
-
Description
-
- {selectedLint.description.replace(/\\`/g, '`')}
-
-
-
-
-
Resolve
-
-
-
- Learn more
-
-
-
-
-
-
-
+
+
+
+ {lintInfoMap.find((item) => item.name === selectedLint.name)?.title}
+
+
+
} onClick={handleSidepanelClose} />
+
+
)}
diff --git a/apps/studio/pages/project/[ref]/home.tsx b/apps/studio/pages/project/[ref]/home.tsx
index 8d5f9430b88..55f6797e22b 100644
--- a/apps/studio/pages/project/[ref]/home.tsx
+++ b/apps/studio/pages/project/[ref]/home.tsx
@@ -1,5 +1,5 @@
import dayjs from 'dayjs'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
import { useParams } from 'common'
import { useBranchesQuery } from 'data/branches/branches-query'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
@@ -12,14 +12,7 @@ import { useLocalStorage } from 'hooks/misc/useLocalStorage'
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
import { useAppStateSnapshot } from 'state/app-state'
import type { NextPageWithLayout } from 'types'
-import {
- DndContext,
- DragEndEvent,
- DragStartEvent,
- PointerSensor,
- useSensor,
- useSensors,
-} from '@dnd-kit/core'
+import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable'
import DefaultLayout from 'components/layouts/DefaultLayout'
@@ -30,6 +23,7 @@ import AdvisorSection from 'components/interfaces/HomeNew/AdvisorSection'
import CustomReportSection from 'components/interfaces/HomeNew/CustomReportSection'
import SortableSection from 'components/interfaces/HomeNew/SortableSection'
import { ProjectUsageSection } from 'components/interfaces/HomeNew/ProjectUsageSection'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
const Home: NextPageWithLayout = () => {
const { data: project } = useSelectedProjectQuery()
@@ -70,12 +64,11 @@ const Home: NextPageWithLayout = () => {
['getting-started', 'usage', 'advisor', 'custom-report']
)
- const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }))
- const [activeId, setActiveId] = useState(null)
+ const [gettingStartedState, setGettingStartedState] = useLocalStorage<
+ 'empty' | 'code' | 'no-code' | 'hidden'
+ >(`home-getting-started-${project?.ref || 'default'}`, 'empty')
- const handleDragStart = (event: DragStartEvent) => {
- setActiveId(String(event.active.id))
- }
+ const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }))
const handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event
@@ -86,32 +79,43 @@ const Home: NextPageWithLayout = () => {
if (oldIndex === -1 || newIndex === -1) return items
return arrayMove(items, oldIndex, newIndex)
})
- setActiveId(null)
}
return (
-
+
+
+
+
{!isPaused && (
-
-
-
-
+
+
+
+ id !== 'getting-started' || gettingStartedState !== 'hidden'
+ )}
+ strategy={verticalListSortingStrategy}
+ >
{sectionOrder.map((id) => {
if (id === 'getting-started') {
- return (
+ return gettingStartedState === 'hidden' ? null : (
-
)
}
@@ -140,8 +144,8 @@ const Home: NextPageWithLayout = () => {
})}
-
-
+
+
)}