fluency-v8-components 1.6.0 → 1.6.1

package/dist/{index.es-I_IDoGTc.mjs → index.es-DW6Ls8hH.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-CS1vHSYo.mjs";
+import { c as Da, _ as Va, g as il } from "./index-BAGLjhJi.mjs";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluency-v8-components",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/assets/main.css

@@ -144,7 +144,7 @@
 }
 
 @utility std-light {
-  @apply bg-blue-50;
+  @apply bg-blue-100;
 }
 
 @utility std-dark {
@@ -325,6 +325,10 @@
   @apply w-10 h-10;
 }
 
+@utility link {
+  @apply text-blue-400 hover:underline;
+}
+
 @font-face {
   font-family: "Open Sans";
   src: url("/OpenSans-VariableFont_wdth,wght.ttf");
@@ -510,22 +514,22 @@
   }
 
   .chip {
-    @apply text-sm font-medium px-2 py-1 rounded-full flex flex-row;
+    @apply inline-flex items-center rounded-md px-2 py-1 font-medium ring-1 ring-inset;
   }
   .select-chip {
     @apply px-1 text-sm font-medium rounded-full bg-sky-200 dark:bg-sky-700;
   }
   .green-chip {
-    @apply bg-green-200 text-green-700 dark:bg-green-800 dark:text-green-300;
+    @apply bg-green-400/10 ring-green-500/20 text-green-400;
   }
   .red-chip {
-    @apply bg-red-200 text-red-600 dark:bg-red-800 dark:text-red-300;
+    @apply bg-red-400/10 ring-red-500/20 text-red-400;
   }
   .yellow-chip {
-    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300;
+    @apply bg-yellow-400/10 ring-yellow-500/20 text-yellow-400;
   }
   .blue-chip {
-    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300;
+    @apply bg-blue-400/10 ring-blue-500/20 text-blue-400;
   }
 
   .image-position-box {

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/index.js

@@ -119,6 +119,7 @@ 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

@@ -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,