feat: if print mode hide unnecessary empty space (#4869)

- #4870

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced table rendering for print mode, ensuring proper styling and
positioning.
- Introduced conditional rendering for dashboard panels specifically in
print scenarios, improving layout adaptability.

- **Bug Fixes**
- Improved responsiveness of the dashboard display based on the
application's print state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

web/src/components/dashboards/panels/TableRenderer.vue

@@ -16,7 +16,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <q-table
-    class="my-sticky-virtscroll-table"
+    :class="[
+      'my-sticky-virtscroll-table',
+      { 'no-position-absolute': store.state.printMode },
+    ]"
     virtual-scroll
     v-model:pagination="pagination"
     :rows-per-page-options="[0]"
@@ -43,6 +46,7 @@ import useNotifications from "@/composables/useNotifications";
 import { exportFile } from "quasar";
 import { defineComponent, ref } from "vue";
 import { findFirstValidMappedValue } from "@/utils/dashboard/convertDataIntoUnitValue";
+import { useStore } from "vuex";
 
 export default defineComponent({
   name: "TableRenderer",
@@ -66,6 +70,8 @@ export default defineComponent({
   emits: ["row-click"],
   setup(props: any) {
     const tableRef: any = ref(null);
+    const store = useStore();
+
     const { showErrorNotification, showPositiveNotification } =
       useNotifications();
     function wrapCsvValue(val: any, formatFn?: any, row?: any) {
@@ -165,6 +171,7 @@ export default defineComponent({
       downloadTableAsCSV,
       tableRef,
       getStyle,
+      store,
     };
   },
 });
@@ -208,6 +215,11 @@ export default defineComponent({
     will-change: auto !important;
   }
 }
+
+.no-position-absolute {
+  position: static !important;
+}
+
 .my-sticky-virtscroll-table.q-dark {
   :deep(.q-table__top),
   :deep(.q-table__bottom),

web/src/views/Dashboards/RenderDashboardCharts.vue

@@ -42,7 +42,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     />
     <slot name="before_panels" />
     <div class="displayDiv">
+      <div
+        v-if="
+          store.state.printMode &&
+          panels.length === 1 &&
+          panels[0].type === 'table'
+        "
+        style="height: 100%; width: 100%"
+      >
+        <PanelContainer
+          @onDeletePanel="onDeletePanel"
+          @onViewPanel="onViewPanel"
+          :viewOnly="viewOnly"
+          :data="panels[0] || {}"
+          :dashboardId="dashboardData.dashboardId"
+          :folderId="folderId"
+          :selectedTimeDate="
+            (panels[0]?.id ? currentTimeObj[panels[0].id] : undefined) ||
+            currentTimeObj['__global'] ||
+            {}
+          "
+          :variablesData="variablesData"
+          :forceLoad="forceLoad"
+          :searchType="searchType"
+          @updated:data-zoom="$emit('updated:data-zoom', $event)"
+          @onMovePanel="onMovePanel"
+          @refreshPanelRequest="refreshPanelRequest"
+          @refresh="refreshDashboard"
+          @update:initial-variable-values="updateInitialVariableValues"
+          @onEditLayout="openEditLayout"
+          style="height: 100%; width: 100%"
+        />
+      </div>
       <grid-layout
+        v-else
         ref="gridLayoutRef"
         v-if="panels.length > 0"
         :layout.sync="getDashboardLayout(panels)"
@@ -220,9 +253,9 @@ export default defineComponent({
 
     const panels: any = computed(() => {
       return selectedTabId.value !== null
-        ? props.dashboardData?.tabs?.find(
-            (it: any) => it.tabId === selectedTabId.value
-          )?.panels ?? []
+        ? (props.dashboardData?.tabs?.find(
+            (it: any) => it.tabId === selectedTabId.value,
+          )?.panels ?? [])
         : [];
     });
     const {
@@ -253,17 +286,17 @@ export default defineComponent({
     // provide variablesAndPanelsDataLoadingState to share data between components
     provide(
       "variablesAndPanelsDataLoadingState",
-      variablesAndPanelsDataLoadingState
+      variablesAndPanelsDataLoadingState,
     );
 
     //computed property based on panels and variables loading state
     const isDashboardVariablesAndPanelsDataLoaded = computed(() => {
       // Get values of variablesData and panels
       const variablesDataValues = Object.values(
-        variablesAndPanelsDataLoadingState.variablesData
+        variablesAndPanelsDataLoadingState.variablesData,
       );
       const panelsValues = Object.values(
-        variablesAndPanelsDataLoadingState.panels
+        variablesAndPanelsDataLoadingState.panels,
       );
 
       // Check if every value in both variablesData and panels is false
@@ -280,7 +313,7 @@ export default defineComponent({
 
     const currentQueryTraceIds = computed(() => {
       const traceIds = Object.values(
-        variablesAndPanelsDataLoadingState.searchRequestTraceIds
+        variablesAndPanelsDataLoadingState.searchRequestTraceIds,
       );
 
       if (traceIds.length > 0) {
@@ -334,7 +367,7 @@ export default defineComponent({
                 ...obj,
                 [item.name]: item.isLoading,
               }),
-              {}
+              {},
             );
         }
       } catch (error) {
@@ -357,7 +390,7 @@ export default defineComponent({
         dataIndex: number,
         seriesIndex: number,
         panelId: any,
-        hoveredTime?: any
+        hoveredTime?: any,
       ) {
         hoveredSeriesState.value.dataIndex = dataIndex ?? -1;
         hoveredSeriesState.value.seriesIndex = seriesIndex ?? -1;
@@ -378,7 +411,7 @@ export default defineComponent({
           store.state.selectedOrganization.identifier,
           props.dashboardData.dashboardId,
           props.dashboardData,
-          route.query.folder ?? "default"
+          route.query.folder ?? "default",
         );
 
         showPositiveNotification("Dashboard updated successfully");
@@ -387,7 +420,7 @@ export default defineComponent({
           showConfictErrorNotificationWithRefreshBtn(
             error?.response?.data?.message ??
               error?.message ??
-              "Dashboard update failed"
+              "Dashboard update failed",
           );
         } else {
           showErrorNotification(error?.message ?? "Dashboard update failed", {
@@ -490,7 +523,7 @@ export default defineComponent({
       // NOTE: after variables in variables feature, it works without changing the initial variable values
       // then, update the initial variable values
       await variablesValueSelectorRef.value.changeInitialVariableValues(
-        ...args
+        ...args,
       );
     };