Merge pull request #580 from jschoiRR/mold-diplo-2024-main

[Mold UI] footer영역 이벤트 조회 호출 방식 변경(오픈버튼 클릭 시 이벤트 api 호출 시작, 닫기 버튼 클릭 시 api 호출 중지)

Author: jschoiRR

ui/src/components/page/GlobalLayout.vue

@@ -94,12 +94,14 @@
         </a-button>
       </div>
 
-      <event-sidebar :isVisible="isSidebarVisible" @update:isVisible="isSidebarVisible = $event" />
+      <event-sidebar
+        :isVisible="isSidebarVisible"
+        ref="eventSidebar"
+        @update:isVisible="isSidebarVisible = $event" />
 
       <a-layout
         :class="[layoutMode, `content-width-${contentWidth}`]"
-        :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh', paddingBottom: isSidebarVisible ? '300px' : '0' }"
-      >
+        :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh', paddingBottom: isSidebarVisible ? '300px' : '0' }">
         <a-affix style="z-index: 100">
           <global-header
             :style="this.$store.getters.shutdownTriggered ? 'margin-top: 25px;' : null"
@@ -108,23 +110,21 @@
             :theme="navTheme"
             :collapsed="collapsed"
             :device="device"
-            @toggle="toggle"
-          />
+            @toggle="toggle" />
         </a-affix>
 
         <a-button
-        v-if="showClear"
-        type="default"
-        size="small"
-        class="button-clear-notification"
-        @click="onClearNotification">{{ $t('label.clear.notification') }}</a-button>
+          v-if="showClear"
+          type="default"
+          size="small"
+          class="button-clear-notification"
+          @click="onClearNotification">{{ $t('label.clear.notification') }}</a-button>
 
-      <!-- layout content -->
+        <!-- layout content -->
         <a-layout-content
           class="layout-content"
           :class="{'is-header-fixed': fixedHeader}"
-          :style="{ paddingBottom: isSidebarVisible ? '300' : '0' }"
-        >
+          :style="{ paddingBottom: isSidebarVisible ? '300' : '0' }">
           <slot></slot>
         </a-layout-content>
 
@@ -252,7 +252,8 @@ export default {
   },
   methods: {
     toggleSidebar () {
-      this.isSidebarVisible = !this.isSidebarVisible
+      this.isSidebarVisible = true
+      this.$refs.eventSidebar.openSiderBar()
     },
     ...mapActions(['setSidebar']),
     toggle () {

ui/src/components/view/EventSidebar.vue

@@ -140,14 +140,12 @@ export default {
     }
   },
   created () {
-    this.fetchEvents()
-    this.refreshInterval = setInterval(this.fetchEvents, 5000)
-    // console.log('EventsListBar:', this.$store.getters.globalSettings.EventsListBar)
-  },
-  unmounted () {
-    clearInterval(this.refreshInterval)
   },
   methods: {
+    openSiderBar () {
+      this.fetchEvents()
+      this.refreshInterval = setInterval(this.fetchEvents, 5000)
+    },
     closeSidebar () {
       clearInterval(this.refreshInterval)
       this.$emit('update:isVisible', false)