Feature - markerCluster for flux maps

[MorningLightMountain713]

What this pull does

• Adds a new FluxMap component.
• Implements dark mode for maps. (both light and dark, toggleable)
• Updates the dashboard map to use this new component.
• Adds map with nodes locations to Applications -> Management -> My Active Apps
• Adds markercluster dependency to dev deps.

Let me know if there are any other places you want me to add any new maps.

markercluster background

Markercluster is a map marker aggregation tool. It provides much more intuitive and easy to understand map displays when a large number of markers are used on a map.

Markercluster is great when working with large groups of markers like we are. Depending on the data format used, it is much faster when trying to paint 10k+ markers.

Markercluster also has sane defaults for multiple markers on the same spot, if this happens, it arranges the markers around the point with a "path" line to the origin. This means that we can keep the popup text to one per marker, instead of having to merge them manually.

FluxMap component

This component uses the data format from fluxstats as input. I.e. you can pass in a prop nodes with the data in the format:

[{
  "geolocation": {
    "ip": "104.49.67.219",
    "continent": "North America",
    "continentCode": "NA",
    "country": "United States",
    "countryCode": "US",
    "region": "IN",
    "regionName": "Indiana",
    "lat": 41.4495,
    "lon": -87.4769,
    "org": "Private Customer - AT&T Internet Services"
  },
  "ip": "104.49.67.219:16157",
  "tier": "CUMULUS"
}]

it will then use this data to build a geoJson object, this is a standard mapping datatype used by many mapping softwares and is reuseable.

If you don't pass in any nodes, it will fetch the list from the fluxstats api - it will display a warning message (on the map) Unable to fetch Node data. Try again later if the api is unavailable

You can also pass in the filterNodes and showAll props, if you only want to show specific nodes from the nodes list. We use this on the myApps page.

Screenshots:

Dashboard page:

My Active Apps:

Markers on same spot:

GeoJson data format:

[{
  type: 'FeatureCollection',
  crs: {
    type: 'name',
    properties: {
      name: 'urn:ogc:def:crs:OGC:1.3:CRS84',
    },
  },
  features: [],
}]

Where we add one feature per node, in the format:

{
  type: 'Feature',
  properties: {
    ip: node.ip,
    tier: node.tier,
    org: node.geolocation.org,
  },
  geometry: {
    type: 'Point',
    coordinates: [node.geolocation.lon, node.geolocation.lat],
  },
}

[MorningLightMountain713]

I've added the map to running instances.

Of note, I don't have any apps with many instances to test to make sure they only display the apps per page. Pretty sure it should work though.