fluency-v8-components 1.3.4 → 1.3.6

package/src/constants/schedule.js

@@ -0,0 +1,52 @@
+const intervalOptions = [
+  // { label: "Minute", value: "minute" },
+  { label: "Hourly", value: "hourly" },
+  { label: "Daily", value: "daily" },
+  { label: "Weekly", value: "weekly" },
+  { label: "Monthly", value: "monthly" },
+];
+
+const weekdayOptions = [
+  { label: "Sunday", value: 0 },
+  { label: "Monday", value: 1 },
+  { label: "Tuesday", value: 2 },
+  { label: "Wednesday", value: 3 },
+  { label: "Thursday", value: 4 },
+  { label: "Friday", value: 5 },
+  { label: "Saturday", value: 6 },
+];
+
+const hourOptions = Array.from({ length: 24 }, (_, i) => {
+  return { label: i.toString(), value: i };
+});
+
+const dayOptions = Array.from({ length: 31 }, (_, i) => {
+  return { label: (i + 1).toString(), value: i + 1 };
+});
+
+const timezoneOptions = [
+  { label: "GMT", value: "GMT" },
+  { label: "America/New_York", value: "America/New_York" },
+  { label: "America/Chicago", value: "America/Chicago" },
+  { label: "America/Los_Angeles", value: "America/Los_Angeles" },
+  { label: "America/Denver", value: "America/Denver" },
+  { label: "America/Phoenix", value: "America/Phoenix" },
+  { label: "Canada/Atlantic", value: "Canada/Atlantic" },
+  { label: "Canada/Central", value: "Canada/Central" },
+  { label: "Canada/Eastern", value: "Canada/Eastern" },
+  { label: "Canada/Mountain", value: "Canada/Mountain" },
+  { label: "Canada/Pacific", value: "Canada/Pacific" },
+  { label: "Canada/Newfoundland", value: "Canada/Newfoundland" },
+  { label: "Europe/London", value: "Europe/London" },
+  { label: "Europe/Berlin", value: "Europe/Berlin" },
+  { label: "Hongkong", value: "Hongkong" },
+  { label: "Asia/Kuala_Lumpur", value: "Asia/Kuala_Lumpur" },
+];
+
+export {
+  intervalOptions,
+  weekdayOptions,
+  timezoneOptions,
+  hourOptions,
+  dayOptions,
+};

package/src/fpl/AddPanel.vue

