推特

发布于2020年3月17日乌尔里希Hafner

这篇文章已经在一个在线会议记录在必威国际有限公司Jenkins 2020 UI/UX Hackfest．

对于Je必威国际有限公司nkins来说，有大量的插件可以可视化各种构建步骤的结果。可以使用插件呈现测试结果、代码覆盖率、静态分析等等。所有这些插件通常都会获取给定构建步骤的构建结果，并在用户界面中显示它们。为了呈现这些细节，大多数插件使用静态HTML页面，因为这种类型的用户界面是Jenkins自2007年创建以来的标准可视化。必威国际有限公司

为了改善这些插件的观感和用户体验，有必要向前发展，加入一些现代的Java Script库和组件。自从蓝海的开发被停止(见必威国际有限公司詹金斯邮件列表)插件的作者需要自己决定，哪些UI技术对这个任务有帮助。然而，现代UI组件的宇宙是如此势不可当，所以只选择一小部分被证明是有用的和与Jenkins底层web技术兼容的组件是有意义的。必威国际有限公司此外，合并这样一个新组件的初始设置非常大，因此如果该工作只需要完成一次，那么它将非常有帮助。

本指南介绍了一些UI组件，将来所有插件作者都可以使用它们为Jenkins中的报表提供丰富的用户界面。必威国际有限公司为了简化在Jenkins作为一个基于Java的web应用程序的上下文中这些库的使用，这些Java Script库和组件被打包为普通的Je必威国际有限公司nkins插件。

在下面的小节中，将逐步介绍这些新组件。为了了解如何将这些组件作为插件使用，我演示了新特性，同时增强了现有的特性法医插件一个新的用户界面。由于警告下一代插件也使用了这些新组件，您可以在警告插件的文档或者在公共场合ci.必威国际有限公司jenkins.io实例，它已经在warnings插件的详细视图中使用了这些组件。

1.新的用户界面插件

以下UI组件作为新的Jenkins插件提供:必威国际有限公司

jquery3-api-plugin:提供jQuery 3詹金斯插必威国际有限公司件。正如其主页所描述的那样，jQuery是一个快速、小型且功能丰富的JavaScript库。它通过一个易于使用、可跨多种浏览器工作的API，大大简化了HTML文档遍历和操作、事件处理、动画和Ajax等工作。jQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。
bootstrap4-api-plugin:提供引导4詹金斯插必威国际有限公司件。Bootstrap是——根据他们的自我认知——世界上最流行的前端组件库，用于在web上构建响应式的、移动优先的项目。它是一个使用HTML、CSS和JS进行开发的开源工具包。开发人员可以用他们的Sass变量和mixins、响应网格系统、大量的预构建组件和基于jQuery构建的强大插件快速构建他们的想法的原型，或者构建整个应用程序。
data-tables-api-plugin:提供datatable詹金斯插必威国际有限公司件。DataTables是jQuery Javascript库的插件。它是一个高度灵活的工具，建立在渐进增强的基础上，可以将所有这些高级特性添加到任何HTML表中:
- 上一步、下一步和页面导航
- 通过文本搜索过滤结果
- 一次按多列对数据进行排序
- DOM、Javascript、Ajax和服务器端处理
- 容易theme-able
- 移动友好
echarts-api-plugin:提供ECharts詹金斯插必威国际有限公司件。ECharts是一个开源的JavaScript可视化工具，可以创建直观的、交互式的、高度可定制的图表。它可以在PC和移动设备上流畅地运行，并与大多数现代Web浏览器兼容。
font-awesome-api-plugin:提供字体太棒了詹金斯插必威国际有限公司件。Font Awesome有矢量图标和社交标志，根据他们的自我认知，它是网络上最受欢迎的图标集和工具包。目前，它包含超过1500个免费图标。
popper-api-plugin提供了Popper.js詹金斯插必威国际有限公司件。Popper可以很容易地定位工具提示，弹出窗口或任何其他只需一行代码。
plugin-util-api-plugin:这个小插件提供了一些帮助器和基类来简化Jenkins中记者的创建。必威国际有限公司这个插件还提供了一组架构规则，可以包含在插件的架构测试套件中。

