Fix some spacing on the shared analytics dashboards
What does this MR do and why?
- Reduce X margin between grid items
- Increase grid container X margin to line up with header
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
Enable features:
echo "Feature.enable(:group_analytics_dashboards)" | bundle exec rails console
echo "Feature.enable(:group_analytics_dashboard_dynamic_vsd)" | bundle exec rails console
Copy this patch:
Click to see diff
diff --git a/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue b/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
index 49f66a3d43e9..46706257e91c 100644
--- a/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
+++ b/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
@@ -530,12 +530,12 @@ export default {
<div class="gl-display-flex">
<div class="gl-display-flex gl-flex-direction-column gl-flex-grow-1">
<section
- v-if="showFilters"
+ v-if="true"
data-testid="dashboard-filters"
class="gl-display-flex gl-pt-4 gl-pb-3 gl-px-3 gl-flex-direction-column gl-md-flex-direction-row gl-gap-5"
>
<date-range-filter
- v-if="showDateRangeFilter"
+ v-if="true"
:default-option="filters.dateRangeOption"
:start-date="filters.startDate"
:end-date="filters.endDate"
@@ -543,18 +543,18 @@ export default {
@change="setDateRangeFilter"
/>
<anon-users-filter
- v-if="showAnonUsersFilter"
+ v-if="true"
:value="filters.filterAnonUsers"
@change="setAnonymousUsersFilter"
/>
</section>
<url-sync
- v-if="syncUrlFilters"
+ v-if="true"
:query="queryParams"
:history-update-method="$options.HISTORY_REPLACE_UPDATE_METHOD"
/>
<button
- v-if="showEditControls"
+ v-if="true"
class="card upload-dropzone-card upload-dropzone-border gl-display-flex gl-align-items-center gl-px-5 gl-py-3 gl-my-3 gl-mx-3"
data-testid="add-visualization-button"
@click="toggleVisualizationDrawer"
diff --git a/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml b/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml
index c7631446c8c8..859cbb2431c6 100644
--- a/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml
+++ b/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml
@@ -3,13 +3,13 @@ title: Value Streams Dashboard
description: The Value Streams Dashboard allows all stakeholders from executives to individual contributors to identify trends, patterns, and opportunities for software development improvements.
panels:
- id: 1
- visualization: dora_chart
- title: DORA metrics comparison
+ visualization: usage_overview
+ title: Usage overview
gridAttributes:
- yPos: 2
- xPos: 0
- width: 12
- height: 6
+ yPos: 1
+ xPos: 6
+ width: 6
+ height: 1
options: {}
- id: 2
visualization: usage_overview
@@ -17,7 +17,33 @@ panels:
gridAttributes:
yPos: 1
xPos: 0
+ width: 6
+ height: 1
+ options: {}
+ - id: 3
+ visualization: usage_overview
+ title: Usage overview
+ gridAttributes:
+ yPos: 2
+ xPos: 0
width: 12
height: 1
options: {}
-
+ - id: 4
+ visualization: usage_overview
+ title: Usage overview
+ gridAttributes:
+ yPos: 3
+ xPos: 0
+ width: 6
+ height: 1
+ options: {}
+ - id: 5
+ visualization: usage_overview
+ title: Usage overview
+ gridAttributes:
+ yPos: 3
+ xPos: 6
+ width: 6
+ height: 1
+ options: {}
Apply patch:
pbpaste | git apply --allow-empty
Visit modified value streams dashboard for any group:
http://gdk.test:3000/groups/gitlab-org/-/analytics/dashboards/value_streams_dashboard
Edited by Alex Pennells