@@ -0,0 +1,237 @@
+<template>
+  <Dialog
+    :open="open"
+    :title="`${isEditing ? 'Edit' : 'Add'}ing Widget`"
+    size="xlarge"
+  >
+    <template #content>
+      <div class="flex">
+        <div
+          v-if="local.panelType !== 'text' && local.panelType !== 'image'"
+          class="w-1/3 px-2"
+        >
+          <FormCol fieldName="Panel Name" required>
+            <GreyInput v-model="local.title" :error="errors.title" />
+          </FormCol>
+        </div>
+        <div class="w-1/3 px-2">
+          <FormCol fieldName="Panel Type">
+            <GreySelect
+              v-model="local.panelType"
+              :options="availablePanels"
+              :error="errors.panelType"
+              @update:modelValue="changePanel"
+            />
+          </FormCol>
+        </div>
+        <div v-if="objectType" class="w-1/3 px-2">
+          <FormCol :fieldName="objectType">
+            <GreyInput v-model.trim="selectedObject.name" readonly />
+          </FormCol>
+        </div>
+      </div>
+      <FormSection
+        v-if="local.panelType"
+        sectionName="Widget Configuration"
+        class="pt-5"
+      >
+        <div class="px-10">
+          <component
+            :is="getComponent(local.panelType)"
+            :object="selectedObject"
+            :entry="local"
+            :errors="errors"
+          />
+        </div>
+      </FormSection>
+      <NotifyList ref="notifyList" :is-dialog="open" />
+    </template>
+    <template #footer>
+      <SubmitButtons
+        :saveText="isEditing ? 'Update' : 'Add'"
+        @save="isEditing ? updatePanel() : addPanel()"
+        @close="closeModal"
+      />
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import { ref, computed } from "vue";
+import {
+  Dialog,
+  SubmitButtons,
+  FormCol,
+  FormSection,
+  GreyInput,
+  GreySelect,
+  NotifyList,
+} from "@/components";
+import {
+  AlertConfig,
+  AlertSpriteConfig,
+  ChartConfig,
+  CounterConfig,
+  IPMapConfig,
+  HistogramConfig,
+  ImageConfig,
+  MetricChartConfig,
+  PieChartConfig,
+  SparkChartConfig,
+  StackedBarChartConfig,
+  TableConfig,
+  TextConfig,
+  TopNChartConfig,
+} from "../fpl";
+import {
+  panelComponent,
+  defaultPanel,
+  validatePanelConfig,
+} from "./Configs/Config";
+
+const components = {
+  AlertConfig,
+  AlertSpriteConfig,
+  ChartConfig,
+  CounterConfig,
+  IPMapConfig,
+  HistogramConfig,
+  ImageConfig,
+  MetricChartConfig,
+  PieChartConfig,
+  SparkChartConfig,
+  StackedBarChartConfig,
+  TableConfig,
+  TextConfig,
+  TopNChartConfig,
+};
+
+const props = defineProps({
+  objects: Array,
+});
+const emits = defineEmits(["add", "update", "notify"]);
+
+const open = ref(false);
+const isEditing = ref(false);
+const selectedObject = ref({});
+const local = ref({});
+const errors = ref({});
+const notifyList = ref();
+
+const objectType = computed(() => {
+  if (selectedObject.value.table) {
+    return "Table";
+  } else if (selectedObject.value.alert) {
+    return "Alert";
+  } else if (selectedObject.value.stream) {
+    return "Stream";
+  }
+  return "";
+});
+
+const availablePanels = computed(() => {
+  if (selectedObject.value.table) {
+    return [
+      { label: "Table", value: "table" },
+      { label: "Chart", value: "chart" },
+      { label: "Pie Chart", value: "pie" },
+      { label: "Counter", value: "counter" },
+      { label: "Stacked Bar Chart", value: "stackChart" },
+      { label: "Spark Chart", value: "sparkLine" },
+      { label: "Top N Chart", value: "topn" },
+      { label: "Geo Map", value: "geoMap" },
+      { label: "Histogram", value: "histogram" },
+    ];
+  } else if (selectedObject.value.alert) {
+    return [
+      { label: "Alert", value: "alert" },
+      { label: "Alert Sprite", value: "alertSprite" },
+    ];
+  } else if (selectedObject.value.stream) {
+    return [
+      { label: "Chart", value: "metric" },
+      { label: "Spark Chart", value: "sparkLine" },
+    ];
+  } else if (local.value.panelType === "text") {
+    return [{ label: "Text", value: "text" }];
+  } else if (local.value.panelType === "image") {
+    return [{ label: "Image", value: "image" }];
+  }
+  return [];
+});
+
+function getComponent() {
+  return components[panelComponent[local.value.panelType] + "Config"];
+}
+
+function changePanel(panelType) {
+  // reset the panel to the default values
+  local.value.panelType = panelType;
+  local.value.panelConfig = JSON.parse(JSON.stringify(defaultPanel[panelType]));
+}
+
+function validatePanel() {
+  console.log(local.value);
+  errors.value = {};
+  if (
+    local.value.panelType !== "image" &&
+    local.value.panelType !== "text" &&
+    !local.value.title
+  ) {
+    errors.value.title = "Panel Name is required";
+  }
+  if (!local.value.panelType) {
+    errors.value.panelType = "Panel Type is required";
+  } else {
+    try {
+      validatePanelConfig(
+        errors.value,
+        local.value.panelType,
+        local.value.panelConfig
+      );
+    } catch (e) {
+      console.log(e);
+      emits("notify", "Error", "Panel type is not supported", false);
+      return false;
+    }
+  }
+  if (JSON.stringify(errors.value) !== "{}") {
+    const errorsArr = Object.keys(errors.value).map((key) => errors.value[key]);
+    notifyList.value.openModal("Invalid Configuration", errorsArr, false);
+    return false;
+  }
+  return true;
+}
+
+function addPanel() {
+  if (validatePanel()) {
+    if (selectedObject.value.name)
+      local.value.dataTable = selectedObject.value.name;
+    emits("add", local.value);
+  }
+}
+
+function updatePanel() {
+  if (validatePanel()) {
+    emits("update", local.value);
+  }
+}
+
+function openModal(obj, panelObj = {}, defaultPanel = "") {
+  isEditing.value = false;
+  errors.value = {};
+  open.value = true;
+  selectedObject.value = props.objects.find((o) => o.name === obj) || {};
+  local.value = JSON.parse(JSON.stringify(panelObj));
+  if (panelObj.panelType) isEditing.value = true;
+  if (defaultPanel) changePanel(defaultPanel);
+}
+
+function closeModal() {
+  open.value = false;
+}
+
+defineExpose({
+  openModal,
+  closeModal,
+});
+</script>