2.需要对插件POM进行更改

为了使用这些插件，你需要在你的插件pom中添加它们作为依赖项。你可以使用下面的代码片段来添加它们:

pom.xml< div类＝＂content">

<项目>[…]< >属性< plugin-util-api.version >1.0.2中< / plugin-util-api.version >< font-awesome-api.version >5.12.0-7< / font-awesome-api.version >< bootstrap4-api.version >4.4.1-10< / bootstrap4-api.version >< echarts-api.version >4.6.0-8< / echarts-api.version >< data-tables-api.version >1.10.20-13< / data-tables-api.version >[…]< / >属性< >的依赖关系< >的依赖< groupId >io.必威国际有限公司jenkins.plugins< / groupId >< artifactId >plugin-util-api< / artifactId ><版本>$ {plugin-util-api.version}> < /版本< / >的依赖< >的依赖< groupId >io.必威国际有限公司jenkins.plugins< / groupId >< artifactId >font-awesome-api< / artifactId ><版本>$ {font-awesome-api.version}> < /版本< / >的依赖< >的依赖< groupId >io.必威国际有限公司jenkins.plugins< / groupId >< artifactId >bootstrap4-api< / artifactId ><版本>$ {bootstrap4-api.version}> < /版本< / >的依赖< >的依赖< groupId >io.必威国际有限公司jenkins.plugins< / groupId >< artifactId >echarts-api< / artifactId ><版本>$ {echarts-api.version}> < /版本< / >的依赖< >的依赖< groupId >io.必威国际有限公司jenkins.plugins< / groupId >< artifactId >data-tables-api< / artifactId ><版本>$ {data-tables-api.version}> < /版本< / >的依赖[…]< / >的依赖关系[…]> < /项目

或者，您可以查看POM文件警告下一代插件或者是法医API插件它们已经使用了这些插件。

3.记者的一般结构

在本节中，我将解释Jenkins设计的一些基础知识，即Java模型和相关的用户界面元素。必威国际有限公司如果您已经熟悉如何实现报告器插件的相应扩展点(参见第1节)可扩展性在Je必威国际有限公司nkins的开发指南中)，然后你可以跳过这一节，直接访问3.1节．

必威国际有限公司Jenkins使用静态对象模型结构组织项目图1．

必威国际有限公司詹金斯设计＂>< / div >< div类＝＂标题＂>图1。必威国际有限公司Jenkins设计- Java模型的高级视图</ div >< / div >< div类＝＂paragraph

Jenkins用户界面中的顶层项目是作业(至少必威国际有限公司是我们感兴趣的顶层项目)。必威国际有限公司Jenkins包含几个不同类型的作业(Freestyle作业、Maven作业、pipeline等)。

每个作业都包含任意数量的构建(或者更严格地说，运行)。每个版本都由其惟一的版本号标识。必威国际有限公司Jenkins插件可以将结果附加到这些构建中，例如构建工件、测试结果、分析报告等。为了附加这样的结果，一个插件在技术上需要实现和创建一个操作来存储这些结果。

这些Java对象在几个不同的视图中可视化，下面几节将对这些视图进行更详细的描述。显示所有可用Jobs的顶级视图显示在图2．

工作＂>< / div >< div类＝＂标题＂>图2。必威国际有限公司Jenkins视图显示所有可用的工作</ div >< / div >< div类＝＂paragraph

插件也可以在这些视图中提供UI元素，但这超出了本指南的范围。

每个作业都有一个详细视图，其中插件可以扩展相应的扩展点，并提供摘要框和趋势图。通常情况下，在工作级别上不需要记者的摘要框，因此我只更详细地描述趋势图，参见部分5.5.2节．

