ayanova/src/views/ops-log.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row v-if="this.formState.ready">
+  <v-row v-if="this.formState.ready" v-resize="onResize">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
     <v-col cols="12">
       <v-select
@@ -14,14 +14,20 @@
     </v-col>
 
     <v-col cols="12">
-      <p class="title">{{ $ay.t("Log") }}</p>
-
-      <v-btn @click="getDataFromApi" class="m-4">
-        <v-icon>fa-sync</v-icon>
-      </v-btn>
-      <v-card style="overflow-x:scroll;" class="mt-6 pl-5 py-6">
-        <pre>{{ log }}</pre>
-        <!-- <v-textarea v-model="log" full-width readonly auto-grow></v-textarea> -->
+      <v-card>
+        <v-card
+          :height="logCardHeight"
+          style="overflow:auto;"
+          class="pl-5 py-6"
+        >
+          <pre>{{ log }}</pre>
+        </v-card>
+        <v-card-actions>
+          <v-btn @click="getDataFromApi" class="m-4">
+            <v-icon>fa-sync</v-icon>
+          </v-btn>
+          <v-btn text>Button</v-btn>
+        </v-card-actions>
       </v-card>
     </v-col>
   </v-row>
@@ -56,6 +62,7 @@ export default {
       selectLists: {
         serverLogs: []
       },
+      logCardHeight: 300,
       formState: {
         ready: false,
         loading: true,
@@ -69,6 +76,9 @@ export default {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   methods: {
+    onResize() {
+      this.logCardHeight = window.innerHeight * 0.65;
+    },
     translation() {
       return window.$gz.translation;
     },