package/src/fpl/Configs/Alert.vue

@@ -0,0 +1,16 @@
+<template>
+  <FormRow fieldName="Number of Top Alerts">
+    <GreyInput v-model.number="local.panelConfig.topID" type="number" min="1" />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreyInput } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+</script>

package/src/fpl/Configs/AlertSprite.vue

@@ -0,0 +1,2 @@
+<template>Not implemented</template>
+<script setup></script>

package/src/fpl/Configs/Chart.vue

@@ -0,0 +1,63 @@
+<template>
+  <FormRow fieldName="Value Columns (Y-Axis)">
+    <GreySelectInputMultiple
+      :selected="selected"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :allow-input="false"
+      @update="updateColumns($event)"
+    />
+  </FormRow>
+  <FormRow fieldName="Labels (X-Axis)">
+    <GreySelect
+      v-model="local.panelConfig.value.column.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.value"
+    />
+  </FormRow>
+  <FormRow fieldName="Chart Type">
+    <GreySelect
+      v-model="local.panelConfig.options.type"
+      :options="chartOptions"
+    />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import {
+  FormRow,
+  GreySelectInputMultiple,
+  GreySelect,
+} from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+const selected = ref(
+  props.entry.panelConfig.categories.focus.map((col) => col.name)
+);
+const chartOptions = [
+  { label: "Bar Chart", value: "bar" },
+  { label: "Line Chart", value: "line" },
+];
+
+function updateColumns(arr) {
+  local.value.panelConfig.categories.focus = arr.map((col) => {
+    return {
+      name: col,
+    };
+  });
+}
+</script>

package/src/fpl/Configs/Config.js

@@ -0,0 +1,154 @@
+const panelComponent = {
+  alert: "Alert",
+  alertSprite: "AlertSprite",
+  chart: "Chart",
+  counter: "Counter",
+  geoMap: "IPMap",
+  histogram: "Histogram",
+  image: "Image",
+  metric: "MetricChart",
+  pie: "PieChart",
+  severityChart: "StackedBarChart",
+  sparkLine: "SparkChart",
+  stackChart: "StackedBarChart",
+  table: "Table",
+  text: "Text",
+  topn: "TopNChart",
+};
+
+const defaultPanel = {
+  alert: {
+    topID: 10,
+  },
+  alertSprite: {},
+  chart: {
+    categories: {
+      focus: [],
+    },
+    value: {
+      column: {},
+    },
+    options: {
+      type: "line",
+    },
+  },
+  counter: {
+    field: "",
+    format: "default",
+  },
+  geoMap: {},
+  histogram: {
+    categories: {
+      focus: [],
+    },
+    value: {
+      column: {},
+    },
+    options: {
+      type: "line",
+    },
+    allColumns: true,
+  },
+  image: {
+    backgroundColor: "transparent",
+    positioning: "center-center",
+    size: "100%",
+    pixels: 100,
+  },
+  metric: {
+    chart: "line",
+  },
+  pie: {
+    categories: {
+      focus: {},
+    },
+    value: {
+      column: {},
+    },
+  },
+  sparkLine: {
+    metrics: "simple",
+    showline: false,
+    unit: "count",
+  },
+  stackChart: {
+    categories: {
+      focus: {},
+      type: {},
+    },
+    value: {
+      column: {},
+    },
+  },
+  table: {
+    columns: [],
+  },
+  text: {},
+  topn: {
+    categories: {
+      focus: {},
+    },
+    value: {
+      column: {},
+    },
+  },
+};
+
+const validationSchema = {
+  alert: {},
+  chart: {
+    categories: (val) => val.focus.length > 0,
+    value: (val) => JSON.stringify(val.column) !== "{}",
+  },
+  counter: {
+    field: (val) => val,
+  },
+  geoMap: {
+    ipColumn: (val) => val,
+    valueColumn: (val) => val,
+  },
+  histogram: {
+    value: (val) => JSON.stringify(val.column) !== "{}",
+    // check either use all columns or choose at least one category
+  },
+  image: {
+    image: (val) => val,
+  },
+  metric: {},
+  pie: {
+    categories: (val) => JSON.stringify(val.focus) !== "{}",
+    value: (val) => JSON.stringify(val.column) !== "{}",
+  },
+  sparkLine: {},
+  stackChart: {
+    categories: (val) =>
+      JSON.stringify(val.focus) !== "{}" && JSON.stringify(val.type) !== "{}",
+    value: (val) => JSON.stringify(val.column) !== "{}",
+  },
+  table: {
+    columns: (val) => val.length > 0,
+  },
+  text: {},
+  topn: {
+    categories: (val) => JSON.stringify(val.focus) !== "{}",
+    value: (val) => JSON.stringify(val.column) !== "{}",
+  },
+};
+
+const validationErrors = {
+  columns: "Please select at least a column for the table",
+  categories: "Please select a field for value",
+  value: "Please select a field for label",
+  field: "Please select a field",
+  image: "Please upload an image",
+  ipColumn: "Please select a field for IP",
+  valueColumn: "Please select a field for value",
+};
+
+const validatePanelConfig = (errors, panelType, panelConfig) => {
+  Object.keys(validationSchema[panelType])
+    .filter((key) => !validationSchema[panelType][key](panelConfig[key]))
+    .map((key) => (errors[key] = validationErrors[key]));
+};
+
+export { panelComponent, defaultPanel, validatePanelConfig };

