fluency-v8-components 1.3.5 → 1.3.7

package/src/components/status/TicketStatus.vue

@@ -0,0 +1,201 @@
+<template>
+  <Menu as="div" class="inline-block text-left">
+    <div>
+      <MenuButton
+        class="inline-flex w-full justify-center rounded-md bg-white dark:bg-transparent px-3 py-1 text-sm font-semibold text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:hoverdark-bg-hover"
+        :disabled="disabled"
+        @click="($event) => closeMenu($event)"
+      >
+        <div class="flex">
+          <ExclamationCircleIcon
+            v-if="selectedItem === 'new'"
+            class="icon mt-0.5 icon-yellow"
+          />
+          <ClockIcon
+            v-if="
+              selectedItem === 'acknowledged' || selectedItem === 'Acknowledged'
+            "
+            class="icon mt-0.5 icon-blue"
+          />
+          <CheckCircleIcon
+            v-if="selectedItem === 'resolved' || selectedItem === 'Resolved'"
+            class="icon mt-0.5 icon-green"
+          />
+          <XCircleIcon
+            v-if="selectedItem === 'closed' || selectedItem === 'Closed'"
+            class="icon mt-0.5 icon-gray"
+          />
+          <div class="ml-1">
+            {{ selectedItem || "N/A" }}
+          </div>
+        </div>
+        <ChevronDownIcon
+          v-if="!disabled"
+          class="-mr-1 icon-md text-gray-400"
+          aria-hidden="true"
+        />
+      </MenuButton>
+    </div>
+
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <MenuItems
+        class="absolute z-10 w-30 origin-top-right rounded-xs bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-black dark:ring-gray-300/5 focus:outline-hidden"
+        style="transform: translateX(-60px)"
+      >
+        <div class="py-0.5" v-for="(item, index) in data" :key="index">
+          <MenuItem
+            v-if="(item !== 'closed' && item !== 'Closed') || hideSubItems"
+            v-slot="{ active }"
+            @click.stop="selectItem(item)"
+            @mouseover="openClassification = false"
+          >
+            <a
+              :class="[
+                active
+                  ? 'bg-gray-100 text-gray-900 dark:text-black'
+                  : 'text-gray-700',
+                'block px-4 py-1 text-sm dark:text-white dark:std-dark',
+              ]"
+            >
+              <div class="flex">
+                <ExclamationCircleIcon
+                  v-if="item === 'new' || item === 'New'"
+                  class="icon mt-0.5 icon-yellow"
+                />
+                <ClockIcon
+                  v-if="item === 'acknowledged' || item === 'Acknowledged'"
+                  class="icon mt-0.5 icon-blue"
+                />
+                <XCircleIcon
+                  v-if="item === 'closed' || item === 'Closed'"
+                  class="icon mt-0.5 icon-gray"
+                />
+                <div class="ml-1">{{ item }}</div>
+              </div>
+            </a>
+          </MenuItem>
+          <div
+            v-else
+            class="relative"
+            @click.stop="() => {}"
+            @mouseover="openClassification = true"
+          >
+            <MenuItem v-slot="{ active }">
+              <div
+                :class="[
+                  active
+                    ? 'bg-gray-100 text-gray-900 dark:text-black'
+                    : 'text-gray-700',
+                  'block px-4 py-1 text-sm dark:text-white dark:std-dark',
+                ]"
+              >
+                <div class="flex">
+                  <XCircleIcon class="icon mt-0.5 icon-gray" />
+                  <div class="ml-1">Closed</div>
+                </div>
+              </div>
+            </MenuItem>
+            <div
+              v-if="openClassification"
+              :class="[
+                'absolute top-0 w-80 rounded-xs bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-black dark:ring-gray-300/5',
+                { 'left-full': subItemDirection === 'right' },
+                { 'right-full': subItemDirection === 'left' },
+              ]"
+            >
+              <a
+                v-for="classification in classifications"
+                class="block px-4 py-1 text-sm text-gray-700 dark:text-white dark:std-dark hover:bg-gray-100 hover:text-gray-900"
+                @click.stop="selectSubItem(item, classification)"
+              >
+                <div class="flex">
+                  <div class="ml-1">{{ classification }}</div>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+
+<script setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import {
+  CheckCircleIcon,
+  ClockIcon,
+  ChevronDownIcon,
+  ExclamationCircleIcon,
+  XCircleIcon,
+} from "@heroicons/vue/24/outline";
+import { ref, watch } from "vue";
+// constants
+const data = ["new", "acknowledged", "closed"];
+const classifications = [
+  "True Positive - suspicious activity",
+  "Benign Positive - suspicious but expected",
+  "False Positive - incorrect alert logic",
+  "False Positive - incorrect data",
+  "Undetermined",
+];
+// props and emits
+const props = defineProps({
+  current: String,
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  hideSubItems: {
+    type: Boolean,
+    default: false,
+  },
+  subItemDirection: {
+    type: String,
+    default: "right",
+  },
+});
+const emits = defineEmits(["select", "selectSubItem"]);
+// states
+const selectedItem = ref(props.current);
+const openClassification = ref(false);
+// watch for changes in current prop
+watch(
+  () => props.current,
+  () => {
+    selectedItem.value = props.current || "N/A";
+  },
+  { immediate: true }
+);
+// function defs
+function selectItem(item) {
+  selectedItem.value = item;
+  emits("select", item);
+}
+
+function selectSubItem(item, classification) {
+  selectedItem.value = item;
+  openClassification.value = false;
+  emits("selectSubItem", item, classification);
+}
+
+function closeMenu(event) {
+  event.stopPropagation();
+  openClassification.value = false;
+}
+
+function reset(item) {
+  selectedItem.value = item;
+}
+
+defineExpose({
+  reset,
+});
+</script>

