[Mold UI] 시스템테마 설정에 맞도록 다크모드 변경/ 가상머신 nic 탭 ui 수정

scripts/util/update-mold-theme-from-license.sh

@@ -12,7 +12,8 @@ if [ "ablestack" == "$type" ]; then
   # 로고 파일 변경
   sed -i "/\"logo\"/ c\  \"logo\": \"assets/logo-ablestack.png\","  $config_path
   sed -i "/\"banner\"/ c\  \"banner\": \"assets/login-logo-ablestack.png\","  $config_path
-  sed -i "/\"minilogo\"/ c\  \"minilogo\": \"assets/mini-logo-ablestack.png\","  $config_path
+  sed -i "/\"miniLogo\"/ c\  \"miniLogo\": \"assets/mini-logo-ablestack.png\","  $config_path
+  sed -i "/\"whiteLogo\"/ c\  \"whiteLogo\": \"assets/white-logo-ablestack.png\","  $config_path
 
   # 저작권 표시 변경
   sed -i "/\"footer\"/ c\  \"footer\": \"ⓒ 2021-2025 ABLECLOUD Inc. All Rights Reserved.\","  $config_path
@@ -42,7 +43,8 @@ elif [ "clostack" == "$type" ]; then
   # 로고 파일 변경
   sed -i "/\"logo\"/ c\  \"logo\": \"assets/logo-clostack.png\","  $config_path
   sed -i "/\"banner\"/ c\  \"banner\": \"assets/login-logo-clostack.png\","  $config_path
-  sed -i "/\"minilogo\"/ c\  \"minilogo\": \"assets/mini-logo-ablestack.png\","  $config_path
+  sed -i "/\"miniLogo\"/ c\  \"miniLogo\": \"assets/mini-logo-ablestack.png\","  $config_path
+  sed -i "/\"whiteLogo\"/ c\  \"whiteLogo\": \"assets/white-logo-clostack.png\","  $config_path
 
   # 저작권 표시 변경
   sed -i "/\"footer\"/ c\  \"footer\": \"ⓒ 2025 ITCEN CLOIT. All Rights Reserved.\","  $config_path
@@ -71,7 +73,8 @@ elif [ "hv" == "$type" ]; then
   # 로고 파일 변경
   sed -i "/\"logo\"/ c\  \"logo\": \"assets/logo-hv.png\","  $config_path
   sed -i "/\"banner\"/ c\  \"banner\": \"assets/login-logo-hv.png\","  $config_path
-  sed -i "/\"minilogo\"/ c\  \"minilogo\": \"assets/mini-logo-hv.png\","  $config_path
+  sed -i "/\"miniLogo\"/ c\  \"miniLogo\": \"assets/mini-logo-hv.png\","  $config_path
+  sed -i "/\"whiteLogo\"/ c\  \"whiteLogo\": \"assets/white-logo-hv.png\","  $config_path
 
   # 저작권 표시 변경
   sed -i "/\"footer\"/ c\  \"footer\": \"© HS HYOSUNG INFORMATION SYSTEMS\","  $config_path

ui/public/config.json

@@ -13,7 +13,8 @@
   "buildVersion": "V4.0-4.0.15",
   "loginFooter": "",
   "logo": "assets/logo-ablestack.png",
-  "minilogo": "assets/mini-logo-ablestack.png",
+  "whiteLogo": "assets/white-logo-ablestack.png",
+  "miniLogo": "assets/mini-logo-ablestack.png",
   "banner": "assets/login-logo-ablestack.png",
   "loginTitle": "ABLESTACK",
   "loginFavicon": "assets/ablestack-favicon.png",

ui/public/locales/ko_KR.json

@@ -1837,7 +1837,7 @@
 "label.publickey": "\uacf5\uac1c \ud0a4",
 "label.publicnetwork": "\uc11c\ube44\uc2a4\uc6a9 \ub124\ud2b8\uc6cc\ud06c",
 "label.publicport": "Public \ud3ec\ud2b8",
-"label.purgeresources": "Purge Resources",
+"label.purgeresources": "VM \ud30c\uae30\uc2dc \ub9ac\uc18c\uc2a4 \uc815\ub9ac",
 "label.purge.usage.records.success": "\uc0ac\uc6a9 \uae30\ub85d\uc744 \uc131\uacf5\uc801\uc73c\ub85c \uc0ad\uc81c\ud588\uc2b5\ub2c8\ub2e4",
 "label.purge.usage.records.error": "\uc0ac\uc6a9 \uae30\ub85d\uc744 \uc0ad\uc81c\ub97c \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4",
 "label.purpose": "\ubaa9\uc801",
