From 37d2d575146b4727b9a04ad16777d1fc3c323fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E7=AB=AD=E5=8A=9B?= <jerrykuku@qq.com>
Date: Wed, 11 Dec 2024 12:09:53 +0800
Subject: [PATCH] Fix: Ensure totalPercentage does not go below zero during
 installation progress update Fix: Can not install.

---
 src/components/Apps/AppPanel.vue      |    3 +-
 src/components/Apps/ComposeConfig.vue | 1199 +++++++++++++------------
 src/components/CoreService.vue        | 1080 +++++++++++-----------
 3 files changed, 1176 insertions(+), 1106 deletions(-)

diff --git a/src/components/Apps/AppPanel.vue b/src/components/Apps/AppPanel.vue
index ab3c0ff0..f77941e0 100644
--- a/src/components/Apps/AppPanel.vue
+++ b/src/components/Apps/AppPanel.vue
@@ -1696,7 +1696,8 @@ export default {
 					this.currentInstallAppType = resData.type
 
 					if (resData.message !== '') {
-						this.totalPercentage = Number(resData.message)
+						const progress = Number(resData.message)
+						this.totalPercentage = progress < 0 ? 0 : progress
 
 						if (this.totalPercentage === 0) {
 							this.currentInstallAppText = 'Starting installation'
diff --git a/src/components/Apps/ComposeConfig.vue b/src/components/Apps/ComposeConfig.vue
index ced334a4..a5351b62 100644
--- a/src/components/Apps/ComposeConfig.vue
+++ b/src/components/Apps/ComposeConfig.vue
@@ -1,206 +1,59 @@
-<template>
-  <section style="height: calc(100vh - 12.8125rem)">
-    <b-tabs class="has-text-full-03" style="height: 100%" :value="firstAppName">
-      <b-tab-item v-for="(service, key) in configData.services" :key="key" :label="key" :value="key" @click="current_service = key">
-        <ValidationObserver :ref="key + 'valida'">
-          <b-field grouped>
-            <ValidationProvider class="is-flex-grow-1 mr-3" v-slot="{ errors, valid }" name="Image0" rules="required">
-              <b-field :label="$t('Docker Image') + ' *'" :message="$t(errors)" :type="{ 'is-danger': errors[0], 'is-success': valid }" class="mb-3">
-                <b-input :key="service.image" :readonly="state == 'update' || serviceStableVersion !== ''" :value="getFirstField(service.image)" :placeholder="$t('e.g.,hello-world:latest')" @input="(V) => changeIcon(V)" @blur="
-										(E) => {
-											return (service.image = service.image.split(':')[1]
-												? E.target._value + ':' + service.image.split(':')[1]
-												: E.target._value);
-										}
-									">
-                </b-input>
-              </b-field>
-            </ValidationProvider>
-
-            <ValidationProvider v-slot="{ errors, valid }" name="Image1" rules="required">
-              <b-field :label="$t('Tag')" :message="$t(errors) || '123'" :type="{ 'is-danger': errors[0], 'is-success': valid }"><b-dropdown aria-role="menu" trap-focus>
-                  <template #trigger>
-                    <b-input icon-pack="casa" icon-right="down-outline" class="is-flex-grow-1" :value="getLateField(service.image)" @input="
-												(V) => {
-													service.image = service.image.split(':')[0] + ':' + V;
-												}
-											">
-                    </b-input>
-                  </template>
-                  <b-dropdown-item key="latest" @click="
-									() => {
-										service.image = service.image.split(':')[0] + ':latest';
-									}
-								">
-                    latest
-                  </b-dropdown-item>
-                  <b-dropdown-item key="stable" v-show="serviceStableVersion !== '' && firstAppName === key" @click="
-									() => {
-										service.image = service.image.split(':')[0] + ':' + serviceStableVersion;
-									}
-								">
-                    stable({{ serviceStableVersion }})
-                  </b-dropdown-item>
-                </b-dropdown>
-              </b-field>
-            </ValidationProvider>
-
-          </b-field>
-
-          <ValidationProvider v-slot="{ errors, valid }" name="composeAppName" rules="required">
-            <b-field :label="$t('App Name') + ' *'" :message="$t(errors)" :type="{ 'is-danger': errors[0], 'is-success': valid }">
-              <b-input :placeholder="$t('e.g.,Your App Name')" :value="ice_i18n(configData['x-casaos'].title)" @blur="(E) => (configData['x-casaos'].title.custom = E.target._value)"></b-input>
-            </b-field>
-          </ValidationProvider>
-
-          <b-field v-if="key === firstAppName" :label="$t('Icon URL')">
-            <p class="control">
-              <span class="button is-static container-icon">
-                <b-image :key="appIcon" :src="appIcon" :src-fallback="require('@/assets/img/app/default.svg')" class="is-32x32" ratio="1by1"></b-image>
-              </span>
-            </p>
-            <b-input v-model="configData['x-casaos'].icon" :placeholder="$t('Your custom icon URL')" expanded></b-input>
-          </b-field>
-
-          <b-field v-if="key === firstAppName" label="Web UI">
-            <b-select v-model="configData['x-casaos'].scheme">
-              <option value="http">http://</option>
-              <option value="https">https://</option>
-            </b-select>
-            <b-input v-model="configData['x-casaos'].hostname" :placeholder="baseUrl" expanded> </b-input>
-            <b-autocomplete v-model="configData['x-casaos'].port_map" :data="bridgePorts(configData.services)" :open-on-focus="true" :placeholder="$t('Port')" class="has-colon" field="hostname" @select="(option) => (portSelected = option)">
-            </b-autocomplete>
-            <b-input v-model="configData['x-casaos'].index" :placeholder="'/index.html ' + $t('[Optional]')" expanded>
-            </b-input>
-          </b-field>
-
-          <b-field :label="$t('Network')">
-            <b-select :value="service.network_mode || service?.networks?.[0]" expanded placeholder="Select" @input="(v) => patchNetworkValue(v, service)">
-              <optgroup v-for="net in appendNetworks" :key="net.driver" :label="net.driver">
-                <option v-for="(option, index) in net.networks" :key="option.name + index" :value="option.name">
-                  {{ option.name }}
-                </option>
-              </optgroup>
-            </b-select>
-          </b-field>
-
-          <ports v-if="showPorts(service)" v-model="service.ports" :ports_in_use="ports_in_use" :showHostPost="showHostPort(service)"></ports>
-
-          <volumes-input-group v-model="service.volumes" :label="$t('Volumes')" :message="$t('No volumes now, click “+” to add one.')" type="volume">
-          </volumes-input-group>
-          <env-input-group v-model="service.environment" :label="$t('Environment Variables')" :message="$t('No environment variables now, click “+” to add one.')">
-          </env-input-group>
-          <input-group :devices="service.devices" :label="$t('Devices')" :message="$t('No devices now, click “+” to add one.')" type="device">
-          </input-group>
-          <commands-input v-model="service.command" :label="$t('Container Command')" :message="$t('No commands now, click “+” to add one.')">
-          </commands-input>
-
-          <b-field :label="$t('Privileged')">
-            <b-switch v-model="service.privileged"></b-switch>
-          </b-field>
-
-          <b-field :label="$t('Memory Limit')" class="mb-5">
-            <vue-slider :max="totalMemory" :min="memory_min" class="mx-2" :marks="true" :data="markData" :value="service.deploy.resources.limits.memory | duplexDisplay" @change="(v) => (service.deploy.resources.limits.memory = v)"></vue-slider>
-          </b-field>
-
-          <b-field :label="$t('CPU Shares')">
-            <b-select v-model="service.cpu_shares" :placeholder="$t('Select')" expanded>
-              <option :value="10">{{ $t("Low") }}</option>
-              <option :value="50">{{ $t("Medium") }}</option>
-              <option :value="90">{{ $t("High") }}</option>
-            </b-select>
-          </b-field>
-
-          <b-field :label="$t('Restart Policy')">
-            <b-select v-model="service.restart" :placeholder="$t('Select')" expanded>
-              <option value="on-failure">on-failure</option>
-              <option value="always">always</option>
-              <option value="unless-stopped">unless-stopped</option>
-            </b-select>
-          </b-field>
-
-          <b-field :label="$t('Container Capabilities (cap-add)')">
-            <b-taginput ref="taginput" v-model="service.cap_add" :allow-new="false" :data="capArray" :open-on-focus="false" autocomplete @typing="getFilteredTags">
-              <template slot-scope="props">
-                {{ props.option }}
-              </template>
-              <template #empty> There are no items</template>
-              <template #portSelected="props">
-                <b-tag v-for="(tag, index) in props.tags" :key="index" :tabstop="false" closable @close="$refs.taginput.removeTag(index, $event)">
-                  {{ tag }}
-                </b-tag>
-              </template>
-            </b-taginput>
-          </b-field>
-
-          <ValidationProvider v-slot="{ errors, valid }" name="Name" rules="ContainerName">
-            <b-field :label="$t('Container Name')" :message="$t(errors)" :type="{ 'is-danger': errors[0], 'is-success': valid && service.container_name }">
-              <b-input v-model="service.container_name" :placeholder="$t('Name of app container')" value=""></b-input>
-            </b-field>
-          </ValidationProvider>
-        </ValidationObserver>
-      </b-tab-item>
-    </b-tabs>
-  </section>
-</template>
-
 <script>
-import debounce from "lodash/debounce";
-import axios from "axios";
-import { ValidationObserver, ValidationProvider } from "vee-validate";
-import "@/plugins/vee-validate";
-import Ports from "../forms/Ports.vue";
-import EnvInputGroup from "../forms/EnvInputGroup.vue";
-import CommandsInput from "../forms/CommandsInput.vue";
-import InputGroup from "../forms/InputGroup.vue";
-import VolumesInputGroup from "@/components/forms/VolumesInputGroup.vue";
-import VueSlider from "vue-slider-component";
-import "vue-slider-component/theme/default.css";
-import YAML from "yaml";
-import lowerFirst from "lodash/lowerFirst";
-import isNil from "lodash/isNil";
-import { isNumber, isString } from "lodash/lang";
-import cloneDeep from "lodash/cloneDeep";
-import merge from "lodash/merge";
-import { ice_i18n } from "@/mixins/base/common-i18n";
-import { nanoid } from "nanoid";
-import find from "lodash/find";
-import isArray from "lodash/isArray";
-import isEmpty from "lodash/isEmpty";
-import isObject from "lodash/isObject";
+import debounce from 'lodash/debounce'
+import axios from 'axios'
+import { ValidationObserver, ValidationProvider } from 'vee-validate'
+import '@/plugins/vee-validate'
+import VueSlider from 'vue-slider-component'
+import 'vue-slider-component/theme/default.css'
+import YAML from 'yaml'
+import lowerFirst from 'lodash/lowerFirst'
+import isNil from 'lodash/isNil'
+import { isNumber, isString } from 'lodash/lang'
+import cloneDeep from 'lodash/cloneDeep'
+import merge from 'lodash/merge'
+import { nanoid } from 'nanoid'
+import find from 'lodash/find'
+import isArray from 'lodash/isArray'
+import isObject from 'lodash/isObject'
+import InputGroup from '../forms/InputGroup.vue'
+import EnvInputGroup from '../forms/EnvInputGroup.vue'
+import CommandsInput from '../forms/CommandsInput.vue'
+import Ports from '../forms/Ports.vue'
+import { ice_i18n } from '@/mixins/base/common-i18n'
+import VolumesInputGroup from '@/components/forms/VolumesInputGroup.vue'
 
 const data = [
-  "AUDIT_CONTROL",
-  "AUDIT_READ",
-  "BLOCK_SUSPEND",
-  "BPF",
-  "CHECKPOINT_RESTORE",
-  "DAC_READ_SEARCH",
-  "IPC_LOCK",
-  "IPC_OWNER",
-  "LEASE",
-  "LINUX_IMMUTABLE",
-  "MAC_ADMIN",
-  "MAC_OVERRIDE",
-  "NET_ADMIN",
-  "NET_BROADCAST",
-  "PERFMON",
-  "SYS_ADMIN",
-  "SYS_BOOT",
-  "SYS_MODULE",
-  "SYS_NICE",
-  "SYS_PACCT",
-  "SYS_PTRACE",
-  "SYS_RAWIO",
-  "SYS_RESOURCE",
-  "SYS_TIME",
-  "SYS_TTY_CONFIG",
-  "SYSLOG",
-  "WAKE_ALARM",
-];
+  'AUDIT_CONTROL',
+  'AUDIT_READ',
+  'BLOCK_SUSPEND',
+  'BPF',
+  'CHECKPOINT_RESTORE',
+  'DAC_READ_SEARCH',
+  'IPC_LOCK',
+  'IPC_OWNER',
+  'LEASE',
+  'LINUX_IMMUTABLE',
+  'MAC_ADMIN',
+  'MAC_OVERRIDE',
+  'NET_ADMIN',
+  'NET_BROADCAST',
+  'PERFMON',
+  'SYS_ADMIN',
+  'SYS_BOOT',
+  'SYS_MODULE',
+  'SYS_NICE',
+  'SYS_PACCT',
+  'SYS_PTRACE',
+  'SYS_RAWIO',
+  'SYS_RESOURCE',
+  'SYS_TIME',
+  'SYS_TTY_CONFIG',
+  'SYSLOG',
+  'WAKE_ALARM',
+]
 
 export default {
-  name: "ComposeConfig.vue",
+  name: 'ComposeConfig',
   components: {
     ValidationObserver,
     ValidationProvider,
@@ -211,47 +64,74 @@ export default {
     CommandsInput,
     VueSlider,
   },
+  props: {
+    state: String,
+    totalMemory: {
+      type: Number,
+      required: true,
+    },
+    networks: {
+      type: Array,
+      required: true,
+    },
+    capArray: {
+      type: Array,
+      required: true,
+    },
+    dockerComposeCommands: {
+      type: String,
+    },
+    errInfo: {
+      type: Object,
+      default() {
+        return {
+          ports_in_use: { udp: [], tcp: [] },
+        }
+      },
+    },
+  },
+  emits: ['updateDockerComposeServiceName', 'updateDockerComposeCommands', 'updateMainName'],
   data() {
     return {
-      current_service: "",
-      baseUrl: "",
+      current_service: '',
+      baseUrl: '',
       portSelected: null,
-      serviceStableVersion: "",
+      serviceStableVersion: '',
       configData: {
-        services: {
+        'services': {
           main_app: {
-            image: "",
-            mem_reservation: "0",
-            network_mode: "bridge",
+            image: '',
+            mem_reservation: '0',
+            network_mode: 'bridge',
             cpu_shares: 10,
-            restart: "unless-stopped",
+            restart: 'unless-stopped',
             volumes: [],
             depends_on: [],
             ports: [],
             environment: [],
             devices: [],
             command: [],
-            container_name: "",
+            container_name: '',
             deploy: {
               resources: {
                 limits: {
-                  memory: "256",
+                  memory: '256',
                 },
               },
             },
           },
         },
-        "x-casaos": {
-          hostname: "",
-          scheme: "http",
-          index: "/",
-          port_map: "",
-
-          author: "self",
-          category: "self",
-          icon: "",
+        'x-casaos': {
+          hostname: '',
+          scheme: 'http',
+          index: '/',
+          port_map: '',
+
+          author: 'self',
+          category: 'self',
+          icon: '',
           title: {
-            custom: "",
+            custom: '',
           },
         },
       },
@@ -261,135 +141,114 @@ export default {
       memory_min: 256,
       // other level_config
       volumes: [],
-    };
+    }
   },
-  props: {
-    state: String,
-    totalMemory: {
-      type: Number,
-      required: true,
-    },
-    networks: {
-      type: Array,
-      required: true,
+  computed: {
+    firstAppName() {
+      return Object.keys(this.configData.services)[0]
     },
-    capArray: {
-      type: Array,
-      required: true,
+    appIcon() {
+      return this.configData['x-casaos'].icon
     },
-    dockerComposeCommands: {
-      type: String,
+    appendNetworks() {
+      return this.networks.map((item) => {
+        if (item.driver === 'bridge') {
+          if (find(item.networks, ['name', this.firstAppName])) {
+            return item
+          }
+          else {
+            return {
+              driver: 'bridge',
+              networks: [
+                {
+                  driver: 'bridge',
+                  id: nanoid(),
+                  name: this.firstAppName,
+                },
+                ...item.networks,
+              ],
+            }
+          }
+        }
+        else {
+          return item
+        }
+      })
     },
-    errInfo: {
-      type: Object,
-      default: {
-        ports_in_use: { udp: [], tcp: [] },
-      },
+    markData() {
+      const data = []
+      let markData = 256
+      let i = 0
+      while (markData < this.totalMemory) {
+        markData = 256 * 2 ** i
+        if (markData < this.totalMemory) {
+          data.push(markData)
+        }
+        else {
+          data.push(this.totalMemory)
+        }
+        i++
+      }
+      return data
     },
   },
   watch: {
-    current_service: {
+    'current_service': {
       handler(val) {
-        this.$emit("updateDockerComposeServiceName", val);
+        this.$emit('updateDockerComposeServiceName', val)
         if (this.configData.name) {
           this.$openAPI.appManagement.appStore
             .composeAppServiceStableTag(this.configData.name, this.current_service)
             .then((res) => {
-              this.serviceStableVersion = res.data.data.tag;
+              this.serviceStableVersion = res.data.data.tag
             })
             .catch((e) => {
-              this.serviceStableVersion = "";
-            });
-        } else {
-          this.serviceStableVersion = "";
+              this.serviceStableVersion = ''
+            })
+        }
+        else {
+          this.serviceStableVersion = ''
         }
-
       },
       immediate: true,
     },
     // Watch if configData changes
-    configData: {
-      handler(val, newVal) {
-        if (this.state == "install") {
-          localStorage.setItem("app_data", JSON.stringify(val));
+    'configData': {
+      handler(val, _newVal) {
+        if (this.state === 'install') {
+          localStorage.setItem('app_data', JSON.stringify(val))
         }
-        this.outputConfigDataCommands(val);
+        this.outputConfigDataCommands(val)
       },
       deep: true,
     },
     // The parent component passes in data
-    dockerComposeCommands: {
+    'dockerComposeCommands': {
       handler(val) {
         if (val != null) {
-          this.parseComposeYaml(val);
+          this.parseComposeYaml(val)
         }
       },
       immediate: true,
     },
-    "configData.name": {
-      handler(name = "") {
-        this.$emit("updateMainName", name);
+    'configData.name': {
+      handler(name = '') {
+        this.$emit('updateMainName', name)
       },
       immediate: true,
     },
-    "errInfo.ports_in_use": {
+    'errInfo.ports_in_use': {
       handler(val) {
-        this.ports_in_use = val;
+        this.ports_in_use = val
       },
       immediate: true,
     },
   },
-  computed: {
-    firstAppName() {
-      return Object.keys(this.configData.services)[0];
-    },
-    appIcon() {
-      return this.configData["x-casaos"].icon;
-    },
-    appendNetworks() {
-      return this.networks.map((item) => {
-        if (item.driver == "bridge") {
-          if (find(item.networks, ["name", this.firstAppName])) {
-            return item;
-          } else {
-            return {
-              driver: "bridge",
-              networks: [
-                {
-                  driver: "bridge",
-                  id: nanoid(),
-                  name: this.firstAppName,
-                },
-                ...item.networks,
-              ],
-            };
-          }
-        } else {
-          return item;
-        }
-      });
-    },
-    markData() {
-      const data = [];
-      let markData = 256;
-      let i = 0;
-      while (markData < this.totalMemory) {
-        markData = 256 * Math.pow(2, i);
-        if (markData < this.totalMemory) {
-          data.push(markData);
-        } else {
-          data.push(this.totalMemory);
-        }
-        i++;
-      }
-      return data;
-    },
-  },
   created() {
     // Set Front-end base url
-    this.baseUrl = `${document.domain}`;
+    this.baseUrl = `${document.domain}`
     // update Service Name.
-    this.$emit("updateDockerComposeServiceName", this.firstAppName);
+    this.$emit('updateDockerComposeServiceName', this.firstAppName)
   },
 
   methods: {
@@ -402,35 +261,35 @@ export default {
      */
     getAsyncData: debounce(function (name) {
       if (!name.length) {
-        this.data = [];
-        return;
+        this.data = []
+        return
       }
-      this.isFetching = true;
+      this.isFetching = true
       axios
         .get(
-          `https://hub.docker.com/api/content/v1/products/search?source=community&q=${name}&page=1&page_size=4`
+          `https://hub.docker.com/api/content/v1/products/search?source=community&q=${name}&page=1&page_size=4`,
         )
         .then(({ data }) => {
-          this.data = [];
-          data.summaries.forEach((item) => this.data.push(item.name));
+          this.data = []
+          data.summaries.forEach(item => this.data.push(item.name))
         })
         .catch((error) => {
-          this.data = [];
-          throw error;
+          this.data = []
+          throw error
         })
         .finally(() => {
-          this.isFetching = false;
-        });
+          this.isFetching = false
+        })
     }, 500),
 
     /**
      * @description: Change App icon when image changed
-     * @param {String} image
+     * @param {string} image
      * @return {*} void
      */
     changeIcon(image) {
       // set this.configData['x-casaos'].icon
-      this.configData["x-casaos"].icon = this.getIconFromImage(image);
+      this.configData['x-casaos'].icon = this.getIconFromImage(image)
     },
 
     /**
@@ -439,11 +298,12 @@ export default {
      * @return {*}
      */
     getIconFromImage(image) {
-      if (image == "") {
-        return "";
-      } else {
-        let appIcon = image.split(":")[0].split("/").pop();
-        return `https://icon.casaos.io/main/all/${appIcon}.png`;
+      if (image === '') {
+        return ''
+      }
+      else {
+        const appIcon = image.split(':')[0].split('/').pop()
+        return `https://icon.casaos.io/main/all/${appIcon}.png`
       }
     },
 
@@ -454,60 +314,60 @@ export default {
      */
     getFilteredTags(text) {
       return data.filter((option) => {
-        return option.toString().indexOf(text.toUpperCase()) >= 0;
-      });
+        return option.toString().includes(text.toUpperCase())
+      })
     },
 
     async checkStepItem(ref) {
-      let isValid = await ref.validate();
-      return isValid;
+      const isValid = await ref.validate()
+      return isValid
     },
 
     /**
      * @description: Validate form async
-     * @param {Object} ref ref of component
-     * @return {Boolean}
+     * @param {object} ref ref of component
+     * @return {boolean}
      */
     async checkStep() {
-      const promises = [];
+      const promises = []
       for (const servicesKey in this.configData.services) {
-        promises.push(this.$refs[servicesKey + "valida"][0].validate());
+        promises.push(this.$refs[`${servicesKey}valida`][0].validate())
       }
-      return await Promise.all(promises);
+      return await Promise.all(promises)
     },
 
     /**
      * @description: Parse Import Docker Compose Commands
-     * @return {Boolean}
+     * @return {boolean}
      */
     async parseComposeYaml(val) {
       try {
-        const yaml = YAML.parse(val);
+        const yaml = YAML.parse(val)
         if (!yaml) {
-          return;
+          return
         }
 
         // 其他配置
-        this.volumes = yaml.volumes || {};
+        this.volumes = yaml.volumes || {}
 
         // set main app name
-        this.configData.name = yaml?.name || "";
-        this.configData.services = {};
+        this.configData.name = yaml?.name || ''
+        this.configData.services = {}
         // 删除掉原默认主应用。
-        this.$delete(this.configData.services, "main_app");
+        this.$delete(this.configData.services, 'main_app')
         // this.current_service = yaml["x-casaos"].main;
-        this.current_service = Object.keys(yaml.services)[0];
+        this.current_service = Object.keys(yaml.services)[0]
         // 解析 services，并将其赋值到 configData.services中。
 
         // set top level x-casaos data
-        this.configData["x-casaos"] = merge(this.configData["x-casaos"], yaml["x-casaos"]);
+        this.configData['x-casaos'] = merge(this.configData['x-casaos'], yaml['x-casaos'])
 
         for (const serviceKey in yaml.services) {
-          this.$set(this.configData.services, serviceKey, this.parseComposeItem(yaml.services[serviceKey]));
+          this.$set(this.configData.services, serviceKey, this.parseComposeItem(yaml.services[serviceKey]))
         }
-
-      } catch (error) {
-        console.log(error);
+      }
+      catch (error) {
+        console.error(error)
       }
     },
 
@@ -515,26 +375,27 @@ export default {
      * formate for render
      * */
     parseComposeItem(composeServicesItemInput) {
-      let composeServicesItem = {};
+      const composeServicesItem = {}
       // Image
-      composeServicesItem.image = composeServicesItemInput.image;
+      composeServicesItem.image = composeServicesItemInput.image
       // Envs
       if (composeServicesItemInput.environment) {
-        let envArray = Array.isArray(composeServicesItemInput.environment)
+        const envArray = Array.isArray(composeServicesItemInput.environment)
           ? composeServicesItemInput.environment
-          : Object.entries(composeServicesItemInput.environment);
+          : Object.entries(composeServicesItemInput.environment)
         composeServicesItem.environment = envArray.map((item) => {
-          let ii = typeof item === "object" ? Array.from(item) : item.split("=");
+          const ii = typeof item === 'object' ? Array.from(item) : item.split('=')
           return {
-            host: ii[1].replace(/"/g, ""),
+            host: ii[1].replace(/"/g, ''),
             container: ii[0],
-          };
-        });
-      } else {
-        composeServicesItem.environment = [];
+          }
+        })
+      }
+      else {
+        composeServicesItem.environment = []
       }
 
-      //Ports
+      // Ports
       /*
       - "3000"
       - "3000-3005"
@@ -549,208 +410,221 @@ export default {
       */
       composeServicesItem.ports = this.makeArray(composeServicesItemInput.ports).map((item) => {
         if (isString(item)) {
-          const regex =
-            /(^(?<host>(\d{1,3}\.){1,3}\d{1,3}):?)?(?<published>(\d{1,5})(-(\d{1,5}))?)(:(?<target>(\d{1,5})(-(\d{1,5}))?))?(\/(?<protocol>.*)$)?/;
-          const match = item.match(regex).groups;
-          const host_ip = match.host;
-          const target = Number(match.target?.split("-")?.[0]);
-          const published = match.published;
-          const protocol = match.protocol || "tcp";
+          const regex
+            // eslint-disable-next-line regexp/no-misleading-capturing-group
+            = /(^(?<host>(\d{1,3}\.){1,3}\d{1,3}):?)?(?<published>(\d{1,5})(-(\d{1,5}))?)(:(?<target>(\d{1,5})(-(\d{1,5}))?))?(\/(?<protocol>.*)$)?/
+          const match = item.match(regex).groups
+          const host_ip = match.host
+          const target = Number(match.target?.split('-')?.[0])
+          const published = match.published
+          const protocol = match.protocol || 'tcp'
 
           return {
             host_ip,
             target,
             published,
             protocol,
-          };
-        } else if (isObject(item)) {
-          item.published = item.published.toString();
-          return item;
-        } else {
+          }
+        }
+        else if (isObject(item)) {
+          item.published = item.published.toString()
+          return item
+        }
+        else {
           return {
-            host_ip: "",
-            target: item + "",
-            published: item + "",
-            protocol: "tcp",
-          };
+            host_ip: '',
+            target: `${item}`,
+            published: `${item}`,
+            protocol: 'tcp',
+          }
         }
-      });
-      isNil(composeServicesItem.ports) && this.$set(composeServicesItem, "ports", []);
+      })
+      isNil(composeServicesItem.ports) && this.$set(composeServicesItem, 'ports', [])
 
-      //Volume
+      // Volume
       // https://yeasy.gitbook.io/docker_practice/compose/compose_file#volumes
       composeServicesItem.volumes = this.makeArray(composeServicesItemInput.volumes).map((item) => {
         if (isString(item)) {
           // 1\ replace variable in string for example: ${VOLUME_PATH}:/data
           // this.volumes 可能为空。
           Object.keys(this.volumes || {}).map((key) => {
-            item = item.replace(key, this.volumes[key] || "");
-          });
+            item = item.replace(key, this.volumes[key] || '')
+          })
           // 2\ split string
-          let ii = item.split(":");
+          const ii = item.split(':')
           if (ii.length > 1) {
             return {
-              type: "bind",
+              type: 'bind',
               target: ii[1],
-              source: this.volumeAutoCheck(ii[1], ii[0], lowerFirst(this.configData["x-casaos"].title.en_us)),
-            };
-          } else {
+              source: this.volumeAutoCheck(ii[1], ii[0], lowerFirst(this.configData['x-casaos'].title.en_us)),
+            }
+          }
+          else {
             return {
-              type: "bind",
+              type: 'bind',
               target: ii[0],
-              source: this.volumeAutoCheck(ii[0], "", lowerFirst(this.configData["x-casaos"].title.en_us)),
-            };
+              source: this.volumeAutoCheck(ii[0], '', lowerFirst(this.configData['x-casaos'].title.en_us)),
+            }
           }
-        } else if (item) {
+        }
+        else if (item) {
           // 1\ replace value in object for example: {type: 'bind', source: '${VOLUME_PATH}', target: '/data'}
           Object.keys(this.volumes || {}).map((key) => {
-            item.source = item?.source.replace(key, this?.volumes[key] || "");
-            item.target = item?.target;
-          });
+            item.source = item?.source.replace(key, this?.volumes[key] || '')
+            // item.target = item?.target
+          })
 
-          return item;
+          return item
         }
-      });
-      isNil(composeServicesItem.volumes) && this.$set(composeServicesItem, "volumes", []);
+      })
+      isNil(composeServicesItem.volumes) && this.$set(composeServicesItem, 'volumes', [])
 
       // Devices
       composeServicesItem.devices = this.makeArray(composeServicesItemInput.devices).map((item) => {
-        let ii = item.split(":");
+        const ii = item.split(':')
         return {
           container: ii[1],
           host: ii[0],
-        };
-      });
-      isNil(composeServicesItem.devices) && this.$set(composeServicesItem, "devices", []);
+        }
+      })
+      isNil(composeServicesItem.devices) && this.$set(composeServicesItem, 'devices', [])
 
-      //Network_mode
-      const network_mode = composeServicesItemInput?.network_mode;
-      const networks = composeServicesItemInput?.networks;
+      // Network_mode
+      const network_mode = composeServicesItemInput?.network_mode
+      const networks = composeServicesItemInput?.networks
       if (networks) {
-        composeServicesItem.networks = isArray(networks) ? networks : Object.keys(networks);
-      } else if (network_mode == "bridge" || network_mode == undefined) {
-        composeServicesItem.network_mode = "bridge";
-      } else if (network_mode == "host") {
-        composeServicesItem.network_mode = "host";
-      } else if (network_mode == "physical") {
-        composeServicesItem.network_mode = "macvlan";
-      } else {
-        composeServicesItem.network_mode = network_mode;
-      }
-
-      //hostname
+        composeServicesItem.networks = isArray(networks) ? networks : Object.keys(networks)
+      }
+      else if (network_mode === 'bridge' || network_mode === undefined) {
+        composeServicesItem.network_mode = 'bridge'
+      }
+      else if (network_mode === 'host') {
+        composeServicesItem.network_mode = 'host'
+      }
+      else if (network_mode === 'physical') {
+        composeServicesItem.network_mode = 'macvlan'
+      }
+      else {
+        composeServicesItem.network_mode = network_mode
+      }
+
+      // hostname
       // configData.host_name = parsedInput.hostname != undefined ? parsedInput.hostname : ""
 
       // privileged
       // relation issue: https://github.com/IceWhaleTech/CasaOS/issues/1264
       // if privileged is undefined or false, set it to false.
-      composeServicesItem.privileged = composeServicesItemInput.privileged === true;
+      composeServicesItem.privileged = composeServicesItemInput.privileged === true
 
-      //cap-add
-      if (composeServicesItemInput.cap_add != undefined) {
-        composeServicesItem.cap_add = composeServicesItemInput.cap_add;
-      } else {
-        composeServicesItem.cap_add = [];
+      // cap-add
+      if (composeServicesItemInput.cap_add !== undefined) {
+        composeServicesItem.cap_add = composeServicesItemInput.cap_add
       }
-      //Restart
-      if (composeServicesItemInput.restart != undefined) {
-        composeServicesItem.restart = composeServicesItemInput.restart;
+      else {
+        composeServicesItem.cap_add = []
       }
-      composeServicesItem.restart =
-        composeServicesItem.restart === "no" || !composeServicesItem.restart
-          ? "unless-stopped"
-          : composeServicesItem.restart;
+      // Restart
+      if (composeServicesItemInput.restart !== undefined) {
+        composeServicesItem.restart = composeServicesItemInput.restart
+      }
+      composeServicesItem.restart
+        = composeServicesItem.restart === 'no' || !composeServicesItem.restart
+          ? 'unless-stopped'
+          : composeServicesItem.restart
 
       // command
-      composeServicesItem.command = this.makeArray(composeServicesItemInput.command);
+      composeServicesItem.command = this.makeArray(composeServicesItemInput.command)
 
       // container_name
-      composeServicesItem.container_name = composeServicesItemInput?.container_name || "";
-      composeServicesItem.hostname = composeServicesItemInput?.container_name || "";
+      composeServicesItem.container_name = composeServicesItemInput?.container_name || ''
+      composeServicesItem.hostname = composeServicesItemInput?.container_name || ''
       // this.$set(composeServicesItem, "container_name", composeServicesItemInput?.container_name);
 
       if (
-        composeServicesItemInput.cpu_shares === 0 ||
-        composeServicesItemInput.cpu_shares > 99 ||
-        isNil(composeServicesItemInput.cpu_shares)
+        composeServicesItemInput.cpu_shares === 0
+        || composeServicesItemInput.cpu_shares > 99
+        || isNil(composeServicesItemInput.cpu_shares)
       ) {
-        this.$set(composeServicesItem, "cpu_shares", 90);
-      } else {
-        this.$set(composeServicesItem, "cpu_shares", composeServicesItemInput.cpu_shares);
+        this.$set(composeServicesItem, 'cpu_shares', 90)
+      }
+      else {
+        this.$set(composeServicesItem, 'cpu_shares', composeServicesItemInput.cpu_shares)
       }
 
       // 判断是否存在
-      const memory = composeServicesItemInput?.deploy?.resources?.limits?.memory;
-      let newMemory = 0;
+      const memory = composeServicesItemInput?.deploy?.resources?.limits?.memory
+      let newMemory = 0
       if (memory) {
         // 存在的情况下，检测是否有单位
         // 检测没有单位的情况
         if (isNumber(memory - 0) && memory > 0) {
-          newMemory = memory / 1024 / 1024;
-        } else if (/[Mm]$/.test(memory)) {
-          newMemory = memory.replace(/[Mm]/, "");
-        } else if (/[Gg]$/.test(memory)) {
-          newMemory = memory.replace(/[Gg]/, "") * 1024;
+          newMemory = memory / 1024 / 1024
+        }
+        else if (/M$/i.test(memory)) {
+          newMemory = memory.replace(/M/i, '')
+        }
+        else if (/G$/i.test(memory)) {
+          newMemory = memory.replace(/G/i, '') * 1024
         }
       }
-      let ob = merge(composeServicesItemInput?.deploy, {
+      const ob = merge(composeServicesItemInput?.deploy, {
         resources: { limits: { memory: newMemory || this.totalMemory } },
-      });
-      this.$set(composeServicesItem, "deploy", ob);
+      })
+      this.$set(composeServicesItem, 'deploy', ob)
 
-      return composeServicesItem;
+      return composeServicesItem
     },
 
     volumeAutoCheck(containerPath, hostPath, appName) {
-      let finalHostPath = hostPath;
-      const rootDir = "/DATA";
+      let finalHostPath = hostPath
+      const rootDir = '/DATA'
       const checkArray = [
         {
-          keywords: ["config"],
+          keywords: ['config'],
           value: `/AppData/${appName}${containerPath}`,
         },
         {
-          keywords: ["tvshows", "TV", "tv"],
+          keywords: ['tvshows', 'TV', 'tv'],
           value: `/Media/TV Shows`,
         },
         {
-          keywords: ["movies", "Movie", "movie"],
+          keywords: ['movies', 'Movie', 'movie'],
           value: `/Media/Movies`,
         },
         {
-          keywords: ["Music", "music"],
+          keywords: ['Music', 'music'],
           value: `/Media/Music`,
         },
         {
-          keywords: ["download"],
+          keywords: ['download'],
           value: `/Downloads`,
         },
         {
-          keywords: ["pictures", "photo"],
+          keywords: ['pictures', 'photo'],
           value: `/Gallery`,
         },
         {
-          keywords: ["media"],
+          keywords: ['media'],
           value: `/Media`,
         },
-      ];
+      ]
 
       checkArray.forEach((item) => {
         if (
           item.keywords.some((keywordsItem) => {
-            return containerPath.includes(keywordsItem);
+            return containerPath.includes(keywordsItem)
           })
         ) {
-          finalHostPath = rootDir + item.value;
+          finalHostPath = rootDir + item.value
         }
-      });
+      })
 
-      return finalHostPath;
+      return finalHostPath
     },
 
     makeArray(foo) {
-      const newArray = typeof foo == "string" ? [foo] : foo;
-      return newArray == undefined ? [] : newArray;
+      const newArray = typeof foo == 'string' ? [foo] : foo
+      return newArray == undefined ? [] : newArray
     },
 
     // ****** migration !!! end !!!
