claude code agent
0bf4e71b79
When a container is opened from a stack, the detail tab kept the stack trail (PR #7) but the attribute sub-tabs (Logs, Stats, Inspect, Console, Attach) dropped it: those tabs were registered only under the global docker.containers.container.* tree, so navigating to one left the stack state (and its inherited params) behind, and each sub-view set a hardcoded "Containers > ..." breadcrumb. - Register stack-scoped child states docker.stacks.stack.container.{attach, exec,inspect,logs,stats} mirroring the global ones, so the inherited stack params survive and the trail can be kept. - Centralize the breadcrumb logic in containerBreadcrumbs.ts (moved out of ItemView, which re-exports it) and add isStackContainerState + getContainerSubTabBreadcrumbs + buildStackContainerLinkParams. - ActionLinksRow links sub-tabs into the stack tree (with stack+container params) when opened from a stack, else the global states unchanged. - InspectView + the logs/stats/console controllers render the stack-aware trail; set up-front (no name) so it survives the load window and errors. Covers regular/external/orphaned stacks and the non-stack fallback, matching the existing ItemView breadcrumb behavior. New unit tests in containerBreadcrumbs.test.ts. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
102 lines
3.9 KiB
HTML
102 lines
3.9 KiB
HTML
<page-header title="'Container statistics'" breadcrumbs="breadcrumbs"> </page-header>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<rd-widget>
|
|
<rd-widget-header icon="info" title-text="About statistics"> </rd-widget-header>
|
|
<rd-widget-body>
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<span class="small text-muted">
|
|
This view displays real-time statistics about the container <b>{{ container.Name | trimcontainername }}</b> as well as a list of the running processes inside this
|
|
container.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="refreshRate" class="col-sm-3 col-md-2 col-lg-2 margin-sm-top control-label text-left"> Refresh rate </label>
|
|
<div class="col-sm-3 col-md-2">
|
|
<select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control" data-cy="docker-containers-stats-refresh-rate">
|
|
<option value="1">1s</option>
|
|
<option value="3">3s</option>
|
|
<option value="5">5s</option>
|
|
<option value="10">10s</option>
|
|
<option value="30">30s</option>
|
|
<option value="60">60s</option>
|
|
</select>
|
|
</div>
|
|
<span>
|
|
<pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
|
|
</span>
|
|
</div>
|
|
<div class="form-group" ng-if="state.networkStatsUnavailable">
|
|
<div class="col-sm-12">
|
|
<span class="small text-muted">
|
|
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
|
Network stats are unavailable for this container.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" ng-if="state.ioStatsUnavailable">
|
|
<div class="col-sm-12">
|
|
<span class="small text-muted">
|
|
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
|
I/O stats are unavailable for this container.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-6 col-sm-12">
|
|
<rd-widget>
|
|
<rd-widget-header icon="bar-chart" title-text="Memory usage"></rd-widget-header>
|
|
<rd-widget-body>
|
|
<div class="chart-container" style="position: relative">
|
|
<canvas id="memoryChart" width="770" height="300"></canvas>
|
|
</div>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6 col-sm-12">
|
|
<rd-widget>
|
|
<rd-widget-header icon="bar-chart" title-text="CPU usage"></rd-widget-header>
|
|
<rd-widget-body>
|
|
<div class="chart-container" style="position: relative">
|
|
<canvas id="cpuChart" width="770" height="300"></canvas>
|
|
</div>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6 col-sm-12" ng-if="!state.networkStatsUnavailable">
|
|
<rd-widget>
|
|
<rd-widget-header icon="bar-chart" title-text="Network usage (aggregate)"></rd-widget-header>
|
|
<rd-widget-body>
|
|
<div class="chart-container" style="position: relative">
|
|
<canvas id="networkChart" width="770" height="300"></canvas>
|
|
</div>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6 col-sm-12" ng-if="!state.ioStatsUnavailable">
|
|
<rd-widget>
|
|
<rd-widget-header icon="bar-chart" title-text="I/O usage (aggregate)"></rd-widget-header>
|
|
<rd-widget-body>
|
|
<div class="chart-container" style="position: relative">
|
|
<canvas id="ioChart" width="770" height="300"></canvas>
|
|
</div>
|
|
</rd-widget-body>
|
|
</rd-widget>
|
|
</div>
|
|
</div>
|
|
|
|
<docker-container-processes-datatable></docker-container-processes-datatable>
|