工作细节＂>< / div >< div类＝＂标题＂>图3。必威国际有限公司Jenkins视图显示工作的详细信息</ div >< / div >< div类＝＂paragraph

每个构建都有一个详细视图。在这里，插件可以提供类似于工作详细信息视图的汇总框。通常，插件在这里只显示一个简短的摘要，并提供一个链接到详细的结果，参见图4了一个例子。

构建细节＂>< / div >< div类＝＂标题＂>图4。必威国际有限公司Jenkins视图显示关于构建的详细信息</ div >< / div >< div类＝＂paragraph

视图层次结构中的最后一个元素实际上是显示特定插件结果的专用视图。例如，有显示测试结果、分析结果等的视图。它完全取决于一个给定的插件应该在那里显示什么元素。在接下来的几节中，我将介绍一些新的UI组件，它们可以用来以一种令人愉快的方式显示相应的结果。

3.1.扩展Jenkins对必威国际有限公司象模型

由于报告器通常以类似的方式组成，所以我扩展了Jenkins的原始对象模型(参见必威国际有限公司图1)和一些附加的元素，所以创建或实现一个新的报告器插件会简单得多。这个新模型如图所示图5．中心元素是一个构建操作，它将存储插件报告器的结果。此操作将附加到每个构建，并为报告器保存(并持久保存)结果。每个操作的详细数据将自动存储在一个附加文件中，因此，如果用户从不请求详细信息，那么Jenkins的内存占用可以保持较小。必威国际有限公司此外，此操作还用于简化项目操作和趋势图的创建，请参见5.5.2节．

必威国际有限公司詹金斯记者设计＂>< / div >< div类＝＂标题＂>图5。必威国际有限公司Jenkins报告器设计-报告器插件模型的高级视图</ div >< / div >< / div >< / div >< / div >< div类＝＂sect1

4.Git取证插件

本教程中的元素都将在new中使用法医API插件(其实这个插件不是新的，它是一个依赖的警告下一代插件)．您可以下载插件内容，并查看如何在实践中使用这些新组件的更详细信息。或者您可以更改这个插件，看看如何将这些新组件参数化。

如果你使用Git作为源代码管理系统，那么这个插件将以代码作为犯罪现场(Adam Tornhill, 2013年11月)来确定所包含源代码文件的统计数据:

提交总数
不同作者的总数
创建时间
最后修改时间

该插件提供了一个新的步骤(或后构建发布者)，用于启动存储库挖掘并将收集到的信息存储在Jenkins操作中(参见必威国际有限公司图5)．之后，您会得到一个新的构建摘要，其中显示了扫描文件的总数(作为趋势和构建结果)。从这里，您可以导航到详细信息视图，该视图在一个表中显示扫描到的文件，可以简单地对其进行排序和筛选。您还将得到一些饼图，显示提交历史的重要方面。

请注意，插件的这个功能仍然是一个概念证明:这一步的性能很大程度上取决于Git存储库的大小和提交的数量。目前，它在每次构建中扫描整个存储库。在不久的将来，我希望能找到一个志愿者，他有兴趣用增量扫描器替换这个愚蠢的算法。

5.引入新的UI组件

正如在第三节，详细信息视图是特定于插件的。显示什么以及如何显示这些元素取决于每个插件的作者。所以在下一节中，我将提供一些例子和新概念，插件可以使用它们作为自己内容的构建块。

5.1.现代的图标

必威国际有限公司Jenkins插件通常不经常使用图标。大多数插件为操作提供一个图标，仅此而已。如果你打算在其他地方使用图标，插件作者们就自顾自吧:推荐的Tango图标集已经有10多年的历史了，在今天太有限了。有几个可用的选项，但最受欢迎的是字体图标集．它提供了1500多个遵循相同设计准则的免费图标:

字体的图标＂>< / div >< div类＝＂标题＂>图6。Jenkins插件中的图标必威国际有限公司</ div >< / div >< div类＝＂paragraph