@@ -761,195 +635,374 @@ export default {
      * */
     outputConfigDataCommands(val) {
       // configData tans to docker-compose.yml
-      let ConfigData = cloneDeep(val);
+      let ConfigData = cloneDeep(val)
       for (const servicesKey in val.services) {
         // 数据源
-        let service = val.services[servicesKey];
+        const service = val.services[servicesKey]
         // 输出结果
-        let outputService = ConfigData.services[servicesKey];
+        const outputService = ConfigData.services[servicesKey]
         // memory
-        outputService.deploy.resources.limits.memory = service.deploy.resources.limits.memory + "M";
+        outputService.deploy.resources.limits.memory = `${service.deploy.resources.limits.memory}M`
         outputService.devices = service.devices
           .filter((device) => {
             if (device.container || device.host) {
-              return true;
+              return true
             }
-            return false;
+            return false
           })
           .map((device) => {
-            return `${device.host}:${device.container}`;
-          });
+            return `${device.host}:${device.container}`
+          })
         outputService.environment = service.environment
           .filter((env) => {
             if (env.container || env.host) {
-              return true;
+              return true
             }
-            return false;
+            return false
           })
           .map((env) => {
-            return `${env.container}=${env.host}`;
-          });
+            return `${env.container}=${env.host}`
+          })
       }
       if (this.dockerComposeCommands) {
-        let yaml = YAML.parse(this.dockerComposeCommands);
+        const yaml = YAML.parse(this.dockerComposeCommands)
         Object.keys(yaml.services).forEach((key) => {
-          yaml.services[key].ports = [];
-          yaml.services[key].volumes = [];
-          yaml.services[key].devices = [];
-          yaml.services[key].cap_add = [];
-          yaml.services[key].command = [];
-          delete yaml.services[key]?.network_mode;
-          delete yaml.services[key]?.networks;
-        });
+          yaml.services[key].ports = []
+          yaml.services[key].volumes = []
+          yaml.services[key].devices = []
+          yaml.services[key].cap_add = []
+          yaml.services[key].command = []
+          delete yaml.services[key]?.network_mode
+          delete yaml.services[key]?.networks
+        })
 
