Update glimpse tab plugin data using ajax

Question

I'm trying to create a custom glimpse plugin that shows us some information from our server.

When I open the page I get all the data I need but I want to be able to update this data once every 20 seconds(or when i click on a button in the tab) without having to refresh the entire page.

I've managed to add my JavaScript to the page and subscribe to the render and shown events, but i don't know how to update the tab content when something happens.

This is my tab

    public class EagleTab : AspNetTab
    {
        private readonly IGlimpseInterventionService _glimpseInterventionService;
        public EagleTab()
            :this(new GlimpseInterventionService()){}

        public EagleTab(IGlimpseInterventionService glimpseInterventionService)
        {
            _glimpseInterventionService = glimpseInterventionService;
        }
        public override object GetData(ITabContext context)
        {
            var interventionSection = new TabSection("Last modification", "Last Message","Time since last modification","CSE","DPS", "Start Date","End date");
            var now = DateTime.Now;
            var twoHoursThresshold = new TimeSpan(1,0,0);
            foreach(var inv in _glimpseInterventionService.GetActiveInterventions()){
                var timeSinceLastMod = now - inv.LastModification;
                    interventionSection.AddRow()
                        .Column(inv.LastModification)
                        .Column(inv.LastMessage)
                        .Column(timeSinceLastMod.ToString("c"))
                        .Column(inv.CSEName)
                        .Column(inv.DPSName)
                        .Column(inv.StartDate)
                        .Column(inv.EndDate).WarnIf(timeSinceLastMod<twoHoursThresshold);
            }
            var plugin = Plugin.Create("Section", "Data");
            plugin.AddRow().Column("Active interventions").Column(interventionSection);
            return plugin;
        }
        public override string Name
        {
            get { return "Eagle Tab"; }
        }
    }

And this is the JavaScript

    (function ($, pubsub, tab, render) {
        'use strict';
        function refreshTabContent(){
            //what am I supposed to do here
        }
        pubsub.subscribe('action.panel.rendering.eagle_glimpse_plugins_eagletab', function (args) {

        });
        pubsub.subscribe('action.panel.showed.eagle_glimpse_plugins_eagletab', function (args) {
            setTimeout(refreshTabContent,30000);
        });

    })(jQueryGlimpse, glimpse.pubsub, glimpse.tab, glimpse.render);

As you can see in the js there is a function called refreshTab i want there to update the content of the tab.

I know that i could make an Ajax call to a controller of mine get the data and then try updating the panel using jQuery but that just seams a bit wrong and i'm hoping there's a better way.

Any tutorial or documentation about glimpse client side extensibility would be welcomed as well.

Answer 1

You have gotten a fairly large amount of the way towards your goal. Unfortunately though there isn't really a way of getting data from a tab outside of a request. That said, there is a "Glimpse" way of getting data from the server. This is small semantic difference, but it has to do with server data, vs request data.

If I was you, I would probably write this as a client side only tab and not implement AspNetTab. Here are some examples of how this can be done. Next I would implement a Resource. Unfortunately its not very well documented but fortunately its not very hard to work with.

This repo has some examples of how to work with client tabs back to resources. Specifically the Inventory tab is a tab that lets people mouse over products in the site and have the tab show stock levels. Here is the resource and here is the client code that interacts with the resource (given what you have so far, this should be fairly easy to adapt. Lastly, as a bonus, if you haven't seen it already, here is how to include your script into your page. Note, the commits on that repo are the step by step guid to how things come together.

Let me know if that helps.