fluency-v8-components 1.5.9 → 1.6.1

package/src/components/charts/TimelinePlot.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="col items-center">
+    <div class="text-center">
+      <span>{{ title }} Timeline ({{ total }} Events)</span>
+    </div>
+    <div ref="myplot" :class="['px-4', { 'pb-4': !props.flow }]"></div>
+    <div class="flex justify-end w-full mr-2">
+      <div ref="myplotLegend"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import * as d3 from "d3";
+import * as Plot from "@observablehq/plot";
+import { dateLocalTime } from "@/utils/timeUtils";
+
+// props
+const props = defineProps({
+  title: String,
+  buckets: Array,
+  total: Number,
+  from: Number,
+  to: Number,
+  flow: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: Number,
+    default: 1200,
+  },
+  height: {
+    type: Number,
+    default: 300,
+  },
+  theme: {
+    type: String,
+    default: "light",
+  },
+  /** Key on each bucket for the risk score value (y-axis). Default "risk_score". */
+  valueKey: {
+    type: String,
+    default: "risk_score",
+  },
+});
+// states
+const myplot = ref(null);
+const myplotLegend = ref(null);
+// watch for changes in data
+watch([() => props.buckets], () => {
+  plotGraph();
+});
+watch([() => props.theme], () => {
+  plotGraph();
+});
+
+// function defs
+function plotGraph() {
+  if (!props.buckets) return;
+  const valueKey = props.valueKey;
+  let options = {
+    marginTop: 30,
+    marks: [
+      Plot.frame(),
+      Plot.text(["No data available!"], { frameAnchor: "middle" }),
+    ],
+  };
+  let marginLeft = 80;
+  let marginRight = 80;
+
+  if (props.buckets.length > 0) {
+    if (props.flow) {
+      const b = props.buckets;
+
+      // Left axis (flow) domain = max of rx/tx
+      const leftMax = Math.max(
+        1,
+        d3.max(b, (d) => Math.max(d?.rxHistogram?.value ?? 0, d?.txHistogram?.value ?? 0)) ?? 0
+      );
+
+      // Right axis (risk score) domain
+      const rightMax = Math.max(
+        1,
+        d3.max(b, (d) => d?.[valueKey] ?? 0) ?? 0
+      );
+
+      const k = leftMax / rightMax;
+      const rightTicks = d3.ticks(0, rightMax, 5);
+      const leftTicks = d3.ticks(0, leftMax, 5);
+
+      options = {
+        x: { type: "time", label: "Time", tickSpacing: 100 },
+        y: {
+          label: "Flow",
+          domain: [0, leftMax],
+        },
+        grid: true,
+        marks: [
+          Plot.lineY(b, {
+            x: "key",
+            y: (d) => d?.rxHistogram?.value ?? 0,
+            strokeWidth: 2.5,
+            curve: "catmull-rom",
+            stroke: "#22c55e",
+          }),
+          Plot.lineY(b, {
+            x: "key",
+            y: (d) => d?.txHistogram?.value ?? 0,
+            strokeWidth: 2.5,
+            curve: "catmull-rom",
+            stroke: "#eab308",
+          }),
+          Plot.dotY(b, {
+            x: "key",
+            y: (d) => (d?.[valueKey] ?? 0) * k,
+            stroke: "#71b6e0",
+            strokeWidth: 3,
+          }),
+          Plot.axisY({
+            anchor: "left",
+            ticks: leftTicks.map((t) => t),
+            tickFormat: (_, i) => d3.format("~s")(leftTicks[i]) + "B",
+            label: "Bytes",
+          }),
+          Plot.axisY({
+            anchor: "right",
+            ticks: rightTicks.map((t) => t * k),
+            tickFormat: (_, i) => d3.format("~s")(rightTicks[i]),
+            label: "Risk Score",
+          }),
+          Plot.tip(
+            b,
+            Plot.pointerX({
+              x: "key",
+              y: (d) => (d?.[valueKey] ?? 0) * k,
+              fill: props.theme === "light" ? "white" : "black",
+              title: (d) =>
+                `Time: ${dateLocalTime(d.key)}\n` +
+                `rx: ${d?.rxHistogram?.value ?? 0}B (~${d3.format(".0s")(d?.rxHistogram?.value)}B)\n` +
+                `tx: ${d?.txHistogram?.value ?? 0}B (~${d3.format(".0s")(d?.txHistogram?.value)}B)\n` +
+                `Risk Score: ${Math.round(d?.[valueKey] ?? 0)}`,
+            })
+          ),
+        ],
+      };
+    } else {
+      const dataMax = d3.max(props.buckets, (d) => d?.[valueKey] ?? 0) ?? 0;
+      const maxRisk = dataMax > 0 ? Math.max(1, dataMax) : 500;
+      const allZeros = dataMax === 0;
+      const tickFormat = d3.format("d");
+      const widestTickLabel = tickFormat(maxRisk).toString();
+      marginLeft = Math.max(marginLeft, 24 + widestTickLabel.length * 8);
+
+      options = {
+        x: {
+          type: "time",
+          label: "Time",
+          tickSpacing: 100,
+        },
+        y: {
+          label: "Risk Score",
+          domain: [0, maxRisk],
+          tickFormat,
+          ...(allZeros && { ticks: [0, 100, 200, 300, 400, 500] }),
+        },
+        grid: true,
+        marks: [
+          Plot.dotY(props.buckets, {
+            x: "key",
+            y: (d) => d?.[valueKey] ?? 0,
+            stroke: "#71b6e0",
+            strokeWidth: 3,
+          }),
+          Plot.tip(
+            props.buckets,
+            Plot.pointerX({
+              x: "key",
+              y: (d) => d?.[valueKey] ?? 0,
+              fill: props.theme === "light" ? "white" : "black",
+              title: (d) =>
+                `Time: ${dateLocalTime(d.key)}\nRisk Score: ${Math.round(d?.[valueKey] ?? 0)}`,
+            })
+          ),
+        ],
+      };
+    }
+  }
+
+  const plot = Plot.plot({
+    marginLeft,
+    marginRight,
+    width: props.width,
+    height: props.height,
+    marginBottom: 50,
+    inset: 20,
+    style: {
+      fontSize: "16px",
+      backgroundColor: props.theme === "light" ? "white" : "#1a202c",
+    },
+    ...options,
+  });
+  myplot.value.innerHTML = "";
+  myplot.value.appendChild(plot);
+  if (props.flow) {
+    const legend = Plot.legend({
+      color: {
+        type: "categorical",
+        domain: ["Received", "Sent", "Risk Score"],
+        range: ["#22c55e", "#eab308", "#71b6e0"],
+      },
+      swatchSize: 8,
+    });
+    myplotLegend.value.innerHTML = "";
+    myplotLegend.value.appendChild(legend);
+  }
+}
+</script>