-        ConfigData = merge(yaml, ConfigData);
+        ConfigData = merge(yaml, ConfigData)
       }
-      this.$emit("updateDockerComposeCommands", YAML.stringify(ConfigData));
+      this.$emit('updateDockerComposeCommands', YAML.stringify(ConfigData))
     },
 
     showPorts(service) {
       if (service.networks) {
-        return true;
+        return true
       }
       if (!service?.network_mode) {
-        return true;
+        return true
       }
       // 存在
       if (
-        service.network_mode.toLowerCase().indexOf("macvlan") > -1 ||
-        service.network_mode.indexOf("host") > -1
+        service.network_mode.toLowerCase().includes('macvlan')
+        || service.network_mode.includes('host')
       ) {
-        return false;
-      } else {
-        return true;
+        return false
+      }
+      else {
+        return true
       }
     },
     showHostPort(service) {
       if (!service.network_mode) {
-        return true;
+        return true
       }
       // 存在
-      if (service.network_mode.indexOf("host") > -1) {
-        return false;
-      } else {
-        return true;
+      if (service.network_mode.includes('host')) {
+        return false
+      }
+      else {
+        return true
       }
     },
     bridgePorts(services) {
-      let result = [];
+      const result = []
       for (const key in services) {
-        const service = services[key];
+        const service = services[key]
         service.ports.forEach((item) => {
           if (isNumber(item)) {
-            result.push(`${item}`);
-          } else {
-            const TEMPORARY_PORT_INFORMATION = item.published?.split(":");
-            const published =
-              TEMPORARY_PORT_INFORMATION?.length > 1
+            result.push(`${item}`)
+          }
+          else {
+            const TEMPORARY_PORT_INFORMATION = item.published?.split(':')
+            const published
+              = TEMPORARY_PORT_INFORMATION?.length > 1
                 ? TEMPORARY_PORT_INFORMATION[1]
-                : TEMPORARY_PORT_INFORMATION[0];
-            const publishedRange = published?.split("-");
+                : TEMPORARY_PORT_INFORMATION[0]
+            const publishedRange = published?.split('-')
             if (publishedRange?.length > 1) {
-              const start = parseInt(publishedRange[0]);
-              const end = parseInt(publishedRange[1]);
+              const start = Number.parseInt(publishedRange[0])
+              const end = Number.parseInt(publishedRange[1])
               for (let i = start; i <= end; i++) {
-                result.push(`${i}`);
+                result.push(`${i}`)
               }
-            } else {
-              result.push(`${parseInt(publishedRange[0])}`);
+            }
+            else {
+              result.push(`${Number.parseInt(publishedRange[0])}`)
             }
           }
-        });
+        })
+      }
+      return result
+    },
+    duplexDisplay(val) {
+      if (!val) {
+        return 256 // this.memory_min
       }
-      return result;
+      return (isNumber(val) && val) || (val && val.replace(/M/i, ''))
     },
     // unused
     filteredBeidgePort(service) {
       return this.bridgePorts(service).filter((port) => {
-        return port.host.indexOf(service.port_map) >= 0;
-      });
+        return port.host.includes(service.port_map)
+      })
     },
     // networks or network_mode
     patchNetworkValue(value, service) {
-      if (value === "host" || value === "bridge") {
-        this.$delete(service, "networks");
-        this.$set(service, "network_mode", value);
-      } else {
-        this.$delete(service, "network_mode");
-        this.$set(service, "networks", [value]);
-        const tempNetworks = merge(this.configData?.networks || {}, { [value]: { name: value } });
-        this.$set(this.configData, "networks", tempNetworks);
+      if (value === 'host' || value === 'bridge') {
+        this.$delete(service, 'networks')
+        this.$set(service, 'network_mode', value)
+      }
+      else {
+        this.$delete(service, 'network_mode')
+        this.$set(service, 'networks', [value])
+        const tempNetworks = merge(this.configData?.networks || {}, { [value]: { name: value } })
+        this.$set(this.configData, 'networks', tempNetworks)
       }
     },
 
     getFirstField(image) {
-      return image?.split(":")[0];
+      return image?.split(':')[0]
     },
 
     getLateField(image) {
-      return image?.split(":")[1];
-    },
-  },
-  filters: {
-    duplexDisplay(val) {
-      if (!val) {
-        return 256; //this.memory_min
-      }
-      return (isNumber(val) && val) || (val && val.replace(/[Mm]/, ""));
+      return image?.split(':')[1]
     },
   },