package/src/components/status/Trend.vue

@@ -0,0 +1,20 @@
+<template>
+  <div
+    :class="[
+      'status-dot text-2xl',
+      trend === 'positive'
+        ? 'status-positive'
+        : trend === 'negative'
+        ? 'status-negative'
+        : 'status-neutral',
+    ]"
+  >
+    {{ (trend === "positive" ? "+ " : "- ") + value }}
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  trend: String,
+  value: String,
+});
+</script>

package/src/components/tables/ArgumentRunTable.vue

@@ -0,0 +1,96 @@
+<template>
+  <Table :data="['padding']">
+    <template #header>
+      <tr>
+        <TableHeader title="Name" />
+        <TableHeader title="Description" />
+        <TableHeader title="Type" />
+        <TableHeader title="Value" />
+      </tr>
+    </template>
+    <template #rows>
+      <tr v-for="(param, i) in local" :key="param.name">
+        <TableData :title="param.name" />
+        <TableData :title="param.description" />
+        <TableData :title="typeMap[param.type]" />
+        <TableData>
+          <div class="row relative">
+            <GreyInput v-model="param.value" :error="errors[param.name]" />
+            <IconButton
+              v-if="attributes.length > 0"
+              tooltip="Use Attribute"
+              tooltip-direction="left"
+              @click="selecting(i)"
+            >
+              <PencilIcon class="icon-md" />
+            </IconButton>
+          </div>
+        </TableData>
+      </tr>
+    </template>
+  </Table>
+  <ChooseValueDialog
+    ref="chooseValue"
+    :values="attributes"
+    title="Choose Attribute"
+    nameField="Attribute"
+    saveButtonText="Set Attribute"
+    @save="setValue"
+  />
+</template>
+<script setup>
+import { ref, watch } from "vue";
+import {
+  Table,
+  TableHeader,
+  GreyInput,
+  TableData,
+  IconButton,
+  ChooseValueDialog,
+} from "@/components";
+import { PencilIcon } from "@heroicons/vue/20/solid";
+
+// constants
+const typeMap = {
+  string: "String",
+  integer: "Integer",
+  float: "Float",
+  boolean: "Boolean",
+};
+// props and emits
+const props = defineProps({
+  data: Object,
+  attributes: {
+    type: Array,
+    default: () => [],
+  },
+  errors: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+// states
+const local = ref(props.data);
+const selected = ref(-1);
+// dialogs
+const chooseValue = ref();
+// watcher
+watch(
+  () => props.data,
+  (val) => {
+    local.value = val;
+  }
+);
+
+// function defs
+function selecting(i) {
+  selected.value = i;
+  chooseValue.value.openModal();
+}
+
+function setValue(val) {
+  local.value[selected.value].value = val.val;
+  selected.value = -1;
+  chooseValue.value.close();
+}
+</script>

package/src/components/tables/ArgumentTable.vue

@@ -0,0 +1,67 @@
+<template>
+  <table class="w-full select-none std-table">
+    <thead class="text-left bg-neutral-200 dark:dark-bg">
+      <tr>
+        <TableHeader title="Name" />
+        <TableHeader title="Description" />
+        <TableHeader title="Type" />
+        <TableHeader title="Default Value" />
+        <!--TableHeader title="Actions" /-->
+      </tr>
+    </thead>
+    <tbody class="std-table-body">
+      <tr v-for="(param, idx) in local" :key="param.name">
+        <TableData :title="param.name" />
+        <TableData>
+          <GreyInput v-model="param.description" :readonly="readonly" />
+        </TableData>
+        <TableData>
+          <GreySelect
+            v-model="param.type"
+            :options="typeOptions"
+            :readonly="readonly"
+          />
+        </TableData>
+        <TableData>
+          <GreyInput v-model.trim="param.defaultValue" :readonly="readonly" />
+        </TableData>
+        <!--TableData>
+          <ActionButtons delete @delete="local.splice(idx, 1)" />
+        </TableData-->
+      </tr>
+      <!--tr>
+        <TableData
+          colspan="5"
+          class="dark:hover:dark-bg-hover hover:white-bg-hover"
+          title="+ Add Argument"
+          :center="true"
+          @click="
+            local.push({
+              name: '',
+              description: '',
+              type: 'string',
+              defaultValue: '',
+            })
+          "
+        />
+      </tr-->
+    </tbody>
+  </table>
+</template>
+<script setup>
+import { ref } from "vue";
+import { TableHeader, GreyInput, GreySelect, TableData } from "@/components";
+
+const props = defineProps({
+  data: Object,
+  readonly: [Boolean, Number],
+});
+const local = ref(props.data);
+
+const typeOptions = [
+  { label: "String", value: "string" },
+  { label: "Integer", value: "integer" },
+  { label: "Float", value: "float" },
+  { label: "Boolean", value: "boolean" },
+];
+</script>

package/src/components/tables/CloudFormationParameters.vue

@@ -0,0 +1,25 @@
+<template>
+  <Table :data="data">
+    <template #header>
+      <tr>
+        <TableHeader title="Name" class="px-4 py-2" />
+        <TableHeader title="Description" class="px-4 py-2" />
+        <TableHeader title="Value" class="px-4 py-2" />
+      </tr>
+    </template>
+    <template #rows>
+      <tr v-for="param in data" :key="param.name">
+        <td class="px-4 py-2">{{ param.name }}</td>
+        <td class="px-4 py-2">{{ param.description }}</td>
+        <td class="px-4 py-2">{{ param.value }}</td>
+      </tr>
+    </template>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHeader } from "@/components";
+
+const props = defineProps({
+  data: Object,
+});
+</script>

package/src/constants/colors.js

@@ -0,0 +1,248 @@
+import * as d3 from "d3";
+
+const colors = {
+  light: {
+    canvas: "#f3f4f6",
+    primary: "#003153",
+    secondary: "#2d6f9d",
+    accent: "#9C27B0",
+    positive: "#259940",
+    neutral: "#777777",
+    negative: "#C10015",
+    info: "#007bf5",
+    warning: "#C71E23",
+    active: "#007D11",
+    active2: "#BE8700",
+    inactive: "#5C5C5C",
+    error: "#B44936",
+    text: "#000000",
+    main: "#FFFFFF",
+  },
+  dark: {
+    canvas: "#121212",
+    primary: "#003153",
+    secondary: "#2d6f9d",
+    accent: "#9C27B0",
+    positive: "#259940",
+    neutral: "#777777",
+    negative: "#C10015",
+    info: "#007bf5",
+    warning: "#C71E23",
+    active: "#03FC1C",
+    active2: "goldenrod",
+    inactive: "#BDBDBD",
+    error: "#FD1C03",
+    text: "#cbd5e1", // text-slate-300
+    main: "#1f2937", // bg-gray-800
+  },
+};
+
+const badge = {
+  light: {
+    green: {
+      background: "#BDE3C6",
+      border: "#259940",
+      weight: 300,
+    },
+    red: {
+      background: "#F4C7C3",
+      border: "#C10015",
+      weight: 300,
+    },
+  },
+  dark: {
+    green: {
+      background: "#259940",
+      border: "#BDE3C6",
+      weight: 400,
+    },
+    red: {
+      background: "#C10015",
+      border: "#F4C7C3",
+      weight: 400,
+    },
+  },
+};
+
+const platformMetricsLabels = {
+  light: {
+    pass: "#27aeef",
+    input: "#007D11",
+    output: "#007D11",
+    drop: "#ef9b20",
+    abort: "#7f7f7f",
+    compressed: "#5C5C5C",
+    error: "#ea5545",
+    ignored: "#7f7f7f",
+    buffer: "#27aeef",
+  },
+  dark: {
+    pass: "#27aeef",
+    input: "#03FC1C",
+    output: "#03FC1C",
+    drop: "#ef9b20",
+    abort: "#7f7f7f",
+    compressed: "#BDBDBD",
+    error: "#ea5545",
+    ignored: "#7f7f7f",
+    buffer: "#27aeef",
+  },
+  scale: {
+    pass: d3.scaleSequential(d3.interpolateBlues),
+    input: d3.scaleSequential(d3.interpolateGreens),
+    output: d3.scaleSequential(d3.interpolateGreens),
+    drop: d3.scaleSequential(d3.interpolateOranges),
+    abort: d3.scaleSequential(d3.interpolateGreys),
+    compressed: d3.scaleSequential(d3.interpolateGreys),
+    error: d3.scaleSequential(d3.interpolateReds),
+    ignored: d3.scaleSequential(d3.interpolateGreys),
+    buffer: d3.scaleSequential(d3.interpolateBlues),
+  },
+};
+
+const costLabels = {
+  light: {
+    ingressdata: "#007D11",
+    egresstootherregion: "#ef9b20",
+    egresstointernet: "#27aeef",
+  },
+  dark: {
+    ingressdata: "#03FC1C",
+    egresstootherregion: "#ef9b20",
+    egresstointernet: "#27aeef",
+  },
+};
+
+const chartColors = [
+  "#1f77b4",
+  "#ff7f0e",
+  "#2ca02c",
+  "#d62728",
+  "#9467bd",
+  "#8c564b",
+  "#e377c2",
+  "#7f7f7f",
+  "#bcbd22",
+  "#17becf",
+  "#1c9099",
+  "#d95f02",
+  "#7570b3",
+  "#e7298a",
+  "#66a61e",
+  "#e6ab02",
+  "#a6761d",
+  "#666666",
+];
+
+const alertChartColors = {
+  light: {
+    Average: "#ff7f0e",
+    Upper_Bound: "#2ca02c",
+    Lower_Bound: "#e377c2",
+    Alert: "#27aeef",
+  },
+  dark: {
+    Average: "#ff7f0e",
+    Upper_Bound: "#2ca02c",
+    Lower_Bound: "#e377c2",
+    Alert: "#27aeef",
+  },
+};
+
+const colorListGreen = [
+  "#3FA83F",
+  "#93CE07",
+  "#43B446",
+  "#73B142",
+  "#259940",
+  "#00695C",
+  "#3ec995",
+];
+
+const colorListMap = {
+  green: colorListGreen,
+  compute15: generateGradients("#b50101", "#7f7f7f", 15),
+};
+
+function numToHexStr(n) {
+  if (n < 0) {
+    return "00";
+  }
+  if (n < 16) {
+    return "0" + n.toString(16);
+  } else {
+    return n.toString(16);
+  }
+}
+
+function generateGradientsInterpolate(b, e, st, max) {
+  if (b > e) {
+    return numToHexStr(Math.floor((e - b) * (st / max)) + b);
+  } else {
+    return numToHexStr(Math.floor((b - e) * (1 - st / max)) + e);
+  }
+}
+
+function generateGradients(color1, color2, steps) {
+  if (steps <= 1) {
+    steps = 1;
+  }
+  if (steps > 256) {
+    steps = 16;
+  }
+  color1 = color1.replace("#", ""); // #7f7f7f
+  color2 = color2.replace("#", ""); // #b50101
+
+  const color1R = parseInt(color1.substring(0, 2), 16);
+  const color1G = parseInt(color1.substring(2, 4), 16);
+  const color1B = parseInt(color1.substring(4, 6), 16);
+
+  const color2R = parseInt(color2.substring(0, 2), 16);
+  const color2G = parseInt(color2.substring(2, 4), 16);
+  const color2B = parseInt(color2.substring(4, 6), 16);
+  // console.log(color1R, color1G, color1B)
+  // console.log(color2R, color2G, color2B)
+
+  const colors = [];
+  for (let i = 0; i <= steps; i++) {
+    let temp = "#";
+    const tempR = generateGradientsInterpolate(color1R, color2R, i, steps);
+    const tempG = generateGradientsInterpolate(color1G, color2G, i, steps);
+    const tempB = generateGradientsInterpolate(color1B, color2B, i, steps);
+    temp = temp + tempR + tempG + tempB;
+    colors.push(temp);
+    // console.log(temp)
+  }
+  return colors;
+}
+
+function getAColorByIndex(name, index) {
+  const cl = colorListMap[name];
+  return cl[index % cl.length];
+}
+
+function getAColorByHash(name, str) {
+  let sum = 0;
+  for (let i = 0; i < str.length; i++) {
+    sum += str.charCodeAt(i);
+  }
+  return getAColorByIndex(name, sum);
+}
+
+function getColorScheme(dark) {
+  return dark ? colors.dark : colors.light;
+}
+
+export {
+  colors,
+  badge,
+  chartColors,
+  alertChartColors,
+  platformMetricsLabels,
+  costLabels,
+  colorListMap,
+  getAColorByHash,
+  getAColorByIndex,
+  getColorScheme,
+  colorListGreen,
+};