Merge pull request #3246 from chakflying/ui/monitor-group-select

UI: Improve no group monitor message

src/assets/app.scss

@@ -266,6 +266,11 @@ optgroup {
         background-color: $dark-bg2;
     }
 
+    .form-select:disabled {
+        color: rgba($dark-font-color, 0.7);
+        background-color: $dark-bg;
+    }
+
     .form-control, .form-select {
         border-color: $dark-border-color;
     }

src/lang/en.json

@@ -750,5 +750,6 @@
     "Badge value (For Testing only.)": "Badge value (For Testing only.)",
     "Badge URL": "Badge URL",
     "Group": "Group",
-    "Monitor Group": "Monitor Group"
+    "Monitor Group": "Monitor Group",
+    "noGroupMonitorMsg": "Not Available. Create a Group Monitor First."
 }

src/pages/EditMonitor.vue

@@ -96,7 +96,8 @@
                             <div class="my-3">
                                 <label for="parent" class="form-label">{{ $t("Monitor Group") }}</label>
                                 <select v-model="monitor.parent" class="form-select" :disabled="sortedMonitorList.length === 0">
-                                    <option :value="null" selected>{{ $t("None") }}</option>
+                                    <option v-if="sortedMonitorList.length === 0" :value="null" selected>{{ $t("noGroupMonitorMsg") }}</option>
+                                    <option v-else :value="null" selected>{{ $t("None") }}</option>
                                     <option v-for="parentMonitor in sortedMonitorList" :key="parentMonitor.id" :value="parentMonitor.id">{{ parentMonitor.pathName }}</option>
                                 </select>
                             </div>