-};
+}
 </script>
+
+<template>
+  <section style="height: calc(100vh - 12.8125rem)">
+    <b-tabs class="has-text-full-03" style="height: 100%" :value="firstAppName">
+      <b-tab-item v-for="(service, key) in configData.services" :key="key" :label="key" :value="key" @click="current_service = key">
+        <ValidationObserver :ref="`${key}valida`">
+          <b-field grouped>
+            <ValidationProvider v-slot="{ errors, valid }" class="is-flex-grow-1 mr-3" name="Image0" rules="required">
+              <b-field :label="`${$t('Docker Image')} *`" :message="$t(errors)" :type="{ 'is-danger': errors[0], 'is-success': valid }" class="mb-3">
+                <b-input
+                  :key="service.image" :readonly="state == 'update' || serviceStableVersion !== ''" :value="getFirstField(service.image)" :placeholder="$t('e.g.,hello-world:latest')" @input="(V) => changeIcon(V)" @blur="
+                    (E) => {
+                      return (service.image = service.image.split(':')[1]
+                        ? `${E.target._value}:${service.image.split(':')[1]}`
+                        : E.target._value);
+                    }
+                  "
+                />
+              </b-field>
+            </ValidationProvider>
+
+            <b-dropdown aria-role="menu" trap-focus>
+              <template #trigger>
+                <ValidationProvider v-slot="{ errors, valid }" name="Image1" rules="required">
+                  <b-field
+                    :label="$t('Tag')"
+                    :message="$t(errors) || '123'"
+                    :type="{ 'is-danger': errors[0], 'is-success': valid }"
+                  >
+                    <b-input
+                      icon-pack="casa"
+                      icon-right="down-outline"
+                      class="is-flex-grow-1"
+                      :value="getLateField(service.image)"
+                      @input="
+                        (V) => {
+                          service.image = `${service.image.split(':')[0]}:${V}`;
+                        }
+                      "
+                    />
+                  </b-field>
+                </ValidationProvider>
+              </template>
+              <b-dropdown-item
+                key="latest"
+                @click="
+                  () => {
+                    service.image = `${service.image.split(':')[0]}:latest`;
+                  }
+                "
+              >
+                latest
+              </b-dropdown-item>
+              <b-dropdown-item
+                v-show="serviceStableVersion !== '' && firstAppName === key"
+                key="stable"
+                @click="
+                  () => {
+                    service.image = `${service.image.split(':')[0]}:${serviceStableVersion}`;
+                  }
+                "
+              >
+                stable({{ serviceStableVersion }})
+              </b-dropdown-item>
+            </b-dropdown>
+          </b-field>
+
+          <ValidationProvider v-slot="{ errors, valid }" name="composeAppName" rules="required">
+            <b-field :label="`${$t('App Name')} *`" :message="$t(errors)" :type="{ 'is-danger': errors[0], 'is-success': valid }">
+              <b-input :placeholder="$t('e.g.,Your App Name')" :value="ice_i18n(configData['x-casaos'].title)" @blur="(E) => (configData['x-casaos'].title.custom = E.target._value)" />
+            </b-field>
+          </ValidationProvider>
+
+          <b-field v-if="key === firstAppName" :label="$t('Icon URL')">
+            <p class="control">
+              <span class="button is-static container-icon">
+                <b-image :key="appIcon" :src="appIcon" :src-fallback="require('@/assets/img/app/default.svg')" class="is-32x32" ratio="1by1" />
+              </span>
+            </p>
+            <b-input v-model="configData['x-casaos'].icon" :placeholder="$t('Your custom icon URL')" expanded />
+          </b-field>
+
+          <b-field v-if="key === firstAppName" label="Web UI">
+            <b-select v-model="configData['x-casaos'].scheme">
+              <option value="http">
+                http://
+              </option>
+              <option value="https">
+                https://
+              </option>
+            </b-select>
+            <b-input v-model="configData['x-casaos'].hostname" :placeholder="baseUrl" expanded />
+            <b-autocomplete v-model="configData['x-casaos'].port_map" :data="bridgePorts(configData.services)" :open-on-focus="true" :placeholder="$t('Port')" class="has-colon" field="hostname" @select="(option) => (portSelected = option)" />
+            <b-input v-model="configData['x-casaos'].index" :placeholder="`/index.html ${$t('[Optional]')}`" expanded />
+          </b-field>
+
+          <b-field :label="$t('Network')">
+            <b-select :value="service.network_mode || service?.networks?.[0]" expanded placeholder="Select" @input="(v) => patchNetworkValue(v, service)">
+              <optgroup v-for="net in appendNetworks" :key="net.driver" :label="net.driver">
+                <option v-for="(option, index) in net.networks" :key="option.name + index" :value="option.name">
+                  {{ option.name }}
+                </option>
+              </optgroup>
+            </b-select>
+          </b-field>
+
+          <Ports v-if="showPorts(service)" v-model="service.ports" :ports_in_use="ports_in_use" :show-host-post="showHostPort(service)" />
+
+          <VolumesInputGroup v-model="service.volumes" :label="$t('Volumes')" :message="$t('No volumes now, click “+” to add one.')" type="volume" />
+          <EnvInputGroup v-model="service.environment" :label="$t('Environment Variables')" :message="$t('No environment variables now, click “+” to add one.')" />
+          <InputGroup :devices="service.devices" :label="$t('Devices')" :message="$t('No devices now, click “+” to add one.')" type="device" />
+          <CommandsInput v-model="service.command" :label="$t('Container Command')" :message="$t('No commands now, click “+” to add one.')" />
+
+          <b-field :label="$t('Privileged')">
+            <b-switch v-model="service.privileged" />
+          </b-field>
+
+          <b-field :label="$t('Memory Limit')" class="mb-5">
+            <VueSlider :max="totalMemory" :min="memory_min" class="mx-2" :marks="true" :data="markData" :value="duplexDisplay(service.deploy.resources.limits.memory)" @change="(v) => (service.deploy.resources.limits.memory = v)" />
+          </b-field>
+
+          <b-field :label="$t('CPU Shares')">
+            <b-select v-model="service.cpu_shares" :placeholder="$t('Select')" expanded>
+              <option :value="10">
+                {{ $t("Low") }}
+              </option>
+              <option :value="50">
+                {{ $t("Medium") }}
+              </option>
+              <option :value="90">
+                {{ $t("High") }}
+              </option>
+            </b-select>
+          </b-field>
+
+          <b-field :label="$t('Restart Policy')">
+            <b-select v-model="service.restart" :placeholder="$t('Select')" expanded>
+              <option value="on-failure">
+                on-failure
+              </option>
+              <option value="always">
+                always
+              </option>
+              <option value="unless-stopped">
+                unless-stopped
+              </option>
+            </b-select>
+          </b-field>
+
+          <b-field :label="$t('Container Capabilities (cap-add)')">
+            <b-taginput ref="taginput" v-model="service.cap_add" :allow-new="false" :data="capArray" :open-on-focus="false" autocomplete @typing="getFilteredTags">
+              <template slot-scope="props">
+                {{ props.option }}
+              </template>
+              <template #empty>
+                There are no items
+              </template>
+              <template #portSelected="props">
+                <b-tag v-for="(tag, index) in props.tags" :key="index" :tabstop="false" closable @close="$refs.taginput.removeTag(index, $event)">
+                  {{ tag }}
+                </b-tag>
+              </template>
+            </b-taginput>
+          </b-field>
+
+          <ValidationProvider v-slot="{ errors, valid }" name="Name" rules="ContainerName">
+            <b-field :label="$t('Container Name')" :message="$t(errors)" :type="{ 'is-danger': errors[0], 'is-success': valid && service.container_name }">
+              <b-input v-model="service.container_name" :placeholder="$t('Name of app container')" value="" />
+            </b-field>
+          </ValidationProvider>
+        </ValidationObserver>
+      </b-tab-item>
+    </b-tabs>
+  </section>
+</template>
+
 <style lang="scss" scoped>
 .b-tabs {
-	margin-bottom: 0;
-
-	::v-deep .tabs {
-		padding: 0 1.5rem;
-		border-bottom: 1px solid hsla(208, 16%, 94%, 1);
-
-		ul {
-			border: 0;
-
-			li {
-				font-size: 0.875rem;
-
-				a {
-					padding-top: 0.75rem;
-					padding-bottom: 5px;
-				}
-			}
-		}
-	}
-
-	/* 设置滚动条样式 */
-	::v-deep .tab-content {
-		padding-right: 1.5rem;
-		padding-left: 1.5rem;
-		height: calc(100% - 2.75rem);
-		overflow-y: overlay;
-		overflow-x: hidden;
-
-		.container-icon {
-			height: 2.5rem;
-		}
-	}
+  margin-bottom: 0;
+
+  ::v-deep .tabs {
+    padding: 0 1.5rem;
+    border-bottom: 1px solid hsla(208, 16%, 94%, 1);
+
+    ul {
+      border: 0;
+
+      li {
+        font-size: 0.875rem;
+
+        a {
+          padding-top: 0.75rem;
+          padding-bottom: 5px;
+        }
+      }
+    }
+  }
+
+  /* 设置滚动条样式 */
+  ::v-deep .tab-content {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    height: calc(100% - 2.75rem);
+    overflow-y: overlay;
+    overflow-x: hidden;
+
+    .container-icon {
+      height: 2.5rem;
+    }
+  }
 }
 
 ::v-deep .vue-slider-mark-step {
-	width: 100%;
-	height: 100%;
-	border-radius: 50%;
-	-webkit-box-shadow: 0 0 0 2px #ccc;
-	box-shadow: 0 0 0 2px #ccc;
-	background-color: #fff;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 0 0 2px #ccc;
+  box-shadow: 0 0 0 2px #ccc;
+  background-color: #fff;
 }
 
 ::v-deep .vue-slider-mark-label {
-	font-size: 0.75rem;
+  font-size: 0.75rem;
 }
 
 ::v-deep .vue-slider-dot-tooltip-text {
-	font-size: 0.75rem;
+  font-size: 0.75rem;
 }
 </style>
