feature: user can add metrics which described as json for phase

package.json

@@ -18,6 +18,7 @@
     "vue": "^3.3.4",
     "vue-i18n": "^9.3.0-beta.26",
     "vue-router": "^4.2.4",
+    "vue3-json-editor": "^1.1.5",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

src/views/host/AddTrack.vue

@@ -49,6 +49,20 @@
         <el-form-item :label="$t('addTrack.maxSubmissions')" prop="max_submissions" required>
           <el-input v-model="ruleForm.max_submissions" maxlength="32" />
         </el-form-item>
+        <el-form-item prop="metrics" label="Metrics">
+          <div class="flex-center">
+            <Vue3JsonEditor
+              id="json-editor"
+              style="width: 800px"
+              mode="code"
+              v-model="ruleForm.metrics"
+              :show-btns="false"
+              :expandedOnStart="true"
+              @json-change="onJsonChange"
+              @has-error="onError"
+            />
+          </div>
+        </el-form-item>
         <el-form-item prop="leaderboard_public">
           <span class="inline-title">{{ $t('addTrack.lbPublic') }}</span>
           <el-switch v-model="ruleForm.leaderboard_public" size="small" />
@@ -107,11 +121,12 @@ import { getChallengeDetail } from '@/api/challenge';
 import { useRouter } from 'vue-router';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { Vue3JsonEditor } from 'vue3-json-editor'
 
 const route = useRoute();
 const { t } = useI18n();
 const router = useRouter();
-
+const metrics_json_has_error = ref(false)
 const ruleForm = reactive({
   id: undefined,
   name: '',
@@ -129,6 +144,36 @@ const ruleForm = reactive({
   is_restricted_to_select_one_submission: false,
   is_partial_submission_evaluation_enabled: true,
   allowed_submission_file_types: '',
+  metrics: {
+    "labels":
+    [
+        "Metric name 1",
+        "Metric name 2",
+        "Metric name 3",
+        "Metric name 4",
+        "Metric name 5"
+    ],
+    "metadata":
+    {
+        "Metric name 1":
+        {
+            "description": "description1"
+        },
+        "Metric name 2":
+        {
+            "description": "description1"
+        },
+        "Metric name 3":
+        {
+            "description": "description1"
+        },
+        "Metric name 4":
+        {
+            "description": "description1"
+        }
+    },
+    "default_order_by": "Driving score"
+  }
 });
 
 const ruleFormRef = ref();
@@ -140,7 +185,25 @@ const validatehtml = (rule, value, callback) => {
     callback();
   }
 };
-
+const onJsonChange = (value) => {
+  metrics_json_has_error.value = false
+  ruleForm.metrics = value 
+}
+const onError = (value) => {
+  metrics_json_has_error.value = true
+  console.log(value)
+}
+const validate_metrics = (rule, value, callback) => {
+  if (metrics_json_has_error.value){
+    callback(new Error('invalid json metrics! Please check web console for details.'));
+  } else if(!value.hasOwnProperty("labels") ){
+    callback(new Error(rule.field + ' has no `labels` found'));
+  } else if(!value.hasOwnProperty("default_order_by") ){
+    callback(new Error(rule.field + ' has no `default_order_by` found'));
+  } else {
+    callback();
+  }
+};
 const rules = reactive({
   name: [
     { required: true, message: 'title is required', trigger: 'blur' },
@@ -151,6 +214,7 @@ const rules = reactive({
   terms_and_conditions: [{ validator: validatehtml, trigger: 'blur' }],
   submission_guidelines: [{ validator: validatehtml, trigger: 'blur' }],
   leaderboard_description: [{ validator: validatehtml, trigger: 'blur' }],
+  metrics: [{ validator: validate_metrics, trigger: 'blur' }],
   max_submissions_per_day: [{ pattern: /^-?\d+(\.\d+)?$/, message: 'Enter numbers only', trigger: 'blur' }],
   max_submissions_per_month: [{ pattern: /^-?\d+(\.\d+)?$/, message: 'Enter numbers only', trigger: 'blur' }],
   max_submissions: [{ pattern: /^-?\d+(\.\d+)?$/, message: 'Enter numbers only', trigger: 'blur' }],
@@ -176,6 +240,7 @@ const submitForm = async (formEl) => {
         max_submissions: ruleForm.max_submissions,
         is_restricted_to_select_one_submission: ruleForm.is_restricted_to_select_one_submission,
         is_partial_submission_evaluation_enabled: ruleForm.is_partial_submission_evaluation_enabled,
+        metrics: ruleForm.metrics,
         // allowed_submission_file_types: ruleForm.allowed_submission_file_types,
       }).then((res) => {
         ElMessage.success(ruleForm.id !== undefined ? t('addTrack.updateSuccess') : t('addTrack.createSuccess'));
@@ -212,6 +277,7 @@ onMounted(() => {
       ruleForm.is_restricted_to_select_one_submission = res.is_restricted_to_select_one_submission;
       ruleForm.is_partial_submission_evaluation_enabled = res.is_partial_submission_evaluation_enabled;
       ruleForm.allowed_submission_file_types = res.allowed_submission_file_types;
+      ruleForm.metrics = res.metrics
       ruleForm.id = res.id;
     });
   }
@@ -247,6 +313,30 @@ onMounted(() => {
       color: #7f889a;
       font-size: 12px;
     }
+    ::v-deep {
+      .jsoneditor-poweredBy {
+          display: none !important;
+      }
+      div.jsoneditor-outer {
+          height: 300px;
+      }
+      div.jsoneditor-menu {
+          background-color: #12171f00;
+          border: 1px solid #424e61;
+      }
+      div.jsoneditor-modes {
+        visibility: hidden;
+      }
+      div.jsoneditor {
+          border: 1px solid #000;
+      }
+    }
+    #json-editor > div.jsoneditor {
+      border: 1px solid #424e61;
+      .jsoneditor-menu {
+        background-color: #12171f00;
+      }
+    }
   }
 }
 </style>

yarn.lock

@@ -459,6 +459,11 @@
   "resolved" "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz"
   "version" "1.0.20"
 
+"core-js@^3.21.1":
+  "integrity" "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug=="
+  "resolved" "https://registry.npmmirror.com/core-js/-/core-js-3.37.0.tgz"
+  "version" "3.37.0"
+
 "csstype@^3.1.1":
   "integrity" "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
   "resolved" "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz"
@@ -1139,7 +1144,7 @@
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
-"vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.2", "vue@^3.0.5", "vue@^3.2.0", "vue@^3.2.25", "vue@^3.3.4", "vue@2 || 3", "[email protected]":
+"vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.2", "vue@^3.0.5", "vue@^3.2.0", "vue@^3.2.25", "vue@^3.2.31", "vue@^3.3.4", "vue@2 || 3", "[email protected]":
   "integrity" "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw=="
   "resolved" "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz"
   "version" "3.3.4"
@@ -1150,6 +1155,14 @@
     "@vue/server-renderer" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"vue3-json-editor@^1.1.5":
+  "integrity" "sha512-p+hbl5SdMifA9brPt9TsG2HYB7Xy7xy98b61zcIusVpwhGtS5a0IwWPKM7BXcj9poIdc/bPs4AFchQOHIBq++w=="
+  "resolved" "https://registry.npmmirror.com/vue3-json-editor/-/vue3-json-editor-1.1.5.tgz"
+  "version" "1.1.5"
+  dependencies:
+    "core-js" "^3.21.1"
+    "vue" "^3.2.31"
+
 "vuex@^4.0.2":
   "integrity" "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q=="
   "resolved" "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz"