Environment page: 17 layouts, logs panel or logs tabs
Static mockups for review. Each variant page has a scenario switcher at the top with five cases: a primary env on its own cluster, an ephemeral env with a template and cost tracking, a PR env in a GitHub stacked PR with a long auto-generated name, a Bunnyshell-hosted region, and a failed deploy with a long user-typed name. Use it to check how each layout handles different envs. The scenario carries over when you move between variants.
Round 5: all tabs mocked, component URLs, logs as tabs
- Every tab works in every variant:
- Pipelines: history you can filter. The latest pipeline opens with its steps.
- Events: a timeline with type filters.
- Variables: environment and component scope, with secrets you can reveal and a search.
- Settings: General, Deployment, Availability, Access (remote dev now lives here) and Danger zone.
- Component URLs show under each component name, in the table and in the side column, for example ↗ frontend-y2byvd.bunnyenv.com. They're greyed out when the env is stopped.
- Logs and Configuration as tabs: variants 14–17. 01–13 keep the right-side panel.
Logs, pipeline logs and configuration (round 4)
Every variant now has a working right-side inspector. It's pinned under the sticky top, so the env header stays visible while you read logs. Drag its left edge to resize it, use ⤢ to maximise it, and press Esc or × to close it. All data is fake, and runtime logs stream live.
| What | Today | In the mockups |
|---|---|---|
| Component runtime logs | Click the small expand arrow on a row, pick a K8s resource, and the "K8s Logs" tab appears (ComponentsRow → KubernetesResourcesRow → ComponentDetailsHead). Selecting a component shows Pipeline Logs by default. | Click any row, or use the always-visible Logs button on each row. Runtime logs are the default tab. ↑/↓ switch component and keep the panel open. The pod and container pickers, the "Previous container" option, Filter, Live/Pause, Wrap and Download are all in the panel. |
| All components at once | Not available | A header Logs button, or "All components" in the panel's picker, opens one merged stream with each line tagged by component. |
| Build logs | The component "Pipeline Logs" tab | The Build logs tab. Clicking the red Build failed status on a row jumps straight to the compiler error. |
| Env pipeline logs | A separate route (/pipelines/:id) reached from "Last Pipeline Logs" / "View Pipeline" | The same panel: a list of steps, with the failed step open and a link from each failed component to its build log. The full Pipelines tab still holds history. |
| Configuration | The header button goes to a separate page; the component "Configuration" tab shows that component's YAML | The header button opens the env bunnyshell.yaml in the panel, with an out-of-sync banner when the template has changed. A component's Configuration tab shows its part of the file. |
| Table while the panel is open | The list is fixed at 640px and the right column always shows (a skeleton until you pick a component) | The table is full width until you open something. While the panel is open, the repo, branch and commit stack under each component name, so nothing is lost. |
A short pinned header pays off here: 12 (103px) and 11 (135px) leave far more height for logs than 05 (317–416px). The amber readout makes the difference visible. The panel stays open when you move between variants, so you can compare them side by side.
Goals (round 3)
- Minimise noise. Remote dev is gone from every header. Cluster or region shows only when the org has more than one (the switcher includes 1-, 2- and 3-cluster orgs). Both still appear in the full-details places: the 03 drawer, the 09 ⓘ panel and the 10 Overview tab.
- Use less vertical space. The breadcrumbs, header and tabs are now pinned in every variant. "Sticky top" in the switcher turns this off for comparison. The amber pinned: Npx readout shows the cost live. 00 keeps today's behaviour, where only the breadcrumbs are pinned.
- Use the empty space right of the breadcrumbs: variants 11, 12 and 13.
- Realistic data: every case has a long name and 20 components. Each component shows status, repository, branch and commit; images show the image tag. Scroll to "end of components" to check that the top stays visible.
Pinned height when scrolled (1440px wide, px)
| Variant | 1-cluster primary | PR + template + cost | Stacked PR | Hosted, stopped | Failed |
|---|---|---|---|---|---|
| 00 today (only breadcrumbs pinned) | 56 | 56 | 56 | 56 | 56 |
| 12 Condenses on scroll | 103 | 103 | 103 | 103 | 103 |
| 11 Breadcrumb row is the header | 135 | 160 | 135 | 135 | 176 |
| 09 Compact bar | 162 | 162 | 162 | 162 | 190 |
| 13 Facts beside breadcrumbs | 165 | 165 | 165 | 165 | 207 |
| 04 About sidebar (sidebar also pinned) | 201 | 183 | 183 | 183 | 256 |
| 02 One-line meta | 234 | 280 | 257 | 234 | 298 |
| 08 Connect panel | 235 | 259 | 239 | 234 | 296 |
| 06 Fact chips | 247 | 319 | 255 | 219 | 293 |
| 10 Attention + Overview | 256 | 307 | 287 | 203 | 289 |
| 01 / 03 / 07 / 05 | 295–416: too tall to pin. These suit a header that scrolls away, or need to condense on scroll like 12. | ||||
Heights include the breadcrumb bar (56px) and tabs (about 45px).
The problem
- Height. Three bands (title, labels row, facts strip) use about 290px before the tabs. On a laptop screen that is a third of the view.
- Everything looks equally important. Public ID, Namespace, URL handle and Created look as important as where the env runs and whether it is healthy.
- Some fields carry no information. MTD Cost: Not enabled is a missing setup step. No labels is an empty state. Remote dev: Off is the default.
- The field set changes with context (
headSummary.tsxshow*rules). Ephemeral and templated envs show up to 10 fields and wrap. Hosted-region envs swap Cluster for Region and drop Cost. Workspaces swap in Image OS and size. - The ↗ links are unclear. Some open another env, some open a settings page, some open the clusters list.
Long names and PR stacks (applied to every variant)
PR envs get auto-generated names like online-boutique / demo/summer-sale:main / PR-7 / stack #10 1/3. Today the full string is the title and wraps at about 60 characters. The stack part is an underlined link that opens a dialog (ND-7700, GithubStackEnvironmentName). Every variant except 00 now uses one shared title treatment:
- Structured names (split on
/): the last segment (PR-7) is bold and always visible. Theparent / repo:branch /prefix is muted and truncates first. The full name is in the tooltip. - The stack suffix comes out of the title and becomes a Stack #10 · 1/3 chip, parsed with the same regex the current code uses. The chip opens a sibling list with each env's status, so there's no dialog round-trip. In 04 the siblings are listed right in the About column.
- The PR becomes a fact ("PR #7 ↗ on demo/summer-sale:main") wherever a variant shows its facts. The name no longer has to carry it.
- Plain long names clamp to 2 lines with a tooltip (09 uses 1 line and puts the full name in the ⓘ panel). The breadcrumb truncates at about 340px.
Open question: should the stack suffix come from the name at all? githubStack is on the entity already. If users rename the env, the regex finds nothing and only the field-based chip would still work.
What each field is for
| Field | Shown today when | Who needs it / how often | Proposal |
|---|---|---|---|
| Status + last pipeline | always | everyone, every visit | Keep, most prominent |
| Kubernetes cluster / Region | own cluster / hosted region | everyone, often | Keep |
| Last update | always | often | Keep, with Created in the tooltip |
| Source (ephemeral of) | ephemeral env | often, for PR envs | Only for ephemeral envs |
| Template | created from a template | sometimes; important when out of sync | Show it, highlight when out of sync |
| MTD Cost | own cluster (even when not enabled) | admins, finance | Only when tracking is on; otherwise an admin CTA |
| Remote Development | not a workspace | developers | Only when On |
| Labels | always (incl. "No labels" row) | filtering, organising | Inline; empty state is just "+ Label" |
| Public ID | always | CLI/API users, support | Copy action (⋯ menu, IDs popover, or Connect) |
| Namespace | always | kubectl users, support | Copy action or Connect panel |
| URL handle | not a workspace | rarely; it is a setting | URLs button and Settings |
| Created | always | rarely | Tooltip or details |
Variants
Today's header rebuilt with the real visibility rules, for comparison.
01Contextual stripSame layout. It hides fields that say nothing, puts labels inline and moves the IDs to the right.
02One-line metaGitHub-style: the facts become one muted sentence under the name, and the strip is removed. IDs move to the ⋯ menu.
03Key facts + details drawer3–4 key facts in a row. "All details" opens a grouped drawer (Lifecycle / Runtime / Access), and the open state is remembered.
04About sidebarA slim identity header. The facts move to a right-hand "About" column, so they cost no height.
05Grouped cardsCards for Status, Runtime, Origin and Cost, each with one large value. Cards without content don't appear.
06Fact chipsIcon chips coloured by meaning (amber for out of sync, green for remote dev on). All IDs sit in one "IDs" popover.
07Status-first heroA coloured banner says in one sentence whether the env is OK, with the action that fits the state. Metadata becomes a small muted line.
08Connect panelThe IDs show up where they're used: copyable bns, kubectl and remote dev commands behind a "Connect" button.
09Compact sticky barA single 56px row that stays pinned with the tabs. Full details sit behind an ⓘ popover.
10Attention + Overview tabThe header shows only exceptions (failed, out of sync, remote dev on, cost off). Everything else moves to a new default Overview tab.
11 · newBreadcrumb row is the headerThe env name is already the last crumb, so status, stack and actions move into the empty space to its right. One facts line, then tabs. No title block.
12 · newCondenses on scrollA roomy header at the top. Once you scroll, the name, status and actions fold into the breadcrumb row. Only about 103px stays pinned.
13 · newFacts beside breadcrumbsKey facts sit as grey chips in the empty breadcrumb space. Below is a single row with the name and actions. Chips drop off by priority when space runs out.
14 · logs as tabsLogs/Config tabs, column staysLogs and Configuration are tabs next to Pipelines. Switching keeps the component column exactly where it is; status, repo, branch and commit become the log viewer or the YAML.
15 · logs as tabsView switch in ComponentsNo new tabs. The Components tab gets a Details / Logs / Configuration switch; the column stays and the rest of the table changes.
16 · logs as tabsLog tiles + config editorThe Logs tab shows up to 4 live tiles side by side. The Configuration tab is a file tree plus an editor with Validate and Diff vs template.
17 · logs as tabsMerged stream + filtersThe Logs tab is one colour-tagged stream with component and level filters. The Configuration tab is the full YAML with an outline that jumps to and highlights each block.
Can be combined
- 02 + 08: a one-line meta, with IDs available as commands. A small change with a large payoff.
- 06 + 10: chips in the header with attention signals, and the full list on an Overview tab.
- The rule set in 01 (hide "Not enabled", "Off" and "No labels") works with any variant and could ship on its own first.
Heights are rough estimates at 1440px. Data is mock data. Field visibility follows neo-frontend/src/modules/environments/sharedComponents/details/headSummary.tsx. Workspaces (Image OS, size) are not mocked.