Make Hangfire Dashboard Full Width (and custom styling)

user_1266682 0
Viewed 429

For now, there doesn't seem to be a documented way to easily change Hangfire's Dashboard layout and styling to accomplish tasks like:

  • Use the full browser width (annoying when you have long Job Ids and Names)
  • Can't tweak the styling to better match a parent's site look, adjust grid column widths, etc

There have been Hangfire pull requests to add this type of feature, but nothing that's been integrated into Hangfire.Core, nor a plugin that I could find. After looking at the core source myself, I figured it would be too much of a pain to maintain my own fork just to add this customization.

So, what's a dev to do?

hangfire
2 Answers

Here's one way to re-style the Hangfire Dashboard that is fairly lightweight, but requires same origin.

High-level:

  • Setup Hangfire per usual, setup the Dashboard, make sure things are working
  • Instead your linking directly to your configured Hangfire Dashboard link (e.g. /Admin/Hangfire), create an page on your site with an iframe that points to the Hangfire Dashboard.
  • Use a combo of js and css to tweak the dashboard iframe from the parent page.

Quick example:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="iframeTest.aspx.cs" Inherits="WebApp.iframeTest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .hf {
            border: none;
            width: 100%;
            height: 500px;
        }
    </style>
    <script type="text/javascript">
        function FixHangFireStyling() {
            //Set page/container to full width
            $("#wrap .container", frames['hf'].document).css("margin-left", "10px");    //adjust the px value as your parent layout requires
            $("#wrap .container", frames['hf'].document).css("margin-right", "250px");  //adjust the px value as your parent layout requires
            $("#wrap .container", frames['hf'].document).css("width", "100%");

            //Remove the word breaking and predefined column (td) widths on the grids
            $(".js-jobs-list-row td", frames['hf'].document).css("width", "auto");
            $(".js-jobs-list-row td", frames['hf'].document).css("word-break", "normal");
        };

        function FixHeight(obj) {
            //Auto adjust the height of the iframe based on the height of the Hangfire page (adds an extra 250 to account for my page parent page's height/layout)
            obj.style.height = (obj.contentWindow.document.documentElement.scrollHeight + 250) + 'px';
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="right_col" role="main">
        <div class="col-md-12">
            <iframe class="hf" name="hf" id="hf" src="/Admin/Hangfire" onload="FixHangFireStyling(); FixHeight(this)" scrolling="no"></iframe>
        </div>
    </div>
</asp:Content>

And the result (full width, styling reapplied when navigating within the iframe, grid column adjustments to get rid of annoying text wrapping, and a quick iframe height auto-adjustment):

Customized Hangfire Dashboard

(24"W Monitor, 1920px resolution)

user_12666820

I currently use Stylus, and create some css for hangfire dashboard. Here very simple css. Paste into Stylus editor

.container,
.navbar > .container {
    width: 90%
}

Before Stylus enter image description here

After Stylus enter image description here

user_94369940
Related