Pull to refresh

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

Programming
Ребята из 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:CIGoogle Chrometeamcity
Hubs: Programming
Total votes 6: ↑5 and ↓1 +4
Views1.6K

Comments 1

Only those users with full accounts are able to leave comments. Log in, please.

Popular right now