Herramientas de Studio

Resumen

Studio es la mitad de desarrollo del panel de administración. La misma aplicación que tu equipo de contenido usa para editar filas lleva también un editor de esquemas, una consola SQL, un bloc de notas de JavaScript, un navegador de políticas RLS y un navegador de almacenamiento — y Studio es el modo que los desbloquea. Nada que instalar y nada que desplegar: ya está en el panel, detrás del interruptor del cajón lateral.

Existe porque la alternativa es un segundo juego de credenciales. Editar una colección, comprobar qué permite realmente una política o ejecutar una sola consulta contra producción significa, si no, un cliente de base de datos, una copia de la cadena de conexión y un registro de auditoría que acaba en «alguien con psql». Studio hace todo eso como el administrador que ha iniciado sesión, a través de la misma autorización que usa la API.

Los dos modos

El panel tiene dos modos — "cms" | "studio":

• CMS ("cms") — Para editores de contenido y equipos de operaciones. Muestra colecciones y gestión de datos. Es el valor por defecto.
• Studio ("studio") — Para desarrolladores. Desbloquea las herramientas de abajo.

Alterna entre ellos con el controlador de modo de administración o con el interruptor del cajón. El modo elegido se guarda en localStorage bajo rebase-admin-mode; un navegador que usó el panel antes de 0.17.0 conserva el valor antiguo "content" y se migra a "cms" al leerlo.

Herramientas de Studio integradas

Collection Editor

Un editor visual de esquemas que te permite crear y modificar colecciones a través de una interfaz de usuario de arrastrar y soltar. Cuando guardas los cambios, utiliza ts-morph para escribir en tus archivos fuente de TypeScript las claves que cambiaste — y solo esas —, dejando el resto de cada archivo como estaba: imports, comentarios, formato, handlers, propiedades compartidas. Un cambio a algo que el archivo define en código, como una propiedad importada de otro módulo, se rechaza indicando dónde hacerlo. Es la captura de pantalla del principio de esta página.

El editor está activo dondequiera que se monte Studio — el <RebaseStudio/> de un scaffold basta, y no hay ninguna prop que añadir. collectionEditor lo ajusta, no lo activa:

import { RebaseCMS } from "@rebasepro/cms";
import { RebaseStudio } from "@rebasepro/studio";

// Studio está montado, así que el editor de colecciones está disponible.
// No hace falta nada más.
<Rebase>
    <RebaseCMS collections={collections}/>
    <RebaseStudio/>
</Rebase>

// `collectionEditor` sirve para ajustarlo — un editor de solo lectura,
// otro token — no para activarlo.
<RebaseCMS
    collections={collections}
    collectionEditor={{
        getAuthToken: authController.getAuthToken
    }}
/>

Que un guardado llegue a aplicarse lo decide el servidor, no el panel: el editor reescribe los archivos fuente de las colecciones, así que está desactivado bajo NODE_ENV=production, en modo baas y en un servidor sin collectionsDir. El panel consulta GET /api/admin/schema-editor/status y muestra el motivo que recibe junto al botón deshabilitado.

Herramientas integradas

Se incluyen con Studio y RebaseStudio las carga de forma diferida — cada una es un chunk aparte, que se descarga la primera vez que la abres. No se pueden importar por separado: @rebasepro/studio exporta deliberadamente solo el orquestador, de modo que una consola que nunca abres no cuesta nada.

Pestaña	Slug	Grupo	Qué hace
Consola SQL	sql	Base de datos	Ejecuta SQL directo contra tu base de datos PostgreSQL y lee los resultados en una tabla. La tabla muestra el resultado de la última sentencia, hasta sus primeras 10.000 filas o 32 MB de valores; un resultado más largo indica cuántas filas había, y copiar y exportar incluyen solo las filas mostradas. Desde 0.25 Un resultado así ofrece además Download full result as CSV: el servidor transmite todo el resultado mediante un cursor de solo lectura (POST /api/admin/sql/csv), una consulta a la vez, en un servidor Postgres propio y no en la base de datos de desarrollo en proceso. Los valores son el texto de la base de datos, tal como los muestra psql, y Export JSON los escribe así; Export typed JSON escribe cada valor leído según el tipo de su columna — enteros y numéricos que un número JSON contiene exactamente, booleanos, json/jsonb como JSON — y deja cualquier otro valor como texto. Mientras una ejecución está en curso, Cancel run devuelve la consola al instante; un servidor que acepta el fotograma CANCEL_SQL del socket (lista cancel_sql en el hello con que responde al socket) también detiene la sentencia con pg_cancel_backend. La base de datos de desarrollo en proceso no se puede interrumpir, y a un servidor más antiguo se le deja terminar la sentencia dentro de su statement_timeout
Políticas RLS	rls	Base de datos	Inspecciona y gestiona las políticas de Row Level Security de tus tablas. Una política se lista tal como la tiene la base de datos, con la insignia Differs from code donde eso no es lo que declara el proyecto. Una política que genera Rebase no se puede editar directamente en la base de datos, y en una tabla que gestiona Rebase un banner indica que cada arranque del servidor y cada rebase db push vuelven a aplicar las políticas declaradas
Visualizador de esquema	schema-visualizer	Base de datos	Diagrama de entidades de tus colecciones y sus relaciones, trazado a partir de las definiciones de las colecciones: tablas, columnas, tipos y relaciones son tal como los declaran las colecciones. Solo los marcadores de RLS se leen de la base de datos. La disposición se calcula en un web worker, de modo que la página sigue respondiendo mientras se organiza un diagrama grande. Un esquema de más de 300 tablas se dibuja una vecindad de tabla a la vez — las tablas a una o dos relaciones de distancia — empezando por la tabla más conectada; elige otra tabla de la lista para moverte
Ramas	branches	Base de datos	Crea y gestiona ramas de base de datos
Copias de seguridad	backups	Base de datos	Explora y descarga las copias de seguridad de la base de datos
Explorador de logs	logs	Base de datos	Registro de peticiones en vivo, más todo lo que el servidor reporta en warn o error — ver abajo
Consola JS	js	Compute	Escribe y ejecuta JavaScript a través del SDK de Rebase
Tareas cron	cron	Compute	Inspecciona y gestiona tareas programadas
Almacenamiento	storage	Storage	Explora, sube y gestiona archivos en tus backends de almacenamiento
Explorador de API	api	API	Documentación interactiva de la API, con un ejecutor de peticiones
Claves de API	api-keys	Control de acceso	Crea y gestiona claves de API de servicio con ámbitos

