[Refactor][UI Next]Reconstructing the Log Component (#9574)

* Reconstructing the Log Component

* Delete pnpm-lock.yaml

* Delete pnpm-lock.yaml

* add pnpm-lock

* Modify comments

dolphinscheduler-ui-next/package.json

@@ -24,6 +24,7 @@
     "pinia": "^2.0.11",
     "pinia-plugin-persistedstate": "^1.2.2",
     "qs": "^6.10.3",
+    "screenfull": "^6.0.1",
     "vfonts": "^0.1.0",
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.30",

dolphinscheduler-ui-next/pnpm-lock.yaml

@@ -6,7 +6,7 @@
 # (the "License"); you may not use this file except in compliance with
 # the License.  You may obtain a copy of the License at
 #
-#     http://www.apache.org/licenses/LICENSE-2.0
+#    http://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing, software
 # distributed under the License is distributed on an "AS IS" BASIS,
@@ -50,6 +50,7 @@ specifiers:
   qs: ^6.10.3
   sass: ^1.49.8
   sass-loader: ^12.6.0
+  screenfull: ^6.0.1
   typescript: ^4.5.5
   typescript-plugin-css-modules: ^3.4.0
   vfonts: ^0.1.0
@@ -76,6 +77,7 @@ dependencies:
   pinia: 2.0.11_typescript@4.5.5+vue@3.2.31
   pinia-plugin-persistedstate: 1.2.2_pinia@2.0.11
   qs: 6.10.3
+  screenfull: registry.npmmirror.com/screenfull/6.0.1
   vfonts: 0.1.0
   vue: 3.2.31
   vue-i18n: 9.2.0-beta.30_vue@3.2.31
@@ -574,7 +576,7 @@ packages:
     engines: {node: '>= 12'}
     dependencies:
       '@intlify/shared': 9.2.0-beta.30
-      source-map: 0.6.1
+      source-map: registry.npmmirror.com/source-map/0.6.1
     dev: false
 
   /@intlify/shared/9.2.0-beta.30:
@@ -927,7 +929,7 @@ packages:
       '@babel/parser': 7.17.3
       '@vue/shared': 3.2.31
       estree-walker: 2.0.2
-      source-map: 0.6.1
+      source-map: registry.npmmirror.com/source-map/0.6.1
 
   /@vue/compiler-dom/3.2.31:
     resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
@@ -1237,7 +1239,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: registry.npmmirror.com/fsevents/2.3.2
     dev: true
 
   /color-convert/1.9.3:
@@ -1316,7 +1318,7 @@ packages:
     resolution: {integrity: sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==}
     dependencies:
       inherits: 2.0.4
-      source-map: 0.6.1
+      source-map: registry.npmmirror.com/source-map/0.6.1
       source-map-resolve: 0.5.3
       urix: 0.1.0
     dev: true
@@ -1498,211 +1500,31 @@ packages:
     engines: {node: '>=0.12'}
     dev: true
 
-  /errno/0.1.8:
-    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      prr: 1.0.1
-    dev: true
-    optional: true
-
-  /esbuild-android-arm64/0.14.23:
-    resolution: {integrity: sha512-k9sXem++mINrZty1v4FVt6nC5BQCFG4K2geCIUUqHNlTdFnuvcqsY7prcKZLFhqVC1rbcJAr9VSUGFL/vD4vsw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-64/0.14.23:
-    resolution: {integrity: sha512-lB0XRbtOYYL1tLcYw8BoBaYsFYiR48RPrA0KfA/7RFTr4MV7Bwy/J4+7nLsVnv9FGuQummM3uJ93J3ptaTqFug==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-arm64/0.14.23:
-    resolution: {integrity: sha512-yat73Z/uJ5tRcfRiI4CCTv0FSnwErm3BJQeZAh+1tIP0TUNh6o+mXg338Zl5EKChD+YGp6PN+Dbhs7qa34RxSw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-64/0.14.23:
-    resolution: {integrity: sha512-/1xiTjoLuQ+LlbfjJdKkX45qK/M7ARrbLmyf7x3JhyQGMjcxRYVR6Dw81uH3qlMHwT4cfLW4aEVBhP1aNV7VsA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-arm64/0.14.23:
-    resolution: {integrity: sha512-uyPqBU/Zcp6yEAZS4LKj5jEE0q2s4HmlMBIPzbW6cTunZ8cyvjG6YWpIZXb1KK3KTJDe62ltCrk3VzmWHp+iLg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-32/0.14.23:
-    resolution: {integrity: sha512-37R/WMkQyUfNhbH7aJrr1uCjDVdnPeTHGeDhZPUNhfoHV0lQuZNCKuNnDvlH/u/nwIYZNdVvz1Igv5rY/zfrzQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-64/0.14.23:
-    resolution: {integrity: sha512-H0gztDP60qqr8zoFhAO64waoN5yBXkmYCElFklpd6LPoobtNGNnDe99xOQm28+fuD75YJ7GKHzp/MLCLhw2+vQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm/0.14.23:
-    resolution: {integrity: sha512-x64CEUxi8+EzOAIpCUeuni0bZfzPw/65r8tC5cy5zOq9dY7ysOi5EVQHnzaxS+1NmV+/RVRpmrzGw1QgY2Xpmw==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm64/0.14.23:
-    resolution: {integrity: sha512-c4MLOIByNHR55n3KoYf9hYDfBRghMjOiHLaoYLhkQkIabb452RWi+HsNgB41sUpSlOAqfpqKPFNg7VrxL3UX9g==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-mips64le/0.14.23:
-    resolution: {integrity: sha512-kHKyKRIAedYhKug2EJpyJxOUj3VYuamOVA1pY7EimoFPzaF3NeY7e4cFBAISC/Av0/tiV0xlFCt9q0HJ68IBIw==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-ppc64le/0.14.23:
-    resolution: {integrity: sha512-7ilAiJEPuJJnJp/LiDO0oJm5ygbBPzhchJJh9HsHZzeqO+3PUzItXi+8PuicY08r0AaaOe25LA7sGJ0MzbfBag==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-riscv64/0.14.23:
-    resolution: {integrity: sha512-fbL3ggK2wY0D8I5raPIMPhpCvODFE+Bhb5QGtNP3r5aUsRR6TQV+ZBXIaw84iyvKC8vlXiA4fWLGhghAd/h/Zg==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-s390x/0.14.23:
-    resolution: {integrity: sha512-GHMDCyfy7+FaNSO8RJ8KCFsnax8fLUsOrj9q5Gi2JmZMY0Zhp75keb5abTFCq2/Oy6KVcT0Dcbyo/bFb4rIFJA==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-netbsd-64/0.14.23:
-    resolution: {integrity: sha512-ovk2EX+3rrO1M2lowJfgMb/JPN1VwVYrx0QPUyudxkxLYrWeBxDKQvc6ffO+kB4QlDyTfdtAURrVzu3JeNdA2g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-openbsd-64/0.14.23:
-    resolution: {integrity: sha512-uYYNqbVR+i7k8ojP/oIROAHO9lATLN7H2QeXKt2H310Fc8FJj4y3Wce6hx0VgnJ4k1JDrgbbiXM8rbEgQyg8KA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-sunos-64/0.14.23:
-    resolution: {integrity: sha512-hAzeBeET0+SbScknPzS2LBY6FVDpgE+CsHSpe6CEoR51PApdn2IB0SyJX7vGelXzlyrnorM4CAsRyb9Qev4h9g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-32/0.14.23:
-    resolution: {integrity: sha512-Kttmi3JnohdaREbk6o9e25kieJR379TsEWF0l39PQVHXq3FR6sFKtVPgY8wk055o6IB+rllrzLnbqOw/UV60EA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-64/0.14.23:
-    resolution: {integrity: sha512-JtIT0t8ymkpl6YlmOl6zoSWL5cnCgyLaBdf/SiU/Eg3C13r0NbHZWNT/RDEMKK91Y6t79kTs3vyRcNZbfu5a8g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-arm64/0.14.23:
-    resolution: {integrity: sha512-cTFaQqT2+ik9e4hePvYtRZQ3pqOvKDVNarzql0VFIzhc0tru/ZgdLoXd6epLiKT+SzoSce6V9YJ+nn6RCn6SHw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild/0.14.23:
     resolution: {integrity: sha512-XjnIcZ9KB6lfonCa+jRguXyRYcldmkyZ99ieDksqW/C8bnyEX299yA4QH2XcgijCgaddEZePPTgvx/2imsq7Ig==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      esbuild-android-arm64: 0.14.23
-      esbuild-darwin-64: 0.14.23
-      esbuild-darwin-arm64: 0.14.23
-      esbuild-freebsd-64: 0.14.23
-      esbuild-freebsd-arm64: 0.14.23
-      esbuild-linux-32: 0.14.23
-      esbuild-linux-64: 0.14.23
-      esbuild-linux-arm: 0.14.23
-      esbuild-linux-arm64: 0.14.23
-      esbuild-linux-mips64le: 0.14.23
-      esbuild-linux-ppc64le: 0.14.23
-      esbuild-linux-riscv64: 0.14.23
-      esbuild-linux-s390x: 0.14.23
-      esbuild-netbsd-64: 0.14.23
-      esbuild-openbsd-64: 0.14.23
-      esbuild-sunos-64: 0.14.23
-      esbuild-windows-32: 0.14.23
-      esbuild-windows-64: 0.14.23
-      esbuild-windows-arm64: 0.14.23
+      esbuild-android-arm64: registry.npmmirror.com/esbuild-android-arm64/0.14.23
+      esbuild-darwin-64: registry.npmmirror.com/esbuild-darwin-64/0.14.23
+      esbuild-darwin-arm64: registry.npmmirror.com/esbuild-darwin-arm64/0.14.23
+      esbuild-freebsd-64: registry.npmmirror.com/esbuild-freebsd-64/0.14.23
+      esbuild-freebsd-arm64: registry.npmmirror.com/esbuild-freebsd-arm64/0.14.23
+      esbuild-linux-32: registry.npmmirror.com/esbuild-linux-32/0.14.23
+      esbuild-linux-64: registry.npmmirror.com/esbuild-linux-64/0.14.23
+      esbuild-linux-arm: registry.npmmirror.com/esbuild-linux-arm/0.14.23
+      esbuild-linux-arm64: registry.npmmirror.com/esbuild-linux-arm64/0.14.23
+      esbuild-linux-mips64le: registry.npmmirror.com/esbuild-linux-mips64le/0.14.23
+      esbuild-linux-ppc64le: registry.npmmirror.com/esbuild-linux-ppc64le/0.14.23
+      esbuild-linux-riscv64: registry.npmmirror.com/esbuild-linux-riscv64/0.14.23
+      esbuild-linux-s390x: registry.npmmirror.com/esbuild-linux-s390x/0.14.23
+      esbuild-netbsd-64: registry.npmmirror.com/esbuild-netbsd-64/0.14.23
+      esbuild-openbsd-64: registry.npmmirror.com/esbuild-openbsd-64/0.14.23
+      esbuild-sunos-64: registry.npmmirror.com/esbuild-sunos-64/0.14.23
+      esbuild-windows-32: registry.npmmirror.com/esbuild-windows-32/0.14.23
+      esbuild-windows-64: registry.npmmirror.com/esbuild-windows-64/0.14.23
+      esbuild-windows-arm64: registry.npmmirror.com/esbuild-windows-arm64/0.14.23
     dev: true
 
   /escalade/3.1.1:
@@ -1976,14 +1798,6 @@ packages:
     resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
     dev: true
 
-  /fsevents/2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /function-bind/1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
 
@@ -2158,14 +1972,6 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /image-size/0.5.5:
-    resolution: {integrity: sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=}
-    engines: {node: '>=0.10.0'}
-    hasBin: true
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /immutable/4.0.0:
     resolution: {integrity: sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==}
     dev: true
@@ -2353,7 +2159,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.9
     dev: true
 
   /jstransformer/1.0.0:
@@ -2377,13 +2183,13 @@ packages:
       parse-node-version: 1.0.1
       tslib: 2.3.1
     optionalDependencies:
-      errno: 0.1.8
-      graceful-fs: 4.2.9
-      image-size: 0.5.5
-      make-dir: 2.1.0
-      mime: 1.6.0
-      needle: 2.9.1
-      source-map: 0.6.1
+      errno: registry.npmmirror.com/errno/0.1.8
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.9
+      image-size: registry.npmmirror.com/image-size/0.5.5
+      make-dir: registry.npmmirror.com/make-dir/2.1.0
+      mime: registry.npmmirror.com/mime/1.6.0
+      needle: registry.npmmirror.com/needle/2.9.1
+      source-map: registry.npmmirror.com/source-map/0.6.1
     dev: true
 
   /levn/0.4.1:
@@ -2436,16 +2242,6 @@ packages:
       sourcemap-codec: 1.4.8
     dev: false
 
-  /make-dir/2.1.0:
-    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
-    engines: {node: '>=6'}
-    requiresBuild: true
-    dependencies:
-      pify: 4.0.1
-      semver: 5.7.1
-    dev: true
-    optional: true
-
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -2459,14 +2255,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /mime/1.6.0:
-    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
-    engines: {node: '>=4'}
-    hasBin: true
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -2565,18 +2353,6 @@ packages:
     resolution: {integrity: sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=}
     dev: true
 
-  /needle/2.9.1:
-    resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==}
-    engines: {node: '>= 4.4.x'}
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      debug: 3.2.7
-      iconv-lite: 0.4.24
-      sax: 1.2.4
-    dev: true
-    optional: true
-
   /neo-async/2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
@@ -2992,7 +2768,7 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: registry.npmmirror.com/fsevents/2.3.2
     dev: true
 
   /run-parallel/1.2.0:
@@ -3125,6 +2901,7 @@ packages:
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /source-map/0.7.3:
     resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==}
@@ -3366,7 +3143,7 @@ packages:
       rollup: 2.68.0
       sass: 1.49.8
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: registry.npmmirror.com/fsevents/2.3.2
     dev: true
 
   /void-elements/3.1.0:
@@ -3643,9 +3420,299 @@ packages:
       date-fns: 2.28.0
     dev: false
 
+  registry.npmmirror.com/errno/0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz}
+    name: errno
+    version: 0.1.8
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-android-arm64/0.14.23:
+    resolution: {integrity: sha512-k9sXem++mINrZty1v4FVt6nC5BQCFG4K2geCIUUqHNlTdFnuvcqsY7prcKZLFhqVC1rbcJAr9VSUGFL/vD4vsw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.23.tgz}
+    name: esbuild-android-arm64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-darwin-64/0.14.23:
+    resolution: {integrity: sha512-lB0XRbtOYYL1tLcYw8BoBaYsFYiR48RPrA0KfA/7RFTr4MV7Bwy/J4+7nLsVnv9FGuQummM3uJ93J3ptaTqFug==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.23.tgz}
+    name: esbuild-darwin-64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-darwin-arm64/0.14.23:
+    resolution: {integrity: sha512-yat73Z/uJ5tRcfRiI4CCTv0FSnwErm3BJQeZAh+1tIP0TUNh6o+mXg338Zl5EKChD+YGp6PN+Dbhs7qa34RxSw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.23.tgz}
+    name: esbuild-darwin-arm64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-freebsd-64/0.14.23:
+    resolution: {integrity: sha512-/1xiTjoLuQ+LlbfjJdKkX45qK/M7ARrbLmyf7x3JhyQGMjcxRYVR6Dw81uH3qlMHwT4cfLW4aEVBhP1aNV7VsA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.23.tgz}
+    name: esbuild-freebsd-64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-freebsd-arm64/0.14.23:
+    resolution: {integrity: sha512-uyPqBU/Zcp6yEAZS4LKj5jEE0q2s4HmlMBIPzbW6cTunZ8cyvjG6YWpIZXb1KK3KTJDe62ltCrk3VzmWHp+iLg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.23.tgz}
+    name: esbuild-freebsd-arm64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-32/0.14.23:
+    resolution: {integrity: sha512-37R/WMkQyUfNhbH7aJrr1uCjDVdnPeTHGeDhZPUNhfoHV0lQuZNCKuNnDvlH/u/nwIYZNdVvz1Igv5rY/zfrzQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.14.23.tgz}
+    name: esbuild-linux-32
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-64/0.14.23:
+    resolution: {integrity: sha512-H0gztDP60qqr8zoFhAO64waoN5yBXkmYCElFklpd6LPoobtNGNnDe99xOQm28+fuD75YJ7GKHzp/MLCLhw2+vQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.23.tgz}
+    name: esbuild-linux-64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-arm/0.14.23:
+    resolution: {integrity: sha512-x64CEUxi8+EzOAIpCUeuni0bZfzPw/65r8tC5cy5zOq9dY7ysOi5EVQHnzaxS+1NmV+/RVRpmrzGw1QgY2Xpmw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.23.tgz}
+    name: esbuild-linux-arm
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-arm64/0.14.23:
+    resolution: {integrity: sha512-c4MLOIByNHR55n3KoYf9hYDfBRghMjOiHLaoYLhkQkIabb452RWi+HsNgB41sUpSlOAqfpqKPFNg7VrxL3UX9g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.23.tgz}
+    name: esbuild-linux-arm64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-mips64le/0.14.23:
+    resolution: {integrity: sha512-kHKyKRIAedYhKug2EJpyJxOUj3VYuamOVA1pY7EimoFPzaF3NeY7e4cFBAISC/Av0/tiV0xlFCt9q0HJ68IBIw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.23.tgz}
+    name: esbuild-linux-mips64le
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-ppc64le/0.14.23:
+    resolution: {integrity: sha512-7ilAiJEPuJJnJp/LiDO0oJm5ygbBPzhchJJh9HsHZzeqO+3PUzItXi+8PuicY08r0AaaOe25LA7sGJ0MzbfBag==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.23.tgz}
+    name: esbuild-linux-ppc64le
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-riscv64/0.14.23:
+    resolution: {integrity: sha512-fbL3ggK2wY0D8I5raPIMPhpCvODFE+Bhb5QGtNP3r5aUsRR6TQV+ZBXIaw84iyvKC8vlXiA4fWLGhghAd/h/Zg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.23.tgz}
+    name: esbuild-linux-riscv64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-linux-s390x/0.14.23:
+    resolution: {integrity: sha512-GHMDCyfy7+FaNSO8RJ8KCFsnax8fLUsOrj9q5Gi2JmZMY0Zhp75keb5abTFCq2/Oy6KVcT0Dcbyo/bFb4rIFJA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.23.tgz}
+    name: esbuild-linux-s390x
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-netbsd-64/0.14.23:
+    resolution: {integrity: sha512-ovk2EX+3rrO1M2lowJfgMb/JPN1VwVYrx0QPUyudxkxLYrWeBxDKQvc6ffO+kB4QlDyTfdtAURrVzu3JeNdA2g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.23.tgz}
+    name: esbuild-netbsd-64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-openbsd-64/0.14.23:
+    resolution: {integrity: sha512-uYYNqbVR+i7k8ojP/oIROAHO9lATLN7H2QeXKt2H310Fc8FJj4y3Wce6hx0VgnJ4k1JDrgbbiXM8rbEgQyg8KA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.23.tgz}
+    name: esbuild-openbsd-64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-sunos-64/0.14.23:
+    resolution: {integrity: sha512-hAzeBeET0+SbScknPzS2LBY6FVDpgE+CsHSpe6CEoR51PApdn2IB0SyJX7vGelXzlyrnorM4CAsRyb9Qev4h9g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.23.tgz}
+    name: esbuild-sunos-64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-windows-32/0.14.23:
+    resolution: {integrity: sha512-Kttmi3JnohdaREbk6o9e25kieJR379TsEWF0l39PQVHXq3FR6sFKtVPgY8wk055o6IB+rllrzLnbqOw/UV60EA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.14.23.tgz}
+    name: esbuild-windows-32
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-windows-64/0.14.23:
+    resolution: {integrity: sha512-JtIT0t8ymkpl6YlmOl6zoSWL5cnCgyLaBdf/SiU/Eg3C13r0NbHZWNT/RDEMKK91Y6t79kTs3vyRcNZbfu5a8g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.23.tgz}
+    name: esbuild-windows-64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/esbuild-windows-arm64/0.14.23:
+    resolution: {integrity: sha512-cTFaQqT2+ik9e4hePvYtRZQ3pqOvKDVNarzql0VFIzhc0tru/ZgdLoXd6epLiKT+SzoSce6V9YJ+nn6RCn6SHw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.23.tgz}
+    name: esbuild-windows-arm64
+    version: 0.14.23
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/fsevents/2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz}
+    name: fsevents
+    version: 2.3.2
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/graceful-fs/4.2.9:
+    resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.9.tgz}
+    name: graceful-fs
+    version: 4.2.9
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/image-size/0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz}
+    name: image-size
+    version: 0.5.5
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/make-dir/2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz}
+    name: make-dir
+    version: 2.1.0
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.1
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/mime/1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz}
+    name: mime
+    version: 1.6.0
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/needle/2.9.1:
+    resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/needle/-/needle-2.9.1.tgz}
+    name: needle
+    version: 2.9.1
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.4.24
+      sax: 1.2.4
+    dev: true
+    optional: true
+
+  registry.npmmirror.com/screenfull/6.0.1:
+    resolution: {integrity: sha512-yzQW+j4zMUBQC51xxWaoDYjxOtl8Kn+xvue3p6v/fv2pIi1jH4AldgVLU8TBfFVgH2x3VXlf3+YiA/AYIPlaew==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/screenfull/-/screenfull-6.0.1.tgz}
+    name: screenfull
+    version: 6.0.1
+    engines: {node: ^14.13.1 || >=16.0.0}
+    dev: false
+
   registry.npmmirror.com/source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz}
     name: source-map
     version: 0.6.1
     engines: {node: '>=0.10.0'}
-    dev: true

dolphinscheduler-ui-next/src/components/log-modal/index.tsx

@@ -0,0 +1,138 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  defineComponent,
+  PropType,
+  h,
+  ref,
+  reactive,
+  toRefs,
+  onMounted,
+  onUnmounted
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NIcon, NLog } from 'naive-ui'
+import Modal from '../modal'
+import { DownloadOutlined, FullscreenExitOutlined, FullscreenOutlined, SyncOutlined } from '@vicons/antd'
+import screenfull from 'screenfull'
+
+const props = {
+  showModalRef: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  logRef: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  logLoadingRef: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  row: {
+    type: Object as PropType<any>,
+    default: {}
+  },
+  showDownloadLog: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+}
+
+export default defineComponent({
+  name: 'log-modal',
+  props,
+  emits: ['confirmModal', 'refreshLogs', 'downloadLogs'],
+  setup(props, ctx) {
+    const { t } = useI18n()
+
+    const variables = reactive({
+      isFullscreen: false
+    })
+
+    const change = () => {
+      variables.isFullscreen = screenfull.isFullscreen
+    }
+
+    const renderIcon = (icon: any) => {
+      return () => h(NIcon, null, { default: () => h(icon) })
+    }
+
+    const confirmModal = () => {
+      variables.isFullscreen = false
+      ctx.emit('confirmModal', props.showModalRef)
+    }
+
+    const refreshLogs = () => {
+      ctx.emit('refreshLogs', props.row)
+    }
+
+    const handleFullScreen = () => {
+      screenfull.toggle(document.querySelectorAll('.logModalRef')[0])
+    }
+
+    const downloadLogs = () => {
+      ctx.emit('downloadLogs', props.row)
+    }
+
+    onMounted(() => {
+      screenfull.on('change', change)
+    })
+
+    onUnmounted(() => {
+      screenfull.on('change', change)
+    })
+
+    return { t, renderIcon, confirmModal, refreshLogs, downloadLogs, handleFullScreen, ...toRefs(variables) }
+  },
+  render() {
+    const { t, renderIcon, refreshLogs, downloadLogs, isFullscreen, handleFullScreen, showDownloadLog } = this
+    return (
+      <Modal
+        class='logModalRef'
+        title={t('project.task.view_log')}
+        show={this.showModalRef}
+        cancelShow={false}
+        onConfirm={this.confirmModal}
+        style={{ width: '60%' }}
+        headerLinks={ref([
+          {
+            text: t('project.workflow.download_log'),
+            show: showDownloadLog,
+            action: downloadLogs,
+            icon: renderIcon(DownloadOutlined)
+          },
+          {
+            text: t('project.task.refresh'),
+            show: true,
+            action: refreshLogs,
+            icon: renderIcon(SyncOutlined)
+          },
+          {
+            text: isFullscreen ? t('project.task.cancel_full_screen') : t('project.task.enter_full_screen'),
+            show: true,
+            action: handleFullScreen,
+            icon: isFullscreen ? renderIcon(FullscreenExitOutlined) : renderIcon(FullscreenOutlined)
+          }
+        ])}
+      >
+        <NLog rows={30} log={this.logRef} loading={this.logLoadingRef} />
+      </Modal>
+    )
+  }
+})

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -531,6 +531,8 @@ const project = {
       'There is not any workflows. Please create a workflow, and then visit this page again.'
   },
   task: {
+    cancel_full_screen: 'Cancel full screen',
+    enter_full_screen: 'Enter full screen',
     current_task_settings: 'Current task settings',
     online: 'Online',
     offline: 'Offline',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -527,6 +527,8 @@ const project = {
       '目前没有任何工作流，请先创建工作流，再访问该页面'
   },
   task: {
+    cancel_full_screen: '取消全屏',
+    enter_full_screen: '全屏',
     current_task_settings: '当前任务设置',
     online: '已上线',
     offline: '已下线',

dolphinscheduler-ui-next/src/views/projects/task/instance/components/log-modal.tsx

@@ -1,103 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineComponent, h, PropType, ref, toRefs, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { NIcon, NLog } from 'naive-ui'
-import { SyncOutlined } from '@vicons/antd'
-import { useModal } from './use-modal'
-import Modal from '@/components/modal'
-
-const props = {
-  showModalRef: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  row: {
-    type: Object as PropType<any>,
-    default: {}
-  }
-}
-
-const LogModal = defineComponent({
-  name: 'LogModal',
-  props,
-  emits: ['confirmModal'],
-  setup(props, ctx) {
-    const { t } = useI18n()
-    const { variables, getLogs } = useModal()
-    const renderIcon = (icon: any) => {
-      return () => h(NIcon, null, { default: () => h(icon) })
-    }
-
-    const confirmModal = () => {
-      ctx.emit('confirmModal', props.showModalRef)
-    }
-
-    const refreshLogs = () => {
-      variables.logRef = ''
-      variables.loadingRef = true
-      variables.skipLineNum = 0
-      variables.limit = 1000
-
-      getLogs()
-    }
-
-    watch(
-      () => props.showModalRef,
-      () => {
-        if (props.showModalRef) {
-          variables.id = props.row.id
-          props.showModalRef && variables.id && getLogs()
-        } else {
-          variables.id = ''
-          variables.logRef = ''
-          variables.loadingRef = true
-          variables.skipLineNum = 0
-          variables.limit = 1000
-        }
-      }
-    )
-
-    return { t, ...toRefs(variables), confirmModal, renderIcon, refreshLogs }
-  },
-  render() {
-    const { t, renderIcon, refreshLogs } = this
-
-    return (
-      <Modal
-        title={t('project.task.view_log')}
-        show={this.showModalRef}
-        cancelShow={false}
-        onConfirm={this.confirmModal}
-        style={{ width: '60%' }}
-        headerLinks={ref([
-          {
-            text: t('project.task.refresh'),
-            show: true,
-            action: refreshLogs,
-            icon: renderIcon(SyncOutlined)
-          }
-        ])}
-      >
-        <NLog rows={30} log={this.logRef} loading={this.loadingRef} />
-      </Modal>
-    )
-  }
-})
-
-export default LogModal

dolphinscheduler-ui-next/src/views/projects/task/instance/components/use-modal.ts

@@ -1,58 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { reactive, ref } from 'vue'
-import { useAsyncState } from '@vueuse/core'
-import { queryLog } from '@/service/modules/log'
-
-export function useModal() {
-  const variables = reactive({
-    id: ref(''),
-    loadingRef: ref(true),
-    logRef: ref(''),
-    skipLineNum: ref(0),
-    limit: ref(1000)
-  })
-
-  const getLogs = () => {
-    const { state } = useAsyncState(
-      queryLog({
-        taskInstanceId: Number(variables.id),
-        limit: variables.limit,
-        skipLineNum: variables.skipLineNum
-      }).then((res: string) => {
-        variables.logRef += res
-
-        if (res) {
-          variables.limit += 1000
-          variables.skipLineNum += 1000
-          getLogs()
-        } else {
-          variables.loadingRef = false
-        }
-      }),
-      {}
-    )
-
-    return state
-  }
-
-  return {
-    variables,
-    getLogs
-  }
-}

dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx

@@ -31,7 +31,9 @@ import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import { useI18n } from 'vue-i18n'
 import Card from '@/components/card'
-import LogModal from './components/log-modal'
+import LogModal from '@/components/log-modal'
+import { useAsyncState } from '@vueuse/core'
+import { queryLog } from '@/service/modules/log'
 import { stateType } from '@/utils/common'
 import styles from './index.module.scss'
 
@@ -68,6 +70,35 @@ const TaskInstance = defineComponent({
       variables.showModalRef = false
     }
 
+    const getLogs = (row:any) => {
+      const { state } = useAsyncState(
+        queryLog({
+          taskInstanceId: Number(row.id),
+          limit: variables.limit,
+          skipLineNum: variables.skipLineNum
+        }).then((res: string) => {
+          variables.logRef += res
+          if (res) {
+            variables.limit += 1000
+            variables.skipLineNum += 1000
+            getLogs(row)
+          } else {
+            variables.logLoadingRef = false
+          }
+        }),
+        {}
+      )
+  
+      return state
+    }
+
+    const refreshLogs = (row:any) => {
+      variables.logRef = ''
+      variables.limit = 1000
+      variables.skipLineNum = 0
+      getLogs(row)
+    }
+
     onMounted(() => {
       createColumns(variables)
       requestTableData()
@@ -77,13 +108,29 @@ const TaskInstance = defineComponent({
       createColumns(variables)
     })
 
+    watch(
+      () => variables.showModalRef,
+      () => {
+        if (variables.showModalRef) {
+          getLogs(variables.row)
+        } else {
+          variables.row = {}
+          variables.logRef = ''
+          variables.logLoadingRef = true
+          variables.skipLineNum = 0
+          variables.limit = 1000
+        }
+      }
+    )
+
     return {
       t,
       ...toRefs(variables),
       requestTableData,
       onUpdatePageSize,
       onSearch,
-      onConfirmModal
+      onConfirmModal,
+      refreshLogs
     }
   },
   render() {
@@ -93,7 +140,8 @@ const TaskInstance = defineComponent({
       onUpdatePageSize,
       onSearch,
       onConfirmModal,
-      loadingRef
+      loadingRef,
+      refreshLogs
     } = this
 
     return (
@@ -173,8 +221,11 @@ const TaskInstance = defineComponent({
         </Card>
         <LogModal
           showModalRef={this.showModalRef}
+          logRef={this.logRef}
           row={this.row}
+          logLoadingRef={this.logLoadingRef}
           onConfirmModal={onConfirmModal}
+          onRefreshLogs={refreshLogs}
         />
       </>
     )

dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts

@@ -63,7 +63,11 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     row: {},
-    loadingRef: ref(false)
+    loadingRef: ref(false),
+    logRef: '',
+    logLoadingRef: ref(true),
+    skipLineNum: ref(0),
+    limit: ref(1000)
   })
 
   const createColumns = (variables: any) => {

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@@ -49,8 +49,11 @@ import DagSaveModal from './dag-save-modal'
 import ContextMenuItem from './dag-context-menu'
 import TaskModal from '@/views/projects/task/components/node/detail-modal'
 import StartModal from '@/views/projects/workflow/definition/components/start-modal'
-import LogModal from '@/views/projects/workflow/instance/components/log-modal'
+import LogModal from '@/components/log-modal'
 import './x6-style.scss'
+import { queryLog } from '@/service/modules/log'
+import { useAsyncState } from '@vueuse/core'
+import { downloadFile } from '@/service/service'
 
 const props = {
   // If this prop is passed, it means from definition detail
@@ -111,7 +114,7 @@ export default defineComponent({
     } = useTaskEdit({ graph, definition: toRef(props, 'definition') })
 
     // Right click cell
-    const { nodeVariables, menuHide, menuStart, viewLog, hideLog } =
+    const { nodeVariables, menuHide, menuStart, viewLog } =
       useNodeMenu({
         graph
       })
@@ -230,6 +233,46 @@ export default defineComponent({
     const handleViewLog = (taskId: number, taskType: string) => {
       taskModalVisible.value = false
       viewLog(taskId, taskType)
+      getLogs()
+    }
+
+    const getLogs = () => {
+      const { state } = useAsyncState(
+        queryLog({
+          taskInstanceId: nodeVariables.logTaskId,
+          limit: nodeVariables.limit,
+          skipLineNum: nodeVariables.skipLineNum
+        }).then((res: string) => {
+          nodeVariables.logRef += res
+          if (res) {
+            nodeVariables.limit += 1000
+            nodeVariables.skipLineNum += 1000
+            getLogs()
+          } else {
+            nodeVariables.logLoadingRef = false
+          }
+        }),
+        {}
+      )
+  
+      return state
+    }
+
+    const refreshLogs = () => {
+      nodeVariables.logRef = ''
+      nodeVariables.limit = 1000
+      nodeVariables.skipLineNum = 0
+      getLogs()
+    }
+
+    const downloadLogs = () => {
+      downloadFile('log/download-log', {
+        taskInstanceId: nodeVariables.logTaskId
+      })
+    }
+
+    const onConfirmModal = () => {
+      nodeVariables.showModalRef = false
     }
 
     watch(
@@ -317,11 +360,16 @@ export default defineComponent({
             v-model:show={nodeVariables.startModalShow}
           />
         )}
-        {!!props.instance && nodeVariables.logModalShow && (
+        {!!props.instance && (
           <LogModal
-            taskInstanceId={nodeVariables.logTaskId}
-            taskInstanceType={nodeVariables.logTaskType}
-            onHideLog={hideLog}
+            showModalRef={nodeVariables.showModalRef}
+            logRef={nodeVariables.logRef}
+            row={nodeVariables.row}
+            showDownloadLog={true}
+            logLoadingRef={nodeVariables.logLoadingRef}
+            onConfirmModal={onConfirmModal}
+            onRefreshLogs={refreshLogs}
+            onDownloadLogs={downloadLogs}
           />
         )}
       </div>

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-menu.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { reactive, Ref } from 'vue'
+import { reactive, ref, Ref } from 'vue'
 import { onMounted } from 'vue'
 import type { Graph, Cell } from '@antv/x6'
 
@@ -32,12 +32,17 @@ export function useNodeMenu(options: Options) {
   const nodeVariables = reactive({
     menuVisible: false,
     startModalShow: false,
-    logModalShow: false,
     logTaskId: -1,
     logTaskType: '',
     pageX: 0,
     pageY: 0,
-    menuCell: {} as Cell
+    menuCell: {} as Cell,
+    showModalRef: ref(false),
+    row: {},
+    logRef: '',
+    logLoadingRef: ref(true),
+    skipLineNum: ref(0),
+    limit: ref(1000)
   })
 
   const menuHide = () => {
@@ -54,11 +59,7 @@ export function useNodeMenu(options: Options) {
   const viewLog = (taskId: number, taskType: string) => {
     nodeVariables.logTaskId = taskId
     nodeVariables.logTaskType = taskType
-    nodeVariables.logModalShow = true
-  }
-
-  const hideLog = () => {
-    nodeVariables.logModalShow = false
+    nodeVariables.showModalRef = true
   }
 
   onMounted(() => {
@@ -83,7 +84,6 @@ export function useNodeMenu(options: Options) {
     nodeVariables,
     menuHide,
     menuStart,
-    viewLog,
-    hideLog
+    viewLog
   }
 }

dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/log-modal.tsx

@@ -1,368 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import _ from 'lodash'
-import {
-  defineComponent,
-  PropType,
-  Transition,
-  toRefs,
-  ref,
-  onMounted,
-  computed,
-  reactive,
-  renderSlot
-} from 'vue'
-import { useI18n } from 'vue-i18n'
-import { NButton, NIcon, NTooltip } from 'naive-ui'
-import { queryLog } from '@/service/modules/log'
-import {
-  DownloadOutlined,
-  SyncOutlined,
-  FullscreenOutlined,
-  FullscreenExitOutlined
-} from '@vicons/antd'
-import { downloadFile } from '@/service/service'
-import styles from './log.module.scss'
-
-const props = {
-  taskInstanceId: {
-    type: Number as PropType<number>,
-    default: -1
-  },
-  taskInstanceType: {
-    type: String as PropType<string>,
-    default: ''
-  }
-}
-
-export default defineComponent({
-  name: 'workflow-instance-log',
-  props,
-  emits: ['hideLog'],
-  setup(props, ctx) {
-    const { t } = useI18n()
-
-    const loadingRef = ref(false)
-    const loadingIndex = ref(0)
-    const isDataRef = ref(true)
-    const logBox = ref()
-    const logContent = ref()
-    const logContentBox = ref()
-    const textareaLog = ref()
-    const isScreen = ref(false)
-    const textareaHeight = computed(() =>
-      logContentBox.value ? logContentBox.value.clientHeight : 0
-    )
-    const contentRef = ref()
-
-    const boxRef = reactive({
-      width: '',
-      height: '',
-      marginLeft: '',
-      marginRight: '',
-      marginTop: ''
-    })
-
-    const refreshLog = () => {
-      loadingRef.value = true
-      queryLog({
-        taskInstanceId: props.taskInstanceId,
-        skipLineNum: loadingIndex.value * 1000,
-        limit: loadingIndex.value === 0 ? 1000 : (loadingIndex.value + 1) * 1000
-      }).then((res: any) => {
-        setTimeout(() => {
-          loadingRef.value = false
-          if (res) {
-            window.$message.success(t('project.workflow.update_log_success'))
-          } else {
-            window.$message.warning(t('project.workflow.no_more_log'))
-          }
-        }, 1500)
-        textareaLog.value.innerHTML = res || t('project.workflow.no_log')
-      })
-    }
-
-    const showLog = () => {
-      queryLog({
-        taskInstanceId: props.taskInstanceId,
-        skipLineNum: loadingIndex.value * 1000,
-        limit: loadingIndex.value === 0 ? 1000 : (loadingIndex.value + 1) * 1000
-      }).then((res: any) => {
-        if (!res) {
-          isDataRef.value = false
-          setTimeout(() => {
-            window.$message.warning(t('project.workflow.no_more_log'))
-          }, 1000)
-          textareaLog.value.innerHTML =
-            contentRef.value || t('project.workflow.no_log')
-        } else {
-          isDataRef.value = true
-          contentRef.value = res
-          textareaLog.value.innerHTML =
-            contentRef.value || t('project.workflow.no_log')
-          setTimeout(() => {
-            textareaLog.value.scrollTop = 2
-          }, 800)
-        }
-      })
-    }
-
-    const initLog = () => {
-      window.$message.info(t('project.workflow.loading_log'))
-      showLog()
-    }
-
-    const downloadLog = () => {
-      downloadFile('log/download-log', {
-        taskInstanceId: props.taskInstanceId
-      })
-    }
-
-    const screenOpen = () => {
-      isScreen.value = true
-      const winW = window.innerWidth - 40
-      const winH = window.innerHeight - 40
-
-      boxRef.width = `${winW}px`
-      boxRef.height = `${winH}px`
-      boxRef.marginLeft = `-${winW / 2}px`
-      boxRef.marginRight = `-${winH / 2}px`
-      boxRef.marginTop = `-${winH / 2}px`
-
-      logContent.value.animate({ scrollTop: 0 }, 0)
-    }
-
-    const screenClose = () => {
-      isScreen.value = false
-      boxRef.width = ''
-      boxRef.height = ''
-      boxRef.marginLeft = ''
-      boxRef.marginRight = ''
-      boxRef.marginTop = ''
-
-      logContent.value.animate({ scrollTop: 0 }, 0)
-    }
-
-    const toggleScreen = () => {
-      if (isScreen.value) {
-        screenClose()
-      } else {
-        screenOpen()
-      }
-    }
-
-    const close = () => {
-      ctx.emit('hideLog')
-    }
-
-    /**
-     * up
-     */
-    const onUp = _.throttle(
-      function () {
-        loadingIndex.value = loadingIndex.value - 1
-        showLog()
-      },
-      1000,
-      {
-        trailing: false
-      }
-    )
-
-    /**
-     * down
-     */
-    const onDown = _.throttle(
-      function () {
-        loadingIndex.value = loadingIndex.value + 1
-        showLog()
-      },
-      1000,
-      {
-        trailing: false
-      }
-    )
-
-    const onTextareaScroll = () => {
-      textareaLog.value.onscroll = () => {
-        // Listen for scrollbar events
-        if (
-          textareaLog.value.scrollTop + textareaLog.value.clientHeight ===
-          textareaLog.value.clientHeight
-        ) {
-          if (loadingIndex.value > 0) {
-            window.$message.info(t('project.workflow.loading_log'))
-            onUp()
-          }
-        }
-        // Listen for scrollbar events
-        if (
-          textareaLog.value.scrollHeight ===
-          textareaLog.value.clientHeight + textareaLog.value.scrollTop
-        ) {
-          // No data is not requested
-          if (isDataRef.value) {
-            window.$message.info(t('project.workflow.loading_log'))
-            onDown()
-          }
-        }
-      }
-    }
-
-    onMounted(() => {
-      initLog()
-      onTextareaScroll()
-    })
-
-    return {
-      t,
-      logBox,
-      logContentBox,
-      loadingRef,
-      textareaLog,
-      logContent,
-      textareaHeight,
-      isScreen,
-      boxRef,
-      showLog,
-      downloadLog,
-      refreshLog,
-      toggleScreen,
-      close,
-      ...toRefs(props)
-    }
-  },
-  render() {
-    return (
-      <div>
-        <span>
-          {this.taskInstanceId && this.taskInstanceType !== 'SUB_PROCESS' && (
-            <span>
-              {renderSlot(this.$slots, 'history')}
-              <slot name='history'></slot>
-              <span onClick={this.showLog}>
-                {renderSlot(this.$slots, 'log')}
-              </span>
-            </span>
-          )}
-          <Transition name='fade'>
-            {
-              <div class={styles['log-pop']}>
-                <div class={styles['log-box']} style={{ ...this.boxRef }}>
-                  <div class={styles['title']}>
-                    <div class={styles['left-item']}>
-                      {this.t('project.workflow.view_log')}
-                    </div>
-                    <div class={styles['right-item']}>
-                      <NTooltip>
-                        {{
-                          trigger: () => (
-                            <NButton
-                              strong
-                              secondary
-                              circle
-                              type='info'
-                              class={styles.button}
-                              onClick={this.downloadLog}
-                            >
-                              <NIcon>
-                                <DownloadOutlined />
-                              </NIcon>
-                            </NButton>
-                          ),
-                          default: () => this.t('project.workflow.download_log')
-                        }}
-                      </NTooltip>
-                      <NTooltip>
-                        {{
-                          trigger: () => (
-                            <NButton
-                              strong
-                              secondary
-                              circle
-                              type='info'
-                              class={styles.button}
-                              onClick={() =>
-                                !this.loadingRef && this.refreshLog()
-                              }
-                            >
-                              <NIcon>
-                                <SyncOutlined />
-                              </NIcon>
-                            </NButton>
-                          ),
-                          default: () => this.t('project.workflow.refresh_log')
-                        }}
-                      </NTooltip>
-                      <NTooltip>
-                        {{
-                          trigger: () => (
-                            <NButton
-                              strong
-                              secondary
-                              circle
-                              type='info'
-                              class={styles.button}
-                              onClick={this.toggleScreen}
-                            >
-                              <NIcon>
-                                {this.isScreen ? (
-                                  <FullscreenExitOutlined />
-                                ) : (
-                                  <FullscreenOutlined />
-                                )}
-                              </NIcon>
-                            </NButton>
-                          ),
-                          default: () =>
-                            this.isScreen
-                              ? this.t('project.workflow.cancel_full_screen')
-                              : this.t('project.workflow.enter_full_screen')
-                        }}
-                      </NTooltip>
-                    </div>
-                  </div>
-                  <div class={styles['content']} ref='logContent'>
-                    <div class={styles['content-log-box']} ref='logContentBox'>
-                      <textarea
-                        style={`width: 100%; height: ${this.textareaHeight}px`}
-                        spellcheck='false'
-                        ref='textareaLog'
-                        readonly
-                      ></textarea>
-                    </div>
-                  </div>
-                  <div class={styles['operation']}>
-                    <NButton
-                      type='primary'
-                      size='small'
-                      round
-                      onClick={this.close}
-                    >
-                      {this.t('project.workflow.close')}
-                    </NButton>
-                  </div>
-                </div>
-              </div>
-            }
-          </Transition>
-        </span>
-      </div>
-    )
-  }
-})

dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/log.module.scss

@@ -1,117 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.log-pop {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 10;
-  .log-box {
-    width: 660px;
-    height: 520px;
-    background: #fff;
-    border-radius: 3px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -340px;
-    margin-top: -250px;
-    .title {
-      height: 50px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid #dcdedc;
-      .left-item {
-        font-size: 16px;
-        color: #333;
-        display: inline-block;
-        padding-left: 20px;
-      }
-      .right-item {
-        padding-right: 10px;
-        .button {
-          margin-right: 10px;
-        }
-      }
-    }
-    .content {
-      height: calc(100% - 100px);
-      background: #002a35;
-      padding: 6px 2px;
-      .content-log-box {
-        width: 100%;
-        height: 100%;
-        word-break: break-all;
-        textarea {
-          background: none;
-          color: #9cabaf;
-          border: 0;
-          font-family: 'Microsoft Yahei,Arial,Hiragino Sans GB,tahoma,SimSun,sans-serif';
-          font-weight: bold;
-          resize: none;
-          line-height: 1.6;
-          padding: 0px;
-        }
-      }
-    }
-    .operation {
-      text-align: right;
-      height: 50px;
-      line-height: 44px;
-      border-top: 1px solid #dcdedc;
-      padding-right: 20px;
-      background: #fff;
-      position: relative;
-    }
-  }
-}
-@-webkit-keyframes rotateloading {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@-moz-keyframes rotateloading {
-  from {
-    -moz-transform: rotate(0deg);
-  }
-  to {
-    -moz-transform: rotate(359deg);
-  }
-}
-@-o-keyframes rotateloading {
-  from {
-    -o-transform: rotate(0deg);
-  }
-  to {
-    -o-transform: rotate(359deg);
-  }
-}
-@keyframes rotateloading {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}