Merge branch 'main' into return-error-indicating-that-the-sandbox-is-…

…not-running-when-e2b-1327-test
e2b-dev · Jan 25, 2025 · 21858ad · 21858ad
2 parents 3ecbc9f + d3f0e37
commit 21858ad
Show file tree

Hide file tree

Showing 23 changed files with 769 additions and 176 deletions.
diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -4,6 +4,7 @@ import { Suspense, useEffect, useState } from 'react'
 import { useLocalStorage } from 'usehooks-ts'
 
 import {
+  ArrowUpRight,
   BarChart,
   CreditCard,
   FileText,
@@ -27,6 +28,7 @@ import { PersonalContent } from '@/components/Dashboard/Personal'
 import { TemplatesContent } from '@/components/Dashboard/Templates'
 import { SandboxesContent } from '@/components/Dashboard/Sandboxes'
 import { DeveloperContent } from '@/components/Dashboard/Developer'
+import { Button } from '@/components/Button'
 
 function redirectToCurrentURL() {
   const url = typeof window !== 'undefined' ? window.location.href : undefined
@@ -149,11 +151,25 @@ const Dashboard = ({ user }) => {
           currentTeam={currentTeam}
           setCurrentTeam={setCurrentTeam}
           setTeams={setTeams}
+          domainState={domainState}
         />
         <div className="flex-1 md:pl-10 pb-16">
-          <h2 className="text-2xl mb-2 font-bold">
-            {selectedItem[0].toUpperCase() + selectedItem.slice(1)}
-          </h2>
+          <div className="flex flex-col  w-full">
+            <h2 className="text-2xl mb-2 font-bold">
+              {selectedItem[0].toUpperCase() + selectedItem.slice(1)}
+            </h2>
+            {currentTeam.is_blocked && (
+              <Button
+                onClick={() => setSelectedItem('usage')}
+                variant="desctructive"
+                className="mb-3 dark:ring-0 w-fit dark:bg-red-900/20 whitespace-break-spaces rounded-lg h-8 items-center text-xs"
+              >
+                Usage is blocked: {currentTeam.blocked_reason}.
+                <ArrowUpRight className="w-4 h-4" />
+              </Button>
+            )}
+          </div>
+
           <div className="border border-white/5 w-full h-[1px] mb-10" />
           <MainContent
             selectedItem={selectedItem}
@@ -178,6 +194,7 @@ const Sidebar = ({
   currentTeam,
   setCurrentTeam,
   setTeams,
+  domainState,
 }) => (
   <div className="md:h-full md:w-48 space-y-2 pb-10 md:pb-0">
     <AccountSelector
@@ -186,6 +203,7 @@ const Sidebar = ({
       currentTeam={currentTeam}
       setCurrentTeam={setCurrentTeam}
       setTeams={setTeams}
+      domainState={domainState}
     />
 
     <div className="flex flex-row justify-center space-x-4 md:space-x-0 md:space-y-2 md:flex-col">

diff --git a/apps/web/src/app/(docs)/docs/sandbox/metrics/page.mdx b/apps/web/src/app/(docs)/docs/sandbox/metrics/page.mdx
@@ -0,0 +1,123 @@
+# Sandbox metrics
+
+<Note>
+This feature is in a private beta.
+</Note>
+
+The sandbox metrics allows you to get information about the sandbox's CPU and memory usage.
+
+## 1. Installation
+
+To get sandbox metrics, you need to install the beta version of the SDKs and CLI.
+
+### 1.1. Installing the beta version of the SDKs
+
+<CodeGroup isTerminalCommand>
+```bash {{ language: 'js' }}
+npm i @e2b/code-interpreter@beta
+#
+# or use Core: https://github.com/e2b-dev/e2b
+# npm i e2b@beta
+```
+
+```bash {{ language: 'python' }}
+pip install e2b-code-interpreter==1.2.0b0
+#
+# or use Core: https://github.com/e2b-dev/e2b
+# pip install e2b==1.2.0b0
+```
+</CodeGroup>
+
+### 1.2. Installing the beta version of the CLI
+
+<CodeGroup isTerminalCommand>
+```bash {{ language: 'bash' }}
+npm i -g @e2b/cli@beta
+```
+</CodeGroup>
+
+## 2. Getting sandbox metrics
+Getting the metrics of a sandbox returns an array of timestamped metrics containing CPU and memory usage information.
+The metrics are collected at the start of the sandbox, then every 2 seconds, and finally right before the sandbox is deleted.
+
+### 2.1. Getting sandbox metrics using the SDKs
+
+<CodeGroup>
+```js
+import { Sandbox } from '@e2b/code-interpreter'
+
+const sbx = await Sandbox.create()
+console.log('Sandbox created', sbx.sandboxId)
+
+const metrics = await sbx.getMetrics() // $HighlightLine
+
+// You can also get the metrics by sandbox ID:
+// const metrics = await Sandbox.getMetrics(sbx.sandboxId)
+
+console.log('Sandbox metrics:', metrics)
+
+// [
+//   {
+//     cpuCount: 2,
+//     cpuUsedPct: 50.05,
+//     memTotalMiB: 484,
+//     memUsedMiB: 37,
+//     timestamp: '2025-01-23T23:44:12.222Z'
+//   },
+//   {
+//     cpuCount: 2,
+//     cpuUsedPct: 4.5,
+//     memTotalMiB: 484,
+//     memUsedMiB: 37,
+//     timestamp: '2025-01-23T23:44:13.220Z'
+//   }
+// ]
+
+```
+```python
+from e2b_code_interpreter import Sandbox
+
+sbx = Sandbox()
+print('Sandbox created', sbx.sandbox_id)
+
+metrics = sbx.get_metrics() # $HighlightLine
+
+# You can also get the metrics by sandbox ID:
+# metrics = Sandbox.get_metrics(sbx.sandbox_id)
+
+print('Sandbox metrics', metrics) 
+
+# [
+#   SandboxMetrics(timestamp=datetime.datetime(
+#       2025, 1, 23, 23, 58, 42, 84050, tzinfo=tzutc()), 
+#       cpu_count=2, 
+#       cpu_used_pct=50.07, 
+#       mem_total_mib=484
+#       mem_used_mib=37, 
+#   ), 
+#   SandboxMetrics(timestamp=datetime.datetime(
+#       2025, 1, 23, 23, 58, 44, 84845, tzinfo=tzutc()), 
+#       cpu_count=2, 
+#       cpu_used_pct=4.75, 
+#       mem_total_mib=484
+#       mem_used_mib=38,
+#   ),
+# ]
+```
+</CodeGroup>
+
+### 2.2. Getting sandbox metrics using the CLI
+<CodeGroup isTerminalCommand>
+```bash
+e2b sandbox metrics <sandbox_id>  # $HighlightLine
+
+# Metrics for sandbox <sandbox_id>
+# 
+# [2025-01-23 00:58:58.829Z]  { cpuCount: 2, cpuUsedPct: 50.21, logger: '', memTotalMiB: 484, memUsedMiB: 38, timestamp: '2025-01-23T00:58:58.829638869Z' }
+# [2025-01-23 00:59:03.814Z]  { cpuCount: 2, cpuUsedPct: 5.16, logger: '', memTotalMiB: 484, memUsedMiB: 37, timestamp: '2025-01-23T00:59:03.814028031Z' }
+# [2025-01-23 00:59:08.815Z]  { cpuCount: 2, cpuUsedPct: 1.6, logger: '', memTotalMiB: 484, memUsedMiB: 37, timestamp: '2025-01-23T00:59:08.815933749Z' }
+```
+</CodeGroup>
+
+## Limitations while in beta
+- It may take a second or more to get the metrics after the sandbox is created. Until the logs are collected from the sandbox, you will get an empty array.
diff --git a/apps/web/src/components/Dashboard/AccountSelector.tsx b/apps/web/src/components/Dashboard/AccountSelector.tsx
@@ -19,22 +19,24 @@ import {
 } from '../ui/alert-dialog'
 import { useState } from 'react'
 import { Button } from '../Button'
-
-const createTeamUrl = `${process.env.NEXT_PUBLIC_BILLING_API_URL}/teams`
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 export const AccountSelector = ({
   teams,
   user,
   currentTeam,
   setCurrentTeam,
   setTeams,
+  domainState,
 }) => {
+  const [domain] = domainState
+
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [teamName, setTeamName] = useState('')
   const closeDialog = () => setIsDialogOpen(false)
 
   const createNewTeam = async () => {
-    const res = await fetch(createTeamUrl, {
+    const res = await fetch(getBillingUrl(domain, '/teams'), {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',