diff --git a/src/components/CoreService.vue b/src/components/CoreService.vue
index 300e7bd9..f8bf438b 100644
--- a/src/components/CoreService.vue
+++ b/src/components/CoreService.vue
@@ -1,106 +1,56 @@
-<template>
-	<swiper ref="mySwiper" :options="swiperOptions">
-		<swiper-slide v-for="(noticeCard, key) in noticesData" :key="key" :class="{ _singleWidth: showFullCard }">
-			<noticeBlock :noticeData="noticeCard" :noticeType="key" @deleteNotice="refreshNotice"></noticeBlock>
-		</swiper-slide>
-		<swiper-slide v-if="recommendShow">
-			<sync-block></sync-block>
-		</swiper-slide>
-		<swiper-slide v-if="recommendShow">
-			<smart-block></smart-block>
-		</swiper-slide>
-		<div v-show="recommendShow || noticeLength !== 0" slot="pagination" class="swiper-pagination">
-		</div>
-		<img slot="button-prev" :src="require('@/assets/img/widgets/swiper-left.svg')" alt="prev"
-			class="swiper-button-prev" />
-		<img slot="button-next" :src="require('@/assets/img/widgets/swiper-right.svg')" alt="next"
-			class="swiper-button-next" />
-	</swiper>
-</template>
-
 <script>