package/src/components/common/facet/Leaf.vue

@@ -9,9 +9,11 @@
         {{ parent.title }}
         <span class="font-light">({{ children.length }})</span>
       </div>
-      <div class="flex">
+      <div class="flex pr-1">
         <PlusCircleIcon class="icon-lg" :class="noMore()" @click="topUp()" />
         <MinusCircleIcon class="icon-lg" :class="noLess()" @click="topDown()" />
+        <ArrowDownCircleIcon v-if="descending" class="icon-lg std-blue-text cursor-pointer" @click="sortData" />
+        <ArrowUpCircleIcon v-else class="icon-lg std-blue-text cursor-pointer" @click="sortData" />
       </div>
       <Tooltip
         v-if="props.tooltip"
@@ -22,7 +24,7 @@
       />
     </div>
     <div
-      v-for="child in children.slice(0, topLevel)"
+      v-for="child in filtered"
       class="flex justify-between py-1"
     >
       <div class="flex items-center min-w-0">
@@ -40,11 +42,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import { PlusCircleIcon, MinusCircleIcon } from "@heroicons/vue/20/solid";
+import { ref, computed } from "vue";
+import { PlusCircleIcon, MinusCircleIcon, ArrowUpCircleIcon, ArrowDownCircleIcon } from "@heroicons/vue/20/solid";
 import Tooltip from "../Tooltip.vue";
 import TriState from "./TriState.vue";
 
