jenkins修改pom文件_动手实践:美化 Jenkins 报告插件的用户界面
對(duì)于 Jenkins 而言,可使用插件來可視化各種構(gòu)建步驟的結(jié)果。有一些插件可用于呈現(xiàn)測(cè)試結(jié)果、代碼覆蓋率、靜態(tài)分析等。這些插件通常都會(huì)獲取給定構(gòu)建步驟的構(gòu)建結(jié)果,并在用戶界面中顯示它們。為了呈現(xiàn)這些細(xì)節(jié),大多數(shù)插件使用靜態(tài) HTML 頁面,因?yàn)檫@種類型的用戶界面是 Jenkins 自 2007 年成立以來的標(biāo)準(zhǔn)可視化。
為了改善這些插件的外觀和用戶體驗(yàn),有必要向前發(fā)展并合并一些現(xiàn)代 Java Script 庫和組件。由于 Blue Ocean 的開發(fā)已經(jīng)停止(請(qǐng)參閱?Jenkins mailing list post),因此插件作者需要自己決定,哪些 UI 技術(shù)可幫助完成該任務(wù)。但是,現(xiàn)代 UI 組件的種類繁多,以至于只挑選一小部分被證明是有用的并且與 Jenkins 基礎(chǔ) Web 技術(shù)兼容的組件是有意義的。而且,合并這樣一個(gè)新組件的初始設(shè)置相當(dāng)大,因此如果該工作僅需要執(zhí)行一次,將會(huì)有很大的幫助。
本指南介紹了一些 UI 組件,以后所有插件作者都可以使用這些 UI 組件,從而為 Jenkins 中的報(bào)告提供豐富的用戶界面。為了簡化這些庫在 Jenkins 作為基于 Java 的 Web 應(yīng)用程序的上下文中的使用,這些 Java Script 庫和組件已打包為普通的 Jenkins 插件。
在以下各小節(jié)中,將逐步介紹這些新組件。為了了解如何使用這些組件的插件,我將演示新功能,同時(shí)使用新的用戶界面增強(qiáng)現(xiàn)有的?Forensics Plugin。由于 Warnings Next Generation 插件也使用這些新組件,因此您可以在?warnings 插件的文檔中或在我們的公共?ci.jenkins.io 實(shí)例中看到其他示例,這些示例已經(jīng)在 warnings 插件的詳細(xì)信息視圖中使用了這些組件。
新的用戶界面插件
新的 Jenkins 插件提供了以下 UI 組件:
jquery3-api-plugin:為 Jenkins 插件提供?jQuery 3。如其首頁所述,jQuery 是一個(gè)快速、小型且功能豐富的 JavaScript 庫。借助易于使用的 API(可在多種瀏覽器中使用),使 HTML 文檔的遍歷和操作、事件處理、動(dòng)畫和 Ajax 等事情變得更加簡單。兼具多功能性和可擴(kuò)展性,jQuery 改變了數(shù)百萬人編寫 JavaScript 的方式。
bootstrap4-api-plugin:為 Jenkins 插件提供?Bootstrap 4。Bootstrap 自稱是世界上最流行的前端組件庫,用于在 Web 上構(gòu)建響應(yīng)式,移動(dòng)優(yōu)先的項(xiàng)目。它是一個(gè)用于使用 HTML、CSS 和 JS 開發(fā)的開源工具包。開發(fā)人員可以使用他們的 Sass 變量和 mixins、響應(yīng)式柵格系統(tǒng)、大量的預(yù)構(gòu)建組件以及基于 jQuery 構(gòu)建的強(qiáng)大插件,快速構(gòu)建其思想原型或整個(gè)應(yīng)用程序。
data-tables-api-plugin:提供 Jenkins 插件的數(shù)據(jù)表格。DataTables 是 jQuery Javascript 庫的插件。這是一個(gè)高度靈活的工具,建立在逐步增強(qiáng)的基礎(chǔ)上,可將所有這些高級(jí)功能添加到任何 HTML 表中:
上一頁,下一頁和頁面導(dǎo)航
通過文本搜索過濾結(jié)果
一次按多列對(duì)數(shù)據(jù)排序
DOM、Javascript、Ajax、服務(wù)器端處理
簡單主題化
手機(jī)端兼容友好
echarts-api-plugin:為 Jenkins 插件提供?ECharts。ECharts 是一種開放源代碼的 JavaScript 可視化工具,用于創(chuàng)建直觀、交互式和高度可定制的圖表。它可以在 PC 和移動(dòng)設(shè)備上流暢運(yùn)行,并且與大多數(shù)現(xiàn)代 Web 瀏覽器兼容。
font-awesome-api-plugin:為 Jenkins 插件提供?Font Awesome。Font Awesome 具有矢量圖標(biāo)和社交徽標(biāo),號(hào)稱是網(wǎng)絡(luò)上最受歡迎的圖標(biāo)集和工具包。目前,它包含 1,500 多個(gè)免費(fèi)圖標(biāo)。
popper-api-plugin:為 Jenkins 插件提供?Popper.js。Popper 只需一行代碼即可輕松定位工具提示,彈出窗口或其他任何內(nèi)容。
plugin-util-api-plugin:這個(gè)小插件提供了一些幫助程序和基類,以簡化 Jenkins 中報(bào)告程序的創(chuàng)建。該插件還提供了一組體系結(jié)構(gòu)規(guī)則,這些規(guī)則可以包含在插件的體系結(jié)構(gòu)測(cè)試套件中。
POM 文件必要的改變
為了使用這些插件,您需要將它們作為依賴項(xiàng)添加到插件 pom 中。您可以添加以下代碼段:
pom.xml[...]1.0.25.12.0-74.4.1-104.6.0-81.10.20-13
[...]io.jenkins.pluginsplugin-util-api${plugin-util-api.version}io.jenkins.pluginsfont-awesome-api${font-awesome-api.version}io.jenkins.pluginsbootstrap4-api${bootstrap4-api.version}io.jenkins.pluginsecharts-api${echarts-api.version}io.jenkins.pluginsdata-tables-api${data-tables-api.version}
[...]
[...]
或者,您可以查看?Warnings Next Generation 插件或Forensics API 插件的 POM 文件,它們已經(jīng)使用了這些插件。
報(bào)告的總體結(jié)構(gòu)
在本節(jié)中,我將解釋 Jenkins 設(shè)計(jì)的一些基礎(chǔ)知識(shí),即 Java 模型和相關(guān)的用戶界面元素。如果您已經(jīng)熟悉如何實(shí)現(xiàn)報(bào)告插件的相應(yīng)擴(kuò)展點(diǎn)(請(qǐng)參閱 Jenkins 開發(fā)人員指南中的可擴(kuò)展性部分),則可以跳過本節(jié),直接進(jìn)入第?3.1?節(jié)。
Jenkins 使用?圖 1?所示的靜態(tài)對(duì)象模型結(jié)構(gòu)來組織項(xiàng)目。
Jenkins 用戶界面中的頂級(jí)項(xiàng)目是工作(至少是我們感興趣的頂級(jí)項(xiàng)目)。Jenkins 包含多個(gè)不同類型的任務(wù)(自由式任務(wù)、Maven任務(wù)、流水線等)。
這些任務(wù)中的每一個(gè)都包含任意數(shù)量的構(gòu)建(或更確切地說,是運(yùn)行)。每個(gè)版本均有其唯一的版本號(hào)標(biāo)識(shí)。Jenkins 插件可以將結(jié)果附加到這些版本中,例如生成工件、測(cè)試結(jié)果、分析報(bào)告等。為了附加這樣的結(jié)果,插件在技術(shù)上需要實(shí)現(xiàn)并創(chuàng)建存儲(chǔ)這些結(jié)果的操作。
這些 Java 對(duì)象在幾種不同的視圖中可視化,以下各節(jié)將對(duì)其進(jìn)行詳細(xì)描述。顯示所有可用任務(wù)的頂級(jí)視圖如圖 2?所示。
插件還可以在這些視圖中提供 UI 元素,但這超出了本指南的范圍。
每個(gè)任務(wù)都有一個(gè)詳細(xì)視圖,插件可以在其中擴(kuò)展相應(yīng)的擴(kuò)展點(diǎn)并提供摘要框和趨勢(shì)圖。通常,在工作級(jí)別上不需要報(bào)告者摘要框,因此我僅更詳細(xì)地描述趨勢(shì)圖,請(qǐng)參見第?5.5.2?節(jié)。
每個(gè)版本也都有一個(gè)詳細(xì)視圖。在這里,插件可以提供類似于“工作詳細(xì)信息”視圖的框的摘要框。通常,插件在這里僅顯示簡短摘要,并提供指向詳細(xì)結(jié)果的鏈接,有關(guān)示例請(qǐng)參見圖 4。
視圖層次結(jié)構(gòu)中的最后一個(gè)元素實(shí)際上是一個(gè)專用視圖,它顯示特定插件的結(jié)果。例如,有些視圖可顯示測(cè)試結(jié)果,分析結(jié)果等。完全由給定的插件決定應(yīng)在此處顯示哪些元素。在接下來的幾節(jié)中,我將介紹一些新的 UI 組件,這些組件可用于以愉悅的方式顯示相應(yīng)的結(jié)果。
擴(kuò)展 Jenkins?對(duì)象模型
由于報(bào)告程序通常以類似的方式構(gòu)成,因此我用一些其他元素?cái)U(kuò)展了 Jenkins 的原始對(duì)象模型(參見圖 1),因此創(chuàng)建或?qū)崿F(xiàn)新的報(bào)告程序插件將更加簡單。這個(gè)新模型如圖 5?所示。中心元素是構(gòu)建操作,它將存儲(chǔ)插件報(bào)告程序的結(jié)果。此操作將附加到每個(gè)內(nèi)部版本,并將為報(bào)告者保存(并保留)結(jié)果。每個(gè)動(dòng)作的詳細(xì)數(shù)據(jù)將自動(dòng)存儲(chǔ)在其他文件中,因此,如果用戶從不要求提供詳細(xì)信息,則 Jenkins 的內(nèi)存占用空間可以保持較小。另外,該動(dòng)作還用于簡化項(xiàng)目動(dòng)作和趨勢(shì)圖的創(chuàng)建,請(qǐng)參見第?5.5.2?節(jié)。
Git Forensics 插件
本教程中的元素將全部在新的?Forensics API 插件中使用(實(shí)際上,該插件不是新的,它是?Warnings Next Generation?插件的依賴項(xiàng))。您可以下載插件內(nèi)容,并詳細(xì)了解如何在實(shí)踐中使用這些新組件。或者,您可以更改此插件,只是為了了解如何對(duì)這些新組件進(jìn)行參數(shù)設(shè)置。
如果您將 Git 用作源代碼管理系統(tǒng),則此插件將以犯罪現(xiàn)場(chǎng)代碼的樣式(Adam Tornhill,2013 年 11 月)挖掘存儲(chǔ)庫,以確定所包含源代碼文件的統(tǒng)計(jì)信息:
提交總數(shù)
不同作者總數(shù)
創(chuàng)建時(shí)間
最后一次編輯時(shí)間
該插件提供了一個(gè)新的步驟(或發(fā)布后的發(fā)布者)該步驟開始了存儲(chǔ)庫挖掘并將收集的信息存儲(chǔ)在 Jenkins 操作中(請(qǐng)參見圖 5)。然后,您將獲得一個(gè)新的構(gòu)建摘要,該摘要顯示掃描文件的總數(shù)(趨勢(shì)和構(gòu)建結(jié)果)。從這里,您可以導(dǎo)航到詳細(xì)信息視圖,該視圖在可以簡單排序和過濾的表中顯示掃描的文件。您還將獲得一些餅圖,這些餅圖顯示提交歷史記錄的重要方面。
請(qǐng)注意,插件的此功能仍是概念證明:此步驟的性能在很大程度上取決于 Git 存儲(chǔ)庫的大小和提交次數(shù)。當(dāng)前,它會(huì)掃描每個(gè)版本中的整個(gè)存儲(chǔ)庫。在不久的將來,我希望找到一個(gè)有志于用增量掃描儀替代這種愚蠢算法的志愿者。
引入新的?UI 組件
如第 3 節(jié)所述,詳細(xì)信息視圖特定于插件。顯示的內(nèi)容以及這些元素的顯示方式取決于各個(gè)插件作者。因此,在接下來的部分中,我將提供一些示例和新概念,插件可以將這些示例和新概念用作其自身內(nèi)容的構(gòu)建塊。
現(xiàn)代化圖表
Jenkins 插件通常不經(jīng)常使用圖標(biāo)。大多數(shù)插件都提供了操作圖標(biāo),僅此而已。如果您打算在其他地方使用圖標(biāo),那么插件作者將自己留著:推薦的 Tango 圖標(biāo)集已有 10 多年的歷史了,如今太有限了。有幾個(gè)選項(xiàng)可用,但最受歡迎的是?Font Awesome Icon Set。它提供超過 1500 個(gè)遵循相同設(shè)計(jì)準(zhǔn)則的免費(fèi)圖標(biāo):
為了在插件中使用 Font Awesome 圖標(biāo),您只需要依賴于相應(yīng)的?font-awesome-api-plugin?即可。然后,您可以在果凍視圖中使用新標(biāo)簽?svg-icon?來使用任何實(shí)心圖標(biāo):
index.jelly1
2
3 [...]
4
5 [...]
6
7
如果要使用 Java 代碼生成視圖,則也可以使用?SvgTag?類為此類圖標(biāo)生成 HTML 標(biāo)記。
柵格布局
目前,Jenkins 在所有視圖中都包含 Boostrap 柵格系統(tǒng)的舊版本和補(bǔ)丁版本(24 列)。該版本與 Boostrap4 或任何依賴 Bootstrap4 的 JS 庫不兼容。為了使用 Bootstrap4 功能,我們需要用補(bǔ)丁版本替換 Jenkins 提供的?layout.jelly?文件,該文件不會(huì)加載損壞的柵格系統(tǒng)。我打算創(chuàng)建一個(gè)PR,以修復(fù) Jenkins 核心中的柵格,但這將需要一些時(shí)間。在此之前,您將需要使用 Boostrap4 插件提供的?layout.jelly,請(qǐng)參見下文。
首先要確定的是,哪些元素應(yīng)顯示在插件頁面上以及每個(gè)元素應(yīng)占用多少空間。通常,所有可見組件都使用簡單的柵格映射到可用空間上。在 Jenkins 視圖中,我們具有固定的頁眉和頁腳以及左側(cè)的導(dǎo)航欄(水平空間的20%)。屏幕的其余部分可由詳細(xì)信息視圖使用。為了簡化剩余空間中元素的分布,我們使用?Bootstrap 的柵格系統(tǒng)。
這意味著,一個(gè)視圖被分為 12 列和任意數(shù)量的行。此柵格系統(tǒng)易于使用(但足夠復(fù)雜,還可以支持精美的屏幕布局)-我在這里不做詳細(xì)介紹,請(qǐng)參考?Bootstrap 文檔。
對(duì)于取證詳細(xì)視圖,我們使用兩行兩列的簡單柵格。由于列數(shù)始終為 12,因此我們需要?jiǎng)?chuàng)建兩個(gè)寬列以填充 6 個(gè)標(biāo)準(zhǔn)列。為了在我們的插件中創(chuàng)建這樣的視圖,我們需要?jiǎng)?chuàng)建一個(gè)以果凍文件和相應(yīng)的 Java 視圖模型對(duì)象形式給出的視圖。以下代碼段顯示了具有這種布局的視圖:
index.jelly1 <?jelly escape-by-default='true'?>
2
3
4
5
6
7
8
9
10
11
12 Content of column 1 in row 1
13
14
15 Content of column 2 in row 1
16
17
18
19
20
21 Content of row 2
22
23
24
25
26
27
28
使用基于 Bootstrap 的自定義布局:由于 Jenkins 核心包含舊版本的 Bootstrap,因此我們需要替換標(biāo)準(zhǔn)的 layout.jelly 文件。
導(dǎo)入 Bootstrap4:使用輔助概念完成 JS 和 CSS 組件的導(dǎo)入,這是在 Jenkins 的 Stapler Web 框架中引用靜態(tài)資源的首選方式。
整個(gè)視圖將被放入一個(gè)充滿整個(gè)屏幕(寬度為100%)的流體容器中。
視圖的新行由類?row?指定。附加類?py-3?定義了用于此行的填充,有關(guān)更多詳細(xì)信息,請(qǐng)參見 Bootstrap Spacing。
由于 Bootstrap 會(huì)自動(dòng)將一行分成 12 個(gè)相等大小的列,因此我們?cè)诖硕x第一列應(yīng)占據(jù)這 12 列中的 6 列。您也可以省略詳細(xì)編號(hào),然后 Bootstrap 將自動(dòng)在可用空間中分發(fā)內(nèi)容。請(qǐng)注意,在大多數(shù)情況下這不是您想要的。
第二列使用剩余空間,即 12 列中的 6 列。
第二行使用與第一行相同的布局。
第 1 行只有一列,它將填滿整個(gè)可用空間。
您還可以根據(jù)屏幕的實(shí)際可見大小為一行指定不同的列布局。這有助于改善大屏幕的布局。在警告插件中,您將找到一個(gè)示例:在小型設(shè)備上,有一張可見的卡片可以在輪播中顯示一張餅圖。如果要在較大的設(shè)備上打開同一頁面,則會(huì)并排顯示兩個(gè)餅圖,并且輪播會(huì)被隱藏。
? 卡片
當(dāng)將插件信息顯示為一個(gè)塊時(shí),通常會(huì)顯示純文本元素。通常,這將導(dǎo)致某些無關(guān)緊要的網(wǎng)頁。為了創(chuàng)建一個(gè)更具吸引力的界面,在具有邊框、標(biāo)題、圖標(biāo)等的卡片中顯示此類信息是有意義的。為了創(chuàng)建這樣的?Bootstrap 卡片,新的?Bootstrap 插件提供了一個(gè)小的果凍標(biāo)簽,該標(biāo)簽簡化了插件的此任務(wù)。可以通過以下方式在果凍視圖中輕松創(chuàng)建此類卡片:
12 Content of the card
3
在圖 8?中顯示了此類卡的示例。上排的卡片包含餅圖,這些餅圖顯示了整個(gè)存儲(chǔ)庫中作者和提交數(shù)量的分布。底部的卡在數(shù)據(jù)表中顯示詳細(xì)信息。可視化不僅限于圖表或表格,您可以在其中顯示任何類型的 HTML 內(nèi)容。您可以在這些卡中顯示插件的任何圖標(biāo),但是建議使用現(xiàn)有的?Font Awesome?圖標(biāo)之一,以在 Jenkins 的插件生態(tài)系統(tǒng)中獲得一致的外觀。
注意,卡片的大小由網(wǎng)格配置決定,請(qǐng)參見第 5.2 節(jié)。
?? 表格
用于顯示插件詳細(xì)信息的常見 UI 元素是表格控件。大多數(shù)插件(和 Jenkins 核心)通常使用純 HTML 表格。但是,如果表格應(yīng)顯示大量行,則使用像?DataTables?這樣的更復(fù)雜的控件更有意義。使用此基于 JS 的表控件可免費(fèi)提供其他功能:
通過文本搜索過濾結(jié)果
提供結(jié)果集的分頁
一次按多列排序數(shù)據(jù)
使用 Ajax 調(diào)用獲取表行
根據(jù)屏幕分辨率顯示和隱藏列
為了在視圖中使用?DataTables,有兩個(gè)選項(xiàng),您可以裝飾現(xiàn)有的靜態(tài) HTML 表(請(qǐng)參見第 5.4.1 節(jié))或使用 Ajax 填充表內(nèi)容(請(qǐng)參見第 5.4.2 節(jié))。
靜態(tài) HTML 內(nèi)容的表格使用 DataTables 的最簡單方法是創(chuàng)建一個(gè)靜態(tài) HTML 表格,只需調(diào)用 datatable 的構(gòu)造函數(shù)即可對(duì)其進(jìn)行修飾。這種方法在 Java 和 Jelly 方面不涉及任何特殊處理,因此我認(rèn)為只需遵循 DataTables 文檔中的示例即可。只需確保在您的 Jelly 文件中構(gòu)建了表之后,您需要使用以下代碼裝飾表:
[...]
[...]
[...]
用您的 HTML 表格元素的 ID 替換上面代碼中的 ID
到目前為止,在 Forensics 插件中還沒有使用過此類靜態(tài)表格,但是您可以查看警告插件中顯示固定警告的表,以了解如何裝飾此類表。
具有動(dòng)態(tài)模型內(nèi)容的表盡管靜態(tài) HTML 表格易于實(shí)現(xiàn),但它們有一些限制。因此,遵循更復(fù)雜的方法是有意義的。通常,用戶界面中的表是通過使用相應(yīng)的表(和行)模型定義的。自 Java 成立以來,Java Swing 成功地提供了這樣的表模型概念。我也為 Jenkins 和 DataTables 修改了這些概念。為了在 Jenkins 視圖中創(chuàng)建表,插件需要提供一個(gè)表模型類,該類提供以下信息:
表的 ID(因?yàn)橐晥D中可能有多個(gè)表)
列的模型(即列的編號(hào),類型和標(biāo)題標(biāo)簽)
表格的內(nèi)容(即各個(gè)行對(duì)象)
您可以在 Forensics 插件中找到此類表格的示例:此處的表格列出了 Git 存儲(chǔ)庫中的文件以及相應(yīng)的提交統(tǒng)計(jì)信息(作者數(shù)量、提交數(shù)量、最后修改、首次提交)。該表的屏幕截圖如圖 9?所示。
為了在 Jenkins 中創(chuàng)建這樣的表,您需要?jiǎng)?chuàng)建一個(gè)從?TableModel?派生的表模型類。在圖 10?中,顯示了取證插件中相應(yīng)類的圖。
?表格行
模型
表格模型類定義的第一件事是通過創(chuàng)建相應(yīng)的?TableColumn?實(shí)例來創(chuàng)建可用列的模型。對(duì)于每一列,您需要指定標(biāo)題標(biāo)簽和應(yīng)在相應(yīng)列中顯示的 bean 屬性的名稱(行元素實(shí)際上是 Java bean:每一列將顯示此類 bean 的一個(gè)獨(dú)特屬性,請(qǐng)參閱下一節(jié))。您可以通過簡單地提供基于?String?或?Integer?的列來使用任何受支持的列類型。
?表格行
內(nèi)容
此外,表模型類提供行的內(nèi)容。此?getRows()?方法將使用 Ajax 調(diào)用異步調(diào)用。通常,此方法僅返回 Java Bean 實(shí)例的列表,該列表提供每一列的屬性(請(qǐng)參見上一節(jié))。這些對(duì)象將自動(dòng)轉(zhuǎn)換為 JSON 對(duì)象數(shù)組,這是 DataTables API 所需的基本數(shù)據(jù)結(jié)構(gòu)。您可以在?ForensicsTableModel?類的取證插件的 Git 存儲(chǔ)庫中找到一個(gè)可以正常工作的示例表模型實(shí)現(xiàn)。
為了在插件視圖中使用這樣的表,您需要使用新的?table?標(biāo)簽在關(guān)聯(lián)的 Jelly 文件中創(chuàng)建表:
index.jelly[...]
[...]
用自己的 ID 替換上面代碼的 ID
您需要為表提供的唯一參數(shù)是 model,它通常是對(duì)應(yīng)的 Jenkins 視圖模型類的一部分(此對(duì)象在視圖中用${it}引用)。為了將對(duì)應(yīng)的 Jenkins 視圖模型類與表連接,視圖模型類需要實(shí)現(xiàn)?AsyncTableContentProvider?接口。甚至更簡單,讓您的視圖模型類派生自?DefaultAsyncTableContentProvider。此關(guān)系是必需的,以便 Jenkins 可以自動(dòng)創(chuàng)建和綁定 Ajax 調(diào)用的代理,該代理將在創(chuàng)建 HTML 頁面后自動(dòng)填充表內(nèi)容。
如果將所有這些部分放在一起,則需要定義一個(gè)類似于 Forensics 插件的模型的模型,如圖 11?所示。
如在圖 5?中已經(jīng)描述的,插件需要將?BuildAction?附加到每個(gè)構(gòu)建。Forensics 插件將?ForensicBuildAction?附加到構(gòu)建。該操作存儲(chǔ)一個(gè)?RepositoryStatistics?實(shí)例,該實(shí)例包含給定構(gòu)建的存儲(chǔ)庫結(jié)果。該操作將所有 Stapler 請(qǐng)求委派給新的?Stapler 代理實(shí)例,因此我們可以使該操作清除用戶界面代碼。然后,此?ForensicsViewModel?類充當(dāng)視圖模型,為文件?index.jelly?給出的相應(yīng) Jelly 視圖提供服務(wù)器端模型。
雖然這種方法在第一眼看上去很復(fù)雜,但是您會(huì)看到實(shí)際的實(shí)現(xiàn)部分很小。基本類已經(jīng)提供了大多數(shù)樣板代碼,您只需要實(shí)現(xiàn)一些方法即可。使用此概念還提供了一些其他功能,這些功能是 DataTables 插件的一部分:
列的順序會(huì)自動(dòng)保存在瀏覽器本地存儲(chǔ)中。
分頁大小會(huì)自動(dòng)保存在瀏覽器本地存儲(chǔ)中。
僅當(dāng)表格可見時(shí)才實(shí)際調(diào)用 Ajax 調(diào)用。因此,如果選項(xiàng)卡中隱藏了幾個(gè)表,則僅按需加載內(nèi)容,從而減少了要傳輸?shù)臄?shù)據(jù)量。
有一個(gè)選項(xiàng)可用于提供其他詳細(xì)信息行,該行可以用 + 符號(hào)擴(kuò)展,有關(guān)詳細(xì)信息,請(qǐng)參閱?warnings plugin table。
圖表
插件報(bào)告程序通常還會(huì)報(bào)告從構(gòu)建到構(gòu)建的某種趨勢(shì)。到目前為止,Jenkins 核心僅提供了一個(gè)非常有限的概念來呈現(xiàn)諸如趨勢(shì)圖之類的趨勢(shì)。Jenkins 核心提供的?JFreeChart?框架是服務(wù)器端渲染引擎,可將圖表創(chuàng)建為靜態(tài) PNG 圖像,并將其包含在任務(wù)和詳細(xì)信息頁面中。如今,有幾個(gè)功能強(qiáng)大的基于 JS 的圖表庫可供使用,它們?cè)诳蛻舳送瓿上嗤墓ぷ?實(shí)際上甚至做得更好)。這樣做的好處是可以在每個(gè)客戶端上自定義這些圖表,而不會(huì)影響服務(wù)器性能。此外,您還可以免費(fèi)獲得許多其他功能(例如縮放,動(dòng)畫等)。此外,這些圖表庫不僅支持典型的構(gòu)建趨勢(shì)圖,而且還支持許多其他圖表類型,可用于改善插件的用戶體驗(yàn)。這些圖表庫之一是?ECharts:該庫具有強(qiáng)大的 API,并且實(shí)際上支持一個(gè)人可以想象的每種圖表類型。您可以在庫的示例頁面上獲得一些功能印象。
為了使用這些圖表,可以通過導(dǎo)入相應(yīng)的 JS 文件并在相應(yīng)的 Jelly 文件中定義圖表來嵌入使用該庫的圖表。盡管這已經(jīng)很好地工作了,但是從詹金斯的構(gòu)建結(jié)果中為這些圖表提供相應(yīng)的模型仍然有些麻煩。因此,我添加了功能強(qiáng)大的 Java API,可幫助在 Java 端為這些圖表創(chuàng)建模型。該 API 提供以下功能:
根據(jù)構(gòu)建結(jié)果的集合創(chuàng)建趨勢(shì)圖。
將圖表類型與聚合分開,以簡化圖表模型的單元測(cè)試。
在內(nèi)部版本號(hào)或內(nèi)部版本日期之間切換 X 軸的類型(自動(dòng)匯總當(dāng)天記錄的結(jié)果)。
將 Java 模型自動(dòng)轉(zhuǎn)換為 JS 端所需的 JSON 模型。
支持餅圖和折線圖(更多內(nèi)容即將推出)。
這些圖表可以在項(xiàng)目頁面中用作趨勢(shì)圖(請(qǐng)參見圖 3),也可以在插件的詳細(xì)信息視圖中用作信息圖(請(qǐng)參見第 5 節(jié))。
餅狀圖一個(gè)簡單但仍然有用的圖表是一個(gè)餅圖,它說明了插件數(shù)據(jù)的數(shù)字比例。在 Forensics 插件中,我使用此圖表來顯示 Git 存儲(chǔ)庫中源代碼文件的作者或提交數(shù)量的數(shù)字比例(請(qǐng)參見圖 8)。在警告插件中,我使用此圖表顯示新警告,突出警告或固定警告的數(shù)字比例,請(qǐng)參見圖 12。
為了在您的詳細(xì)信息視圖中包括這樣的圖表,您可以使用提供的?pie-chart?標(biāo)簽。在以下代碼片段中,您可以看到此標(biāo)簽的使用情況(嵌入在 Bootstrap 卡片中,請(qǐng)參見第 5.3 節(jié)):
index.jelly1 <?jelly escape-by-default='true'?>
2
3
4 [...]
5
6
7
8 [...]
9
10
您需要為此圖表提供唯一的 ID 和相應(yīng)的模型值。該模型必須是對(duì)應(yīng)的?PieChartModel?實(shí)例的 JSON 表示形式。可以使用以下幾行來創(chuàng)建這樣的模型:
ViewModel.java1 [...]
2 PieChartModel model = new PieChartModel("Title");
3
4 model.add(new PieData("Segment 1 name", 10), Palette.RED);
5 model.add(new PieData("Segment 2 name", 15), Palette.GREEN);
6 model.add(new PieData("Segment 3 name", 20), Palette.YELLOW);
7
8 String json = new JacksonFacade().toJson(model);
9 [...]
任務(wù)級(jí)別視圖上的趨勢(shì)圖
為了顯示在任務(wù)頁面上呈現(xiàn)折線圖的趨勢(shì)(請(qǐng)參見圖 3),您需要提供一個(gè)所謂的浮動(dòng)框(存儲(chǔ)在任務(wù)操作的?floatBox.jelly?文件中(請(qǐng)參見第 3 節(jié)))。該文件的內(nèi)容非常簡單,僅包含一個(gè)?trend-chart?標(biāo)簽:
floatingBox.jelly1 <?jelly escape-by-default='true'?>
2
3
4
5
6
在 Java 方面,需要在?JobAction?的相應(yīng)子類(浮動(dòng)框的所有者)中提供圖表的模型。由于趨勢(shì)圖的計(jì)算在服務(wù)器端也非常昂貴(需要從磁盤讀取多個(gè)構(gòu)建,并且需要計(jì)算有趣的數(shù)據(jù)點(diǎn)),因此該過程已放入單獨(dú)的后臺(tái)任務(wù)中。一旦計(jì)算完成,將通過 Ajax 調(diào)用顯示結(jié)果。為了為插件作者隱藏這些詳細(xì)信息,您應(yīng)該簡單地從相應(yīng)的?AsyncTrendJobAction?類派生?JobAction?類,該類已經(jīng)包含樣板代碼。因此,您的靜態(tài)插件對(duì)象模型實(shí)際上會(huì)變得有些復(fù)雜:
基本上,您需要實(shí)現(xiàn)?LinesChartModel 方法 createChartModel()?來創(chuàng)建折線圖。該方法的實(shí)現(xiàn)非常簡單,因?yàn)榇蠖鄶?shù)艱苦的工作都是由庫提供的:從最新的構(gòu)建開始,您將使用構(gòu)建動(dòng)作的迭代器進(jìn)行調(diào)用。迭代器從一個(gè)版本開始構(gòu)建,直到?jīng)]有更多可用結(jié)果為止(或已達(dá)到要考慮的最大構(gòu)建數(shù)量)。在插件中實(shí)現(xiàn)的最重要的事情是如何為給定的?BuildAction?計(jì)算數(shù)據(jù)點(diǎn)。這是取證插件中此類?SeriesBuilder?實(shí)現(xiàn)的示例:
FilesCountSeriesBuilder.java1 package io.jenkins.plugins.forensics.miner;
2
3 import java.util.HashMap;
4 import java.util.Map;
5
6 import edu.hm.hafner.echarts.SeriesBuilder;
7
8 /**
9 * Builds one x-axis point for the series of a line chart showing the number of files in the repository.
10 *
11 * @author Ullrich Hafner
12 */
13 public class FilesCountSeriesBuilder extends SeriesBuilder {
14 static final String TOTALS_KEY = "total";
15
16 @Override
17 protected Map computeSeries(final ForensicsBuildAction current) {
18 Map series = new HashMap<>();
19 series.put(TOTALS_KEY, current.getNumberOfFiles());
20 return series;
21 }
22 }
您不僅限于單個(gè)折線圖。您可以在一個(gè)圖表中顯示多條線,可以顯示堆疊的值,甚至可以顯示某些值之間的差異。您也可以查看?charts of the warnings plugin,了解其中一些功能。
查看文中鏈接,請(qǐng)點(diǎn)擊【閱讀原文】
推薦閱讀
介紹新的 GitLab 分支源插件
第9期 Jenkins 社區(qū)在線交流
Jenkins CLI 命令行 v0.0.26
歡迎使用流水線指令-矩陣
原創(chuàng) Jenkins 創(chuàng)始人 Kohsuke 的新篇章
譯者:wenjunzhangp
總結(jié)
以上是生活随笔為你收集整理的jenkins修改pom文件_动手实践:美化 Jenkins 报告插件的用户界面的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 杭州治疗男人精子活力低最好的医院推荐
- 下一篇: 开封治疗男人精子活力低最好的医院推荐