为了在插件中使用字体图标，你只需要相应的依赖font-awesome-api-plugin．然后，您可以通过使用新标记使用任何实体图标svg-icon在你的果冻视图中:

index.jelly< div类＝＂content">


            
             
              
               1 2 3 4 5 6 7
               < j:果冻xmlns: j＝＂果冻:核心＂xmlns:圣＝＂果冻:订书机＂xmlns: l＝＂/lib/layout＂xmlns:英足总＝＂/ font-awesome＂>[…]< fa: svg-icon的名字＝＂两份＂类＝＂no-issues-banner＂/>[…]< / j:果冻>

如果您正在使用Java代码生成视图，那么您也可以使用该类SvgTag为该图标生成HTML标记。

5.2.网格布局

必威国际有限公司Jenkins目前在所有视图中都包含Bootstrap的网格系统的旧版本和补丁版本(有24列)。该版本不兼容Bootstrap4或依赖于Bootstrap4的任何JS库。为了使用Bootstrap 4特性，我们需要替换Jenkins提供的必威国际有限公司layout.jelly带有补丁版本的文件，不加载损坏的网格系统。我计划创建一个PR修复詹金斯核心的网格，但这将需要一些时间。必威国际有限公司在此之前，您需要使用所提供的layout.jelly的Bootstrap4插件，见下文。

首先要确定的是，哪些元素应该显示在插件页面上，每个元素应该占据多少空间。通常，使用简单网格将所有可见组件映射到可用空间上。在Jenk必威国际有限公司ins视图中，我们有一个固定的页眉和页脚，左边有一个导航栏(20%的水平空间)。屏幕的其余部分可用于细节视图。为了简化元素在剩余空间的分布，我们使用引导的网格系统．

Jenkins中的网格布局必威国际有限公司＂>< / div >< div类＝＂标题＂>图7。必威国际有限公司Jenkins布局，其中包含网格系统的详细信息视图</ div >< / div >< div类＝＂paragraph

这意味着，视图被分为12列和任意数量的行。这个网格系统使用起来很简单(但也足够复杂，可以支持花哨的屏幕布局)-我不会在这里详细介绍，请参考引导文件获取详细信息。

对于取证细节视图，我们使用两行两列的简单网格。因为列的数量总是12，我们需要创建两个“胖”列来填充其中的6个标准列。为了在我们的插件中创建这样一个视图，我们需要创建一个作为果冻文件的视图和一个相应的Java视图模型对象。具有此布局的视图如下代码片段所示:

