elseware-ui 3.1.1 → 3.2.0

package/dist/index.js

@@ -18,6 +18,7 @@ var ReactWorldFlags = require('react-world-flags');
 var emojiFlags = require('emoji-flags');
 var reactSimpleMaps = require('react-simple-maps');
 var index_js$5 = require('react-icons/bi/index.js');
+var fi = require('react-icons/fi');
 var CodeMirror = require('@uiw/react-codemirror');
 var langMarkdown = require('@codemirror/lang-markdown');
 var themeOneDark = require('@codemirror/theme-one-dark');
@@ -4728,7 +4729,7 @@ var init_python = __esm({
 });
 
 // node_modules/refractor/lang/jsx.js
-function jsx226(Prism2) {
+function jsx227(Prism2) {
   Prism2.register(javascript);
   Prism2.register(markup);
   (function(Prism3) {
@@ -4861,14 +4862,14 @@ var init_jsx = __esm({
   "node_modules/refractor/lang/jsx.js"() {
     init_javascript();
     init_markup();
-    jsx226.displayName = "jsx";
-    jsx226.aliases = [];
+    jsx227.displayName = "jsx";
+    jsx227.aliases = [];
   }
 });
 
 // node_modules/refractor/lang/tsx.js
 function tsx(Prism2) {
-  Prism2.register(jsx226);
+  Prism2.register(jsx227);
   Prism2.register(typescript);
   (function(Prism3) {
     var typescript2 = Prism3.util.clone(Prism3.languages.typescript);
@@ -6183,7 +6184,7 @@ var cardHoverBorderVariants = {
   ["dark" /* dark */]: "hover:border-eui-dark-500"
 };
 var cardBgVariants = {
-  ["default" /* default */]: "bg-white/5",
+  ["default" /* default */]: "bg-white/[0.03]",
   ["primary" /* primary */]: "bg-eui-primary-500/10",
   ["secondary" /* secondary */]: "bg-eui-secondary-500/10",
   ["success" /* success */]: "bg-eui-success-500/10",
@@ -13792,13 +13793,13 @@ function Card({
   // default behavior
 }) {
   const eui = useEUIConfig();
-  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "softRoundedSquare";
+  const resolvedShape = shape ?? eui?.config?.global?.shape ?? "roundedSquare";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
         // Base
-        "relative border backdrop-blur-md transition-all duration-300 overflow-hidden p-3",
+        "relative overflow-hidden border p-4 backdrop-blur-md transition-all duration-300",
         // Shape
         shapes[resolvedShape],
         // Background
@@ -32731,6 +32732,430 @@ function StarRatingDistribution({
   );
 }
 var StarRatingDistribution_default = StarRatingDistribution;
+var HEALTHY_STATUSES = /* @__PURE__ */ new Set([
+  "ok",
+  "up",
+  "online",
+  "healthy",
+  "success",
+  "operational"
+]);
+var UNHEALTHY_STATUSES = /* @__PURE__ */ new Set([
+  "down",
+  "offline",
+  "unhealthy",
+  "error",
+  "failed",
+  "failure",
+  "unavailable"
+]);
+var isRecord2 = (value) => {
+  return typeof value === "object" && value !== null;
+};
+var getField = (value, key) => {
+  if (!isRecord2(value)) {
+    return void 0;
+  }
+  return value[key];
+};
+var getStringField = (value, keys2) => {
+  for (const key of keys2) {
+    const field = getField(value, key);
+    if (typeof field === "string" && field.trim()) {
+      return field.trim();
+    }
+  }
+  return "";
+};
+var getBooleanField = (value, keys2) => {
+  for (const key of keys2) {
+    const field = getField(value, key);
+    if (typeof field === "boolean") {
+      return field;
+    }
+  }
+  return null;
+};
+var getSystemHealthPayload = (data) => {
+  const nestedData = getField(data, "data");
+  return nestedData ?? data ?? null;
+};
+var getSystemHealthErrorMessage = (error) => {
+  const nestedData = getField(error, "data");
+  return getStringField(nestedData, ["message", "error"]) || getStringField(error, ["message", "error", "statusText"]) || "Health endpoint did not respond.";
+};
+var getSystemHealthHttpStatus = (error) => {
+  const status = getField(error, "status");
+  if (typeof status === "string" || typeof status === "number") {
+    return status;
+  }
+  return "Network error";
+};
+var getSystemHealthStatusText = (data) => {
+  const payload = getSystemHealthPayload(data);
+  return (getStringField(payload, ["status", "state", "health"]) || getStringField(data, ["status", "state", "health"])).toLowerCase();
+};
+var normalizeSystemHealthState = (status) => {
+  if (!status) {
+    return null;
+  }
+  const normalizedStatus = status.toLowerCase();
+  if (HEALTHY_STATUSES.has(normalizedStatus)) {
+    return "operational";
+  }
+  if (UNHEALTHY_STATUSES.has(normalizedStatus)) {
+    return "unavailable";
+  }
+  if (normalizedStatus === "checking" || normalizedStatus === "loading") {
+    return "checking";
+  }
+  if (normalizedStatus === "reachable") {
+    return "reachable";
+  }
+  return null;
+};
+var resolveSystemHealthState = ({
+  data,
+  status,
+  isError,
+  isLoading,
+  isFetching
+}) => {
+  if (isLoading || isFetching) {
+    return "checking";
+  }
+  if (isError) {
+    return "unavailable";
+  }
+  const normalizedStatus = normalizeSystemHealthState(status) ?? normalizeSystemHealthState(getSystemHealthStatusText(data));
+  if (normalizedStatus) {
+    return normalizedStatus;
+  }
+  const payload = getSystemHealthPayload(data);
+  const healthy = getBooleanField(payload, ["ok", "healthy", "success"]) ?? getBooleanField(data, ["ok", "healthy", "success"]);
+  if (healthy === true) {
+    return "operational";
+  }
+  if (healthy === false) {
+    return "unavailable";
+  }
+  return "reachable";
+};
+var resolveSystemHealthView = (input) => {
+  const state = resolveSystemHealthState(input);
+  const viewMap = {
+    checking: {
+      state: "checking",
+      label: "Checking",
+      description: "Request in flight",
+      variant: "info",
+      icon: fi.FiActivity,
+      dotClassName: "bg-eui-info-300",
+      panelClassName: "text-eui-info-200 bg-eui-info-500/10 border-eui-info-400/30"
+    },
+    operational: {
+      state: "operational",
+      label: "Operational",
+      description: "Health endpoint is reporting normally",
+      variant: "success",
+      icon: fi.FiCheckCircle,
+      dotClassName: "bg-eui-success-300",
+      panelClassName: "text-eui-success-200 bg-eui-success-500/10 border-eui-success-400/30"
+    },
+    reachable: {
+      state: "reachable",
+      label: "Reachable",
+      description: getSystemHealthStatusText(input.data) || "Response received",
+      variant: "warning",
+      icon: fi.FiActivity,
+      dotClassName: "bg-eui-warning-300",
+      panelClassName: "text-eui-warning-100 bg-eui-warning-500/10 border-eui-warning-300/30"
+    },
+    unavailable: {
+      state: "unavailable",
+      label: "Unavailable",
+      description: getSystemHealthErrorMessage(input.error),
+      variant: "danger",
+      icon: fi.FiAlertTriangle,
+      dotClassName: "bg-eui-danger-300",
+      panelClassName: "text-eui-danger-200 bg-eui-danger-500/10 border-eui-danger-400/30"
+    }
+  };
+  const view = viewMap[state];
+  return {
+    ...view,
+    label: input.statusLabel ?? view.label,
+    description: input.statusDescription ?? view.description
+  };
+};
+var formatSystemHealthTimestamp = (value) => {
+  if (!value) {
+    return "Pending";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "Pending";
+  }
+  return date.toLocaleString();
+};
+var stringifySystemHealthPayload = (value, emptyText = "No response payload yet.") => {
+  if (value === null || value === void 0) {
+    return emptyText;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (value instanceof Error) {
+    return JSON.stringify(
+      {
+        name: value.name,
+        message: value.message,
+        stack: value.stack
+      },
+      null,
+      2
+    );
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+function MetricItem({ icon, label, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Card_default, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent_default, { className: "p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs uppercase tracking-wide text-slate-400", children: [
+      icon ? React26.createElement(icon, {
+        className: "text-eui-success-300"
+      }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 break-words text-sm font-medium text-slate-100", children: value ?? "Not available" })
+  ] }) });
+}
+function ConnectionItem({ label, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-slate-500", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-1 break-words font-medium text-slate-100", children: value ?? "Not available" })
+  ] });
+}
+function SystemHealthStatus({
+  eyebrow = "System",
+  title = "System Health",
+  description,
+  data,
+  error,
+  response,
+  status,
+  statusLabel,
+  statusDescription,
+  isError = false,
+  isLoading = false,
+  isFetching = false,
+  serverLabel = "Server",
+  serverUrl,
+  endpointLabel = "Endpoint",
+  endpointPath = "/api/v1/system/health",
+  endpointUrl,
+  environmentLabel = "Environment",
+  environment,
+  lastCheckedLabel = "Last Checked",
+  lastCheckedAt,
+  responseTitle = "Response",
+  responseDescription,
+  emptyResponseText = "No response payload yet.",
+  connectionTitle = "Connection",
+  httpStateLabel = "HTTP state",
+  httpState,
+  pollingLabel = "Polling",
+  pollingValue,
+  clientLabel = "Client",
+  clientName,
+  metrics,
+  connectionItems,
+  refreshLabel = "Refresh health status",
+  onRefresh,
+  contentClassName,
+  heroClassName,
+  metricsClassName,
+  responseClassName,
+  connectionClassName,
+  className,
+  ...rest
+}) {
+  const view = resolveSystemHealthView({
+    data,
+    error,
+    status,
+    statusLabel,
+    statusDescription,
+    isError,
+    isLoading,
+    isFetching
+  });
+  const StatusIcon = view.icon;
+  const responsePayload = response ?? (isError ? error : getSystemHealthPayload(data));
+  const responseText = stringifySystemHealthPayload(
+    responsePayload,
+    emptyResponseText
+  );
+  const defaultMetrics = [
+    {
+      id: "server",
+      icon: fi.FiServer,
+      label: serverLabel,
+      value: serverUrl
+    },
+    {
+      id: "endpoint",
+      icon: fi.FiDatabase,
+      label: endpointLabel,
+      value: endpointUrl ?? endpointPath
+    },
+    {
+      id: "last-checked",
+      icon: fi.FiClock,
+      label: lastCheckedLabel,
+      value: formatSystemHealthTimestamp(lastCheckedAt)
+    },
+    {
+      id: "environment",
+      icon: fi.FiActivity,
+      label: environmentLabel,
+      value: environment
+    }
+  ];
+  const defaultConnectionItems = [
+    {
+      id: "http-state",
+      label: httpStateLabel,
+      value: httpState ?? (isError ? getSystemHealthHttpStatus(error) : "Connected")
+    },
+    {
+      id: "polling",
+      label: pollingLabel,
+      value: pollingValue
+    },
+    {
+      id: "client",
+      label: clientLabel,
+      value: clientName
+    }
+  ];
+  const visibleMetrics = metrics ?? defaultMetrics;
+  const visibleConnectionItems = connectionItems ?? defaultConnectionItems;
+  const currentResponseDescription = responseDescription ?? (isError ? "Request error" : "Latest payload");
+  const heroDescription = description ?? `Live status from ${endpointPath}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ...rest,
+      className: cn("min-h-screen bg-[#05070b] text-slate-100", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            className: cn(
+              "border-b border-white/10",
+              "bg-[radial-gradient(circle_at_top_left,rgba(22,163,74,0.22),transparent_32%),linear-gradient(135deg,rgba(15,23,42,0.96),rgba(2,6,23,0.98))]",
+              heroClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-8 px-5 py-14 sm:px-8 lg:flex-row lg:items-end lg:justify-between lg:py-20", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl", children: [
+                eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-eui-success-300", children: eyebrow }) : null,
+                title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-4 text-4xl font-semibold leading-tight text-white sm:text-5xl", children: title }) : null,
+                heroDescription ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 max-w-2xl text-base leading-7 text-slate-300", children: heroDescription }) : null
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Card_default, { styles: cn("px-5 py-4", view.panelClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent_default, { className: "p-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn("h-2.5 w-2.5 rounded-full", view.dotClassName)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: "text-xl" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Chip,
+                    {
+                      label: view.label,
+                      variant: view.variant,
+                      appearance: "ghost",
+                      shape: "roundedSquare"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 max-w-xs text-sm opacity-80", children: view.description })
+              ] }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
+          {
+            className: cn(
+              "mx-auto w-full max-w-6xl px-5 py-10 sm:px-8",
+              contentClassName
+            ),
+            children: [
+              visibleMetrics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
+                    metricsClassName
+                  ),
+                  children: visibleMetrics.map((metric, index3) => /* @__PURE__ */ jsxRuntime.jsx(MetricItem, { ...metric }, metric.id ?? index3))
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Card_default, { styles: cn("bg-slate-950/70 p-0", responseClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent_default, { className: "p-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-white/10 px-5 py-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      responseTitle ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-white", children: responseTitle }) : null,
+                      currentResponseDescription ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-slate-400", children: currentResponseDescription }) : null
+                    ] }),
+                    onRefresh ? /* @__PURE__ */ jsxRuntime.jsx(
+                      Button_web_default,
+                      {
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(
+                          fi.FiRefreshCw,
+                          {
+                            className: isFetching ? "animate-spin" : ""
+                          }
+                        ),
+                        mode: "outlined",
+                        variant: "success",
+                        shape: "roundedSquare",
+                        size: "md",
+                        disabled: isFetching,
+                        onPress: () => {
+                          void onRefresh();
+                        },
+                        accessibilityLabel: refreshLabel,
+                        className: "h-10 w-10",
+                        contentClassName: "text-eui-success-200"
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-[420px] overflow-auto whitespace-pre-wrap break-words p-5 text-sm leading-6 text-slate-300", children: responseText })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Card_default, { styles: cn("p-5", connectionClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent_default, { className: "p-0", children: [
+                  connectionTitle ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-white", children: connectionTitle }) : null,
+                  visibleConnectionItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "mt-5 space-y-4 text-sm", children: visibleConnectionItems.map((item, index3) => /* @__PURE__ */ jsxRuntime.jsx(ConnectionItem, { ...item }, item.id ?? index3)) }) : null
+                ] }) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var SystemHealthStatus_default = SystemHealthStatus;
 function WorldMapCountryTable({
   title = "Country Breakdown",
   data
@@ -35728,11 +36153,11 @@ function addChildren(props, children3) {
     }
   }
 }
-function productionCreate(_2, jsx265, jsxs130) {
+function productionCreate(_2, jsx266, jsxs131) {
   return create3;
   function create3(_3, type2, props, key) {
     const isStaticChildren = Array.isArray(props.children);
-    const fn = isStaticChildren ? jsxs130 : jsx265;
+    const fn = isStaticChildren ? jsxs131 : jsx266;
     return key ? fn(type2, props, key) : fn(type2, props);
   }
 }
@@ -55953,7 +56378,7 @@ function createChildren2(stylesheet, useInlineStyles) {
   return function(children3) {
     childrenCount += 1;
     return children3.map(function(child, i) {
-      return createElement2({
+      return createElement3({
         node: child,
         stylesheet,
         useInlineStyles,
@@ -55962,7 +56387,7 @@ function createChildren2(stylesheet, useInlineStyles) {
     });
   };
 }
-function createElement2(_ref) {
+function createElement3(_ref) {
   var node2 = _ref.node, stylesheet = _ref.stylesheet, _ref$style = _ref.style, style2 = _ref$style === void 0 ? {} : _ref$style, useInlineStyles = _ref.useInlineStyles, key = _ref.key;
   var properties2 = node2.properties, type2 = node2.type, TagName = node2.tagName, value = node2.value;
   if (type2 === "text") {
@@ -56221,7 +56646,7 @@ function processLines(codeTree, wrapLines, lineProps, showLineNumbers, showInlin
 function defaultRenderer(_ref5) {
   var rows = _ref5.rows, stylesheet = _ref5.stylesheet, useInlineStyles = _ref5.useInlineStyles;
   return rows.map(function(node2, i) {
-    return createElement2({
+    return createElement3({
       node: node2,
       stylesheet,
       useInlineStyles,
@@ -56651,7 +57076,7 @@ var json_default = json;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js
 init_jsx();
-var jsx_default = jsx226;
+var jsx_default = jsx227;
 
 // node_modules/react-syntax-highlighter/dist/esm/languages/prism/markup.js
 init_markup();
@@ -59635,6 +60060,7 @@ exports.StarRatingInput = StarRatingInput_default;
 exports.StatPlot = StatPlot;
 exports.StaticChartDataSource = StaticChartDataSource;
 exports.Switch = Switch_default;
+exports.SystemHealthStatus = SystemHealthStatus_default;
 exports.TNContext = TNContext;
 exports.TNDropdown = TNDropdown;
 exports.TNDropdownGroup = TNDropdownGroup;
@@ -59716,6 +60142,7 @@ exports.formatChartValue = formatChartValue;
 exports.formatCommentDate = formatCommentDate;
 exports.formatConfigError = formatConfigError;
 exports.formatReviewDate = formatReviewDate;
+exports.formatSystemHealthTimestamp = formatSystemHealthTimestamp;
 exports.generateHeadingNumbers = generateHeadingNumbers;
 exports.getAllowedOrigins = getAllowedOrigins;
 exports.getBrowserHref = getBrowserHref;
@@ -59734,6 +60161,10 @@ exports.getNowISOString = getNowISOString;
 exports.getOptimisticDislikeState = getOptimisticDislikeState;
 exports.getOptimisticLikeState = getOptimisticLikeState;
 exports.getSafeRedirect = getSafeRedirect;
+exports.getSystemHealthErrorMessage = getSystemHealthErrorMessage;
+exports.getSystemHealthHttpStatus = getSystemHealthHttpStatus;
+exports.getSystemHealthPayload = getSystemHealthPayload;
+exports.getSystemHealthStatusText = getSystemHealthStatusText;
 exports.getViewport = getViewport;
 exports.hasReviewReply = hasReviewReply;
 exports.incrementReplyCount = incrementReplyCount;
@@ -59748,6 +60179,7 @@ exports.normalizeMarkdown = normalizeMarkdown;
 exports.normalizeReview = normalizeReview;
 exports.normalizeReviewAuthor = normalizeReviewAuthor;
 exports.normalizeReviewReply = normalizeReviewReply;
+exports.normalizeSystemHealthState = normalizeSystemHealthState;
 exports.parseJson = parseJson;
 exports.parseJsonRecord = parseJsonRecord;
 exports.parseUrlMap = parseUrlMap;
@@ -59766,6 +60198,8 @@ exports.replaceReviewReply = replaceReviewReply;
 exports.resolveAppearanceStyles = resolveAppearanceStyles;
 exports.resolveChartColor = resolveChartColor;
 exports.resolveChartColors = resolveChartColors;
+exports.resolveSystemHealthState = resolveSystemHealthState;
+exports.resolveSystemHealthView = resolveSystemHealthView;
 exports.resolveWithGlobal = resolveWithGlobal;
 exports.safeReadStorage = safeReadStorage;
 exports.safeRemoveStorage = safeRemoveStorage;
@@ -59773,6 +60207,7 @@ exports.safeWriteStorage = safeWriteStorage;
 exports.sanitizeHeading = sanitizeHeading;
 exports.sendToast = sendToast;
 exports.slugify = slugify;
+exports.stringifySystemHealthPayload = stringifySystemHealthPayload;
 exports.toConfiguratorError = toConfiguratorError;
 exports.updateComment = updateComment;
 exports.updateReplyCacheComment = updateReplyCacheComment;