Initial

client/src/components/hosts/HostGroupsPanel.vue

@@ -0,0 +1,173 @@
+<template>
+  <article class="glass-panel resource-table-panel host-groups-panel">
+    <div class="section-title">
+      <div>
+        <span class="eyebrow">HOST GROUPS</span>
+        <h3>Target collections</h3>
+        <p>Manual or rule-based groups that aggregate imported and manually created hosts.</p>
+      </div>
+      <div class="section-actions">
+        <button class="ghost-button compact" type="button" @click="$emit('sync-all')">
+          <RefreshCcw :size="15" />Sync dynamic
+        </button>
+        <button class="primary-action compact" type="button" @click="openModal()">
+          <Plus :size="15" />Add host group
+        </button>
+      </div>
+    </div>
+
+    <ResourceTable
+      :columns="columns"
+      :rows="hostGroups"
+      :total="hostGroups.length"
+      item-label="host groups"
+      empty-text="No host groups yet."
+      :page-count="1"
+      :page="1"
+      :page-size="hostGroups.length || 8"
+    >
+      <template #cell-name="{ row }"><strong>{{ row.name }}</strong></template>
+      <template #cell-mode="{ row }"><span :class="['status-pill', row.mode]">{{ row.mode }}</span></template>
+      <template #cell-memberCount="{ row }">{{ row.memberCount || row.hostIds?.length || 0 }} host(s)</template>
+      <template #cell-rules="{ row }">{{ ruleSummary(row) }}</template>
+      <template #cell-lastSyncedAt="{ row }">{{ row.lastSyncedAt ? new Date(row.lastSyncedAt).toLocaleString() : '-' }}</template>
+      <template #cell-actions="{ row }">
+        <div class="table-actions">
+          <button v-if="row.mode === 'dynamic'" class="ghost-button compact" type="button" @click="$emit('sync', row.id)">Sync</button>
+          <button class="ghost-button compact" type="button" @click="openModal(row)">Edit</button>
+          <button class="ghost-button compact danger-text" type="button" @click="$emit('delete', row.id)">Delete</button>
+        </div>
+      </template>
+    </ResourceTable>
+
+    <BaseModal
+      :open="modalOpen"
+      :title="form.id ? 'Update host group' : 'Create host group'"
+      eyebrow="HOST GROUPS"
+      description="Build reusable host targets for RunPlans and script tests."
+      wide
+      @close="modalOpen = false"
+    >
+      <form class="form-grid" @submit.prevent="save">
+        <label><span>Name</span><input v-model="form.name" required placeholder="Engineering" /></label>
+        <label><span>Mode</span><select v-model="form.mode"><option value="manual">Manual</option><option value="dynamic">Rule based</option></select></label>
+        <label><span>Visibility</span><select v-model="form.visibility"><option value="shared">Shared</option><option value="personal">Personal</option><option value="group">Group</option></select></label>
+        <label v-if="form.visibility === 'group'"><span>Group</span><select v-model="form.groupId"><option value="">Choose group</option><option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option></select></label>
+        <label class="full"><span>Description</span><textarea v-model="form.description" rows="2" placeholder="What this collection targets"></textarea></label>
+
+        <section v-if="form.mode === 'manual'" class="full modal-host-picker">
+          <div class="list-header"><span>Manual members</span><strong>{{ form.hostIds.length }} selected</strong></div>
+          <div class="host-picker">
+            <label v-for="host in hosts" :key="host.id">
+              <input v-model="form.hostIds" type="checkbox" :value="host.id" />
+              <span><strong>{{ host.name }}</strong><small>{{ host.transport }} - {{ host.address }}</small></span>
+            </label>
+          </div>
+        </section>
+
+        <section v-else class="full rule-editor">
+          <div class="list-header"><span>Dynamic rules</span><strong>{{ form.rules.length }} rule(s)</strong></div>
+          <label><span>Match mode</span><select v-model="form.matchMode"><option value="all">All rules</option><option value="any">Any rule</option></select></label>
+          <div v-for="(rule, index) in form.rules" :key="index" class="rule-row">
+            <select v-model="rule.field">
+              <option value="name">Name</option>
+              <option value="fqdn">FQDN</option>
+              <option value="address">Address</option>
+              <option value="tags">Tags</option>
+              <option value="transport">Transport</option>
+              <option value="sourceType">Source</option>
+              <option value="osFamily">OS family</option>
+            </select>
+            <select v-model="rule.operator">
+              <option value="contains">contains</option>
+              <option value="equals">equals</option>
+              <option value="startsWith">starts with</option>
+              <option value="endsWith">ends with</option>
+            </select>
+            <input v-model="rule.value" required placeholder="ENG" />
+            <button class="ghost-button compact danger-text" type="button" @click="removeRule(index)">
+              <Trash2 :size="14" />
+            </button>
+          </div>
+          <button class="ghost-button compact" type="button" @click="addRule"><Plus :size="14" />Add rule</button>
+        </section>
+
+        <div class="form-actions modal-actions full">
+          <button class="ghost-button" type="button" @click="modalOpen = false">Cancel</button>
+          <button class="primary-action" type="submit"><Save :size="17" />Save host group</button>
+        </div>
+      </form>
+    </BaseModal>
+  </article>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { Plus, RefreshCcw, Save, Trash2 } from '@lucide/vue';
+import BaseModal from '../ui/BaseModal.vue';
+import ResourceTable from '../ui/ResourceTable.vue';
+
+defineProps({
+  hostGroups: { type: Array, default: () => [] },
+  hosts: { type: Array, default: () => [] },
+  groups: { type: Array, default: () => [] }
+});
+
+const emit = defineEmits(['save', 'delete', 'sync', 'sync-all']);
+const modalOpen = ref(false);
+const form = reactive(defaultForm());
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'mode', label: 'Mode' },
+  { key: 'memberCount', label: 'Members' },
+  { key: 'rules', label: 'Rules', sortable: false },
+  { key: 'lastSyncedAt', label: 'Last sync' },
+  { key: 'actions', label: 'Actions', sortable: false }
+];
+
+function defaultForm() {
+  return {
+    id: null,
+    name: '',
+    description: '',
+    mode: 'manual',
+    matchMode: 'all',
+    rules: [{ field: 'name', operator: 'contains', value: 'ENG' }],
+    hostIds: [],
+    visibility: 'shared',
+    groupId: ''
+  };
+}
+
+function openModal(group = null) {
+  Object.assign(form, defaultForm(), group || {});
+  form.rules = (group?.rules?.length ? group.rules : defaultForm().rules).map((rule) => ({ ...rule }));
+  form.hostIds = [...(group?.hostIds || [])];
+  form.groupId = group?.groupId || '';
+  modalOpen.value = true;
+}
+
+function addRule() {
+  form.rules.push({ field: 'name', operator: 'contains', value: '' });
+}
+
+function removeRule(index) {
+  form.rules.splice(index, 1);
+  if (!form.rules.length) addRule();
+}
+
+function ruleSummary(group) {
+  if (group.mode === 'manual') return 'Manual membership';
+  return (group.rules || []).map((rule) => `${rule.field} ${rule.operator} "${rule.value}"`).join(` ${group.matchMode || 'all'} `) || 'No rules';
+}
+
+function save() {
+  emit('save', {
+    ...form,
+    groupId: form.groupId || null,
+    rules: form.mode === 'dynamic' ? form.rules.filter((rule) => rule.value?.trim()) : [],
+    hostIds: form.mode === 'manual' ? form.hostIds : []
+  });
+  modalOpen.value = false;
+}
+</script>