core&ui: add compiler versions display

build/prepare.js

@@ -72,7 +72,7 @@ for (const name of ['plugins', 'modules']) {
 
 const modules = [
     'packages/hydrooj',
-    ...['packages', 'framework', 'modules'].flatMap((i) => fs.readdirSync(path.resolve(process.cwd(), i)).map((j) => `${i}/${j}`)),
+    ...['packages', 'framework'].flatMap((i) => fs.readdirSync(path.resolve(process.cwd(), i)).map((j) => `${i}/${j}`)),
 ].filter((i) => !i.includes('/.') && !i.includes('ui-default')).filter((i) => fs.statSync(path.resolve(process.cwd(), i)).isDirectory());
 
 const UIConfig = {
@@ -80,22 +80,18 @@ const UIConfig = {
         'packages/ui-default/public',
         '**/node_modules',
     ],
-    include: ['ts', 'tsx']
-        .flatMap((ext) => ['plugins', 'modules']
+    include: ['ts', 'tsx', 'vue']
+        .flatMap((ext) => ['plugins']
             .flatMap((name) => [`${name}/**/public/**/*.${ext}`, `${name}/**/frontend/**/*.${ext}`])
             .concat(`packages/ui-default/**/*.${ext}`)),
     compilerOptions: {
-        experimentalDecorators: true,
-        esModuleInterop: true,
-        resolveJsonModule: true,
-        jsx: 'react',
+        ...compilerOptionsBase,
         module: 'ESNext',
         skipLibCheck: true,
         allowSyntheticDefaultImports: true,
-        target: 'es2020',
         baseUrl: '.',
         outDir: path.join(baseOutDir, 'ui'),
-        moduleResolution: 'node',
+        moduleResolution: 'bundler',
         paths: {
             'vj/*': [
                 './packages/ui-default/*',
@@ -120,17 +116,7 @@ const pluginsConfig = {
     ],
     exclude,
     compilerOptions: {
-        target: 'es2020',
-        module: 'commonjs',
-        esModuleInterop: true,
-        moduleResolution: 'node',
-        jsx: 'react',
-        sourceMap: false,
-        composite: true,
-        strictBindCallApply: true,
-        resolveJsonModule: true,
-        experimentalDecorators: true,
-        incremental: true,
+        ...compilerOptionsBase,
         rootDir: '.',
         baseUrl: '.',
         outDir: path.join(baseOutDir, 'plugins'),

packages/hydrooj/src/handler/status.ts

@@ -3,6 +3,7 @@ import { PRIV } from '../model/builtin';
 import * as DocumentModel from '../model/document';
 import DomainModel from '../model/domain';
 import RecordModel from '../model/record';
+import * as SettingModel from '../model/setting';
 import UserModel from '../model/user';
 import db from '../service/db';
 import { Handler } from '../service/server';
@@ -59,7 +60,13 @@ class StatusHandler extends Handler {
             if (t) t.key.push(key);
             else result.push({ key: [key], message });
         }
-        this.response.body = { stats, compilers: result };
+        const LANGS = SettingModel.langs;
+        const languages = {};
+        for (const key in LANGS) {
+            if (LANGS[key].hidden) continue;
+            languages[`${LANGS[key].display}(${key})`] = LANGS[key].compile || LANGS[key].execute;
+        }
+        this.response.body = { stats, languages, compilers: result };
         this.response.template = 'status.html';
     }
 }

packages/ui-default/components/tab/Tab.js

@@ -144,5 +144,3 @@ export default class Tab extends DOMAttachedObject {
     return true;
   }
 }
-
-_.assign(Tab, DOMAttachedObject);

packages/ui-default/components/tab/tab.page.styl

@@ -73,6 +73,26 @@
           background: $secondary-color
           content: ''
 
+.section__tab-container:not(.immersive)
+  .section__tab-header
+    padding-top: 0 !important
+
+  .section__tab-header-item
+    border-top: 3px solid transparent;
+    transition: border-color 0.2s, background 0.2s, color 0.2s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    margin-right: 0
+
+    &:hover
+      border-color: #5f9fd6;
+      background: #f8f8f8;
+    
+    &.tab--active
+      border-color: #ed5f82;
+
+    &.selected
+      border-color: #ed5f82;
+
 .section__tab-content
   position: relative
 

packages/ui-default/index.ts

@@ -10,13 +10,6 @@ class WikiHelpHandler extends Handler {
   noCheckPermView = true;
 
   async get() {
-    const LANGS = SettingModel.langs;
-    const languages = {};
-    for (const key in LANGS) {
-      if (LANGS[key].hidden) continue;
-      languages[`${LANGS[key].display}(${key})`] = LANGS[key].compile || LANGS[key].execute;
-    }
-    this.response.body = { languages };
     this.response.template = 'wiki_help.html';
   }
 }

packages/ui-default/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@blueprintjs/core": "^5.10.3",
-    "@cordisjs/core": "^3.16.2",
+    "@cordisjs/core": "^3.17.3",
     "@fontsource/dm-mono": "^5.0.20",
     "@fontsource/fira-code": "^5.0.18",
     "@fontsource/inconsolata": "^5.0.18",
@@ -25,8 +25,8 @@
     "@fontsource/source-code-pro": "^5.0.18",
     "@fontsource/ubuntu-mono": "^5.0.20",
     "@hydrooj/utils": "workspace:^",
-    "@sentry/browser": "^8.9.2",
-    "@sentry/webpack-plugin": "^2.18.0",
+    "@sentry/browser": "^8.11.0",
+    "@sentry/webpack-plugin": "^2.20.0",
     "@simplewebauthn/browser": "7.4.0",
     "@svgr/webpack": "^8.1.0",
     "@types/gulp-if": "^0.0.34",
@@ -45,7 +45,7 @@
     "ajv": "^8.16.0",
     "allotment": "^1.20.2",
     "autoprefixer": "^10.4.19",
-    "browser-update": "^3.3.51",
+    "browser-update": "^3.3.53",
     "chalk": "^5.3.0",
     "classnames": "^2.5.1",
     "clean-webpack-plugin": "^4.0.0",
@@ -57,7 +57,7 @@
     "echarts": "^5.5.0",
     "emojis-keywords": "2.0.0",
     "emojis-list": "2.1.0",
-    "esbuild-loader": "^4.1.0",
+    "esbuild-loader": "^4.2.0",
     "fancy-log": "^2.0.0",
     "flatpickr": "^4.6.13",
     "graphiql": "^2.4.7",
@@ -77,7 +77,7 @@
     "monaco-editor-nls": "^3.1.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "monaco-themes": "^0.4.4",
-    "monaco-yaml": "^5.1.1",
+    "monaco-yaml": "5.1.1",
     "nanoid": "^5.0.7",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
@@ -120,7 +120,7 @@
     "vditor": "^3.10.4",
     "vinyl-buffer": "^1.0.1",
     "web-streams-polyfill": "^4.0.0",
-    "webpack": "^5.92.0",
+    "webpack": "^5.92.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-server": "^5.0.4",
     "webpack-manifest-plugin": "^5.0.0",

packages/ui-default/pages/problem_edit.page.styl

@@ -1,17 +1,4 @@
 .page--problem_edit,.page--problem_create
-  .section__tab-header-item
-    border-top: 3px solid transparent;
-    transition: border-color 0.2s, background 0.2s, color 0.2s;
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    margin-right: 0
-
-    &:hover
-      border-color: #5f9fd6;
-      background: #f8f8f8;
-    
-    &.tab--active
-      border-color: #ed5f82;
-
   .problem-sidebar-additional_file
     height: 270px
     overflow-y: auto

packages/ui-default/templates/status.html

@@ -3,41 +3,71 @@
 <div class="row">
   <div class="medium-12 columns">
     <div class="section">
-      <div class="section__body no-padding">
-        <div data-fragment-id="status">
-          <table class="data-table">
-            <colgroup>
-              <col class="col--id">
-              <col class="col--status">
-              <col class="col--os">
-              <col class="col--cpu">
-              <col class="col--memory">
-              <col class="col--request">
-            </colgroup>
-            <thead>
-              <tr>
-                <th class="col--id">{{ _('ID') }}</th>
-                <th class="col--status">{{ _('Current Status') }}</th>
-                <th class="col--os">{{ _('OS Info') }}</th>
-                <th class="col--cpu">{{ _('CPU Info') }}</th>
-                <th class="col--memory">{{ _('Memory Info') }}</th>
-                <th class="col--request">{{ _('Handled requests') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {%- for doc in stats -%}
-              <tr>
-                <td class="col--id">{{ doc._id.toHexString()|truncate(8,True,'') }}</td>
-                <td class="col--status">{% if doc.isOnline %}{{ doc.status }}{% else %}{{ datetimeSpan(doc.updateAt)|safe }}{% endif %}</td>
-                <td class="col--os" data-tooltip="{{ doc.osinfo.kernel }}">{{ doc.osinfo.distro }} {{ doc.osinfo.release }} {{ doc.osinfo.codename }} {{ doc.osinfo.arch }}</td>
-                <td class="col--cpu" data-tooltip="{{ doc.cpu.flags }}">{{ doc.cpu.manufacturer }} {{ doc.cpu.brand }}@{{ doc.cpu.speed }}GHz</td>
-                <td class="col--memory"{% if doc.stack %} data-tooltip="Stack size: {{ doc.stack }}MB"{% endif %}>{{ size(doc.memory.used) }}/{{ size(doc.memory.total) }}</td>
-                <td class="col--request">{{ doc.reqCount }}</td>
-              </tr>
-              {%- endfor -%}
-            </tbody>
-          </table>
-        </div>
+      <div class="section__tab-container">
+        <ul class="section__tabs">
+          <li class="section__tab-item">
+            <h1 class="section__tab-title">{{ _('Servers') }}</h1>
+            <div class="section__tab-main">
+              <table class="data-table">
+                <colgroup>
+                  <col class="col--id">
+                  <col class="col--status">
+                  <col class="col--os">
+                  <col class="col--cpu">
+                  <col class="col--memory">
+                  <col class="col--request">
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th class="col--id">{{ _('ID') }}</th>
+                    <th class="col--status">{{ _('Current Status') }}</th>
+                    <th class="col--os">{{ _('OS Info') }}</th>
+                    <th class="col--cpu">{{ _('CPU Info') }}</th>
+                    <th class="col--memory">{{ _('Memory Info') }}</th>
+                    <th class="col--request">{{ _('Handled requests') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {%- for doc in stats -%}
+                  <tr>
+                    <td class="col--id">{{ doc._id.toHexString()|truncate(8,True,'') }}</td>
+                    <td class="col--status">{% if doc.isOnline %}{{ doc.status }}{% else %}{{ datetimeSpan(doc.updateAt)|safe }}{% endif %}</td>
+                    <td class="col--os" data-tooltip="{{ doc.osinfo.kernel }}">{{ doc.osinfo.distro }} {{ doc.osinfo.release }} {{ doc.osinfo.codename }} {{ doc.osinfo.arch }}</td>
+                    <td class="col--cpu" data-tooltip="{{ doc.cpu.flags }}">{{ doc.cpu.manufacturer }} {{ doc.cpu.brand }}@{{ doc.cpu.speed }}GHz</td>
+                    <td class="col--memory"{% if doc.stack %} data-tooltip="Stack size: {{ doc.stack }}MB"{% endif %}>{{ size(doc.memory.used) }}/{{ size(doc.memory.total) }}</td>
+                    <td class="col--request">{{ doc.reqCount }}</td>
+                  </tr>
+                  {%- endfor -%}
+                </tbody>
+              </table>
+            </div>
+          </li>
+          {% if compilers|length %}
+            <li class="section__tab-item">
+              <h1 class="section__tab-title">{{ _('Compiler Versions') }}</h1>
+              <div class="section__tab-main">
+                <div class="section__body typo">
+                  {% for line in compilers %}
+                    <p>{{ line.key|join(', ') }}</p>
+                    <pre><code>{{ line.message }}</code></pre>
+                  {% endfor %}
+                </div>
+              </div>
+            </li>
+          {% endif %}
+          <li class="section__tab-item">
+            <h1 class="section__tab-title">{{ _('Compile Commands') }}</h1>
+            <div class="section__tab-main">
+              <div class="section__body typo">
+                <ul>
+                  {%- for k, v in languages -%}
+                    <li>{{ k }} <pre>{{ v }}</pre></li>
+                  {%- endfor -%}
+                </ul>
+              </div>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>

packages/ui-default/templates/wiki_help.html

@@ -17,14 +17,7 @@
     <h1 class="section__title" id="compiler" data-heading>{{ _("Compilers' Version and Parameters") }}</h1>
   </div>
   <div class="section__body typo">
-    <p>{{ name }} 使用 <a href="https://github.com/hydro-dev/Hydro/tree/master/packages/hydrojudge">HydroJudge</a> 进行评测，编译参数如下：</p>
-    {% if languages %}
-      <blockquote><ul>
-        {%- for k, v in languages -%}
-          <li>{{ k }} <pre>{{ v }}</pre></li>
-        {%- endfor -%}
-      </ul></blockquote>
-    {% endif %}
+    <p>{{ name }} 使用 <a href="https://github.com/hydro-dev/Hydro/tree/master/packages/hydrojudge">HydroJudge</a> 进行评测，编译参数和当前所用编译器版本见状态页。</p>
   </div>
 </div>
 <div class="section" data-heading-extract-to="#menu-item-wiki_help">