style: fix building info

src/components/DateCalendar.vue

@@ -277,15 +277,9 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import {
+import { computed, onMounted, watch, reactive } from "vue";
-  defineProps,
-  computed,
-  defineEmits,
-  onMounted,
-  watch,
-  reactive,
-} from "vue";
 import { useI18n } from "vue-i18n";
+/*global defineProps, defineEmits */
 const emit = defineEmits(["input", "setDates", "ok"]);
 const { t } = useI18n();
 const props = defineProps({
@@ -580,11 +574,13 @@ onMounted(() => {
   user-select: none;
   color: #3d444f;
 }
+
 .calendar + .calendar {
   border-left: solid 1px #eaeaea;
   margin-left: 5px;
   padding-left: 5px;
 }
+
 .calendar-head {
   line-height: 34px;
   height: 34px;
@@ -630,10 +626,12 @@ onMounted(() => {
 .calendar-next-month-btn {
   right: 24px;
 }
+
 .calendar-next-month-btn .middle,
 .calendar-prev-month-btn .middle {
   margin-top: 8px;
 }
+
 .calendar-body {
   position: relative;
   width: 196px;

src/components/Graph.vue

@@ -16,20 +16,12 @@ limitations under the License. -->
   <div ref="chartRef" :style="`height:${height};width:${width};`"></div>
 </template>
 <script lang="ts" setup>
-import {
+import { watch, ref, Ref, onMounted, onBeforeUnmount, unref } from "vue";
-  watch,
-  ref,
-  defineProps,
-  Ref,
-  onMounted,
-  onBeforeUnmount,
-  unref,
-} from "vue";
 import type { PropType } from "vue";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
 
-/*global Nullable*/
+/*global Nullable, defineProps*/
 const chartRef = ref<Nullable<HTMLDivElement>>(null);
 const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
 const props = defineProps({

src/components/Icon.vue

@@ -28,8 +28,9 @@ limitations under the License. -->
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from "vue";
 import "@/assets/icons/index";
+
+/*global defineProps */
 defineProps({
   iconName: { type: String, default: "" },
   size: { type: String, default: "sm" },
@@ -42,25 +43,31 @@ defineProps({
   height: 16px;
   vertical-align: middle;
   fill: currentColor;
+
   &.sm {
     width: 14px;
     height: 14px;
   }
+
   &.middle {
     width: 18px;
     height: 18px;
   }
+
   &.lg {
     width: 24px;
     height: 24px;
   }
+
   &.loading {
     animation: loading 1.5s linear infinite;
   }
+
   &.logo {
     height: 30px;
     width: 110px;
   }
+
   &.xl {
     height: 30px;
     width: 30px;

src/components/Selector.vue

@@ -33,7 +33,7 @@ limitations under the License. -->
   </el-select>
 </template>
 <script lang="ts" setup>
-import { ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { ElSelect, ElOption } from "element-plus";
 
@@ -42,8 +42,9 @@ interface Option {
   value: string;
 }
 
+/*global  defineProps, defineEmits*/
+
 const emit = defineEmits(["change"]);
-/*global  defineProps*/
 const props = defineProps({
   options: {
     type: Array as PropType<Option[]>,

src/components/TimePicker.vue

@@ -142,17 +142,10 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import {
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
-  defineProps,
-  ref,
-  computed,
-  defineEmits,
-  onMounted,
-  onBeforeUnmount,
-  watch,
-} from "vue";
 import { useI18n } from "vue-i18n";
 import DateCalendar from "./DateCalendar.vue";
+/*global defineProps, defineEmits */
 const datepicker = ref(null);
 const { t } = useI18n();
 const show = ref<boolean>(false);
@@ -339,6 +332,32 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+
+
+@keyframes datepicker-anim-in {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes datepicker-anim-out {
+  0% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+}
+
 .datepicker {
   display: inline-block;
   position: relative;
@@ -373,7 +392,6 @@ watch(
   margin-left: -8px;
   margin-top: -8px;
   text-align: center;
-  background: #ccc;
   color: #fff;
   border-radius: 50%;
   background: #ccc
@@ -384,6 +402,7 @@ watch(
 .datepicker__clearable:hover:before {
   display: none;
 }
+
 .datepicker__clearable:hover .datepicker-close {
   display: block;
 }
@@ -436,25 +455,30 @@ watch(
   padding: 5px;
   overflow: hidden;
   z-index: 999;
+
   &.top {
     bottom: 30px;
     right: 0;
     transform-origin: center bottom;
   }
+
   &.bottom {
     top: 30px;
     right: 0;
     transform-origin: center top;
   }
+
   &.left {
     top: 30px;
     transform-origin: center top;
   }
+
   &.right {
     right: -80px;
     top: 30px;
     transform-origin: center top;
   }
+
   &__sidebar {
     position: absolute;
     top: 0;
@@ -464,6 +488,7 @@ watch(
     padding: 5px;
     border-right: solid 1px #eaeaea;
   }
+
   &__shortcut {
     display: block;
     width: 100%;
@@ -476,10 +501,12 @@ watch(
     outline: none;
     cursor: pointer;
     white-space: nowrap;
+
     &:hover {
       color: #3f97e3;
     }
   }
+
   &__body {
     margin-left: 100px;
     padding-left: 5px;
@@ -513,6 +540,7 @@ watch(
   display: inline-block;
   cursor: pointer;
 }
+
 .datepicker-anim-enter-active {
   transform-origin: 0 0;
   animation: datepicker-anim-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);
@@ -545,26 +573,4 @@ watch(
 .datepicker__buttons .datepicker__button-cancel {
   background: #666;
 }
-
-@keyframes datepicker-anim-in {
-  0% {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}
-
-@keyframes datepicker-anim-out {
-  0% {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-  to {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-}
 </style>

src/store/modules/dashboard.ts

@@ -172,11 +172,10 @@ export const dashboardStore = defineStore({
 
       return res.data;
     },
-    async fetchMetricValue(config: LayoutConfig) {
+    async fetchMetricValue() {
       // if (!config.metricTypes) {
       //   return;
       // }
-      // config.metricTypes = "readMetricsValues";
       const appStoreWithOut = useAppStoreWithOut();
       const variable = {
         condition: {

src/views/Log.vue

@@ -16,7 +16,7 @@ limitations under the License. -->
   <div class="about">{{ props.msg }}</div>
 </template>
 <script lang="ts" setup>
-import { defineProps } from "vue";
+/*global defineProps */
 const props = defineProps({
   msg: String,
 });

src/views/dashboard/configuration/MetricOptions.vue

@@ -61,7 +61,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, defineProps, defineEmits } from "vue";
+import { reactive } from "vue";
 import type { PropType } from "vue";
 import { useRoute } from "vue-router";
 import { Option } from "@/types/app";
@@ -71,6 +71,7 @@ import { MetricTypes, TableChartTypes } from "../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 
+/*global defineProps, defineEmits */
 const props = defineProps({
   graph: {
     type: Object as PropType<GraphConfig>,

src/views/dashboard/configuration/StandardOptions.vue

@@ -116,12 +116,13 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, defineProps, defineEmits } from "vue";
+import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder } from "../data";
 import { StandardConfig } from "@/types/dashboard";
 import type { PropType } from "vue";
 
+/*global defineProps, defineEmits */
 const props = defineProps({
   config: {
     type: Object as PropType<StandardConfig>,

src/views/dashboard/configuration/WidgetOptions.vue

@@ -35,11 +35,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, defineEmits, defineProps } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { WidgetConfig } from "@/types/dashboard";
 import type { PropType } from "vue";
 
+/*global defineProps, defineEmits */
 const props = defineProps({
   config: {
     type: Object as PropType<WidgetConfig>,

src/views/dashboard/configuration/graph-styles/Area.vue

@@ -28,11 +28,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { AreaConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 
 const props = defineProps({

src/views/dashboard/configuration/graph-styles/Bar.vue

@@ -24,11 +24,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { BarConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 
 const props = defineProps({

src/views/dashboard/configuration/graph-styles/Card.vue

@@ -28,11 +28,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { CardConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 
 const props = defineProps({

src/views/dashboard/configuration/graph-styles/EndpointList.vue

@@ -28,11 +28,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { EndpointListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 
 const props = defineProps({

src/views/dashboard/configuration/graph-styles/InstanceList.vue

@@ -28,11 +28,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { InstanceListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 
 const props = defineProps({

src/views/dashboard/configuration/graph-styles/Line.vue

@@ -42,11 +42,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { LineConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 const props = defineProps({
   config: {

src/views/dashboard/configuration/graph-styles/ServiceList.vue

@@ -28,11 +28,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { ServiceListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 
 const props = defineProps({

src/views/dashboard/configuration/graph-styles/Table.vue

@@ -44,11 +44,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { TableConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 const props = defineProps({
   config: {

src/views/dashboard/configuration/graph-styles/TopList.vue

@@ -28,11 +28,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, defineEmits } from "vue";
+import { ref } from "vue";
 import type { PropType } from "vue";
 import { TopListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
 
+/*global defineProps, defineEmits */
 const { t } = useI18n();
 const props = defineProps({
   config: {

src/views/dashboard/controls/Tab.vue

@@ -84,12 +84,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, reactive, ref, watch } from "vue";
+import { ref, watch, reactive } from "vue";
 import type { PropType } from "vue";
 import Widget from "./Widget.vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
-
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Object as PropType<LayoutConfig>,

src/views/dashboard/graphs/Area.vue

@@ -17,11 +17,11 @@ limitations under the License. -->
   <Line :data="data" :intervalTime="intervalTime" :config="config" />
 </template>
 <script lang="ts" setup>
-import { defineProps } from "vue";
 import type { PropType } from "vue";
 import Line from "./Line.vue";
 import { AreaConfig } from "@/types/dashboard";
 
+/*global defineProps */
 defineProps({
   data: {
     type: Object as PropType<{ [key: string]: number[] }>,

src/views/dashboard/graphs/Bar.vue

@@ -16,11 +16,12 @@ limitations under the License. -->
   <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, computed } from "vue";
+import { computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
 import { BarConfig } from "@/types/dashboard";
 
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Object as PropType<{ [key: string]: number[] }>,

src/views/dashboard/graphs/Card.vue

@@ -27,9 +27,9 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue";
-import { defineProps } from "vue";
 import { CardConfig, StandardConfig } from "@/types/dashboard";
 
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Object as PropType<{ [key: string]: number }>,

src/views/dashboard/graphs/EndpointList.vue

@@ -60,12 +60,13 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { EndpointListConfig } from "@/types/dashboard";
 
+/*global defineProps */
 defineProps({
   data: {
     type: Object,

src/views/dashboard/graphs/HeatMap.vue

@@ -16,10 +16,11 @@ limitations under the License. -->
   <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, computed } from "vue";
+import { computed } from "vue";
 import type { PropType } from "vue";
 import { StandardConfig } from "@/types/dashboard";
 
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Object as PropType<{ nodes: number[][]; buckets: number[][] }>,

src/views/dashboard/graphs/InstanceList.vue

@@ -60,12 +60,13 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { InstanceListConfig } from "@/types/dashboard";
 
+/*global defineProps */
 defineProps({
   data: {
     type: Object,

src/views/dashboard/graphs/Line.vue

@@ -16,11 +16,12 @@ limitations under the License. -->
   <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, computed } from "vue";
+import { computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
 import { LineConfig } from "@/types/dashboard";
 
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Object as PropType<{ [key: string]: number[] }>,

src/views/dashboard/graphs/Pie.vue

@@ -16,9 +16,10 @@ limitations under the License. -->
   <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, computed } from "vue";
+import { computed } from "vue";
 import type { PropType } from "vue";
 
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Array as PropType<{ name: string; value: number }[]>,

src/views/dashboard/graphs/ServiceList.vue

@@ -60,12 +60,13 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { ServiceListConfig } from "@/types/dashboard";
 
+/*global defineProps */
 defineProps({
   data: {
     type: Object,

src/views/dashboard/graphs/Table.vue

@@ -45,8 +45,9 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, computed, ref, onMounted } from "vue";
+import { computed, ref, onMounted } from "vue";
 import type { PropType } from "vue";
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Object as PropType<{ [key: string]: number[][] }>,

src/views/dashboard/graphs/TopList.vue

@@ -35,8 +35,9 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { defineProps, computed } from "vue";
+import { computed } from "vue";
 import copy from "@/utils/copy";
+/*global defineProps */
 const props = defineProps({
   data: {
     type: Array as PropType<

src/views/service/Profiles.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from "vue";
+/*global defineProps */
 defineProps({
   msg: { type: String },
 });

src/views/service/Topology.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from "vue";
+/*global defineProps */
 defineProps({
   msg: { type: String },
 });

src/views/service/Traces.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from "vue";
+/*global defineProps */
 defineProps({
   msg: { type: String },
 });