fix: Dashboard UI fix (openobserve#4514)

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

## Summary by CodeRabbit

- **New Features**
- Enhanced loading state visibility for dashboard components, improving
user experience during data fetching.
- Updated conditional rendering for dashboard elements to better reflect
the presence of breakdown fields.

- **Bug Fixes**
- Corrected a tooltip text for improved clarity and grammatical
accuracy.

- **Style**
- Improved layout and styling consistency across dashboard components,
including class-based notifications and enhanced CSS properties.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

web/src/components/dashboards/PanelContainer.vue

@@ -119,7 +119,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <q-tooltip anchor="bottom right" self="top right">
             <div style="white-space: pre-wrap">
-              The data shown is cached and is differed from the selected time
+              The data shown is cached and is different from the selected time
               range.
             </div>
           </q-tooltip>

web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue

@@ -494,9 +494,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div
               class="text-caption text-weight-bold text-center q-py-xs"
               v-if="
-                dashboardPanelData.data.queries[
+                !dashboardPanelData.data.queries[
                   dashboardPanelData.layout.currentQueryIndex
-                ].fields?.breakdown?.length < 1
+                ].fields?.breakdown?.length
               "
               style="
                 width: 100%;

web/src/views/Dashboards/ViewDashboard.vue

@@ -89,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="sm"
               v-model="selectedDate"
               :initialTimezone="initialTimezone"
-              :disable="!disable"
+              :disable="arePanelsLoading"
             />
             <AutoRefreshInterval
               v-model="refreshInterval"
@@ -99,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="sm"
             />
             <q-btn
-              v-if="config.isEnterprise == 'true' && !disable"
+              v-if="config.isEnterprise == 'true' && arePanelsLoading"
               outline
               class="dashboard-icons q-px-sm q-ml-sm hideOnPrintMode"
               size="sm"
@@ -119,7 +119,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               no-caps
               icon="refresh"
               @click="refreshData"
-              :disable="!disable"
+              :disable="arePanelsLoading"
               data-test="dashboard-refresh-btn"
             >
               <q-tooltip>{{ t("dashboard.refresh") }}</q-tooltip>
@@ -522,10 +522,10 @@ export default defineComponent({
 
     // [START] cancel running queries
 
-    const disable = ref(false);
+    const arePanelsLoading = ref(false);
 
-    const handleEmittedData = (panelsValues) => {
-      disable.value = panelsValues;
+    const handleEmittedData = (allPanelsLoaded) => {
+      arePanelsLoading.value = !allPanelsLoaded;
     };
 
     const { traceIdRef, searchRequestTraceIds, cancelQuery } = useCancelQuery();
@@ -882,7 +882,7 @@ export default defineComponent({
       tabId,
       outlinedDescription,
       searchRequestTraceIds,
-      disable,
+      arePanelsLoading,
       cancelQuery,
       traceIdRef,
       searchRequestTraceIds,

web/src/views/Dashboards/addPanel/AddPanel.vue

@@ -206,28 +206,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
                       <div
                         v-if="isOutDated"
-                        :style="{
-                          borderColor: '#c3920d',
-                          borderWidth: '1px',
-                          borderStyle: 'solid',
-                          backgroundColor:
-                            store.state.theme == 'dark' ? '#2a1f03' : '#faf2da',
-                          padding: '1%',
-                          margin: '1%',
-                          borderRadius: '5px',
-                        }"
+                        class="tw-p-2"
                       >
-                        <div style="font-weight: 700">
-                          Your chart is not up to date
-                        </div>
-                        <div>
-                          Chart Configuration / Variables has been updated, but
-                          the chart was not updated automatically. Click on the
-                          "Apply" button to run the query again
+                        <div
+                          :style="{
+                            borderColor: '#c3920d',
+                            borderWidth: '1px',
+                            borderStyle: 'solid',
+                            backgroundColor:
+                              store.state.theme == 'dark' ? '#2a1f03' : '#faf2da',
+                            padding: '1%',
+                            borderRadius: '5px',
+                          }"
+                        >
+                          <div style="font-weight: 700">
+                            Your chart is not up to date
+                          </div>
+                          <div>
+                            Chart Configuration / Variables has been updated, but
+                            the chart was not updated automatically. Click on the
+                            "Apply" button to run the query again
+                          </div>
                         </div>
                       </div>
-
-                      <div class="col" style="flex: 1">
                         <div class="tw-flex tw-justify-end tw-mr-2">
                           <span v-if="lastTriggeredAt" class="lastRefreshedAt">
                             <span class="lastRefreshedAtIcon">🕑</span
@@ -237,6 +238,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             />
                           </span>
                         </div>
+                      <div class="col" style="flex: 1">
                         <PanelSchemaRenderer
                           v-if="chartData"
                           @metadata-update="metaDataValue"

web/src/views/Dashboards/addPanel/DashboardFiltersOption.vue

@@ -235,11 +235,17 @@ export default defineComponent({
 <style lang="scss" scoped>
 .layout-name {
   font-size: 14px;
-  margin-top: 10px;
+  white-space: nowrap;
+  min-width: 130px;
+  display: flex;
+  align-items: center;
 }
 
 .layout-separator {
-  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  margin-left: 2px;
+  margin-right: 2px;
 }
 
 .axis-container {