Canvas do ambiente

O canvas ocupa a área de trabalho do ambiente: cada recurso tem um ícone em um bloco quadrado, nome, versão da engine e estado, ligado aos outros por conexões. Clique num componente para abrir seu painel de detalhes. Este guia explica o editor de Coda Cloud.

Navegar e adicionar componentes

• O botão +, no canto superior direito, abre o seletor lateral de componentes, com busca e categorias. As teclas A e N também abrem o seletor.
• Botão direito ou duplo clique numa área vazia abrem o menu no ponto escolhido. O recurso novo entra no rascunho nessa posição.
• Arraste o fundo ou use Espaço + arraste para navegar. A rolagem desloca o canvas; Ctrl/⌘ + rolagem altera o zoom.
• Os controles no canto inferior esquerdo permitem enquadrar, aproximar, afastar, voltar a 100%, organizar e mostrar o mini-mapa. Com foco no canvas, use +/-, 0 e 1, respectivamente, para zoom, 100% e enquadramento.
• Organizar distribui os recursos e salva suas posições. Arrastar um componente também salva a posição, sem criar alteração no rascunho.
• O menu Mais ações do ambiente, na barra superior, reúne Histórico, Templates, Descartar rascunho, exportação, importação e criação de aplicação, conforme suas permissões.
• A vista Lista continua disponível e é a vista inicial em telas menores que 768 px.

Módulos e estados

O estado aparece como um indicador e como texto curto abaixo do ícone. A seleção destaca o contorno do bloco. A cor nunca é o único sinal.

Estado	Luz	Quando
Saudável	verde e fixa	o recurso está pronto e sem sinal de degradação
Em implantação	gira, azul	o recurso está sendo criado, atualizado ou removido
Com falha	vermelha e fixa	o recurso falhou ou está bloqueado por uma dependência
Degradado	âmbar e fixa	está pronto, mas mais de 5% das requisições da borda responderam com erro ou ele reiniciou
Rascunho	apagada, contorno tracejado	existe só no rascunho e ainda não foi aplicado

O ícone vem da biblioteca de ícones de serviço da plataforma. Se o ícone não carregar, o cartão mostra a sigla do tipo de recurso.

Quem usa leitor de tela encontra cada módulo com o nome acessível "tipo e nome, estado, versão" (por exemplo, "PostgreSQL db, Pronto, versão 17"). Mudanças de estado são anunciadas numa região educada, no máximo uma vez a cada 10 segundos por módulo. O canvas inteiro se opera pelo teclado: Tab percorre os módulos, Enter abre o painel e as setas movem o módulo selecionado.

Entrada da Internet

Quando há ao menos uma aplicação pública, aparece à esquerda um nó Internet (a antena). Ele mostra até três domínios ativos (próprios e o subdomínio da plataforma), o modo do WAF (bloqueio, detecção ou desligado) e o tráfego total de entrada. Clicar num domínio leva à página de domínios do projeto.

A antena é só leitura: não é um recurso do ambiente, não entra no rascunho, no diff nem no apply e não pode ser conectada nem arrastada.

Tráfego nas conexões

Só as conexões da Internet até uma aplicação pública têm medição, vinda da borda da plataforma numa janela de 5 minutos. Elas mostram partículas no sentido do fluxo:

Requisições por segundo	Partículas
0	nenhuma
até 1	1
até 10	2
até 100	3
acima de 100	4

A cor segue a taxa de erro: até 1% verde, até 5% âmbar, acima disso vermelho.

As conexões entre recursos do mesmo ambiente não têm medição de tráfego interno nesta versão. Elas ficam estáticas, em tom neutro, com a legenda "sem medição de tráfego interno" no tooltip. Mostrar partículas ali seria inventar tráfego.

O canvas se atualiza a cada 30 segundos enquanto a aba está visível, sem refazer o layout nem perder seleção, zoom ou posição. Se a consulta falhar, o último estado fica na tela com o aviso Telemetria desatualizada. Sem telemetria disponível, os módulos mostram só o estado derivado do grafo e a antena indica "sem medição".

Movimento reduzido

Com a preferência do sistema "reduzir movimento", o canvas desliga partículas, giro e transições de navegação. O tráfego vira espessura da linha e rótulo ("150 req/s") e o estado continua em luz fixa e texto.

Ambientes grandes

A animação fica ligada em ambientes com até 60 recursos e 120 conexões. Acima disso, o canvas abre estático com um aviso e o botão Animar; a escolha é lembrada por ambiente neste navegador. A animação também pausa com a aba oculta.

O mini-mapa é opcional: abra-o pelo controle no canto inferior esquerdo. Ele mostra os recursos coloridos pelo estado e permite navegar e alterar o zoom. O fundo do editor é uma grade pontilhada estática.

Primeiro componente e templates

Um ambiente sem recursos mostra Adicione o primeiro componente. Clique no + central para abrir o seletor, ou em Ver todos os templates para escolher uma composição pronta, como:

• Web + banco: uma aplicação pública ligada a um PostgreSQL gerenciado;
• API + worker + fila: uma API pública e um worker ligados a uma fila RabbitMQ;
• Site estático: um site público sem banco nem fila.

Os templates montam um rascunho com os parâmetros escolhidos. Nada vai ao ar até você revisar o diff e aplicar; a revisão gerada tem a origem TEMPLATE. Quem tem papel Viewer pode navegar e consultar os recursos, mas não criar, conectar ou organizar componentes.