-import noticeBlock from "@/components/noticBlock/noticeBlock";
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-import { mixin } from '@/mixins/mixin';
-import sortBy from 'lodash/sortBy';
-import SyncBlock from "@/components/syncthing/SyncBlock.vue";
-import SmartBlock from "@/components/smartHome/SmartBlock.vue";
-import events from "@/events/events";
-import Business_ShowNewAppTag from "@/mixins/app/Business_ShowNewAppTag";
-import DiskLearnMore from "@/components/Storage/DiskLearnMore.vue";
-import last from "lodash/last";
-import { ice_i18n } from "@/mixins/base/common-i18n";
-
+import sortBy from 'lodash/sortBy'
+import last from 'lodash/last'
+import noticeBlock from '@/components/noticBlock/noticeBlock'
+import { mixin } from '@/mixins/mixin'
+import SyncBlock from '@/components/syncthing/SyncBlock.vue'
+import SmartBlock from '@/components/smartHome/SmartBlock.vue'
+import events from '@/events/events'
+import Business_ShowNewAppTag from '@/mixins/app/Business_ShowNewAppTag'
+import DiskLearnMore from '@/components/Storage/DiskLearnMore.vue'
+import { ice_i18n } from '@/mixins/base/common-i18n'
 
 export default {
-	components: { SmartBlock, SyncBlock, noticeBlock, Swiper, SwiperSlide },
-	name: "core-service",
-	mixins: [mixin, Business_ShowNewAppTag],
-	computed: {
-		recommendShow() {
-			return this.$store.state.recommendSwitch
-		},
-		noticeLength() {
-			return Object.keys(this.noticesData).length
-		},
-		// full width to show with single notice card
-		showFullCard() {
-			return this.noticeLength === 1 && !this.recommendShow
-		}
-	},
-	watch: {
-		noticeLength: {
-			handler(val, oldValue) {
-				if (val === oldValue) {
-					return
-				}
-				if (val === 0) {
-					this.$messageBus('youshouldknow_show', 'false');
-				} else if (oldValue === 0) {
-					this.$messageBus('youshouldknow_show', 'true');
-				}
-				// skip new notice card
-				this.$nextTick(() => {
-					this.$refs['mySwiper'].$swiper.slideTo(val - 1, 1000, true)
-				})
-			},
-		}
-	},
-	data() {
-		return {
-			notice: "local-storage",
-			isLoading: false,
-			swiperOptions: {
-				watchOverflow: true,
-				breakpoints: {
-					450: {
-						slidesPerView: 1
-					},
-					960: {
-						slidesPerView: 2
-					}
-				},
-				spaceBetween: 16,
-				pagination: {
-					el: '.swiper-pagination',
-					bulletClass: 'swiper-pagination-bullet',
-					clickable: true,
-				},
-				navigation: {
-					nextEl: '.swiper-button-next',
-					prevEl: '.swiper-button-prev',
-					disabledClass: 'swiper-button-disabled',
-				},
-				observer: true,
-				on: {
-					slideChangeTransitionStart: () => {
-						this.$messageBus('youshouldknow_slide');
-					},
-				}
-			},
-			noticesData: {
-				// example data:
-				/*'local-storage': {
+  name: 'CoreService',
+  components: { SmartBlock, SyncBlock, NoticeBlock: noticeBlock, Swiper, SwiperSlide },
+  mixins: [mixin, Business_ShowNewAppTag],
+  inject: ['homeShowFiles'],
+  data() {
+    return {
+      notice: 'local-storage',
+      isLoading: false,
+      swiperOptions: {
+        watchOverflow: true,
+        breakpoints: {
+          450: {
+            slidesPerView: 1,
+          },
+          960: {
+            slidesPerView: 2,
+          },
+        },
+        spaceBetween: 16,
+        pagination: {
+          el: '.swiper-pagination',
+          bulletClass: 'swiper-pagination-bullet',
+          clickable: true,
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+          disabledClass: 'swiper-button-disabled',
+        },
+        observer: true,
+        on: {
+          slideChangeTransitionStart: () => {
+            this.$messageBus('youshouldknow_slide')
+          },
+        },
+      },
+      noticesData: {
+        // example data:
+        /* 'local-storage': {
 				  prelude: {
 					title: 'local-storage',
 					icon: 'mdi-usb',
@@ -121,451 +71,517 @@ export default {
 					path: '/storage',
 					icon: 'mdi-arrow-right',
 				  },
-				},*/
-			},
-			dockerProgress: {},
-			totalPercentage: 0,
-		}
-	},
-	created() {
-		this.getMessageFromLetter();
-		this.initUIEventBus();
-	},
-	mounted() {
-		this.WSHub = this.initMessageBus();
-	},
-	inject: ['homeShowFiles'],
-	methods: {
-		createWS(domain) {
-			let socket
-			// reference:
-			socket = new WebSocket(`${this.$wsProtocol}//${this.$baseURL}/v2/message_bus/event/${domain}`);
-			socket.onopen = () => {
-				console.log('socket open')
-			}
-			socket.onclose = () => {
-				console.log('close socket')
-			}
-			socket.onerror = (e) => {
-				console.log('socket failure', e)
-			}
-			socket.onmessage = (event) => {
-				let eventJson = JSON.parse(event.data)
-				this.patchTransform(eventJson);
-			}
-			return socket
-		},
-		initUIEventBus() {
-			this.$EventBus.$on('casaUI:openInFiles', (path) => {
-				this.homeShowFiles(path);
-			});
+				}, */
+      },
+      dockerProgress: {},
+      totalPercentage: 0,
+    }
+  },
+  computed: {
+    recommendShow() {
+      return this.$store.state.recommendSwitch
+    },
+    noticeLength() {
+      return Object.keys(this.noticesData).length
+    },
+    // full width to show with single notice card
+    showFullCard() {
+      return this.noticeLength === 1 && !this.recommendShow
+    },
+  },
+  watch: {
+    noticeLength: {
+      handler(val, oldValue) {
+        if (val === oldValue) {
+          return
+        }
+        if (val === 0) {
+          this.$messageBus('youshouldknow_show', 'false')
+        }
+        else if (oldValue === 0) {
+          this.$messageBus('youshouldknow_show', 'true')
+        }
+        // skip new notice card
+        this.$nextTick(() => {
+          this.$refs.mySwiper.$swiper.slideTo(val - 1, 1000, true)
+        })
+      },
+    },
+  },
+  created() {
+    this.getMessageFromLetter()
+    this.initUIEventBus()
+  },
+  mounted() {
+    this.WSHub = this.initMessageBus()
+  },
+  beforeUnmount() {
+    for (const key in this.WSHub) {
+      this.WSHub[key].close()
+    }
+    this.destroyUIEventBus()
+  },
+  methods: {
+    createWS(domain) {
+      let socket
+      // reference:
+      socket = new WebSocket(`${this.$wsProtocol}//${this.$baseURL}/v2/message_bus/event/${domain}`)
+      socket.onopen = () => {
+        console.log('socket open')
+      }
+      socket.onclose = () => {
+        console.log('close socket')
+      }
+      socket.onerror = (e) => {
+        console.log('socket failure', e)
+      }
+      socket.onmessage = (event) => {
+        const eventJson = JSON.parse(event.data)
+        this.patchTransform(eventJson)
+      }
+      return socket
+    },
+    initUIEventBus() {
+      this.$EventBus.$on('casaUI:openInFiles', (path) => {
+        this.homeShowFiles(path)
+      })
 
-			this.$EventBus.$on('casaUI:openDiskLearnMore', () => {
-				this.$buefy.modal.open({
-					parent: this,
-					component: DiskLearnMore,
-					hasModalCard: true,
-					customClass: 'storage-modal',
-					trapFocus: true,
-					canCancel: [],
-					scroll: "keep",
-					animation: "zoom-in",
-				})
-			});
+      this.$EventBus.$on('casaUI:openDiskLearnMore', () => {
+        this.$buefy.modal.open({
+          parent: this,
+          component: DiskLearnMore,
+          hasModalCard: true,
+          customClass: 'storage-modal',
+          trapFocus: true,
+          canCancel: [],
+          scroll: 'keep',
+          animation: 'zoom-in',
+        })
+      })
 
-			// this.$EventBus.$on('casaUI:openStorageManager', () => {
-			//  this.showStorageSettingsModal();
-			// });
-		},
-		destroyUIEventBus() {
-			this.$EventBus.$off('casaUI:openInFiles');
-			this.$EventBus.$off('casaUI:openDiskLearnMore');
-			// this.$EventBus.$off('casaUI:openStorageManager');
-		},
-		triggerUIEventBus(event) {
-			let eventJson = JSON.parse(event)
-			this.$emit(eventJson.name, eventJson.propertyTypeList)
-		},
-		initMessageBus() {
-			// config files
-			let subscriptionMessageSourse = ['local-storage']
-			let WSHub = Object.create(null)
-			// subscriptionMessageSourse.forEach((item) => {
-			// 	WSHub[item] = this.createWS(item)
-			// })
-			return WSHub
-		},
-		getMessageFromLetter() {
-			this.$api.users.getLetter().then(res => {
-				let sortedData = sortBy(res.data, ['timestamp']);
-				sortedData.forEach(item => {
-					let json = {
-						...item,
-						properties: JSON.parse(item.properties),
-					}
-					if (json.properties['tran'] !== 'usb') {
-						this.patchTransform(json)
-					}
-				})
-			})
-		},
-		refreshNotice(data, type) {
-			// this.noticesData[type] = data
-			this.$delete(this.noticesData, type)
-		},
-		patchTransform(eventJson) {
-			// only show which is disk from local-storage
-			let notShow = eventJson.name.split(':')[1] !== 'disk'
-			if (notShow) {
-				// delete letter which is partition!
-				this.$api.users.delLetter(eventJson.uuid)
-				return
-			}
-			// Business : whether formatting is required
-			let eventType
-			if (eventJson.properties['children:num'] > 0) {
-				eventType = eventJson.properties['tran'];
-			} else {
-				eventType = '';
-			}
+      // this.$EventBus.$on('casaUI:openStorageManager', () => {
+      //  this.showStorageSettingsModal();
+      // });
+    },
+    destroyUIEventBus() {
+      this.$EventBus.$off('casaUI:openInFiles')
+      this.$EventBus.$off('casaUI:openDiskLearnMore')
+      // this.$EventBus.$off('casaUI:openStorageManager');
+    },
+    triggerUIEventBus(event) {
+      const eventJson = JSON.parse(event)
+      this.$emit(eventJson.name, eventJson.propertyTypeList)
+    },
+    initMessageBus() {
+      // config files
+      const subscriptionMessageSourse = ['local-storage']
+      const WSHub = Object.create(null)
+      // subscriptionMessageSourse.forEach((item) => {
+      // 	WSHub[item] = this.createWS(item)
+      // })
+      return WSHub
+    },
+    getMessageFromLetter() {
+      this.$api.users.getLetter().then((res) => {
+        const sortedData = sortBy(res.data, ['timestamp'])
+        sortedData.forEach((item) => {
+          const json = {
+            ...item,
+            properties: JSON.parse(item.properties),
+          }
+          if (json.properties.tran !== 'usb') {
+            this.patchTransform(json)
+          }
+        })
+      })
+    },
+    refreshNotice(data, type) {
+      // this.noticesData[type] = data
+      this.$delete(this.noticesData, type)
+    },
+    patchTransform(eventJson) {
+      // only show which is disk from local-storage
+      const notShow = eventJson.name.split(':')[1] !== 'disk'
+      if (notShow) {
+        // delete letter which is partition!
+        this.$api.users.delLetter(eventJson.uuid)
+        return
+      }
+      // Business : whether formatting is required
+      let eventType
+      if (eventJson.properties['children:num'] > 0) {
+        eventType = eventJson.properties.tran
+      }
+      else {
+        eventType = ''
+      }
 
-			let operateType = eventJson.name.split(':')[2]
-			let entityUUID = eventJson.properties['serial'] || eventJson.properties['local-storage:uuid'];
-			switch (eventType) {
-				case 'usb':
-					this.transformUSB(eventJson, operateType, entityUUID)
-					break;
-				case 'newDisk':
-					this.transformNewDisk(eventJson, operateType, entityUUID)
-					break;
-				default:
-					this.transformLocalStorage(eventJson, operateType, entityUUID)
-					break;
-			}
-		},
-		transformUSB(eventJson) {
-			let eventType = eventJson.properties['tran']
-			let operateType = eventJson.name.split(':')[2]
-			let entityUUID = eventJson.properties['serial'] || eventJson.properties['local-storage:uuid'];
-			if (!this.noticesData[eventType]) {
-				this.$set(this.noticesData, eventType, {
-					prelude: {
-						title: 'Found a new drive',
-						icon: '',
-					},
-					content: {},
-					contentType: 'list',
-					operate: {
-						type: 'casaUI:eventBus',
-						title: 'Open in Files',
-						event: 'casaUI:openInFiles',
-						path: '/Storage',
-						icon: 'mdi-arrow-right',
-					},
-				})
-			}
-			if (operateType === 'added') {
-				let percent = eventJson.properties['avail'] ? `${this.renderSize(eventJson.properties['size'] - eventJson.properties['avail'])} / ${this.renderSize(eventJson.properties['size'])}` : 'NaN';
-				this.$set(this.noticesData[eventType]['content'], entityUUID, {
-					title: eventJson.properties['model'] || 'Found a new drive',
-					icon: '/storage/USB.png',
-					color: 'is-primary',
-					path: eventJson.properties['local-storage:path'],
-					uuid: entityUUID,
-					value: percent,
-					messageUUID: eventJson.uuid
-				})
-				this.noticesData[eventType]['operate']['path'] = eventJson.properties['mount_point']
-			} else if (operateType === 'removed') {
-				// Delete according to the uuid with this.noticesData[eventType]['content'] from BackEnd-DB
-				if (this.noticesData[eventType] && this.noticesData[eventType]['content'][entityUUID]) {
-					this.$api.users.delLetter(this.noticesData[eventType]['content'][entityUUID].messageUUID)
-					this.$delete(this.noticesData[eventType]['content'], entityUUID)
-				}
-				this.$api.users.delLetter(eventJson.uuid)
-				if (Object.keys(this.noticesData[eventType]['content']).length === 0) {
-					this.$delete(this.noticesData, eventType)
-				}
-			}
-		},
-		transformLocalStorage(eventJson, /*operateType*/) {
-			// let eventType = eventJson.properties['tran']
-			let operateType = eventJson.name.split(':')[2]
-			let driveType = eventJson.name.split(':')[1]
-			let entityUUID = eventJson.properties['serial'] || eventJson.properties['local-storage:uuid'];
-			if (!this.noticesData[driveType]) {
-				this.$set(this.noticesData, driveType, {
-					prelude: {
-						title: 'Found a new drive',
-						icon: '',
-					},
-					content: {},
-					contentType: 'list',
-					operate: {
-						type: 'casaUI:eventBus',
-						title: 'Storage Manager',
-						event: 'casaUI:openStorageManager',
-						path: '/Storage',
-						icon: 'mdi-arrow-right',
-					},
-				})
-			}
-			if (operateType === 'added') {
-				let availValue = eventJson.properties['avail'] > 0 ? this.renderSize(eventJson.properties['size'] - eventJson.properties['avail']) : 'NaN';
-				let percent = `${availValue} / ${this.renderSize(eventJson.properties['size'])}`;
-				// let percent = eventType.toUpperCase();
-				this.$set(this.noticesData[driveType]['content'], entityUUID, {
-					title: eventJson.properties['model'] || 'Found a new drive',
-					icon: '/storage/storage.png',
-					color: 'is-primary',
-					path: eventJson.properties['local-storage:path'],
-					uuid: entityUUID,
-					value: percent,
-					messageUUID: eventJson.uuid
-				})
-				this.noticesData[driveType]['operate']['path'] = eventJson.properties['mount_point']
-			} else if (operateType === 'removed') {
-				// Delete according to the uuid with this.noticesData[driveType]['content'] from BackEnd-DB
-				if (this.noticesData[driveType] && this.noticesData[driveType]['content'][entityUUID]) {
-					this.$api.users.delLetter(this.noticesData[driveType]['content'][entityUUID].messageUUID)
-					this.$delete(this.noticesData[driveType]['content'], entityUUID)
-				}
-				this.$api.users.delLetter(eventJson.uuid)
-				if (Object.keys(this.noticesData[driveType]['content']).length === 0) {
-					this.$delete(this.noticesData, driveType)
-				}
-			}
-		},
-		transformNewDisk(eventJson, operateType) {
-			let eventType = eventJson.properties['tran']
-			let entityUUID = eventJson.properties['serial'] || eventJson.properties['local-storage:uuid'];
-			if (!this.noticesData[eventType]) {
-				this.$set(this.noticesData, eventType, {
-					prelude: {
-						title: 'Need to add a new disk',
-						icon: '',
-					},
-					content: {},
-					contentType: 'list',
-					operate: {
-						type: 'casaUI:eventBus',
-						title: 'Learn more',
-						event: 'casaUI:openDiskLearnMore',
-						path: '/Storage',
-						icon: 'mdi-arrow-right',
-					},
-				})
-			}
-			if (operateType === 'added') {
-				let percent = eventJson.properties['avail'] ? `${this.renderSize(eventJson.properties['used'])} / ${this.renderSize(eventJson.properties['size'])}` : 'NaN';
-				this.$set(this.noticesData[eventType]['content'], entityUUID, {
-					title: eventJson.properties['model'] || 'Found a new drive',
-					icon: '/storage/disk.png',
-					color: 'is-primary',
-					path: eventJson.properties['local-storage:path'],
-					uuid: entityUUID,
-					value: percent,
-					messageUUID: eventJson.uuid
-				})
-				this.noticesData[eventType]['operate']['path'] = eventJson.properties['mount_point']
-			} else if (operateType === 'removed') {
-				// Delete according to the uuid with this.noticesData[eventType]['content'] from BackEnd-DB
-				if (this.noticesData[eventType] && this.noticesData[eventType]['content'][entityUUID]) {
-					this.$api.users.delLetter(this.noticesData[eventType]['content'][entityUUID].messageUUID)
-					this.$delete(this.noticesData[eventType]['content'], entityUUID)
-				}
+      const operateType = eventJson.name.split(':')[2]
+      const entityUUID = eventJson.properties.serial || eventJson.properties['local-storage:uuid']
+      switch (eventType) {
+        case 'usb':
+          this.transformUSB(eventJson, operateType, entityUUID)
+          break
+        case 'newDisk':
+          this.transformNewDisk(eventJson, operateType, entityUUID)
+          break
+        default:
+          this.transformLocalStorage(eventJson, operateType, entityUUID)
+          break
+      }
+    },
+    transformUSB(eventJson) {
+      const eventType = eventJson.properties.tran
+      const operateType = eventJson.name.split(':')[2]
+      const entityUUID = eventJson.properties.serial || eventJson.properties['local-storage:uuid']
+      if (!this.noticesData[eventType]) {
+        this.$set(this.noticesData, eventType, {
+          prelude: {
+            title: 'Found a new drive',
+            icon: '',
+          },
+          content: {},
+          contentType: 'list',
+          operate: {
+            type: 'casaUI:eventBus',
+            title: 'Open in Files',
+            event: 'casaUI:openInFiles',
+            path: '/Storage',
+            icon: 'mdi-arrow-right',
+          },
+        })
+      }
+      if (operateType === 'added') {
+        const percent = eventJson.properties.avail ? `${this.renderSize(eventJson.properties.size - eventJson.properties.avail)} / ${this.renderSize(eventJson.properties.size)}` : 'NaN'
+        this.$set(this.noticesData[eventType].content, entityUUID, {
+          title: eventJson.properties.model || 'Found a new drive',
+          icon: '/storage/USB.png',
+          color: 'is-primary',
+          path: eventJson.properties['local-storage:path'],
+          uuid: entityUUID,
+          value: percent,
+          messageUUID: eventJson.uuid,
+        })
+        this.noticesData[eventType].operate.path = eventJson.properties.mount_point
+      }
+      else if (operateType === 'removed') {
+        // Delete according to the uuid with this.noticesData[eventType]['content'] from BackEnd-DB
+        if (this.noticesData[eventType] && this.noticesData[eventType].content[entityUUID]) {
+          this.$api.users.delLetter(this.noticesData[eventType].content[entityUUID].messageUUID)
+          this.$delete(this.noticesData[eventType].content, entityUUID)
+        }
+        this.$api.users.delLetter(eventJson.uuid)
+        if (Object.keys(this.noticesData[eventType].content).length === 0) {
+          this.$delete(this.noticesData, eventType)
+        }
+      }
+    },
+    transformLocalStorage(eventJson /* operateType */) {
+      // let eventType = eventJson.properties['tran']
+      const operateType = eventJson.name.split(':')[2]
+      const driveType = eventJson.name.split(':')[1]
+      const entityUUID = eventJson.properties.serial || eventJson.properties['local-storage:uuid']
+      if (!this.noticesData[driveType]) {
+        this.$set(this.noticesData, driveType, {
+          prelude: {
+            title: 'Found a new drive',
+            icon: '',
+          },
+          content: {},
+          contentType: 'list',
+          operate: {
+            type: 'casaUI:eventBus',
+            title: 'Storage Manager',
+            event: 'casaUI:openStorageManager',
+            path: '/Storage',
+            icon: 'mdi-arrow-right',
+          },
+        })
+      }
+      if (operateType === 'added') {
+        const availValue = eventJson.properties.avail > 0 ? this.renderSize(eventJson.properties.size - eventJson.properties.avail) : 'NaN'
+        const percent = `${availValue} / ${this.renderSize(eventJson.properties.size)}`
+        // let percent = eventType.toUpperCase();
+        this.$set(this.noticesData[driveType].content, entityUUID, {
+          title: eventJson.properties.model || 'Found a new drive',
+          icon: '/storage/storage.png',
+          color: 'is-primary',
+          path: eventJson.properties['local-storage:path'],
+          uuid: entityUUID,
+          value: percent,
+          messageUUID: eventJson.uuid,
+        })
+        this.noticesData[driveType].operate.path = eventJson.properties.mount_point
+      }
+      else if (operateType === 'removed') {
+        // Delete according to the uuid with this.noticesData[driveType]['content'] from BackEnd-DB
+        if (this.noticesData[driveType] && this.noticesData[driveType].content[entityUUID]) {
+          this.$api.users.delLetter(this.noticesData[driveType].content[entityUUID].messageUUID)
+          this.$delete(this.noticesData[driveType].content, entityUUID)
+        }
+        this.$api.users.delLetter(eventJson.uuid)
+        if (Object.keys(this.noticesData[driveType].content).length === 0) {
+          this.$delete(this.noticesData, driveType)
+        }
+      }
+    },
+    transformNewDisk(eventJson, operateType) {
+      const eventType = eventJson.properties.tran
+      const entityUUID = eventJson.properties.serial || eventJson.properties['local-storage:uuid']
+      if (!this.noticesData[eventType]) {
+        this.$set(this.noticesData, eventType, {
+          prelude: {
+            title: 'Need to add a new disk',
+            icon: '',
+          },
+          content: {},
+          contentType: 'list',
+          operate: {
+            type: 'casaUI:eventBus',
+            title: 'Learn more',
+            event: 'casaUI:openDiskLearnMore',
+            path: '/Storage',
+            icon: 'mdi-arrow-right',
+          },
+        })
+      }
+      if (operateType === 'added') {
+        const percent = eventJson.properties.avail ? `${this.renderSize(eventJson.properties.used)} / ${this.renderSize(eventJson.properties.size)}` : 'NaN'
+        this.$set(this.noticesData[eventType].content, entityUUID, {
+          title: eventJson.properties.model || 'Found a new drive',
+          icon: '/storage/disk.png',
+          color: 'is-primary',
+          path: eventJson.properties['local-storage:path'],
+          uuid: entityUUID,
+          value: percent,
+          messageUUID: eventJson.uuid,
+        })
+        this.noticesData[eventType].operate.path = eventJson.properties.mount_point
+      }
+      else if (operateType === 'removed') {
+        // Delete according to the uuid with this.noticesData[eventType]['content'] from BackEnd-DB
+        if (this.noticesData[eventType] && this.noticesData[eventType].content[entityUUID]) {
+          this.$api.users.delLetter(this.noticesData[eventType].content[entityUUID].messageUUID)
+          this.$delete(this.noticesData[eventType].content, entityUUID)
+        }
 
-				this.$api.users.delLetter(eventJson.uuid)
-				if (Object.keys(this.noticesData[eventType]['content']).length === 0) {
-					this.$delete(this.noticesData, eventType)
-				}
-			}
-		},
-		addNotice(Json, rootName) {
-			this.$set(this.noticesData, rootName, {
-				prelude: {
-					title: Json.title,
-					icon: Json.icon,
-				},
-				content: Json.content,
-				contentType: Json.contentType,
-				operate: Json.operate,
-			})
-		},
-		removeNotice(rootName) {
-			this.$delete(this.noticesData, rootName)
-		},
+        this.$api.users.delLetter(eventJson.uuid)
+        if (Object.keys(this.noticesData[eventType].content).length === 0) {
+          this.$delete(this.noticesData, eventType)
+        }
+      }
+    },
+    addNotice(Json, rootName) {
+      this.$set(this.noticesData, rootName, {
+        prelude: {
+          title: Json.title,
+          icon: Json.icon,
+        },
+        content: Json.content,
+        contentType: Json.contentType,
+        operate: Json.operate,
+      })
+    },
+    removeNotice(rootName) {
+      this.$delete(this.noticesData, rootName)
+    },
 
