[GitHub] [skywalking-rocketbot-ui] Fine0830 commented on a change in pull request #288: Feat:Import and export the configuration file for the dashboard layout

[GitBox <gi...@apache.org>]

Fine0830 commented on a change in pull request #288:
URL: https://github.com/apache/skywalking-rocketbot-ui/pull/288#discussion_r433099047



##########
File path: src/views/components/dashboard/tool-bar-btns.vue
##########
@@ -0,0 +1,104 @@
+<template>
+  <div class="flex-h">
+    <div class="rk-dashboard-bar-btn">
+      <span v-tooltip:bottom="{ content: rocketGlobal.edit ? 'view' : 'edit' }">
+        <svg
+          class="icon lg vm cp rk-btn ghost"
+          :style="`color:${!rocketGlobal.edit ? '' : '#ffc107'}`"
+          @click="handleSetEdit"
+        >
+          <use :xlink:href="!rocketGlobal.edit ? '#lock' : '#lock-open'"></use>
+        </svg>
+      </span>
+    </div>
+    <div v-if="rocketGlobal.edit" class="rk-dashboard-bar-btn">
+      <span v-tooltip:bottom="{ content: 'import' }">
+        <input id="tool-bar-file" type="file" name="file" title="" accept=".json" @change="importData"/>
+        <label class="rk-btn ghost input-label" for="tool-bar-file">
+          <svg class="icon lg vm cp " :style="`color: #ffc107; marginTop: 0px`">
+            <use :xlink:href="'#folder_open'"></use>
+          </svg> </label
+      ></span>
+    </div>
+    <div v-if="rocketGlobal.edit" class="rk-dashboard-bar-btn">
+      <span v-tooltip:bottom="{ content: 'export' }">
+        <svg class="icon lg vm cp rk-btn ghost" :style="`color: #ffc107`" @click="exportData">
+          <use :xlink:href="'#save_alt'"></use></svg
+      ></span>
+    </div>
+
+    <div class="rk-dashboard-bar-btn">
+      <svg class="icon lg vm cp rk-btn ghost" @click="handleOption">
+        <use xlink:href="#retry"></use>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { Vue, Component, Prop } from 'vue-property-decorator';
+  import { Action, Mutation } from 'vuex-class';
+  import { readFile } from '@/utils/readFile';
+  import { saveFile } from '@/utils/saveFile';
+  @Component({})
+  export default class ToolBarBtns extends Vue {
+    @Prop() private compType!: any;
+    @Prop() private rocketGlobal!: any;
+    @Prop() private rocketComps!: any;
+    @Prop() private durationTime!: any;
+    @Prop() private rocketOption: any;
+    @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
+    @Action('SET_EDIT') private SET_EDIT: any;
+    @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
+
+    private handleOption() {
+      return this.MIXHANDLE_GET_OPTION({
+        compType: this.compType,
+        duration: this.durationTime,
+        keywordServiceName: this.rocketOption.keywordService,
+      });
+    }
+    private handleSetEdit() {
+      this.SET_EDIT(!this.rocketGlobal.edit);
+    }
+    private async importData(event: any) {
+      try {
+        const data: any = await readFile(event);
+        if (!Array.isArray(data)) {
+          throw new Error();
+        }
+        const { children, name, query, type } = data[0];
+        if (children && name && query && type) {
+          this.SET_COMPS_TREE(data);

Review comment:
       I think the imported data should be added to the whole tree instead of completely replacing the data.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org