Change runner identifiers to human readable format in UI

Problem

Follow up from !57247 (merged).

Our runners are identified in different ways in the UI, depending on their context, as different users (admins or regular users) may identify runners in a different way.

Given a runner with:

• Database ID: 4
• Short Token: 8K_PLoi6
• Description: mrincon-gl-macbook-pro.local.

On different views we may see different combinations of identifiers to find a runner, which may not be consistent.

CI Users:

Job Sidebar (no token)	Job log (token + description)	Project Admin (all three)

Admins

Runner table (token + description)	Runner details (all three, in different places in the form)

Proposal

On all cases show the same combination of database ID, token and name in the same way so they are easily identified.

The id would have a # symbol, together with the token in parenthesis (), plus, optionally the "long description":

#<id> (<token>) <(optional) long description>

For example:

#4 (8K_PLoi6) _mrincon-gl-macbook-pro.local_

Scenarios

Job detail view

• Display #<id>, <token> and <(optional) long description>.
• No information is truncated.

Job detail sidebar

• Display #<id>, <token> and <(optional) long description>.
• No information is truncated.

Admin overview (table)

• Display #<id>, <token> and <(optional) long description>.
• The <long description> should be truncated in the table view, if the characters don't fit visually in the table cell.
• A tooltip should be shown on hover and display the full description.

Admin detail view

• Display #<token> in the breadcrumb navigation
• Display #<id> in the page title, and <(optional) long description>.
• No information is truncated.
• Implemented on !57247 (merged)

Settings view (group, project)

• Display #<id>, <token> and <(optional) long description>.
• No information is truncated.