-		transformAppInstallationProgress(res) {
-			if (res.finished) {
-				if (this.noticesData[res.name]) {
-					this.removeNotice(res.name);
-				}
-				this.$EventBus.$emit(events.RELOAD_APP_LIST);
-				if (res.isNewTag) {
-					this.addIdToSessionStorage(res.name);
-				}
-				return;
-			}
+    transformAppInstallationProgress(res) {
+      if (res.finished) {
+        if (this.noticesData[res.name]) {
+          this.removeNotice(res.name)
+        }
+        this.$EventBus.$emit(events.RELOAD_APP_LIST)
+        if (res.isNewTag) {
+          this.addIdToSessionStorage(res.name)
+        }
+        return
+      }
 
-			if (this.noticesData[res.name]) {
-				if (res.message !== "") {
-					try {
-						let progress = Number(res.message);
-						let currentInstallAppText = '';
-						if (progress?.toString() === '0') {
-							currentInstallAppText = 'Starting installation';
-						} else if (progress?.toString() === '100') {
-							currentInstallAppText = 'Installation completed';
-						} else {
-							currentInstallAppText = 'Installing ' + progress + '%';
-						}
-						this.$set(this.noticesData[res.name], 'content', {
-							text: currentInstallAppText,
-							value: progress
-						});
-					} catch (e) {
-						console.log(e);
-					}
-				}
-				return;
-			}
+      if (this.noticesData[res.name]) {
+        if (res.message !== '') {
+          try {
+            const progress = Number(res.message) < 0 ? 0 : Number(res.message)
+            let currentInstallAppText = ''
+            if (progress?.toString() === '0') {
+              currentInstallAppText = 'Starting installation'
+            }
+            else if (progress?.toString() === '100') {
+              currentInstallAppText = 'Installation completed'
+            }
+            else {
+              currentInstallAppText = `Installing ${progress}%`
+            }
+            this.$set(this.noticesData[res.name], 'content', {
+              text: currentInstallAppText,
+              value: progress,
+            })
+          }
+          catch (e) {
+            console.log(e)
+          }
+        }
+        return
+      }
 
-			const data = {
-				title: this.$t('Installing {title}', { title: res.title }),
-				icon: res.icon,
-				content: {
-					text: res?.message,
-					value: 0
-				},
-				contentType: 'progress',
-				operate: false
-			};
-			this.addNotice(data, res.name);
-		},
+      const data = {
+        title: this.$t('Installing {title}', { title: res.title }),
+        icon: res.icon,
+        content: {
+          text: res?.message,
+          value: 0,
+        },
+        contentType: 'progress',
+        operate: false,
+      }
+      this.addNotice(data, res.name)
+    },
 