@@ -2055,10 +2055,10 @@
 "label.scaleup.policy": "\uc2a4\ucf00\uc77c\uc5c5 \uc815\ucc45",
 "label.scaling": "\uc2a4\ucf00\uc77c\ub9c1",
 "label.schedule": "\uc2a4\ucf00\uc904",
-"label.schedule.add": "Add schedule",
+"label.schedule.add": "\uc2a4\ucf00\uc904 \ucd94\uac00",
 "label.scheduled.backups": "\uc608\uc57d\ub41c \ubc31\uc5c5",
 "label.scheduled.snapshots": "\uc608\uc57d\ub41c \uc2a4\ub0c5\uc0f7",
-"label.schedules": "Schedules",
+"label.schedules": "\uc2a4\ucf00\uc904",
 "label.scope": "\ubc94\uc704",
 "label.scope.tooltip": "\uae30\ubcf8 \uc800\uc7a5\uc18c \ud480 \ubc94\uc704",
 "label.search": "\uac80\uc0c9",
@@ -3429,7 +3429,7 @@
 "message.network.offering.mac.learning": "VMware Distributed Virtual Switches \ubc84\uc804 6.6.0 \uc774\uc0c1 \ubc0f vSphere \ubc84\uc804 6.7 \uc774\uc0c1\uc5d0\uc11c\ub9cc VMware \ud558\uc774\ud37c\ubc14\uc774\uc800\uc758 \uac8c\uc2a4\ud2b8 \ub124\ud2b8\uc6cc\ud06c\uc5d0 \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\nMAC \ud559\uc2b5\uc740 \ub2e8\uc77c vNIC \ub4a4\uc5d0 \uc788\ub294 \uc5ec\ub7ec MAC \uc8fc\uc18c\uc5d0 \ub300\ud55c \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0\uc744 \ud65c\uc131\ud654\ud569\ub2c8\ub2e4.\n\uc5c6\uc74c - \uae00\ub85c\ubc8c \uc124\uc815\uc758 \uae30\ubcf8\uac12 .",
 "message.network.offering.mac.learning.warning": "\uacbd\uace0: MAC \ud559\uc2b5\uc744 \uc0ac\uc6a9\ud558\ub824\uba74 \ud558\uc774\ud37c\ubc14\uc774\uc800 \ud638\uc2a4\ud2b8\uac00 ESXi 6.7 \uc774\uc0c1\uc744 \uc2e4\ud589 \uc911\uc774\uace0 \ub124\ud2b8\uc6cc\ud06c\uac00 \ubd84\uc0b0 vSwitch 6.6.0 \uc774\uc0c1\uc744 \uc0ac\uc6a9\ud558\ub294\uc9c0 \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4.",
 "message.network.offering.promiscuous.mode": "VMware \ud558\uc774\ud37c\ubc14\uc774\uc800\uc758 \uac8c\uc2a4\ud2b8 \ub124\ud2b8\uc6cc\ud06c\uc5d0\ub9cc \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n\uac70\ubd80 - \uc2a4\uc704\uce58\uac00 .vmx \uad6c\uc131 \ud30c\uc77c\uc5d0 \uc788\ub294 \uac83\uacfc \ub2e4\ub978 \uc18c\uc2a4 MAC \uc8fc\uc18c\ub97c \uac00\uc9c4 \uac00\uc0c1 \uba38\uc2e0 \uc5b4\ub311\ud130\uc5d0\uc11c \uc544\uc6c3\ubc14\uc6b4\ub4dc \ud504\ub808\uc784\uc744 \uc0ad\uc81c\ud569\ub2c8\ub2e4.\n\uc218\ub77d - \uc2a4\uc704\uce58\uac00 \ud544\ud130\ub9c1\uc744 \uc218\ud589\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. , \ubaa8\ub4e0 \uc544\uc6c3\ubc14\uc6b4\ub4dc \ud504\ub808\uc784\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4.\n\uc5c6\uc74c - \uae00\ub85c\ubc8c \uc124\uc815\uc758 \uae30\ubcf8\uac12\uc785\ub2c8\ub2e4.",
