add target-meta-model to store key, value pairs related to a target

frontend/src/components/asmonitor/dialogs/TargetMetaCreateDialog.vue

@@ -0,0 +1,63 @@
+<script>
+import ASMonitorService from '@/service/ASMonitorService';
+import MarkdownEditor from '@/components/forms/MarkdownEditor.vue';
+import ModalDialog from '@/components/elements/dialogs/ModalDialog.vue';
+
+export default {
+    name: 'TargetMetaCreateDialog',
+    components: { ModalDialog, MarkdownEditor },
+    emits: ['object-created'],
+    data() {
+        return {
+            showDialog: false,
+            loading: false,
+            model: {
+                key: null,
+                value: null
+            },
+            service: new ASMonitorService(),
+            programId: this.$route.params.programId,
+            targetId: this.$route.params.targetId
+        };
+    },
+    methods: {
+        open() {
+            this.showDialog = true;
+        },
+        save() {
+            this.loading = true;
+            this.service
+                .createTargetMeta(this.$api, this.programId, this.targetId, this.model)
+                .then(() => {
+                    this.$toast.add({
+                        severity: 'success',
+                        summary: 'Target Meta created!',
+                        life: 3000,
+                        detail: 'Target meta created successfully!'
+                    });
+                    this.$emit('object-created');
+                    this.showDialog = false;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        }
+    }
+};
+</script>
+
+<template>
+    <Button icon="fa fa-plus" label="Target Meta" outlined @click="open"></Button>
+    <ModalDialog :loading="loading" header="Create Target Meta" v-model="showDialog" @onSave="save">
+        <div class="p-fluid grid formgrid">
+            <div class="field col-12">
+                <label for="key">Key</label>
+                <InputText v-model="model.key" id="key"></InputText>
+            </div>
+            <div class="field col-12">
+                <label for="value">Value</label>
+                <MarkdownEditor v-model="model.value"></MarkdownEditor>
+            </div>
+        </div>
+    </ModalDialog>
+</template>

frontend/src/router/routes/asmonitor.js

@@ -22,6 +22,11 @@ const asmonitorRoutes = [
                 name: 'ASMonitorTargetList',
                 component: () => import('@/views/pages/asmonitor/TargetList.vue')
             },
+            {
+                path: '/attack-surface/programs/:programId/targets/:targetId',
+                name: 'ASMonitorTargetDetail',
+                component: () => import('@/views/pages/asmonitor/TargetDetail.vue')
+            },
             {
                 path: '/attack-surface/programs/:programId/findings',
                 name: 'ASMonitorFindingList',

frontend/src/service/ASMonitorService.js

@@ -122,6 +122,11 @@ export default class ASMonitorService {
         return api.patch(url, data);
     }
 
+    getTarget(api, programId, id) {
+        let url = `/asmonitor/programs/${programId}/targets/${id}/`;
+        return api.get(url);
+    }
+
     getFindings(api, programId, params) {
         let url = `/asmonitor/programs/${programId}/findings/`;
         let config = {};
@@ -173,4 +178,28 @@ export default class ASMonitorService {
         let url = '/asmonitor/targets/';
         return api.get(url, config);
     }
+
+    getTargetMetas(api, programId, targetId, params) {
+        let config = {};
+        if (params) {
+            config['params'] = params;
+        }
+        let url = `/asmonitor/programs/${programId}/targets/${targetId}/metas/`;
+        return api.get(url, config);
+    }
+
+    patchTargetMeta(api, programId, targetId, id, data) {
+        let url = `/asmonitor/programs/${programId}/targets/${targetId}/metas/${id}/`;
+        return api.patch(url, data);
+    }
+
+    createTargetMeta(api, programId, targetId, data) {
+        let url = `/asmonitor/programs/${programId}/targets/${targetId}/metas/`;
+        return api.post(url, data);
+    }
+
+    deleteTargetMeta(api, programId, targetId, id) {
+        let url = `/asmonitor/programs/${programId}/targets/${targetId}/metas/${id}/`;
+        return api.delete(url);
+    }
 }

frontend/src/views/pages/asmonitor/TargetDetail.vue

@@ -0,0 +1,143 @@
+<script>
+import ASMonitorService from '@/service/ASMonitorService';
+import BaseLayout from '@/layout/base/BaseLayout.vue';
+import MarkdownEditor from '@/components/forms/MarkdownEditor.vue';
+import TargetMetaCreateDialog from '@/components/asmonitor/dialogs/TargetMetaCreateDialog.vue';
+
+export default {
+    name: 'TargetDetail',
+    components: { TargetMetaCreateDialog, MarkdownEditor, BaseLayout },
+    data() {
+        return {
+            service: new ASMonitorService(),
+            programId: this.$route.params.programId,
+            targetId: this.$route.params.targetId,
+            item: null,
+            metas: null,
+            selectedMeta: null,
+            pagination: { limit: 25, page: 1 },
+            totalRecords: 0,
+            breadcrumbs: [
+                {
+                    label: 'Targets',
+                    to: this.$router.resolve({
+                        name: 'ASMonitorTargetList',
+                        params: {
+                            programId: this.$route.params.programId
+                        }
+                    })
+                },
+                {
+                    label: 'Detail',
+                    disabled: true
+                }
+            ]
+        };
+    },
+    mounted() {
+        this.getItem();
+        this.getTargetMeta();
+    },
+    methods: {
+        getItem() {
+            this.service.getTarget(this.$api, this.programId, this.targetId).then((resp) => {
+                this.item = resp.data;
+            });
+        },
+        getTargetMeta() {
+            let params = {
+                page: this.pagination.page,
+                limit: this.pagination.limit
+            };
+            this.service.getTargetMetas(this.$api, this.programId, this.targetId, params).then((resp) => {
+                this.metas = resp.data.results;
+                this.totalRecords = resp.data.count;
+            });
+        },
+        onPage(event) {
+            this.pagination.page = event.page + 1;
+            this.getTargetMeta();
+        },
+        onMetaSelected(event) {
+            if (event.value === null) {
+                this.selectedMeta = null;
+                return;
+            }
+            this.getTargetMeta();
+            for (let i = 0; i < this.metas.length; i++) {
+                if (this.metas[i].pk === event.value.pk) {
+                    this.selectedMeta = this.metas[i];
+                    break;
+                }
+            }
+        },
+        patchMeta() {
+            let data = {
+                value: this.selectedMeta.value
+            };
+            this.service.patchTargetMeta(this.$api, this.programId, this.targetId, this.selectedMeta.pk, data).then(() => {
+                this.$toast.add({
+                    severity: 'success',
+                    summary: 'Meta data updated!',
+                    detail: 'Target meta data updated successfully!',
+                    life: 3000
+                });
+            });
+        },
+        deleteMeta() {
+            this.$confirm.require({
+                message: 'Do you want to delete this item?',
+                header: 'Delete Confirmation',
+                icon: 'fa fa-trash',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    this.service.deleteTargetMeta(this.$api, this.programId, this.targetId, this.selectedMeta.pk).then(() => {
+                        this.$toast.add({
+                            severity: 'info',
+                            summary: 'Deleted',
+                            detail: 'Item was deleted!',
+                            life: 3000
+                        });
+                        this.getTargetMeta();
+                        this.selectedMeta = null;
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+
+<template>
+    <BaseLayout :breadcrumbs="breadcrumbs">
+        <template #pre-content-right>
+            <div class="flex justify-content-end">
+                <TargetMetaCreateDialog @object-created="getTargetMeta"></TargetMetaCreateDialog>
+                <Button icon="fa fa-trash" label="Delete" outlined severity="danger" @click="deleteMeta" :disabled="!selectedMeta"></Button>
+            </div>
+        </template>
+        <template #default>
+            <div class="col-12">
+                <div class="card">
+                    <div class="grid">
+                        <div class="col-3 h-full">
+                            <Listbox @change="onMetaSelected" v-model="selectedMeta" :options="metas" optionLabel="key" class="w-full">
+                                <template #option="slotProps">
+                                    {{ slotProps.option.key }}
+                                </template>
+                            </Listbox>
+                            <Paginator :rows="pagination.limit" :totalRecords="totalRecords" @page="onPage"></Paginator>
+                        </div>
+                        <div class="col-9">
+                            <div class="grid formgrid p-fluid">
+                                <div class="col-12 field">
+                                    <MarkdownEditor v-if="selectedMeta !== null" v-model="selectedMeta.value" @blur="patchMeta"></MarkdownEditor>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </BaseLayout>
+</template>

frontend/src/views/pages/asmonitor/TargetList.vue

@@ -121,6 +121,15 @@ export default {
                 this.techChoices = response.data.results;
             });
         },
+        onRowClick(row) {
+            this.$router.push({
+                name: 'ASMonitorTargetDetail',
+                params: {
+                    programId: this.programId,
+                    targetId: row.data.pk
+                }
+            });
+        },
         confirmDialogDelete(id) {
             this.$confirm.require({
                 message: 'Do you want to remove this target?',
@@ -168,6 +177,7 @@ export default {
                 filter-display="menu"
                 :show-search="true"
                 @search="onGlobalSearch"
+                @row-click="onRowClick"
             >
                 <Column field="name" header="Name" sortable></Column>
                 <Column field="ip" header="IP"></Column>

server/asmonitor/migrations/0003_targetmeta.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.0.4 on 2024-04-26 05:28
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('asmonitor', '0002_finding_tags'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='TargetMeta',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('date_created', models.DateTimeField(auto_now_add=True)),
+                ('date_updated', models.DateTimeField(auto_now=True)),
+                ('key', models.CharField(max_length=128)),
+                ('value', models.TextField()),
+                ('target', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='asmonitor.target')),
+            ],
+            options={
+                'ordering': ['key', 'target'],
+                'unique_together': {('target', 'key')},
+            },
+        ),
+    ]

server/asmonitor/models/__init__.py

@@ -2,3 +2,4 @@
 from .target import Target
 from .tag import Tag
 from .finding import Finding
+from .targetmeta import TargetMeta

server/asmonitor/models/targetmeta.py

@@ -0,0 +1,28 @@
+from django.db import models
+from pecoret.core.models import TimestampedModel
+
+
+class TargetMetaQuerySet(models.QuerySet):
+    def for_target(self, target):
+        return self.filter(target=target)
+
+    def for_program(self, program):
+        return self.filter(target__program=program)
+
+
+class TargetMeta(TimestampedModel):
+    objects = TargetMetaQuerySet.as_manager()
+    target = models.ForeignKey('asmonitor.Target', on_delete=models.CASCADE)
+    key = models.CharField(max_length=128)
+    value = models.TextField()
+
+    class Meta:
+        ordering = ['key', 'target']
+        unique_together = [
+            ('target', 'key')
+        ]
+
+    def save(self, *args, **kwargs):
+        super().save(*args, **kwargs)
+        # update parents
+        self.target.save()

server/asmonitor/serializers/targetmeta.py

@@ -0,0 +1,10 @@
+from rest_framework import serializers
+from asmonitor.models import TargetMeta
+
+
+class TargetMetaSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = TargetMeta
+        fields = [
+            'pk', 'key', 'value', 'date_created', 'date_updated'
+        ]