New UI Impact Series - Widget Improvements
Here at LogicMonitor, we’ve made some big changes to our dashboard - specifically Widget Improvements. These new widgets are designed to increase the depth and breadth of information available at a glance. One enhancement is the ability to display text data alongside metric data in table widgets. Users can now incorporate property values and instance descriptions within their metric displays, providing crucial context for performance data. For example, when monitoring Kubernetes pods, administrators can now view performance metrics alongside namespace information, enabling quick identification of patterns or issues within specific namespaces. This integration of metadata with performance metrics streamlines the troubleshooting process and enhances overall monitoring efficiency. LogicMonitor is also introducing new log widgets that will allow users to display log data alongside metric data. This upcoming feature will enable users to view log query results in both widget and report formats, providing a more complete picture of system performance and behavior. The impact of these improvements extends beyond mere convenience. By consolidating different types of monitoring data into a single dashboard view, IT teams can make faster, more informed decisions. The ability to correlate performance metrics with contextual information like property values and log data reduces the need to switch between different views or tools, ultimately leading to more efficient monitoring and troubleshooting processes. These enhancements demonstrate LogicMonitor's understanding of how IT professionals work and what they need to maintain peak system performance. Want to know more about Widget Improvements? Check out these support documentation: Widgets Overview Widgets Management
Adding Weather to Map Widgets
LogicMonitor's Map widgets are a great and easy way to plot resources/groupsgeographically, including their status. A question that comes up occasionally is if it's possible to show weather information on top of these maps. While there's currently not a native option to show weather on a Map widget, it is possible to inject a weather layer onto an existing map with a bit of JavaScript. Below is a link to a sample dashboard that can insert various types of weather info onto Map widgets.Simply save the linked JSON file to your local workstation, then in your LogicMonitor portal go to Dashboards and click Add > From File. Dynamic_Weather_Overlay.json The magic happens in JavaScript embedded in the source of the Text widget. Feel free to explore the source code by entering the Text widget's Configure dialog and clicking the 'Source' button. In typical overkill fashion, I included the option for several differenttypes of weather information. The script looks for the following text (regardless of case) in the Map widget's title and adds the appropriate weather/info layer: "Radar" or "Precip" "NEXRAD Base" "NEXRAD Echo Tops" "MRMS" "Temperature" (OpenWeatherMap.org API key required) "Wind Speed" (OpenWeatherMap.org API key required) "Cloud Cover" or "Satellite" (OpenWeatherMap.org API key required) "fire"(for including perimeters of active wildfires) Prerequisites If you want to use one of the map types noted above as needing an API key (the other types use free APIs that don't require a key), you'll need to register for a free account on OpenWeatherMap.org. Once you've obtained an API key, just add a new dashboard token named 'OpenWeatherAPIKey' and paste your key into its value field.Alternatively, you can also hard-code the key directlyin the 'openWeatherMapsAPIKey' variable near the top of the script. The weather overlays should auto-update when the widgets performtheir regular timed refresh. For instance, new radar imagery is made available every 10 minutes and will update automatically. Weather sources currently defined within this script: RainViewer.com- Excellent source of global weather imaging data. Updates approx. every 10 minutes. Used by the script for radar/precipitation maps. Open Geospatial Consortium- Hosted by Iowa State University, an excellent free source of weather data. Since it sources data from the US National Weather Service, its data is local just US and Canada. Used by the script for NEXRAD and MRMS data. OpenWeatherMap.org- Good source for some weather data such as wind speed, temperature, and cloud cover. Requires use of an API key, which is available for free. National Interagency Fire Center - For data about active US wildfires. Known Issues: When switching to a different dashboard containing a Map widget, it's possible weather may still be visible on the new dashboard. If that happensjust refresh the page.
Live Twitter Feeds in Text Widgets
Below is a fairly simple process to add any public facing twitter feed to widgets on a dashboard. Some use cases I hear a lot from customers is that they liketo see companies twitter feeds along their own service health dashboards because sometimes social media moves faster than status pages or email updates. This will all be done within a Text Widget. There is an option to utilize source code, we’ll be working in there. Make sure you have the frame of an HTML page set up, You can add any title you want. Tags with spaces will have sections added to them below. <html> <title> </title> <body> </body> </html> <script> </script> The first step is to go tohttps://publish.twitter.com/. Put in the URL of the profile you want,ex: twitter.com/Microsoft365, and select its embedded feed. The website will give you an <a class>HTML code to copy. Put the<a class>section into the <body>. It should look like this: <html> <title> </title> <body> <a class="twitter-timeline" href="https://twitter.com/Microsoft365?ref_src=twsrc%5Etfw">Tweets by Microsoft365</a> </body> </html> <script> </script> There will be a <script>portion of the copied code, paste that into a notepad and take it out of the above. We will be using it in the next section. Next, we need to navigate to that .js link in the <script> section, you should do this in a separate tab. That page will lead you to the full JS code. Copy that code and paste it into the <script> section in your HTML frame. It should look like this: <html> <title> </title> <body> <a class="twitter-timeline" href="https://twitter.com/Microsoft365?ref_src=twsrc%5Etfw">Tweets by Microsoft365</a> </body> </html> <script> JS Code here </script> From there, save and close the widget. If done correctly it should look like this (It may take a few seconds to load): Some helpful tips: Changing the widget refresh frequency also changes the feed update frequency Once created, the widget can be cloned and changed to another twitter handle with relative ease Usually goes alongside Dashboards for Health/Status Monitoring and can give additional context