-"message.network.removenic": "\uc774 NIC\ub97c \uc81c\uac70 \ud560 \uac83\uc778\uc9c0 \ud655\uc778\ud558\uc2ed\uc2dc\uc624. \uadf8\ub7ec\uba74 VM\uc5d0\uc11c \uc5f0\uacb0\ub41c \ub124\ud2b8\uc6cc\ud06c\ub3c4 \uc81c\uac70\ub429\ub2c8\ub2e4.",
+"message.network.removenic": "\ud574\ub2f9 NIC\ub97c \uc81c\uac70\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c? \uadf8\ub7ec\uba74 VM\uc5d0\uc11c \uc5f0\uacb0\ub41c \ub124\ud2b8\uc6cc\ud06c\ub3c4 \uc81c\uac70\ub429\ub2c8\ub2e4.",
 "message.network.restart.required": "\ub124\ud2b8\uc6cc\ud06c\uc5d0 \ub300\ud55c \uc7ac\uc2dc\uc791\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc7ac\uc2dc\uc791\uc774 \ud544\uc694\ud55c \ub124\ud2b8\uc6cc\ud06c\ub97c \ubcf4\ub824\uba74 \uc5ec\uae30\ub97c \ud074\ub9ad\ud558\uc138\uc694.",
 "message.network.secondaryip": "\uc774 NIC\uc5d0 \ub300\ud55c \uc0c8 \ubcf4\uc870 IP\ub97c \ud68d\ub4dd \ud560 \uac83\uc778\uc9c0 \ud655\uc778\ud558\uc2ed\uc2dc\uc624. \n \ucc38\uace0: \uac00\uc0c1\uba38\uc2e0 \ub0b4\uc5d0\uc11c \uc0c8\ub85c \ud68d\ub4dd\ud55c \ubcf4\uc870 IP\ub97c \uc218\ub3d9\uc73c\ub85c \uad6c\uc131\ud574\uc57c\ud569\ub2c8\ub2e4.",
 "message.network.selection": "\uc778\uc2a4\ud134\uc2a4\ub97c \uc5f0\uacb0\ud560 \ub124\ud2b8\uc6cc\ud06c\ub97c \ud558\ub098 \uc774\uc0c1 \uc120\ud0dd\ud558\uc138\uc694. \uc5ec\uae30\uc5d0\uc11c \uc0c8 \ub124\ud2b8\uc6cc\ud06c\ub97c \ub9cc\ub4e4 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.",
@@ -3550,7 +3550,7 @@
 "message.select.zone.hint": "\uc0ac\uc6a9\ud558\ub824\ub294 Zone \ubc30\ud3ec \uc720\ud615\uc785\ub2c8\ub2e4. \uae30\ubcf8 Zone : \uac01 VM \uac00\uc0c1\uba38\uc2e0\uc5d0 \ub124\ud2b8\uc6cc\ud06c\uc5d0\uc11c \uc9c1\uc811 IP\uac00 \ud560\ub2f9\ub418\ub294 \ub2e8\uc77c \ub124\ud2b8\uc6cc\ud06c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uac8c\uc2a4\ud2b8 \uaca9\ub9ac\ub294 \ubcf4\uc548\uadf8\ub8f9(IP \uc8fc\uc18c \uc18c\uc2a4 \ud544\ud130\ub9c1)\uacfc \uac19\uc740 \uacc4\uce35 3 \uc218\ub2e8\uc744 \ud1b5\ud574 \uc81c\uacf5 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uace0\uae09 \uc601\uc5ed :\ubcf4\ub2e4 \uc815\uad50\ud55c \ub124\ud2b8\uc6cc\ud06c \ud1a0\ud3f4\ub85c\uc9c0 \uc6a9. \uc774 \ub124\ud2b8\uc6cc\ud06c \ubaa8\ub378\uc740 \uac00\uc0c1\uba38\uc2e0\uc6a9 \ub124\ud2b8\uc6cc\ud06c\ub97c \uc815\uc758\ud558\uace0 \ubc29\ud654\ubcbd, VPN \ub610\ub294 \ub85c\ub4dc \ubc38\ub7f0\uc11c \uc9c0\uc6d0\uacfc \uac19\uc740 \uc0ac\uc6a9\uc790 \uc9c0\uc815 \ub124\ud2b8\uc6cc\ud06c \uc81c\ud488\uc744 \uc81c\uacf5\ud558\ub294 \ub370 \uac00\uc7a5 \ud070 \uc720\uc5f0\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.",
 "message.server": "\uc11c\ubc84 : ",
 "message.server.description": "NFS, iSCSI \ub610\ub294 PreSetup : \uc2a4\ud1a0\ub9ac\uc9c0 \uc7a5\uce58\uc758 IP \uc8fc\uc18c \ub610\ub294 DNS \uc774\ub984. VMWare PreSetup : vCenter \uc11c\ubc84\uc758 IP \uc8fc\uc18c \ub610\ub294 DNS \uc774\ub984\uc785\ub2c8\ub2e4.",
