Possible to manually render UI without MVC dependency?

[petertiedemann]

I am using MiniProfiler in an ASP.NET WebAPI service host (that will soon transition to ASP.NET Core). The application using it is is developed separately using JS. I am currently using RenderPlainText to provide information back from an end-point, but it does not render everything i would like (SQL not expanded as far as i can see ). I could of course just write some custom code to print what i like, but it seems silly when there is an actual UI available.

I noticed that there are methods like RenderIncludes so i was wondering if there would happen to be a nice way to generate the necessary HTML statically or similar?

[RubberChickenParadise]

I just ran into this. I found this stack overflow post https://stackoverflow.com/questions/53321634/unable-to-print-query-using-miniprofiler and use this code

public static string CustomRenderPlainText(this MiniProfiler profiler, bool htmlEncode = false)
        {
            if (profiler == null) return string.Empty;

            var text = StringBuilderCache.Get()
                .Append(htmlEncode ? WebUtility.HtmlEncode(Environment.MachineName) : Environment.MachineName)
                .Append(" at ")
                .Append(DateTime.UtcNow)
                .AppendLine();

            var timings = new Stack<Timing>();
            timings.Push(profiler.Root);

            while (timings.Count > 0)
            {
                var timing = timings.Pop();

                text.AppendFormat("{0} {1} = {2:###,##0.##}[ms]",
                    new string('>', timing.Depth),
                    htmlEncode ? WebUtility.HtmlEncode(timing.Name) : timing.Name,
                    timing.DurationMilliseconds);

                if (timing.HasCustomTimings)
                {
                    // TODO: Customize this code block.

                    // Custom timings grouped by category. Collect all custom timings in a list.
                    var customTimingsFlat = new List<KeyValuePair<string, CustomTiming>>(capacity: timing.CustomTimings.Sum(ct => ct.Value.Count));
                    foreach (var pair in timing.CustomTimings)
                    {
                        var type = pair.Key;
                        var customTimings = pair.Value;

                        customTimingsFlat.AddRange(pair.Value.Select(ct => KeyValuePair.Create(type, ct)));
                        text.AppendFormat(" ({0} = {1:###,##0.##}[ms] in {2} cmd{3})",
                            type,
                            customTimings.Sum(ct => ct.DurationMilliseconds),
                            customTimings.Count,
                            customTimings.Count == 1 ? string.Empty : "s");
                    }

                    foreach (var pair in customTimingsFlat.OrderBy(kvp => kvp.Value.StartMilliseconds))
                    {
                        var type = pair.Key;
                        var ct = pair.Value;

                        text.AppendLine();
                        var mainPart = string.Format("{0}{1} {2:###,##0.##}[ms] +{3:###,##0.##}[ms] ",
                                            new string(' ', timing.Depth + 2),
                                            type,
                                            ct.DurationMilliseconds,
                                            ct.StartMilliseconds);
                        text.Append(mainPart);
                        // Shift command text to closer to the command for better readability.
                        var prefix = new string(' ', mainPart.Length);
                        string cmdLine = null;
                        using (var reader = new StringReader(ct.CommandString))
                        {
                            while ((cmdLine = reader.ReadLine()) != null)
                            {
                                text.Append(cmdLine);
                                if (reader.Peek() == -1 && profiler.Options.ExcludeStackTraceSnippetFromCustomTimings)
                                {
                                    break;
                                }
                                text.AppendLine();
                                text.Append(prefix);
                            }
                        }

                        if (profiler.Options.ExcludeStackTraceSnippetFromCustomTimings)
                        {
                            continue;
                        }
                        text.Append(ct.StackTraceSnippet);
                    }
                }

                text.AppendLine();

                if (timing.HasChildren)
                {
                    var children = timing.Children;
                    for (var i = children.Count - 1; i >= 0; i--) timings.Push(children[i]);
                }
            }

            return text.ToStringRecycle();
        }

It got me what I needed and can obviously be improved upon for your needs.

[petertiedemann]

It got me what I needed and can obviously be improved upon for your needs.

Thanks, i ended up digging out the source code of RenderPlainText and did something very similar to that snippet. As you say, it covers the basics, it just annoys me not to have access to the "fancy" UI :)

[NickCraver]

Catching up on issues here - are you saying you want to generate the <script> tag? (and it does the request as normal), or you want to take a MiniProfiler's JSON representation and use the JavaScript to render it?

[petertiedemann]

Catching up on issues here - are you saying you want to generate the <script> tag? (and it does the request as normal), or you want to take a MiniProfiler's JSON representation and use the JavaScript to render it?

I was basically wondering if there was an easy way to render the UI without involving ASP.NET MVC, e.g. instead of RenderPlainText, then RenderHTML(including any needed scripts).

To provide a bit of background we have ASP.NET (soon to be ASP.NET Core) WebAPI hosting a mix of REST and GraphQL API's that are consumed by a React frontend, and we are considering how to best make use of the profiling results. One option is to integrate it into the API response to display as part of the app itself (if you are logged in as a developer), as i believe its done on StackOverflow (at least i think i saw that in a video), the other is to store the results and view it later.

The first requires a bit more changes that the team is interested in investing in this, therefore I have so far been using the second option (keeping entires in-memory), but still trying to avoid adding MVC to the project. So far I simply used an API controller to return a slightly modified version of RenderPlainText, but i would of course like to have the actual UI instead, hence the question.

Of course, we could add a separate MVC application, and use a DB to store the results, but i would like to avoid that.

[rhullah]

I'd like to 👍 this too.

We have a SPA frontend calling an ASP.NET API backend which uses MiniProfiler. And I'd like to expose the profiler results in the UI. I'd love for there to be a "MiniProfiler.(JS Framework)" package I could install into my frontend to surface those results. Or at least some sort of direction/documentation of how to add the appropriate JS includes/scripts, to then expose the UI/data appropriately.

[NickFranceschina]

I have done this for my Angular app in the following manner:

server controller method that returns the <script> tag that the MiniProfiler would have rendered in MVC:

// https://github.com/MiniProfiler/dotnet/blob/main/src/MiniProfiler.Shared/Internal/Render.cs
return MiniProfiler.Current?.RenderIncludes(HttpContext).Value

then on client I fetch that <script> tag from controller method and parse into a fragment and insert into the DOM manually:

// from inside app.module.ts
const frag = window.document.createRange().createContextualFragment(settings.profilerInclude);
window.document.body.appendChild( frag );