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

    Ребята из 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. Спасибо большое нашему тестировщику Артему Тюрину, написавшему данное расширение.
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 1

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое