Prevent runner list IP and version overflow
What does this MR do and why?
This change prevents the IP and version columns from overflowing outside of their boundaries in the runner's admin view.
If any of the two fields overflow the container, they'll get truncated with an ellipsis (...) and a tooltip will be shown on hover with the full data.
Screenshots or screen recordings
before | after |
---|---|
How to set up and validate locally
- Visit the runners' admin page e.g. http://gdk.test:3000/admin/runners
- Display a runner with a long version and/or IP
- Reducing the size of your screen my help
Testing with arbitrary values
The following diff will allow you to test with mock values of any length:
diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index 3edb658eaf5..afd707ce44d 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -88,8 +88,18 @@ export default {
},
update(data) {
const { runners } = data;
+
+ const items =
+ runners?.nodes.map(({ ipAddress, version, ...runner }) => {
+ return {
+ ipAddress: '2a02:a210:2147:00:459d:3742:74c8:ca',
+ version: '14.5.0-nightly-beta-1.000.000.000',
+ ...runner,
+ };
+ }) || [];
+
return {
- items: runners?.nodes || [],
+ items,
pageInfo: runners?.pageInfo || {},
};
},
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #343977 (closed)
Edited by Miguel Rincon