package/src/fpl/Configs/Counter.vue

@@ -0,0 +1,35 @@
+<template>
+  <FormRow fieldName="Counter Column">
+    <GreySelect
+      v-model="local.panelConfig.field"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.field"
+    />
+  </FormRow>
+  <FormRow fieldName="Format">
+    <GreySelect v-model="local.panelConfig.format" :options="formatOptions" />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreySelect } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+const formatOptions = [
+  { label: "Default", value: "default" },
+  { label: "Compact", value: "Readable Numbers" },
+  { label: "Thousands Seperated", value: "comma" },
+  { label: "Thousands Seperated (Data)", value: "comma_data" },
+  { label: "Data", value: "Data" },
+];
+</script>

package/src/fpl/Configs/Histogram.vue

@@ -0,0 +1,70 @@
+<template>
+  <FormRow fieldName="Timestamp (X-Axis)">
+    <GreySelect
+      v-model="local.panelConfig.value.column.name"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.value"
+    />
+  </FormRow>
+  <FormRow fieldName="Use All Columns (except timestamp column)">
+    <CheckBox v-model="local.panelConfig.allColumns" />
+  </FormRow>
+  <FormRow
+    v-if="!local.panelConfig.allColumns"
+    fieldName="Value Columns (Y-Axis)"
+  >
+    <GreySelectInputMultiple
+      :selected="selected"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :allow-input="false"
+      @update="updateColumns($event)"
+    />
+  </FormRow>
+  <FormRow fieldName="Chart Type">
+    <GreySelect
+      v-model="local.panelConfig.options.type"
+      :options="chartOptions"
+    />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import {
+  FormRow,
+  GreySelect,
+  CheckBox,
+  GreySelectInputMultiple,
+} from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+const selected = ref(
+  props.entry.panelConfig.categories.focus.map((col) => col.name)
+);
+const chartOptions = [
+  { label: "Bar Chart", value: "bar" },
+  { label: "Line Chart", value: "line" },
+];
+
+function updateColumns(arr) {
+  local.value.panelConfig.categories.focus = arr.map((col) => {
+    return {
+      name: col,
+    };
+  });
+}
+</script>

package/src/fpl/Configs/IPMap.vue

@@ -0,0 +1,37 @@
+<template>
+  <FormRow fieldName="IP Column">
+    <GreySelect
+      v-model="local.panelConfig.ipColumn"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.ipColumn"
+    />
+  </FormRow>
+  <FormRow fieldName="Value Column">
+    <GreySelect
+      v-model="local.panelConfig.valueColumn"
+      :options="
+        object.table.columns.map((col) => ({
+          label: col.name,
+          value: col.name,
+        }))
+      "
+      :error="errors.valueColumn"
+    />
+  </FormRow>
+</template>
+<script setup>
+import { ref } from "vue";
+import { FormRow, GreySelect } from "@/components";
+
+const props = defineProps({
+  object: Object,
+  entry: Object,
+  errors: Object,
+});
+const local = ref(props.entry);
+</script>