Skip to main content

Close on click on grid and sequence diagrams

· One min read

Do you fancy a quicker overview of items content? Without having to get to this remote close icon to close the detail panel?

Thanks to Bertrand who kindly ask for it, it is now easy :)

  • Clicking on the grid opens the details
  • Clicking again closes them !

Demo:

Talk to your doctor, it is better for your health to save those pixels of mouse movements ;)

For consistency, the same applies for sequence diagrams! Of course :)

Dark theme is here !!

· One min read

Thanks to new Material UI features, I introduced the dark mode into Spider UI. One click in the settings, and you're ready for your long night work ;-)

Groovy :) !!

Excel export

· One min read

Another Bertrand request: you may now export the grid to an Excel file. All settings made to the grid are transferred to the Excel output:

  • Selected columns
  • Size of columns
  • Duration unit
  • And nice formatters

It is ready with predefined filter area and some metadata from the current search filters on Spider.

Fullscreen grid / sequence diagram or stats

· One min read

Again, Bertrand raised the fact that the map of the network is not needed for certain use cases. He asked if there was a way to hide it and go full screen for the grid.

Here it is ;) ! You may now enlarge the bottom drawer to the full height of you screen (minus search and timeline).

HTTP duration in milliseconds

· One min read

Requested by Michal K, Bertrand and who else, I added the possibility to choose the unit for the HTTP durations, between seconds and milliseconds.

I may look simple, but it impacts many places where i had to inject a single component (hopefully) to update all at once:

  • Grid
  • Sequence diagram
  • Details tab
  • Diff tab
  • Filter histogram
  • Map tooltips and arrow legend

React feels like magic: all are updated with a single switch :-D

I did not do it in stats. Too much work in current stats framework for low value.

Neater breadcrumb

· One min read

As considered in Streetsmart, showing the resource name in breadcrumb is not always the  best, especially for generated resources.

Thus I improved the breadcrumb of Spider to display name of resource only when intelligible, and by always keeping first and previous item accessible

Try and tell me what you think! :)

Network view UI internal upgrade

· 2 min read

Following the work on Monitoring UI, I upgraded main UI.

  • 2020-08 - Restructure of code for better maintenance.
  • 2020-11 - Migration finished to latest versions of React, Redux, Material UI v4, and migration to Hooks.
  • 2020-11 - Refactor of all code to have all display and processing related to a protocol in a single folder, loaded by dependency injection in the core of the application: Components, tabs, UI parts, actions, sagas...

Result:

  • Components are regrouped in
    • base components, that can be shared across UIs, and agnostic to this specific UI
    • specifics components, that are coupled to the state structure or reall business specific
  • All application specific work is located in screens folder
    • includes the app initialization and state recovery
    • includes the screen structure and coupling to the theme
    • includes containers to couple base components to the state
    • includes a collections folder in which each collection include the specific for a resource:
      • details view
      • diff view
      • download package builder
      • upload parser
      • filters definition
      • grid and excel columns definition
      • map nodes and links definition
      • sequence diagram links building rules
      • stats definition
      • timeline configurations
      • settings tab
      • whisperer parsing config options
      • custom sagas if needed

The structure is much better, as well as troubleshooting :) I refactored / rewrote much of the code that dated from my starting months with React / Redux. I could still be improved, but it is much better structured and architectured! :)

HOW MUCH I LEARNED building Spider !!

Next step: extract the protocols folders into plug-ins. But this is another story!

Tags rework & use case - Filter on Park identifier !!

· One min read

I rework Tags features to merge request and response tags into one result. Indeed, after using it, it offers better UX.

For instance, in Spider, you may defined Park id extractor:

These regular experssions will instruct Spider to extract the internal id of the parks referenced in the communications, and to save them in park Tag.

Spider will then, when parsing, unzip the communications, run the regular expressions and extract the values.

The park column can then be added to the grid and filtered. Thus adding a nice filtering criteria when working!

Last, but not least, you may even do stats! For instance, let's compare the latency of parkingRights call depending on the park configuration:

That's amazing !! :)

Visual help - resize handlers

· One min read

As requested by Bertrand (he had a lot of inspiration ;) ), I added resize handlers so that the resizing capability of panels is more visible.

I also improved drag and drop speed where I could by postponing store changes to a local state while dragging and using Memoization of components.

Alerting

· One min read

New independent alert service

After much study of Prometheus alert manager and some other solutions, I decided it would be faster and cheaper in resources and time to implement a basic alerting service to start with :) Especially the security integration...

So I did it. A new service (45MB - 0% CPU) is checking various metrics from the monitoring and sending mail to administrators in case of issues. And it sends again after some time if the problem is not solved.

Complex rules can be written... as it is code ;-) Took a couple of days, and works like a charm! Of course, it is - itself - monitored in the monitoring, & integrated in the automated setup ;)

Implemented probes

  • ES healthcheck
  • Redis healthcheck
  • Change in infrastructure (increase or removal of nodes)
  • Low ES free space
  • No new status (Whisperers down)
  • Too many logs over last minute

Of course, alert are sent when the probe cannot work.