vidok Sep 5 2011 at 10:40

Расширение Google Crome для мониторинга сборок TeamCity

4 min

1.8K

Ребята из JetBrains радуют нас своим замечательным Continuous Integration сервером TeamCity. Одна из самых главных задач такого сервера, является очень быстрый feedback, с чем TeamCity великолепно справляется. В коробке имеется много нотификаторов (IntelliJ Platform plugin, Windows Tray Notifier, Addin for Visual Studio, Eclipse Plugin, Syndication Feed) и для программистов этого хватает. Наш отдел тестирования не имеет желания запускать у себя Idea и подобные «страшные штуки», для того что бы видеть статус сборки.

Так как у нас преимущественно web проекты и тестировщики 60% своего рабочего времени используют браузер, то логично было бы попробовать написать не большое расширение для мониторинга сборок.

Само расширение как и его код не претендуют на премию.
Исходники + пакет

Основная идея заключается в том, что мы опрашиваем CI сервер на статусы сборок и в случае сломанных рисуем красную циферку рядом с иконкой расширения, что несомненно привлечет внимание. Все достаточно просто.

manifest.json. Здесь все стандартно

{
   "background_page":   "background.html",
   "browser_action": 
   {
      "default_icon":   "images/icon19.png",
      "default_title":  "TeamCity Checker",
      "popup":          "popup.html"
   },
   "description":       "Team City Checker Extension",
   "icons": 
   {
      "128":            "images/icon128.png",
      "16":             "images/icon16.png",
      "32":             "images/icon32.png",
      "48":             "images/icon48.png"
   },
   "name":              "TeamCity Checker",
   "options_page":      "options.html",
   "permissions":       [ "http://*/", "tabs" ],
   "version":           "1.1"
}

Следующим шагом создадим страницу настроек для расширения options.html.

<html>
    <head>
        <title>TeamCity Checker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
        <meta http-equiv="Content-Language" content="ru-RU" >
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/options.js"></script>
    </head> 
    <body onload="restore_options()">
        <table>
            <tr>
                <td><img src="images/icon128.png" style="width:64px" /></td>
                <td style="padding-left:15px;">
                    URL TeamCity Server (к примеру, http://192.168.0.2:8111):<br />
                    <input id="server" type="text" style="width:500px" value="" />
                    <br />
                    Timeout:
                    <br />
                    <select id="timeout">
                        <option value="5">5 sec.</option>
                        <option value="10" selected>10 sec.</option>
                        <option value="15">15 sec.</option>
                        <option value="30">30 sec.</option>
                        <option value="60">60 sec.</option>
                    </select>
                    <br />
                    <button onclick="save_options()">Сохранить</button>
                </td>
            </tr>
        </table>
    </body>
</html>

дальше пишем обработчик настроек расширения options.js

   function save_options() {
    localStorage["server"] = $("#server").val();
    localStorage["timeout"] = $("#timeout").val();
    chrome.extension.getBackgroundPage().init();
}
function restore_options() {
    var server = localStorage["server"], timeout = localStorage["timeout"];
    if (!server) return;
    $("#server").val(server);
    $("#timeout [value='" + timeout + "']").attr("selected", "selected");
}

Обработчик всплывающего окна по клику на иконку расширения

function iResize() {
    var iFrames = $('iframe');
    for (var i = 0, j = iFrames.length; i < j; i++) {
        iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 250 + 'px';
        iFrames[i].style.width = iFrames[i].contentWindow.document.body.offsetWidth + 20 + 'px';
    }
}
function loading() {
    var server = localStorage["server"];
    if (server) {
        if(server[server.length - 1] != "/") server = server + "/";
        jQuery('#status').html(jQuery('<iframe\>').attr({'src': server + 'externalStatus.html?withCss=true', 'height':'auto', 'scrolling':'yes', 'frameborder':'0'}));
        iResize();
    }
}

файл background.js делает очень много работы. Приводить его здесь не вижу смысла. Так как он достаточно большой. И тем более он есть в исходниках.
Скажу лишь что одна из его задач получать статистику и при сломанных сборках и уведомлять пользователя об этом событии.

А теперь перейдем непосредственно к настройкам сборок для отображения в нашем расширении. Для этого необходимо авторизоваться в Team City с правами администратора, зайти в редактирование основных настроек той сборки, которую вы хотите отображать и в секции «Build options» поставить галочку напротив меню enable status widget. Ну вот, теперь можно мониторить состояние наших сборок, не отвлекаясь на прочтение habrahabr!

Вот так выглядит страница настроек

А так popup окно

Видим что сломалась одна сборка :(
Так же в всплывающем окне разместили ссылки на артефакты для быстрого скачивания.
Примем любую критику и предложения.

p.s. Спасибо большое нашему тестировщику Артему Тюрину, написавшему данное расширение.

Tags:

Hubs:

Programming