Qué muestra el explorador de logs

Dos flujos en un único anillo en memoria, sostenido por el proceso del servidor:

• Cada petición — método, ruta, estado, duración, el X-Request-ID, la colección cuando la petición trataba de una, y, cuando la petición falló, el code de error y el mensaje que recibió el cliente. Una petición fallida se registra en warn (4xx) o error (5xx), de modo que el filtro de nivel la encuentra. Su source sale de la ruta: /api/auth/* y /api/oauth/* son auth, /api/storage/* es storage, y todo lo demás es api, de modo que el filtro de origen encuentra los inicios de sesión en Auth y las subidas en Storage.
• Todo lo que el servidor reporta en warn o error — un aviso de esquema, un rechazo de autenticación, un diagnóstico del driver, un fallo de arranque. source sale del propio prefijo del mensaje ([API], [Auth], [storage], [realtime]), y todo lo no reconocido es system.

La cháchara rutinaria de info queda fuera deliberadamente. El anillo guarda 10.000 entradas y un muro de 200 expulsa justo aquello para lo que abriste el panel.

Una función personalizada que lanza una excepción muestra por eso su propio mensaje aquí, junto a la petición que la llamó — el caso para el que esto existe.

El anillo es por proceso y por arranque: no es duradero, no se comparte entre réplicas y un reinicio lo vacía. Para cualquier cosa que necesites conservar, lee la salida estándar del proceso, que lleva las mismas líneas y más.

El explorador lo indica. Muestra el log de la única instancia del servidor que lo sirve y nombra esa instancia: el evento snapshot de GET /api/admin/logs/stream lleva instance, el HOSTNAME del proceso (el nombre del pod en Kubernetes, el id del contenedor en Docker) o, si no, pid-<n>. No hay ninguna vista que abarque las réplicas, ni los procesos functions y worker de un despliegue dividido. Una reconexión que cae en otra instancia reemplaza la ventana en lugar de mezclar los dos logs.

El Collection Editor también es una herramienta de Studio, pero no está en esta lista porque se registra de otra manera: RebaseStudio no lo carga de forma diferida. El panel lo monta dondequiera que Studio esté registrado, porque a diferencia de las herramientas de arriba necesita el código fuente de las colecciones del proyecto a mano para reescribirlo. Es una diferencia en cómo se monta, no en lo que es — edita esquema y le corresponde estar junto a los editores de SQL y RLS.

Activar Studio

Un componente, en cualquier lugar dentro de <Rebase>. No renderiza nada — registra las herramientas, y <RebaseShell> las dibuja:

import { RebaseStudio } from "@rebasepro/studio";

export function App() {
    return (
        <Rebase client={client} authController={authController}>
            <RebaseCMS collections={collections}/>
            <RebaseStudio/>
            <RebaseShell title="My App"/>
        </Rebase>
    );
}

Las herramientas aparecen en el cajón mientras el modo Studio está activo. Deja <RebaseStudio> fuera por completo y entregarás un CMS solo de contenido: sin modo Studio, sin interruptor, sin nada cargado de forma diferida.

Añadir tu propia herramienta

devViews coloca tus propias vistas junto a las integradas. Son AppViews corrientes — lo único que convierte a una en herramienta de Studio y no en vista del CMS es el componente en el que se registra:

import type { AppView } from "@rebasepro/cms-types";

const queues: AppView = {
    slug: "queues",
    name: "Queues",
    group: "Compute",
    icon: "ListOrdered",
    description: "Depth and failures, per queue",
    view: <QueuesView/>
};

<RebaseStudio devViews={[queues]}/>

Registrada en	Aparece en	Para
<RebaseCMS views>	modo contenido	cosas que usan las personas que editan contenido
<RebaseStudio devViews>	modo Studio	cosas que usas tú para operar el backend

Una vista va exactamente en uno de los dos — el cajón ordena según quién la registró, así que listar un slug en ambos la oculta del modo contenido.

Igual que tools, la lista se lee por su contenido: escribirla en línea es seguro, y un re-render del host no vuelve a montar la herramienta que esté en pantalla. Renombrar una vista o cambiar su grupo sí la registra de nuevo.

Elegir qué herramientas aparecen

Omite tools y se registran todas las herramientas de arriba. Pásalo para registrar un subconjunto — una consola alojada que ya tiene su propio navegador de almacenamiento, por ejemplo, puede dejar esa fuera:

<RebaseStudio tools={["sql", "rls", "schema-visualizer", "api"]} />

La lista se lee por su contenido, no por su identidad, así que escribirla en línea es seguro: un re-render del host no desmonta ni vuelve a montar la herramienta que esté en pantalla.

Próximos Pasos

• Plugins — Extiende el framework con plugins
• Colecciones — Configuración de colecciones