-"message.set.default.nic": "\uc774 NIC\ub97c \uc774 VM\uc758 \uae30\ubcf8\uac12\uc73c\ub85c \uc124\uc815\ud560 \uac83\uc778\uc9c0 \ud655\uc778\ud558\uc2ed\uc2dc\uc624.",
+"message.set.default.nic": "\ud574\ub2f9 NIC\ub97c VM\uc758 \uae30\ubcf8 NIC\ub85c \uc124\uc815\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?",
 "message.set.default.nic.manual": "\uc9c0\uae08 VM\uc5d0\uc11c \uae30\ubcf8 NIC\ub97c \uc218\ub3d9\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uc2ed\uc2dc\uc624.",
 "message.setting.updated": "\uc5c5\ub370\uc774\ud2b8 \ub41c \uc124\uc815: ",
 "message.setting.update.delay": "\uc0c8\ub85c\uc6b4 \uac12\uc740 30\ucd08 \uc774\ub0b4\uc5d0 \uc801\uc6a9\ub429\ub2c8\ub2e4.",

ui/src/components/header/Logo.vue

@@ -16,15 +16,15 @@
 // under the License.
 
 <template>
-  <div v-if="collapsed && $config.minilogo">
+  <div v-if="collapsed && $config.miniLogo">
     <img
       :style="{
         width: $config.theme['@mini-logo-width'],
         height: $config.theme['@mini-logo-height'],
         marginTop: $config.theme['@mini-logo-magin-top'],
         marginBottom: $config.theme['@mini-logo-magin-bottom']
       }"
-      :src="$config.minilogo" />
+      :src="$config.miniLogo" />
   </div>
   <div v-else-if="$config.logo">
     <img
@@ -36,12 +36,11 @@
         marginTop: $config.theme['@logo-magin-top'],
         marginBottom: $config.theme['@logo-magin-bottom']
       }"
-      :src="$config.logo" />
+      :src="logoPath" />
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'Logo',
   components: {
@@ -62,6 +61,16 @@ export default {
       default: false,
       required: false
     }
+  },
+  data () {
+    return {
+      logoPath: this.$store.getters.darkMode ? this.$config.whiteLogo : this.$config.logo
+    }
+  },
+  watch: {
+    '$store.getters.darkMode' (darkMode) {
+      this.logoPath = darkMode ? this.$config.whiteLogo : this.$config.logo
+    }
   }
 }
 </script>

ui/src/components/page/GlobalLayout.vue