+// props and emits
 const props = defineProps({
   parent: {
     type: Object,
@@ -62,9 +65,21 @@ const props = defineProps({
   },
 });
 const emits = defineEmits(["newState"]);
+// states
 const topLevel = ref(props.parent.show);
 const tooltip = ref(false);
+const descending = ref(true);
+// computed
+const filtered = computed(() => {
+  const copy = JSON.parse(JSON.stringify(props.children))
+  if (!descending.value) {
+    copy.reverse();
+  }
+  return copy.slice(0, topLevel.value);
+});
+
 
+// function defs
 function noMore() {
   if (topLevel.value < props.children.length) {
     return "std-blue-text cursor-pointer";
@@ -91,6 +106,10 @@ function topDown() {
   }
 }
 
+function sortData() {
+  descending.value = !descending.value
+}
+
 function updateParent(parent: string, child: string, newState: string) {
   emits("newState", parent, child, newState);
 }

package/src/components/index.js

@@ -119,6 +119,8 @@ export { default as StackedChartClustered } from "./charts/StackedChartClustered
 export { default as PieChart } from "./charts/PieChart.vue";
 export { default as ProgressChart } from "./charts/ProgressChart.vue";
 export { default as TimelineChart } from "./charts/TimelineChart.vue";
+export { default as TimelinePlot } from "./charts/TimelinePlot.vue";
+export { default as RangeSlider } from "./charts/RangeSlider.vue"
 export { default as EmptyChart } from "./charts/EmptyChart.vue";
 export { default as WorkflowChart } from "./charts/WorkflowChart.vue";
 

package/src/components/page-structure/FacetPage.vue

@@ -20,7 +20,7 @@
     <div class="grid grid-cols-3 md:grid-cols-4">
       <div
         :class="[
-          'w-full col-span-3 md:col md:col-span-1 md:overflow-auto',
+          'w-full col-span-3 md:col md:col-span-1 md:overflow-auto custom-scrollbar',
           { 'md:max-h-[calc(100vh-255px)]': searchBar },
           { 'md:max-h-[calc(100vh-200px)]': !searchBar },
         ]"
@@ -29,7 +29,7 @@
       </div>
       <div
         :class="[
-          'col-span-3 md:ml-5 md:overflow-auto',
+          'col-span-3 md:ml-5 md:overflow-auto custom-scrollbar',
           { 'md:max-h-[calc(100vh-255px)]': searchBar },
           { 'md:max-h-[calc(100vh-200px)]': !searchBar },
         ]"

package/src/constants/fpl2.js

@@ -1,7 +1,7 @@
 import Prism from "prismjs";
 
 const builtinfunction =
-  /#?(?!\s)\b(?:Add|After|Aggregate|alert|anomaly|append|Append|AWS_AccountRegionLambda|AWS_AccountLambda|AWS_GetCostUsage|AWS_GetMetric|AWS_GetPrice|AWS_LoadAsset|base64Encode|base64Decode|Before|Clone|coalesce|ColumnAggregate|concat|contains|content|Cylance_AddGlobalList|Cylance_GetDevice|Cylance_GetThreatDevices|Cylance_GetThreatDownload|Cylance_GetThreatInfo|Cylance_LoadDevice|Cylance_LoadThreat|decoder_CEF|decoder_CSV|decoder_MixedKeyValue|decoder_QuotedKeyValue|DimensionTable|Each|Emit|endsWith|Error|Find|Filter|Fluency_BehaviorSearch|Fluency_Device_Add|Fluency_Device_Delete|Fluency_DeviceSearch|Fluency_Device_Lookup|Fluency_Device_LookupName|Fluency_Device_Update|Fluency_EntityinfoLookup|Fluency_FusionEvent|fluencyLavadbFpl|Fluency_LavadbQuery|Fluency_LavaLakeFpl|Fluency_ResourceLoad|Fluency_SummarySearch|Fluency_Tenant_Device_Add|Fluency_Tenant_Device_Delete|Fluency_Tenant_Device_Lookup|Fluency_Tenant_Device_LookupName|Fluency_Tenant_Device_Update|Format|geoip|GetColumnValues|GetEnv|GetKeys|GetRow|gzipCompress|gzipDecompress|htmlTemplate|indexOf|isEmpty|IsEmpty|isIPv4|isIPv6|ipNormalize|isNull|isNumber|isString|isUndef|isValidIP|Join|JoinStream|jsonClone|jsonTable|len|Limit|main|Map|match|mergeTable|NewColumns|NewColumnLambda|parseBool|parseFloat|parseInt|parseJson|Platform_Action|Platform_Action_Endpoint|Platform_Asset_Lookup|Platform_Asset_Refresh|Platform_Asset_Register|Platform_Cache_Check|Platform_Cache_Delete|Platform_Cache_DeRegister|Platform_Cache_Get|Platform_Cache_Register|Platform_Cache_Replace|Platform_Cache_Set|Platform_Cache_SetMultiple|Platform_Channel|Platform_DataObject_Delete|Platform_DataObject_Get|Platform_DataObject_Save|Platform_DataObject_Search|Platform_EntityinfoCheck|Platform_EntityinfoLookup|Platform_EntityProvider_Lookup|Platform_EntityProvider_Refresh|Platform_Grok_Add_Pattern|Platform_Grok_Check|Platform_Grok_Parse|Platform_Grok_Register|Platform_LoadComponent|Platform_Metric_Alert_Counter_Stop|Platform_Metric_Counter|Platform_Metric_Query|Platform_Metric_QueryBuild|Platform_Metric_QueryRange|Platform_Metric_Sort|Platform_Metric_Sort_Histogram|Platform_Notification_Email|Platform_Notification_PagerDuty|Platform_Notification_Slack|Platform_Notification_ServiceNow|Platform_PluginLambda|Platform_REST_Call|Platform_Sink|Platform_Site_GetInfo|Platform_Site_GetTenants|Platform_Site_LoadTenantComponent|pluginLambda|Plugin_Bitdefender_LoadEndpoint|Plugin_Falcon_GetHost|Plugin_Falcon_GetIncident|Plugin_Falcon_LoadHost|Plugin_Falcon_LoadIncident|Plugin_InControl_LoadClient|Plugin_InControl_LoadDevice|printf|Prom_Push_Counter|Prom_Push_Gauge|regexp|replace|replaceAll|ReplaceKey|RenameColumn|RemoveColumn|Round|run|RxFPL_GetMetric|setEnv|split|Some|Sort|sprintf|startsWith|SetColumnUnit|SetDimensions|SetTags|SetUnit|sleep|SummaryTable|subString|template|TimeTable|toLower|timezoneOffset|toUpper|transform|trim|trimPrefix|trimSuffix|typeof|Unix|UnixMilli|window)\b(?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/g;
+  /#?(?!\s)\b(?:Add|After|Aggregate|alert|anomaly|append|Append|AWS_AccountRegionLambda|AWS_AccountLambda|AWS_GetCostUsage|AWS_GetMetric|AWS_GetPrice|AWS_LoadAsset|base64Encode|base64Decode|Before|Clone|coalesce|ColumnAggregate|concat|contains|content|Cylance_AddGlobalList|Cylance_GetDevice|Cylance_GetThreatDevices|Cylance_GetThreatDownload|Cylance_GetThreatInfo|Cylance_LoadDevice|Cylance_LoadThreat|decoder_CEF|decoder_CSV|decoder_MixedKeyValue|decoder_QuotedKeyValue|DimensionTable|Each|Emit|endsWith|Error|Find|Filter|Fluency_BehaviorSearch|Fluency_Device_Add|Fluency_Device_Delete|Fluency_DeviceSearch|Fluency_Device_Lookup|Fluency_Device_LookupName|Fluency_Device_Update|Fluency_EntityinfoLookup|Fluency_FusionEvent|fluencyLavadbFpl|Fluency_LavadbQuery|fluencyLavaLakeFpl|Fluency_LavaLakeFpl|Fluency_ResourceLoad|Fluency_SummarySearch|Fluency_Tenant_Device_Add|Fluency_Tenant_Device_Delete|Fluency_Tenant_Device_Lookup|Fluency_Tenant_Device_LookupName|Fluency_Tenant_Device_Update|Format|geoip|GetColumnValues|GetEnv|GetKeys|GetRow|gzipCompress|gzipDecompress|htmlTemplate|indexOf|isEmpty|IsEmpty|isIPv4|isIPv6|ipNormalize|isNull|isNumber|isString|isUndef|isValidIP|Join|JoinStream|jsonClone|jsonTable|len|Limit|main|Map|match|mergeTable|NewColumns|NewColumnLambda|parseBool|parseFloat|parseInt|parseJson|Platform_Action|Platform_Action_Endpoint|Platform_Asset_Lookup|Platform_Asset_Refresh|Platform_Asset_Register|Platform_Cache_Check|Platform_Cache_Delete|Platform_Cache_DeRegister|Platform_Cache_Get|Platform_Cache_Register|Platform_Cache_Replace|Platform_Cache_Set|Platform_Cache_SetMultiple|Platform_Channel|Platform_DataObject_Delete|Platform_DataObject_Get|Platform_DataObject_Save|Platform_DataObject_Search|Platform_EntityinfoCheck|Platform_EntityinfoLookup|Platform_EntityProvider_Lookup|Platform_EntityProvider_Refresh|Platform_Grok_Add_Pattern|Platform_Grok_Check|Platform_Grok_Parse|Platform_Grok_Register|Platform_LoadComponent|Platform_Metric_Alert_Counter_Stop|Platform_Metric_Counter|Platform_Metric_Query|Platform_Metric_QueryBuild|Platform_Metric_QueryRange|Platform_Metric_Sort|Platform_Metric_Sort_Histogram|Platform_Notification_Email|Platform_Notification_PagerDuty|Platform_Notification_Slack|Platform_Notification_ServiceNow|Platform_PluginLambda|Platform_REST_Call|Platform_Sink|Platform_Site_GetInfo|Platform_Site_GetTenants|Platform_Site_LoadTenantComponent|pluginLambda|Plugin_Bitdefender_LoadEndpoint|Plugin_Falcon_GetHost|Plugin_Falcon_GetIncident|Plugin_Falcon_LoadHost|Plugin_Falcon_LoadIncident|Plugin_InControl_LoadClient|Plugin_InControl_LoadDevice|printf|Prom_Push_Counter|Prom_Push_Gauge|regexp|replace|replaceAll|ReplaceKey|RenameColumn|RemoveColumn|Round|run|RxFPL_GetMetric|setEnv|split|Some|Sort|sprintf|startsWith|SetColumnUnit|SetDimensions|SetTags|SetUnit|sleep|SummaryTable|subString|template|TimeTable|toLower|timezoneOffset|toUpper|transform|trim|trimPrefix|trimSuffix|typeof|Unix|UnixMilli|window)\b(?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/g;
 
 const fpl2 = {
   regex: Prism.languages.javascript.regex,