NodeGraph: Support icons for nodes

[aocenas]

Allow specifying an icon for node data that will then be used inside the node instead of the stats shown currently:

At this moment only icons already specified inside Grafana are allowed so no custom icons.

Stats are now shown also in a context menu so if icon is shown they are not totally lost.

There are some additional small changes:

• The context header items are shown in a table layout.
• Context menu is also shown for edges whether there is a data link or not.

Future improvement not done here: We don't handle the units of the stats properly atm so this should be fixed using Grafana standard utils.

[ryantxu]

I'm not sure if there is a way to set this in the UI... but we do have an editor that will let you pick/search icons:

https://github.com/grafana/grafana/blob/use-enum-type-in-testdata/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx#L75

<ResourcePicker
                    onChange={(icon) => onChangeIcon(icon, rowIndex)}
                    value={row.result.icon}
                    size={ResourcePickerSize.SMALL}
                    folderName={ResourceFolderName.Icon}
                    mediaType={MediaType.Icon}
                    color={row.result.color}
                  />
                 ```

[aocenas]

@ryantxu thanks, this though will come handy later. My assumption is that first we may implement some automatic icon mapping per data source (like x-ray probably know what is what). Then we may think about some user config to map based on some rules (probably matching node names) that could add to or override what data source defines in the response

[grafanabot]

This pull request has been automatically marked as stale because it has not had activity in the last 30 days. It will be closed in 2 weeks if no further activity occurs. Please feel free to give a status update now, ping for review, or re-open when it's ready. Thank you for your contributions!

[joey-grafana]

Mostly UI/UX suggestions (prob ok if didn't fix em all). Overall, love this.

• Only display e.g. 'Requests per second' if there is a value for it
• Line height between 'Service name' & 'Average response time' is different to line height between 'Average response time' & 'Requests per second' (prob happening because there is no value)

• Hovering over edge shows blank line if no secondary stat i.e. blank line below 13.32 in image
• Title/subtitle case: could prob capitalise here
• Maybe a little more padding for title/subtitle/total time/self time container. So they align better with 'Open in Explore' indentation - although 'Open in Explore' has a different purpose (this is subjective really so whatever change or not you want to make here)

• Should we remove the bottom border

Also

• Could update test data source node graph scenario to include node with icon

[joey-grafana]

Could prob improve the formatting here. There's a lot of ----- and seems | does not need to be pushed to a new line.

[aocenas]

For me, the IDE does this automatically so that the table is aligned if the source is shown without line wraps, like

|----------|---------------------|
|content   |some more things here|

And here some of the descriptions are long so it aligns length to that.

[aocenas]

@joey-grafana

Only display e.g. 'Requests per second' if there is a value for it

Done

Hovering over edge shows blank line if no secondary stat i.e. blank line below 13.32 in image

Done

Title/subtitle case: could prob capitalise here

This is based on displayName of a field if it's not set it uses the field name. Not sure if it makes sense to capitalize in that case, would probably keep the distinction so it's clear it's a field name and let users name it as they want.

Maybe a little more padding for title/subtitle/total time/self time container.
Should we remove the bottom border

Agree but seems like that is all in the ContextMenu component so will do a separate PR as that probaly needs review from user essentials.

Could update test data source node graph scenario to include node with icon
There should be already but it's probabilistic like ~20% of the nodes should have an icon right now.