题图摄于拉斯维加斯
为追求完美的用户体验，Harbor容器镜像仓库的界面经历了数次改版，即将推出的新版本将升级到Angular 4，并在不少细节上做了改进和优化。本文作者邹佳，Harbor核心开发成员，为大家介绍在设计和实现 Harbor 新版功能界面中的经验分享。文中也剧透了镜像扫描功能的界面。
Harbor 作为开源企业级的 Docker Registry ，一经推出，即得到社区和用户的热烈反应，成为当前较为流行的 Docker 镜像管理系统。Harbor 除了提供企业级 Registry 的相关功能和安全特性以外，也为用户开发了可视化的灵活的操作管理界面，以便于用户查看和管理 Harbor 相关系统功能。
为了提供更为专业的管理系统及不断地提升操作体验，在最新的 Harbor 版本中(V1.1 ), 我们推出了重新设计和开发的 Harbor 管理界面。主要的变化包括：
- 放弃了之前版本的 AngularJS 和 Bootstrap 组合框架，采用 Angular 4 和最新的开源组件库 Clarity 重新构建，增强了组件化，视觉效果更为一致；
- 将之前的多页面和后端 MVC 路由转发调整为单页面应用和前端路由转发，有效减少页面刷新，提升操作效率和用户体验；
- 基于 AoT (Ahead of Time) 和 Tree Shaking 代码编译压缩优化，有效减少代码下载量，提升加载效率；
- 支持基于npm包分发模式的组件共享，便于集成开发和组件重用；
- 增加对西班牙语的支持；(由社区提供)
- 提供更多和有用的帮助信息来指引用户操作。
下面来跟随笔者一起了解一下在新版中用户体验的新变化。
首先提供了独立完善的登录界面，用户通过此页面可登录到系统中。同时在登录界面，提供了供新用户注册账号的注册链接以及通过“更多信息”可达的位于GitHub 中的说明文档。另外，系统中“受欢迎的镜像库”也会列在此页，便于用户及时了解。
图1： 新版登录界面
界面的头部（header）也做了比较大的调整，语言切换有单独的菜单，与当前用户相关的基本操作，如用户设置、更改密码及退出系统都包含在头部的用户菜单中。
图2： 界面头部
图3： 用户菜单
用户登录后，“关于”项也会被合并在用户菜单中。新版中的“关于”对话框会提供系统版本号信息，以便于用户知晓当前系统的发行版本。特定模式下，证书下载链接也会在此提供。
图4：“关于”对话框
位于头部的通用搜索也做了改进，搜索结果采用列表的形式显示，并分门别类，使得结果更为清晰和全面有序。同时提供“返回”链接，可以便捷回到搜索前的页面。
图5： 通用搜索
启用左侧导航栏，显示用户当前可操作选项，指引用户操作，提升系统操作易用性。
图6：左侧导航栏
项目管理页成为登录系统后的默认页，登录后可直达。项目列表视图采用Clarity列表组件，支持分页和列过滤以及查询。同时也提供了面向整个列表的过滤和查询功能。另外，项目的基本操作由弹出菜单来支持。在本页的右上角，提供了全新的基本统计信息，包含了对于项目和镜像仓库的相关统计信息。Registry所用的后端存储量信息也会已图表的形式展现出来。（注意，此图表目前仅支持本地存储，云存储如S3目前不支持）
图7： 项目管理
项目详情页依然由“镜像库”，“成员”，“日志”和“复制”四部分构成。最大的改变来自于“镜像库”，其它部分的变化相似，采用全新的 Clarity 列表视图替代之前的普通列表，提供更为强大的过滤和搜索能力。
在“镜像仓库”管理界面中，由可伸展的嵌入式的栈式视图取代多页跳转视图来统一展示镜像库以及其相关的 tag 列表信息，使得此页更加的紧凑和易操作。相关的操作项也合并到可弹出菜单中，使得界面更加简洁。分页，列排序和过滤以及全视图过滤和搜索也得到很好支持。同时也提供了 tag 和推送镜像的命令参考，避免用户另寻查找。
如果系统配置启用了 Notary 镜像签名系统或者 Clair 镜像漏洞扫描系统，则对应的结果也会显示在tag的基本信息项中。 Notary 的结果包含有“已签”，“未签”和“未知”三种情况。Clair 扫描基本结果则由带有 tooltip 的柱状图来展示。
图8：项目详情页
在启用 Clair 的情况下，在上述列表中，点击tag名称，可打开tag详情页，包含有更多的tag信息和更为相信的漏洞扫描结果。
图9：Tag详情页
配置项管理是全新引入的功能模块，为系统管理员提供了特定相关配置项的在线直接管理能力。配置更改可即时生效。目前支持的配置模块包括“认证模式”，“复制“，“邮箱”以及“系统设置”。在“认证模式”中可配置是使用本地数据库还是 AD / LDAP 来完成系统鉴权。在“复制”中可配置在复制任务中是否验证远程证书。“邮箱”可配置来完成邮件通知的邮件服务器信息。“系统设置”中可以设置系统令牌过期时间选项。对于多数配置项，都通过 tooltip 提供了帮助信息。
图10：配置
新版管理界面除了保留在项目详情页中提供与特定项目相关的日志之外，也引入系统级的日志查看和搜索/过滤管理的模块，在此，用户可很容易的获取系统范围内其关注的相关日志信息。
图11： 系统日志
对于重新设计的Harbor管理界面，鉴于篇幅限制，不能一一赘述，仅就与旧版有较大差异的部分进行说明。如果大家感兴趣，不妨到github上的Harbor主页了解更多详情，页可以下载安装直接体验。
Harbor开发团队将不断聆听大家以及社区的反馈，不断改进，以期提供更好的平台为大家服务。
