Render project name with namespace in runner usage

What does this MR do and why?

This change uses a full project name with the namespace in the runner usage breakdown.

A tooltip is added to display longer namespace and project combinations so the contents are not hidden.

Changelog: changed
EE: true

Technical notes

When tackling this initially, it seemed like a straight-forward fix, however, I came across two problems while working on this:

• Even though <tooltip-on-truncate> can help us show hidden truncated contents in a tooltip, it requires us to set a width of our container component.
• At the same time, I wanted to avoid using table-layout: fixed; to provide this width, as the lengths of the contents in this table can vary quite significantly from instance to instance and I'd like to have some flexibility when showing this.

The solution I found is to use a directive that detects overflows and shows a tooltip, and render my own <td> tag to add the directive to it. I required a bigger refactor than I expected, but I think the result is readable and easy to expand upon.

I added a new v-tooltip-on-truncate that could possible replace <tooltip-on-truncate> moving forward, but it's a bit experimental.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before	After

How to set up and validate locally

First, ensure your instance has a GitLab Ultimate license.

1. Generating seed data

First, we want a good amount of recent, long duration jobs so they show up in our data.

1. Run bin/rake "gitlab:seed:runner_fleet" (more about this command)

2. Setting up clickhouse

1. Install clickhouse locally https://clickhouse.com/docs/en/getting-started/quick-start

2. Create two databases gitlab_clickhouse_development and gitlab_clickhouse_test.

Commands to create DBs

$ ./clickhouse client
ClickHouse client version 23.9.1.892 (official build).
Connecting to localhost:9000 as user default.
Connected to ClickHouse server version 23.9.1 revision 54465.

Warnings:
 * Maximum number of threads is lower than 30000. There could be problems with handling a lot of simultaneous queries.

mrincon-laptop.local :) CREATE DATABASE IF NOT EXISTS gitlab_clickhouse_test

CREATE DATABASE IF NOT EXISTS gitlab_clickhouse_test

Query id: 503d1675-6b0d-446b-9685-03759a0acb3c

Ok.

0 rows in set. Elapsed: 0.001 sec. 

mrincon-laptop.local :) CREATE DATABASE IF NOT EXISTS gitlab_clickhouse_development

CREATE DATABASE IF NOT EXISTS gitlab_clickhouse_development

Query id: dac3bb6e-d7e6-4c6d-bc7e-00e3e0ae7b92

Ok.

0 rows in set. Elapsed: 0.001 sec. 

3. Configure GDK

1. Locally, create a file called config/click_house.yml in gitlab, with the following contents:

test:
  main:
    database: gitlab_clickhouse_test
    url: 'http://localhost:8123'
    username: default
development:
  main:
    database: gitlab_clickhouse_development
    url: 'http://localhost:8123'
    username: default

This will tell your instance to look for a clickhouse database at http://localhost:8123. Even if you don't have one, the dashboard will show in the desired state (with an error at the top).

2. Restart your instance (e.g. gdk restart)
3. Run the Clickhouse migrations bundle exec rake gitlab:clickhouse:migrate
4. Force the syncronization service so the Clickhouse data is up to date, in the Rails console (rails c), type:

::Ci::Build.where.not(finished_at: nil).find_each{|build| ::Ci::FinishedBuildChSyncEvent.upsert({ build_id: build.id, build_finished_at: build.finished_at }, unique_by: [:build_id, :partition]) }
ClickHouse::DataIngestion::CiFinishedBuildsSyncService.new.execute

1. Visit the dashboard (e.g. http://gdk.test:3000/admin/runners/dashboard)

2. Confirm the names of projects and runners are showing correctly.

Related to #441263 (closed)