Feat: Create Group in EditMonitor page

server/model/monitor.js

@@ -351,7 +351,10 @@ class Monitor extends BeanModel {
                             const lastBeat = await Monitor.getPreviousHeartbeat(child.id);
 
                             // Only change state if the monitor is in worse conditions then the ones before
-                            if (bean.status === UP && (lastBeat.status === PENDING || lastBeat.status === DOWN)) {
+                            // lastBeat.status could be null
+                            if (!lastBeat) {
+                                bean.status = PENDING;
+                            } else if (bean.status === UP && (lastBeat.status === PENDING || lastBeat.status === DOWN)) {
                                 bean.status = lastBeat.status;
                             } else if (bean.status === PENDING && lastBeat.status === DOWN) {
                                 bean.status = lastBeat.status;

server/server.js

@@ -657,7 +657,10 @@ let needSetup = false;
                 await updateMonitorNotification(bean.id, notificationIDList);
 
                 await server.sendMonitorList(socket);
-                await startMonitor(socket.userID, bean.id);
+
+                if (monitor.active !== false) {
+                    await startMonitor(socket.userID, bean.id);
+                }
 
                 log.info("monitor", `Added Monitor: ${monitor.id} User ID: ${socket.userID}`);
 

src/components/ActionSelect.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="input-group mb-3">
+        <select ref="select" v-model="model" class="form-select" :disabled="disabled">
+            <option v-for="option in options" :key="option" :value="option.value">{{ option.label }}</option>
+        </select>
+        <a class="btn btn-outline-primary" @click="action()">
+            <font-awesome-icon :icon="icon" />
+        </a>
+    </div>
+</template>
+
+<script>
+/**
+ * Generic select field with a customizable action on the right.
+ * Action is passed in as a function.
+ */
+export default {
+    props: {
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         * The value of the select field.
+         */
+        modelValue: {
+            type: Number,
+            default: null,
+        },
+        /**
+         * Whether the select field is enabled / disabled.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The icon displayed in the right button of the select field.
+         * Accepts a Font Awesome icon string identifier.
+         * @example "plus"
+         */
+        icon: {
+            type: String,
+            required: true,
+        },
+        /**
+         * The action to be performed when the button is clicked.
+         * Action is passed in as a function.
+         */
+        action: {
+            type: Function,
+            default: () => {},
+        }
+    },
+    emits: [ "update:modelValue" ],
+    computed: {
+        /**
+         * Send value update to parent on change.
+         */
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            }
+        }
+    },
+};
+</script>

src/components/CreateGroupDialog.vue

@@ -0,0 +1,56 @@
+<template>
+    <div ref="modal" class="modal fade" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        {{ $t("New Group") }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body">
+                    <form @submit.prevent="confirm">
+                        <div>
+                            <label for="draftGroupName" class="form-label">{{ $t("Group Name") }}</label>
+                            <input id="draftGroupName" v-model="groupName" type="text" class="form-control">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        {{ $t("Cancel") }}
+                    </button>
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" :disabled="groupName == '' || groupName == null" @click="confirm">
+                        {{ $t("Confirm") }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+
+export default {
+    props: {},
+    emits: [ "added" ],
+    data: () => ({
+        modal: null,
+        groupName: null,
+    }),
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+        /** Show the confirm dialog */
+        show() {
+            this.modal.show();
+        },
+        confirm() {
+            this.$emit("added", this.groupName);
+            this.modal.hide();
+        },
+    },
+};
+</script>