mihari 5.2.3 → 5.2.4

data/frontend/src/components/config/Configs.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="box">
+    <div class="table-container">
+      <table class="table is-fullwidth">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Configured</th>
+            <th>Key-value(s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="config in configs" :key="config.name">
+            <td>
+              {{ config.name }}
+            </td>
+            <td>
+              {{ config.type }}
+            </td>
+            <td>
+              <button
+                class="button is-success is-small ml-1"
+                v-if="config.isConfigured"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-check"></i>
+                </span>
+                <span>Yes</span>
+              </button>
+              <button class="button is-warning is-small ml-1" v-else>
+                <span class="icon is-small">
+                  <i class="fas fa-exclamation"></i>
+                </span>
+                <span>No</span>
+              </button>
+            </td>
+            <td>
+              <ul>
+                <li v-for="(kv, index) in config.values" :key="index">
+                  <strong> {{ kv.key }} </strong>:
+                  <code v-if="kv.value">{{ kv.value }}</code>
+                  <span v-else>N/A</span>
+                </li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { Config } from "@/types";
+
+export default defineComponent({
+  name: "ConfigsItem",
+  props: {
+    configs: {
+      type: Array as PropType<Config[]>,
+      required: true,
+    },
+  },
+});
+</script>

data/frontend/src/components/config/ConfigsWrapper.vue

@@ -0,0 +1,40 @@
+<template>
+  <Loading v-if="getConfigsTask.isRunning"></Loading>
+
+  <ErrorMessage
+    v-if="getConfigsTask.isError"
+    :error="getConfigsTask.last?.error"
+  ></ErrorMessage>
+
+  <Configs
+    :configs="getConfigsTask.last.value"
+    v-if="getConfigsTask.last?.value"
+  ></Configs>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+
+import { generateGetConfigsTask } from "@/api-helper";
+import Configs from "@/components/config/Configs.vue";
+import ErrorMessage from "@/components/ErrorMessage.vue";
+import Loading from "@/components/Loading.vue";
+
+export default defineComponent({
+  name: "ConfigsWrapper",
+  components: {
+    Configs,
+    Loading,
+    ErrorMessage,
+  },
+  setup() {
+    const getConfigsTask = generateGetConfigsTask();
+
+    onMounted(async () => {
+      await getConfigsTask.perform();
+    });
+
+    return { getConfigsTask };
+  },
+});
+</script>

data/frontend/src/components/link/Link.vue

@@ -0,0 +1,32 @@
+<template>
+  <a :href="link.href(data)" class="tag is-white" target="_blank">
+    <img :src="link.favicon()" alt="favicon" />
+    <span>{{ link.name }}</span>
+  </a>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { Link } from "@/types";
+
+export default defineComponent({
+  name: "LinkItem",
+  props: {
+    data: {
+      type: String,
+      required: true,
+    },
+    link: {
+      type: Object as PropType<Link>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style scoped>
+.tag img {
+  margin-right: 5px;
+}
+</style>

data/frontend/src/components/link/Links.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="tags are-medium">
+    <LinkComponent
+      :data="data"
+      :link="link"
+      v-for="link in selectedLinks"
+      :key="link.name"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import LinkComponent from "@/components/link/Link.vue";
+import { Links } from "@/links";
+import { Link } from "@/types";
+
+export default defineComponent({
+  name: "LinksItem",
+  components: {
+    LinkComponent,
+  },
+  props: {
+    data: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const links = Links;
+    const selectedLinks = computed((): Link[] => {
+      if (props.type === undefined) {
+        return links;
+      }
+
+      return links.filter((link) => link.type === props.type);
+    });
+
+    return { selectedLinks };
+  },
+});
+</script>

data/frontend/src/components/rule/EditRule.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="column">
+    <h2 class="is-size-2 mb-4">Edit rule: {{ rule.id }}</h2>
+
+    <InputForm v-model:yaml="yaml" @update-yaml="updateYAML"></InputForm>
+
+    <div class="field is-grouped is-grouped-centered">
+      <p class="control">
+        <a class="button is-primary" @click="edit">
+          <span class="icon is-small">
+            <i class="fas fa-edit"></i>
+          </span>
+          <span>Edit</span>
+        </a>
+      </p>
+    </div>
+
+    <div v-if="updateRuleTask.last?.error">
+      <hr />
+      <ErrorMessage :error="updateRuleTask.last?.error"></ErrorMessage>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from "vue";
+import { useRouter } from "vue-router";
+
+import { generateUpdateRuleTask } from "@/api-helper";
+import ErrorMessage from "@/components/ErrorMessage.vue";
+import InputForm from "@/components/rule/InputForm.vue";
+import { Rule } from "@/types";
+
+export default defineComponent({
+  name: "EditRule",
+  components: {
+    InputForm,
+    ErrorMessage,
+  },
+  props: {
+    rule: {
+      type: Object as PropType<Rule>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const router = useRouter();
+
+    const yaml = ref(props.rule.yaml);
+
+    const updateRuleTask = generateUpdateRuleTask();
+
+    const updateYAML = (value: string) => {
+      yaml.value = value;
+    };
+
+    const edit = async () => {
+      const rule = await updateRuleTask.perform({
+        id: props.rule.id,
+        yaml: yaml.value,
+      });
+
+      router.push({ name: "Rule", params: { id: rule.id } });
+    };
+
+    return {
+      edit,
+      yaml,
+      updateYAML,
+      updateRuleTask,
+    };
+  },
+});
+</script>

data/frontend/src/components/rule/EditRuleWrapper.vue

@@ -0,0 +1,56 @@
+<template>
+  <Loading v-if="getRuleTask.isRunning"></Loading>
+
+  <ErrorMessage
+    v-if="getRuleTask.isError"
+    :error="getRuleTask.last?.error"
+  ></ErrorMessage>
+
+  <EditRule
+    :rule="getRuleTask.last.value"
+    v-if="getRuleTask.last?.value"
+  ></EditRule>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, watch } from "vue";
+
+import { generateGetRuleTask } from "@/api-helper";
+import ErrorMessage from "@/components/ErrorMessage.vue";
+import Loading from "@/components/Loading.vue";
+import EditRule from "@/components/rule/EditRule.vue";
+
+export default defineComponent({
+  name: "EditRuleWrapper",
+  components: {
+    EditRule,
+    Loading,
+    ErrorMessage,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const getRuleTask = generateGetRuleTask();
+
+    const getRule = async () => {
+      await getRuleTask.perform(props.id);
+    };
+
+    onMounted(async () => {
+      await getRule();
+    });
+
+    watch(props, async () => {
+      await getRule();
+    });
+
+    return {
+      getRuleTask,
+    };
+  },
+});
+</script>

data/frontend/src/components/rule/Form.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Title</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <p class="control">
+              <input class="input" type="text" v-model="title" />
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Description</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <p class="control">
+              <input class="input" type="text" v-model="description" />
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="columns">
+    <div class="column">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Tag</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <div class="control">
+              <div class="select">
+                <select v-model="tagInput">
+                  <option></option>
+                  <option v-for="tag_ in tags" :key="tag_">
+                    {{ tag_ }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column"></div>
+  </div>
+
+  <div class="columns">
+    <div class="column">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">From</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <p class="control">
+              <input class="input" type="date" v-model="fromAt" />
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">To</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <p class="control">
+              <input class="input" type="date" v-model="toAt" />
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+
+import { RuleSearchParams } from "@/types";
+import { normalizeQueryParam } from "@/utils";
+
+export default defineComponent({
+  name: "RulesForm",
+  props: {
+    tags: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+    page: {
+      type: Number,
+      required: true,
+    },
+    tag: {
+      type: String,
+      required: false,
+    },
+  },
+  setup(props) {
+    const route = useRoute();
+
+    const description = ref<string | undefined>(undefined);
+    const fromAt = ref<string | undefined>(undefined);
+    const tagInput = ref<string | undefined>(props.tag);
+    const title = ref<string | undefined>(undefined);
+    const toAt = ref<string | undefined>(undefined);
+
+    const updateByQueryParams = () => {
+      const tag_ = route.query["tag"];
+      if (tagInput.value === undefined) {
+        tagInput.value = normalizeQueryParam(tag_);
+      }
+    };
+
+    const getSearchParams = (): RuleSearchParams => {
+      updateByQueryParams();
+
+      const params: RuleSearchParams = {
+        description: description.value === "" ? undefined : description.value,
+        page: props.page,
+        tag: tagInput.value === "" ? undefined : tagInput.value,
+        title: title.value === "" ? undefined : title.value,
+        toAt: toAt.value === "" ? undefined : toAt.value,
+        fromAt: fromAt.value === "" ? undefined : fromAt.value,
+      };
+      return params;
+    };
+
+    watch(
+      () => props.tag,
+      () => {
+        tagInput.value = props.tag;
+      }
+    );
+
+    return {
+      description,
+      fromAt,
+      getSearchParams,
+      title,
+      toAt,
+      tagInput,
+    };
+  },
+});
+</script>

data/frontend/src/components/rule/InputForm.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="block my-editor-wrapper" ref="wrapper">
+    <PrismEditor
+      class="my-editor"
+      v-model="yamlInput"
+      :highlight="highlighter"
+      line-numbers
+    ></PrismEditor>
+  </div>
+</template>
+
+<script lang="ts">
+// eslint-disable-next-line simple-import-sort/imports
+import "vue-prism-editor/dist/prismeditor.min.css";
+
+import { defineComponent, ref, watchEffect } from "vue";
+import { PrismEditor } from "vue-prism-editor";
+
+import Prism from "prismjs";
+
+import "prismjs/components/prism-yaml";
+import "prismjs/plugins/custom-class/prism-custom-class";
+import "prismjs/themes/prism-twilight.css";
+
+export default defineComponent({
+  name: "RuleInputForm",
+  components: {
+    PrismEditor,
+  },
+  props: {
+    yaml: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["update-yaml"],
+  setup(props, context) {
+    const yamlInput = ref(props.yaml);
+    const wrapper = ref<HTMLElement | undefined>(undefined);
+
+    Prism.plugins.customClass.map({
+      number: "prism-number",
+      tag: "prism-tag",
+    });
+
+    const highlighter = (code: string) => {
+      return Prism.highlight(code, Prism.languages.yaml, "yaml");
+    };
+
+    watchEffect(() => {
+      context.emit("update-yaml", yamlInput.value);
+
+      // TODO: a dirty hack to change the default text color
+      if (wrapper.value) {
+        const strings = wrapper.value.querySelectorAll(":not(span.token)");
+        strings.forEach((string) => {
+          (string as HTMLElement).style.color = "white";
+        });
+      }
+    });
+
+    return { yamlInput, highlighter, wrapper };
+  },
+});
+</script>
+
+<style scoped>
+.my-editor {
+  background: hsl(0, 0%, 8%);
+  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+  font-size: 1em;
+  line-height: 1.5;
+  padding: 5px;
+}
+
+.my-editor-wrapper {
+  background: hsl(0, 0%, 8%);
+  padding: 10px;
+}
+</style>

data/frontend/src/components/rule/NewRule.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="column">
+    <h2 class="is-size-2 mb-4">New rule</h2>
+
+    <InputForm v-model:yaml="yaml" @update-yaml="updateYAML"></InputForm>
+
+    <div class="field is-grouped is-grouped-centered">
+      <p class="control">
+        <a class="button is-primary" @click="create">
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+          <span>Create</span>
+        </a>
+      </p>
+    </div>
+
+    <div v-if="createRuleTask.last?.error">
+      <hr />
+      <ErrorMessage :error="createRuleTask.last?.error"></ErrorMessage>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { useRouter } from "vue-router";
+
+import { generateCreateRuleTask } from "@/api-helper";
+import ErrorMessage from "@/components/ErrorMessage.vue";
+import InputForm from "@/components/rule/InputForm.vue";
+import { getRuleTemplate } from "@/rule";
+
+export default defineComponent({
+  name: "NewRule",
+  components: {
+    InputForm,
+    ErrorMessage,
+  },
+  setup() {
+    const router = useRouter();
+
+    const yaml = ref(getRuleTemplate());
+
+    const createRuleTask = generateCreateRuleTask();
+
+    const updateYAML = (value: string) => {
+      yaml.value = value;
+    };
+
+    const create = async () => {
+      const rule = await createRuleTask.perform({ yaml: yaml.value });
+
+      router.push({ name: "Rule", params: { id: rule.id } });
+    };
+
+    return { yaml, create, updateYAML, createRuleTask };
+  },
+});
+</script>