菜单

用户界面

相关源文件

Dive 提供了一个基于终端的用户界面(TUI),允许用户交互式地探索 Docker/OCI 容器镜像。本文档涵盖了主要的 UI 组件、它们的功能、导航方法和配置选项。关于图层视图的详细信息,请参阅 图层视图,关于文件树视图的详细信息,请参阅 文件树视图

UI 概览

Dive 的界面设计旨在以直观的基于终端的格式呈现复杂的容器镜像图层数据。UI 分为几个关键组件,允许用户分析镜像结构、查看图层之间的文件更改,并识别优化机会。

来源: README.md

UI 架构

Dive 的 UI 使用 gocui 库构建,用于终端用户界面,并遵循视图-控制器模式。UI 组件被管理为独立的视图,这些视图可以获得焦点并通过注册的键绑定处理用户输入事件。

UI 实现主要位于 runtime/ui 目录,其中包含视图实现、控制器和键绑定定义。

来源:go.mod

主要用户界面组件

层视图

图层视图显示容器镜像中的所有图层,指示大小、用于创建图层的命令和时间戳。这是理解镜像图层结构的主要视图。

  • 显示每个图层的 ID、大小和创建命令
  • 允许选择图层以查看其内容
  • 提供在聚合视图(到此图层的全部更改)和图层特定更改之间切换
  • 图层按创建顺序(从下到上)呈现

有关更详细的信息,请参阅 图层视图

来源: README.md

文件树视图

文件树视图显示所选图层的文件系统,允许用户导航目录结构。文件根据在所选图层中是添加、删除还是修改进行颜色编码。

  • 显示分层目录结构
  • 根据更改状态(添加、删除、修改、未更改)对文件进行颜色编码
  • 显示文件元数据(大小、权限)
  • 支持折叠/展开目录
  • 可以按文件状态过滤(显示/隐藏添加、删除、修改或未更改的文件)

有关更详细的信息,请参阅 文件树视图

来源: README.md

效率统计视图

效率统计视图位于 UI 的左下角,提供有关镜像效率的指标

  • 总体效率得分(百分比)
  • 总浪费空间(以字节为单位,人类可读格式)
  • 浪费空间占用户空间的百分比(非基础图层)
  • 有关当前选定图层的基本信息

此视图有助于用户识别其容器镜像中的优化机会。

来源:README.md:62-64

Dive 使用键盘快捷键进行所有导航和交互。界面设计为完全由键盘驱动。

基本导航

  • Tab:在图层视图和文件树视图之间切换
  • Ctrl+CQ:退出 Dive
  • /K/J:在当前视图中向上/向下移动
  • PageUp/PageDownU/D:向上/向下滚动一页

过滤和视图操作

  • Ctrl+F:过滤文件
  • ESC:关闭过滤器
  • Ctrl+A(在图层视图中):显示聚合更改(直到选定图层的全部图层)
  • Ctrl+L(在图层视图中):仅显示选定图层中的更改

有关键盘快捷键的完整列表,请参阅 键绑定和导航

来源:README.md:255-278

UI 配置

Dive 的 UI 可通过 YAML 配置文件进行高度配置。配置选项包括

  • 键绑定自定义
  • 显示偏好设置(窗格宽度、属性可见性)
  • 默认视图行为(折叠目录、显示聚合更改)
  • 文件可见性过滤

配置文件位置

Dive 在以下位置搜索配置文件

  • $XDG_CONFIG_HOME/dive/*.yaml
  • $XDG_CONFIG_DIRS/dive/*.yaml
  • ~/.config/dive/*.yaml
  • ~/.dive.yaml

配置示例

UI 配置部分允许自定义界面的各种方面,包括键绑定、显示偏好设置和默认行为

来源:README.md:279-351

实现细节

UI 使用 gocui 库实现,用于终端应用程序。该架构遵循模型-视图-控制器模式,其中

  1. 模型代表分析后的 Docker 镜像数据
  2. 视图在终端中渲染数据
  3. 控制器处理用户输入并更新模型/视图

来源:go.mod

交叉功能

筛选

UI 提供了强大的过滤功能,允许用户专注于容器镜像的特定方面

  • 基于文本的过滤(通过 Ctrl+F
  • 文件状态过滤
    • Ctrl+A:切换显示/隐藏添加的文件
    • Ctrl+R:切换显示/隐藏删除的文件
    • Ctrl+M:切换显示/隐藏修改的文件
    • Ctrl+U:切换显示/隐藏未修改的文件

这使用户在分析更改时能够快速专注于镜像的相关部分。

来源:README.md:255-278

主题和颜色

Dive 使用终端颜色提供有关文件状态的视觉提示

  • 添加的文件:绿色
  • 删除的文件:红色
  • 修改的文件:黄色
  • 未修改的文件:默认终端颜色

这些视觉指示器使一眼就能轻松理解图层更改。

来源: README.md

UI 示例

下面是 Dive UI 在镜像分析期间外观的表示

┌─ Layers ───────────────────────────────────┐┌─ Current Layer Contents ─────────────────────┐
│ Cmp │ Layer │ Size │ Command               ││ Path                    │ Size │ Filetree    │
│ ──────────────────────────────────────────││───────────────────────────────────────────────│
│ 3/5 │ c3...1│ 1.2M │ /bin/sh -c #(nop) C...││ ├── bin/                │      │ DIR         │
│ 4/5 │ ab...6│ 4.5M │ /bin/sh -c apt-get ...││ │  ├── ls               │ 142K │ FILE        │
│ 5/5 │ e7...9│ 94M  │ /bin/sh -c apt-get ...││ │  └── bash             │ 1.1M │ FILE        │
│>1/5 │ 8d...e│ 86M  │ FROM debian:latest    ││ ├── etc/                │      │ DIR         │
│ 2/5 │ fe...3│ 0B   │ /bin/sh -c #(nop) M...││ │  ├── passwd           │ 1.3K │ FILE        │
│                                            ││ │  └── shadow           │ 921B │ FILE        │
│                                            ││ └── var/                │      │ DIR         │
│                                            ││    └── ...              │      │             │
├─ Status ──────────────────────────────────┘└───────────────────────────────────────────────┘
│ Efficiency: 98%                            │ Layer Info: 86MB From debian:latest           │
│ Wasted Space: 9.2MB                        │                                               │
└────────────────────────────────────────────┴───────────────────────────────────────────────┘

来源:README.md:8-16

CI 模式

当运行具有 CI=true 环境变量时,Dive 会完全绕过 UI 并以非交互模式运行,产生具有通过/失败状态的分析结果。此模式专为集成到持续集成管道而设计。

有关 CI 集成的更多信息,请参阅 CI 集成

来源:README.md:43-48, README.md:236-252