index.jelly< div类＝＂content">


            
             
              
               12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
               <？果冻escape-by-default =‘真正的’吗?>< j:果冻xmlns: j＝＂果冻:核心＂xmlns:圣＝＂果冻:订书机＂xmlns: l＝＂/lib/layout＂xmlns:废话＝＂/引导＂>< b:布局标题＝＂$ {it.displayName}＂norefresh＝＂真正的＂>(1）<圣:包括它＝＂$ {it.owner}＂页面＝＂sidepanel.jelly＂/>< l:主面板><圣:兼职包括＝＂io.必威国际有限公司jenkins.plugins.bootstrap4＂/>（2）< div类＝＂液体容器＂>（3）< div类＝＂行py-3＂>（4）< div类＝＂col-6＂>（5）第一行第1列的内容< / div >< div类＝＂col-6＂>(6）第一行第二列的内容< / div >< / div >< div类＝＂行py-3＂>(7）< div类＝＂上校＂>（8）第2行内容< / div >< / div >< / div >< / l:主面板>> < / bs:布局< / j:果冻>

1	使用基于Bootstrap的自定义布局:因为Jenkins核心包含一个旧版本的Bootstr必威国际有限公司ap，我们需要替换标准布局。果冻文件。
2	导入引导4:使用附加概念导入JS和CSS组件，这是在Jenkins的Stapler Web框架中引用静态资源的首选方法。必威国际有限公司
3.	整个视图将被放置到一个流体容器中，填充整个屏幕(100%宽度)。
4	用class指定视图的新行`行`．额外的类`py-3`定义用于该行的填充，请参见引导间距为更多的细节。
5	因为Bootstrap自动将一行分割为12个大小相等的列，所以我们在这里定义第一列应该占据这12列中的6列。您也可以省略详细的数字，然后Bootstrap将自动在可用空间中分发内容。只是要知道，这不是你想要的大多数时候。
6	第二列使用剩余的空间，即12列中的6列。
7	第二行使用与第一行相同的布局。
8	第一行只有一列，它将填满整个可用空间。

您还可以根据屏幕的实际可见大小为一行指定不同的列布局。这有助于改善大屏幕的布局。在警告插件中，你会发现一个例子:在小型设备上，有一个可见的卡片显示旋转木马中的饼图。如果您在较大的设备上打开同一页，那么两个饼图将并排显示，而旋转木马将被隐藏。

5.3.卡片

当以块的形式显示插件的信息时，通常会显示纯文本元素。这通常会导致一些无聊的网页。为了创建更吸引人的界面，有必要将这些信息呈现在具有边框、标题、图标等的卡片中。为了创造这样一个引导卡一个小果冻标签已经提供了新的引导程序插件这简化了插件的这项任务。这样的卡片可以很容易地在果冻视图中创建，方法如下:


            
             
              
               1 2 3
               < b:卡标题＝＂${%卡标题}＂fontAwesomeIcon＝＂图标名称＂>卡的内容< / bs:卡>

在图8下面列举了这类卡片的例子。上面一行中的卡片包含饼图，显示了整个存储库中作者和提交数量的分布情况。底部的卡片显示了数据表中的详细信息。可视化并不局限于图表或表格，您可以在其中显示任何类型的HTML内容。您可以在这些卡中显示插件的任何图标，但建议使用现有的一个字体太棒了图标，以在Jenkins的插件生态系统中获得一致的外观和感觉。必威国际有限公司

卡的例子＂>< / div >< div类＝＂标题＂>图8。在Jenkins插件中引导卡必威国际有限公司</ div >< / div >< div类＝＂paragraph

注意，卡片的大小是由网格配置决定的，参见5.2节．

5.4.表

显示插件详细信息的常用UI元素是表控件。大多数插件(和Jenkins核心)通必威国际有限公司常使用普通HTML表。但是，如果表需要显示大量的行，则使用更复杂的控件，如datatable更有意义。使用这个基于JS的表控件可以免费提供额外的功能:

通过文本搜索过滤结果
提供结果集的分页
一次按多列对数据进行排序
使用Ajax调用获取表行
根据屏幕分辨率显示和隐藏列

为了使用datatable在视图中有两个选项，你可以装饰现有的静态HTML表(参见部分5.4.1之前)或使用Ajax填充表内容(参见5.4.2节)．

5.4.1.带有静态HTML内容的表

使用数据表最简单的方法是创建一个静态HTML表，通过调用数据表的构造函数来装饰它。这种方法不需要在Java和Jelly端进行特殊处理，所以我认为遵循以下方法就足够了例子在数据表文档中。只需要确保在你的Jelly文件中构建表之后，你需要用以下代码来装饰表:

< j:果冻xmlns: j＝＂果冻:核心＂xmlns:圣＝＂果冻:订书机＂><圣:兼职包括＝＂io.必威国际有限公司jenkins.plugins.jquery3＂/><圣:兼职包括＝＂io.必威国际有限公司jenkins.plugins.data-tables＂/>[…]< div类＝＂table-responsive＂><表类＝＂表表悬浮表条纹显示＂id＝＂id＂>[…]< /表>< / div >[…]<脚本>＄（＇# id＇) .DataTable ();(1）> < /脚本< / j:果冻>

1	取代`id`加上HTML表元素的ID

到目前为止，在forensic插件中还没有使用这样的静态表，但是您可以看看显示固定警告的表在警告插件中了解如何装饰这样的表。

5.4.2.具有基于内容的动态模型的表

虽然静态HTML表很容易实现，但它们有几个限制。因此，采用更复杂的方法是有意义的。通常，用户界面中的表是通过使用相应的表(和行)模型定义的。Java Swing成功地提供了这样一个表格模型从Java早期开始的概念。我在Jenkins和DataTables中也采用了这些概念必威国际有限公司。为了在Jenkins视图中创建一个表，插件需要提供一个表模型类，必威国际有限公司它提供以下信息:

表的ID(因为视图中可能有几个表)
列的模型(即列的数量、类型和标题标签)
表的内容(即各个行对象)

您将在forensic插件中找到这样一个表的示例:在这里，一个表列出了Git存储库中的文件以及相应的提交统计信息(作者数量、提交数量、最后修改次数、首次提交)。该表的屏幕截图显示在图9．

表的例子＂>< / div >< div类＝＂标题＂>图9。动态表在取证插件</ div >< / div >< div类＝＂paragraph

为了在Jenkins中创建这样一个表，您需要创建派生自的表模型类必威国际有限公司TableModel．在图10这里显示了Forensics插件中相应类的示意图。

表格模型＂>< / div >< div类＝＂标题＂>图10。取证插件的表模型</ div >< / div >< div类＝＂sect4

表列模型

表模型类定义的第一件事是通过创建相应的可用列的模型TableColumn实例。对于每一列，您需要指定标题标签和应该在相应列中显示的bean属性的名称(行元素实际上是Java bean:每一列将显示此类bean的一个不同属性，请参阅下一节)。你可以使用任何支持列类型只需提供字符串或整数基于列。

表行内容

此外，表模型类提供行内容。这getRows ()方法将使用Ajax调用异步调用。通常，该方法只返回一个Java Bean实例列表，提供每个列的属性(参见前一节)。这些对象将自动转换为JSON对象数组，这是DataTables API所需的基本数据结构。您将在该类中的取证插件的Git存储库中找到一个完全工作的示例表模型实现ForensicsTableModel．

为了在你的插件视图中使用这样一个表，你需要在相关的Jelly文件中使用new表格标签:

index.jelly< div类＝＂content">

< j:果冻xmlns: j＝＂果冻:核心＂xmlns: dt＝＂/数据表＂>[…]<圣:兼职包括＝＂io.必威国际有限公司jenkins.plugins.data-tables＂/>< dt:表模型＝＂$ {it.getTableModel (id)}＂/>(1）[…]< / j:果冻>

1	取代`id`与您的桌子id

你需要为表提供的唯一参数是模型-它通常是相应的Jenkins视图模型类的一部分(该对象被引用必威国际有限公司$ {}在视图中)。为了将相应的Jenkins视图模型类与表连接起来，视图模型类需要实现必威国际有限公司AsyncTableContentProvider接口。或者甚至更简单，让您的视图模型类派生自DefaultAsyncTableContentProvider．这种关系是必需的，这样Jenkins就可以为Ajax调用自动创建和绑定代理，这必威国际有限公司些代理将在创建HTML页面后自动填充表内容。

如果我们把所有这些部分放在一起，我们需要定义一个类似于forensic插件模型的模型，如图11．

法医视图模型＂>< / div >< div类＝＂标题＂>图11。必威国际有限公司Jenkins报告器设计-报告器插件模型的高级视图</ div >< / div >< div类＝＂paragraph

正如在图5插件需要附加一个BuildAction每个构建。forensic插件附加了一个ForensicBuildAction构建。此操作将存储RepositoryStatistics实例，该实例包含给定构建的存储库结果。此操作将所有订书机请求委托给一个新的

虽然这种方法乍一看相当复杂，但您会看到实际的实现部分相当小。大部分样板代码已经由基类提供，您只需要实现少数几个方法。使用这个概念还提供了一些额外的功能，这是DataTables插件的一部分:

列的顺序自动保存在浏览器本地存储中。

分页大小自动保存在浏览器本地存储中。

Ajax调用实际上只在表变为可见时才会被调用。因此，如果在选项卡中隐藏了几个表，那么内容将仅按需加载，从而减少要传输的数据量。

有一个选项可以提供可以用+符号展开的附加详细信息行，请参见警告插件表获取详细信息。

5.5.图表

插件报告器通常还报告构建之间的某种趋势。到目前为止，詹金斯核必威国际有限公司心只提供了相当有限的概念，以趋势图的形式呈现这种趋势。的JFreeChart框架Jenkins cor必威国际有限公司e提供的是一个服务器端渲染引擎，它创建的图表作为静态PNG图像，将包括在工作和细节页面。现在，有几个强大的基于JS的图表库可用，它们在客户端做同样的工作(实际上是更好的工作)。这样做的好处是可以在每个客户机上定制这些图表，而不会影响服务器性能。此外，你还可以免费获得许多附加功能(如缩放、动画等)。此外，这些图表库不仅支持典型的构建趋势图，还支持许多其他的图表类型，可以用来改善插件的用户体验。其中一个图表库就是ECharts:这个库有一个强大的API，并支持几乎所有的图表类型的图像。你可以得到一些特征的印象示例页面的图书馆。

为了使用这些图表，可以通过导入相应的JS文件和在相应的Jelly文件中定义图表来嵌入使用这个库的图表。虽然这已经工作得很好，但从Jenkins构建结果中为这些图表提供相应的模型仍然有些麻烦。必威国际有限公司因此，我添加了一个功能强大的Java API，它有助于在Java端为这些图表创建模型。这个API提供了以下特性:

基于构建结果集合创建趋势图。
将图表类型从聚合中分离出来，以便简化图表模型的单元测试。
在构建号或构建日期之间切换x轴的类型(自动聚合同一天记录的结果)。
自动将Java模型转换为JS端所需的JSON模型。
支持饼状图和折线图(稍后将提供更多内容)。

这些图表可以在项目页面中用作趋势图(参见图3)或作为插件详细视图中的信息图表(参见第五节)．

5.5.1.饼图

一个简单但仍然有信息的图表是饼图，它说明了插件数据的数字比例。在取证插件中，我使用这个图表来显示Git存储库中源代码文件的作者或提交数量的数字比例(参见图8)．在警告插件中，我使用这个图表来显示新的、未解决的或固定的警告的数字比例，参见图12．

饼图的例子＂>< / div >< div类＝＂标题＂>图12。警告插件中的饼图</ div >< / div >< div类＝＂paragraph

为了在详细信息视图中包含这样的图表，您可以使用所提供的饼形图标签。在下面的代码片段中，您将看到这个标记(嵌入在Bootstrap卡中，参见5.3节)：

index.jelly< div类＝＂content">


             
              
               
                1 2 3 4 5 6 7 8 9 10
                <？果冻escape-by-default =‘真正的’吗?>< j:果冻xmlns: j＝＂果冻:核心＂xmlns: c＝＂/图＂xmlns:废话＝＂/引导＂>[…]< b:卡标题＝＂${%的作者}＂fontAwesomeIcon＝＂用户＂>< c:的饼形图id＝＂作者＂模型＝＂$ {it.authorsModel}＂高度＝＂256＂/>< / bs:卡>[…]< / j:果冻>

您需要为这个图表提供一个惟一的ID和相应的模型值。模型必须是对应的JSON表示形式PieChartModel实例。这样的模型可以用以下几行代码创建:

ViewModel.java< div类＝＂content">


             
              
               
                1 2 3 4 5 6 7 8 9
                […]PieChartModel模型＝新PieChartModel (＂标题＂）;model.add (新PieData (＂段1名＂，10), Palette.RED);model.add (新PieData (＂分段2名＂，15), Palette.GREEN);model.add (新PieData (＂段3名＂，20.), Palette.YELLOW);字符串json =新JacksonFacade () .toJson(模型);[…]

5.5.2.作业级别视图的趋势图

为了显示在作业页面上呈现折线图的趋势(请参阅图3)，您需要提供一个所谓的浮动框(存储在文件中floatingBox.jelly你的工作行为(见第三节))。这个文件的内容非常简单，只包含一个趋势图标签:

floatingBox.jelly< div类＝＂content">


             
              
               
                1 2 3 4 5 6
                <？果冻escape-by-default =‘真正的’吗?>< j:果冻xmlns: j＝＂果冻:核心＂xmlns: c＝＂/图＂>< c:趋势图它＝＂${和}＂标题＝＂${%SCM文件计数趋势}＂enableLinks＝＂真正的＂/>< / j:果冻>

的对应子类中需要提供图表的模型JobAction(这是浮动框的所有者)。由于趋势图的计算在服务器端也是相当昂贵的(需要从磁盘读取几个构建，需要计算有趣的数据点)，这个过程被放到一个单独的后台作业中。一旦计算完成，就会通过Ajax调用显示结果。为了为插件作者隐藏这些细节，你应该简单地派生你的JobAction类从对应的AsyncTrendJobAction类，该类已包含样板代码。所以你的静态插件对象模型实际上会变得有点复杂:

必威国际有限公司詹金斯图模型＂>< / div >< div类＝＂标题＂>图13。必威国际有限公司詹金斯图模型设计</ div >< / div >< div类＝＂paragraph

基本上，您需要实现该方法LinesChartModel createChartModel ()创建折线图。这个方法实现起来相当简单，因为大部分困难的工作都是由库提供的:您将使用构建操作的迭代器调用，从最新的构建开始。迭代器从一个构建推进到另一个构建，直到没有更多的结果可用(或达到要考虑的构建的最大数量)。在你的插件中实现的最重要的事情是如何计算给定的数据点BuildAction．这里有一个这样的例子SeriesBuilder在取证插件中的实现:

FilesCountSeriesBuilder.java< div类＝＂content">


             
              
               
                12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
                包io.必威国际有限公司jenkins.plugins.forensics.miner；进口java.util.HashMap；进口java.util.Map；进口edu.hm.hafner.echarts.SeriesBuilder；/** *为显示存储库中文件数量的折线图系列构建一个x轴点。* * @作者乌尔里奇·哈夫纳*/公共类FilesCountSeriesBuilder扩展SeriesBuilder < ForensicsBuildAction > {静态最后字符串TOTALS_KEY =＂总计＂；@Override受保护的地图<字符串，整数> computeSeries (最后ForensicsBuildAction当前){地图<字符串，整数= >系列新HashMap< > ();系列。把(TOTALS_KEY current.getNumberOfFiles ());返回系列;}}

你不局限于单一的折线图。您可以在一个图表中显示几行，可以显示堆叠的值，甚至可以显示某些值之间的增量。你也可以看看警告插件的图表以详细了解其中一些功能。

趋势用几行例子＂>< / div >< div类＝＂标题＂>图14。在警告插件中有几行趋势图</ div >< / div >< divid＝＂img-stacked

带有堆叠线的趋势图示例＂>< / div >< div类＝＂标题＂>图15。在Warnings插件中带有堆叠线的趋势图</ div >< / div >< / div >< / div >< / div >< / div ><b class=

关于作者

乌尔里希Hafner

Ullrich Hafner自2007年以来一直是Jenkins项目的积极贡献者，主要参与验收必威国际有限公司测试和静态代码分析套件(现在已被警告下一代插件所取代)。

他是慕尼黑应用科学大学软件工程教授。作为教授，他试图通过让学生在他们的学生项目和论文中开发新的特性和测试用例来赢得新的Jenk必威国际有限公司ins贡献者。