@@ -227,11 +227,16 @@ export default {
     }
   },
   mounted () {
-    const layoutMode = this.$config.theme['@layout-mode'] || 'light'
-    this.$store.dispatch('SetDarkMode', (layoutMode === 'dark'))
-    if (layoutMode === 'dark') {
-      document.body.classList.add('dark-mode')
-    }
+    // 시스템 테마 변경되었을때 감지 후 테마 변경
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+      this.$localStorage.set('DARK_MODE', event.matches)
+      this.$store.dispatch('SetDarkMode', event.matches)
+      document.body.classList.toggle('dark-mode', event.matches)
+    })
+    // 로컬스토리지 다크 모드 확인 후 변경
+    const isDark = !!this.$localStorage.get('DARK_MODE')
+    this.$store.dispatch('SetDarkMode', isDark)
+    document.body.classList.toggle('dark-mode', isDark)
     const userAgent = navigator.userAgent
     if (userAgent.indexOf('Edge') > -1) {
       this.$nextTick(() => {

ui/src/components/view/DateTimeFilter.vue

@@ -34,7 +34,7 @@
       <a-form-item :label="$t('label.only.start.date.and.time')" ref="allData" name="allData">
         <a-switch v-model:checked="onlyStartDateIsChecked" @change="onToggleStartDate"/>
       </a-form-item>
-      <a-form-item :label="$t('label.start.date.and.time')" ref="startDate" name="startDate" :rules="[{ required: showStartDate, message: `${this.$t('message.error.start.date.and.time')}` }]">
+      <a-form-item :label="$t('label.start.date.and.time')" ref="startDate" name="startDate">
         <a-date-picker
           v-model:value="form.startDate"
           show-time
@@ -45,7 +45,7 @@
       <a-form-item :label="$t('label.only.end.date.and.time')">
         <a-switch v-model:checked="onlyEndDateIsChecked"  @change="onToggleEndDate"/>
       </a-form-item>
-      <a-form-item :label="$t('label.end.date.and.time')" ref="endDate" name="endDate" :rules="[{ required: showEndDate, message: `${this.$t('message.error.end.date.and.time')}` }]">
+      <a-form-item :label="$t('label.end.date.and.time')" ref="endDate" name="endDate">
         <a-date-picker
           v-model:value="form.endDate"
           show-time
@@ -61,7 +61,7 @@
 
 <script>
 import { ref, reactive, toRaw } from 'vue'
-import moment from 'moment'
+// import moment from 'moment'
 
 export default {
   name: 'DateTimeFilter',
@@ -84,20 +84,7 @@ export default {
       value: ''
     }
   },
-  computed: {
-    startDate () {
-      if (this.startDateProp) {
-        return moment(this.startDateProp)
-      }
-      return null
-    },
-    endDate () {
-      if (this.endDateProp) {
-        return moment(this.endDateProp)
-      }
-      return null
-    }
-  },
+  computed: {},
   data () {
     return {
       allDataIsChecked: false,

ui/src/components/view/Setting.vue

@@ -143,7 +143,7 @@ export default {
   },
   data () {
     return {
-      layoutMode: this.$config.theme['@layout-mode'] || 'light',
+      layoutMode: this.$localStorage.get('DARK_MODE') ? 'dark' : 'light',
       colorPick: this.$config.theme['@primary-color'],
       navBgColorPick: this.$config.theme['@navigation-background-color'],
       navTextColorPick: this.$config.theme['@navigation-text-color'],
@@ -229,7 +229,6 @@ export default {
   methods: {
     fetchData () {
       this.originalSetting = Object.assign({}, this.$config.theme)
-      this.layoutMode = this.$config.theme['@layout-mode'] || 'light'
       this.uiSettings = this.$config.theme
     },
     switchLayoutMode () {

ui/src/components/view/StatsTab.vue

@@ -465,10 +465,10 @@ export default {
       var formatedStartDate = null
       var formatedEndDate = null
       if (this.startDate) {
-        formatedStartDate = moment(this.startDate).format('MMM DD, YYYY') + ' at ' + moment(this.startDate).format('HH:mm:ss')
+        formatedStartDate = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss')
       }
       if (this.endDate) {
-        formatedEndDate = moment(this.endDate).format('MMM DD, YYYY') + ' at ' + moment(this.endDate).format('HH:mm:ss')
+        formatedEndDate = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss')
       }
       if (formatedStartDate && formatedEndDate) {
         this.formatedPeriod = ' ' + this.$t('label.vm.stats.filter.period', { startDate: formatedStartDate, endDate: formatedEndDate })

ui/src/layouts/UserLayout.vue

@@ -26,12 +26,11 @@
     <div class="user-layout-container">
       <div class="user-layout-header">
         <img
-          v-if="$config.banner"
           :style="{
             width: $config.theme['@banner-width'],
             height: $config.theme['@banner-height']
           }"
-          :src="$config.banner"
+          :src="logoPath"
           class="user-layout-logo"
           alt="logo">
       </div>
@@ -54,15 +53,18 @@ export default {
   mixins: [mixinDevice],
   data () {
     return {
-      showClear: false
+      showClear: false,
+      logoPath: this.$store.getters.darkMode ? this.$config.whiteLogo : this.$config.logo
     }
   },
   watch: {
     '$store.getters.darkMode' (darkMode) {
       if (darkMode) {
         document.body.classList.add('dark-mode')
+        this.logoPath = this.$config.whiteLogo
       } else {
         document.body.classList.remove('dark-mode')
+        this.logoPath = this.$config.banner
       }
     },
     '$store.getters.countNotify' (countNotify) {
@@ -73,12 +75,27 @@ export default {
     }
   },
   mounted () {
-    document.body.classList.add('userLayout')
-    const layoutMode = this.$config.theme['@layout-mode'] || 'light'
-    this.$store.dispatch('SetDarkMode', (layoutMode === 'dark'))
-    if (layoutMode === 'dark') {
-      document.body.classList.add('dark-mode')
+    // 시스템 테마 변경되었을때 감지 후 테마 변경
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+      this.$localStorage.set('DARK_MODE', event.matches)
+      this.$store.dispatch('SetDarkMode', event.matches)
+      document.body.classList.toggle('dark-mode', event.matches)
+    })
+
+    // 로컬스토리지 다크 모드 확인 후 변경
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    let isDark = this.$localStorage.get('DARK_MODE')
+
+    if (isDark === null) {
+      isDark = prefersDark
+      this.$localStorage.set('DARK_MODE', isDark)
     }
+
+    this.$store.dispatch('SetDarkMode', isDark)
+    this.$config.theme['@layout-mode'] = isDark ? 'dark' : 'light'
+    document.body.classList.toggle('dark-mode', isDark)
+
+    document.body.classList.add('userLayout')
     const countNotify = this.$store.getters.countNotify
     this.showClear = false
     if (countNotify && countNotify > 0) {