-	},
-	sockets: {
-		"app:apply-changes-begin"(res) { 
-			const title = ice_i18n(JSON.parse(res.Properties["app:title"]));
-			this.transformAppInstallationProgress({
-				finished: false,
-				name: res.Properties["app:name"],
-				title,
-				id: res.Properties["app:name"],
-				success: true,
-				message: "Starting pulling image info",
-				icon: res.Properties["app:icon"]
-			});
-		},
-		"app:apply-changes-end"(res) {
-			this.$buefy.toast.open({
-				message: "The setting of " + res.Properties["app:name"] + " is complete",
-				duration: 5000,
-				type: "is-success"
-			})
-			this.transformAppInstallationProgress({
-				finished: true,
-				// First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
-				name: res.Properties["app:name"],
-				message: res.Properties["message"],
-				icon: res.Properties["app:icon"]
-			});
-		},
-		"app:apply-changes-error"(res) {
-			this.$buefy.toast.open({
-				message: res.Properties.message,
-				duration: 5000,
-				type: "is-danger"
-			})
-			this.transformAppInstallationProgress({
-				// Display error messages
-				finished: false,
-				// First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
-				name: res.Properties["app:name"] + "error",
-				success: false,
-				title: res.Properties["app:name"] + "Error Info",
-				message: res.Properties["message"],
-				icon: res.Properties["app:icon"]
-			});
-		},
-		"app:install-begin"(res) {
-			const title = ice_i18n(JSON.parse(res.Properties["app:title"]));
-			this.transformAppInstallationProgress({
-				finished: false,
-				name: res.Properties["app:name"],
-				title,
-				id: res.Properties["app:name"],
-				success: true,
-				type: "install-begin",
-				message: "Starting installation",
-				icon: res.Properties["app:icon"]
-			});
-		},
-		"app:install-end"(res) {
-			this.transformAppInstallationProgress({
-				finished: true,
-				// First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
-				name: res.Properties["app:name"],
-				id: res.Properties["app:name"],
-				icon: res.Properties["app:icon"],
-				isNewTag: true
-			});
-		},
-		"app:install-error"(res) {
-			this.transformAppInstallationProgress({
-				// Display error messages
-				finished: false,
-				// First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
-				name: res.Properties["app:name"] + "error",
-				success: false,
-				title: res.Properties["app:name"] + " Error Info",
-				message: res.Properties["message"],
-				icon: res.Properties["app:icon"],
-				isNewTag: true
-			});
-		},
+  },
+  sockets: {
+    'app:apply-changes-begin': function (res) {
+      const title = ice_i18n(JSON.parse(res.Properties['app:title']))
+      this.transformAppInstallationProgress({
+        finished: false,
+        name: res.Properties['app:name'],
+        title,
+        id: res.Properties['app:name'],
+        success: true,
+        message: 'Starting pulling image info',
+        icon: res.Properties['app:icon'],
+      })
+    },
+    'app:apply-changes-end': function (res) {
+      this.$buefy.toast.open({
+        message: `The setting of ${res.Properties['app:name']} is complete`,
+        duration: 5000,
+        type: 'is-success',
+      })
+      this.transformAppInstallationProgress({
+        finished: true,
+        // First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
+        name: res.Properties['app:name'],
+        message: res.Properties.message,
+        icon: res.Properties['app:icon'],
+      })
+    },
+    'app:apply-changes-error': function (res) {
+      this.$buefy.toast.open({
+        message: res.Properties.message,
+        duration: 5000,
+        type: 'is-danger',
+      })
+      this.transformAppInstallationProgress({
+        // Display error messages
+        finished: false,
+        // First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
+        name: `${res.Properties['app:name']}error`,
+        success: false,
+        title: `${res.Properties['app:name']}Error Info`,
+        message: res.Properties.message,
+        icon: res.Properties['app:icon'],
+      })
+    },
+    'app:install-begin': function (res) {
+      const title = ice_i18n(JSON.parse(res.Properties['app:title']))
+      this.transformAppInstallationProgress({
+        finished: false,
+        name: res.Properties['app:name'],
+        title,
+        id: res.Properties['app:name'],
+        success: true,
+        type: 'install-begin',
+        message: 'Starting installation',
+        icon: res.Properties['app:icon'],
+      })
+    },
+    'app:install-end': function (res) {
+      this.transformAppInstallationProgress({
+        finished: true,
+        // First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
+        name: res.Properties['app:name'],
+        id: res.Properties['app:name'],
+        icon: res.Properties['app:icon'],
+        isNewTag: true,
+      })
+    },
+    'app:install-error': function (res) {
+      this.transformAppInstallationProgress({
+        // Display error messages
+        finished: false,
+        // First name. Second app:name.The name from CheckThenUpdate.The app:name from install.
+        name: `${res.Properties['app:name']}error`,
+        success: false,
+        title: `${res.Properties['app:name']} Error Info`,
+        message: res.Properties.message,
+        icon: res.Properties['app:icon'],
+        isNewTag: true,
+      })
+    },
 
-		"app:update-begin"(res) {
-			this.transformAppInstallationProgress({
-				finished: false,
-				name: res.Properties["name"],
-				id: res.Properties["cid"],
-				icon: ''
-			});
-		},
-		"app:update-end"(res) {
-			this.transformAppInstallationProgress({
-				finished: true,
-				name: res.Properties["name"],
-				id: res.Properties["cid"],
-				icon: '',
-				isNewTag: res.Properties["docker:image:updated"] === "true"
-			});
-		},
-		"app:install-progress"(res) {
-			const title = ice_i18n(JSON.parse(res.Properties["app:title"]));
-			this.transformAppInstallationProgress({
-				finished: false,
-				name: res.Properties["app:name"],
-				title,
-				id: res.Properties["app:name"],
-				success: true,
-				type: "pull",
-				message: res.Properties["app:progress"],
-				icon: res.Properties["app:icon"]
-			});
-		},
-	},
-	beforeDestroy() {
-		for (let key in this.WSHub) {
-			this.WSHub[key].close()
-		}
-		this.destroyUIEventBus();
-	}
+    'app:update-begin': function (res) {
+      this.transformAppInstallationProgress({
+        finished: false,
+        name: res.Properties.name,
+        id: res.Properties.cid,
+        icon: '',
+      })
+    },
+    'app:update-end': function (res) {
+      this.transformAppInstallationProgress({
+        finished: true,
+        name: res.Properties.name,
+        id: res.Properties.cid,
+        icon: '',
+        isNewTag: res.Properties['docker:image:updated'] === 'true',
+      })
+    },
+    'app:install-progress': function (res) {
+      const title = ice_i18n(JSON.parse(res.Properties['app:title']))
+      this.transformAppInstallationProgress({
+        finished: false,
+        name: res.Properties['app:name'],
+        title,
+        id: res.Properties['app:name'],
+        success: true,
+        type: 'pull',
+        message: res.Properties['app:progress'],
+        icon: res.Properties['app:icon'],
+      })
+    },
+  },
 }
 </script>
 
+<template>
+  <Swiper ref="mySwiper" :options="swiperOptions">
+    <SwiperSlide v-for="(noticeCard, key) in noticesData" :key="key" :class="{ _singleWidth: showFullCard }">
+      <NoticeBlock :notice-data="noticeCard" :notice-type="key" @delete-notice="refreshNotice" />
+    </SwiperSlide>
+    <SwiperSlide v-if="recommendShow">
+      <SyncBlock />
+    </SwiperSlide>
+    <SwiperSlide v-if="recommendShow">
+      <SmartBlock />
+    </SwiperSlide>
+    <template #pagination>
+      <div v-show="recommendShow || noticeLength !== 0" class="swiper-pagination" />
+    </template>
+    <template #button-prev>
+      <img
+        :src="require('@/assets/img/widgets/swiper-left.svg')" alt="prev"
+        class="swiper-button-prev"
+      >
+    </template>
+    <template #button-next>
+      <img
+        :src="require('@/assets/img/widgets/swiper-right.svg')" alt="next"
+        class="swiper-button-next"
+      >
+    </template>
+  </Swiper>
+</template>
+
 <style lang="scss" scoped>
 // full width to show with single notice
 ._singleWidth {