Network view

[foot]

Initial implementation of the network view.

It will follow the established UI convention of the details panel.

1. Hover over a "Networks" overlay button to show networks.
2. Clicking the "Networks" overlay button to show and pin all networks and reveal a legend w/ network names listed.
3. Hover over individual networks labels to fade out nodes that are not included in that network.
4. Click individual networks to open the details panel w/ network info and pin the faded/highlighted nodes states. v2
5. Clicking the nodes should overlay an additional details panel that can be popped to return the network details.

• Add coloured circle segments to a node that represents network membership.
• click legend item to show details panel showing network details. v2
• style legend w/ colors
• Allow enable/disabled network-arc overlays (maybe by expanding the legend).
• highlight networks members on legend item hover (or fade others)
• include net-view state in url state

stretch

• add a collapsed state to the legend.

[foot]

Design RC:

[foot]

Report to test w/ tnscompose.json.zip

[davkal]

Visual:

The underlines are flush against "Networks" which looks a bit abrupt. Have you tried underlining "Networks" in neutral color?

Could we make this not overlap?

Could this be ameliorated?

Negligible edge case?

JS Code looks good.

My comment re data still applies:

       // TODO move this setting of networks as toplevel node field to backend,
       // to not rely on field IDs here. should be determined by topology implementer
       state = state.update('nodes', nodes => nodes.map(node => {
         if (node.has('metadata')) {
           const networks = node.get('metadata')
             .find(field => field.get('id') === 'docker_container_networks');
           if (networks) {
             return node.set('networks', fromJS(
               networks.get('value').split(', ').map(n => ({id: n, label: n, colorKey: n}))));
           }
         }
         return node;
       }));