@oneuptime/common 10.0.39 → 10.0.41

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -3,11 +3,10 @@ import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
 import SideOver from "../SideOver/SideOver";
-import ComponentElement from "./Component";
+import IconProp from "../../../Types/Icon/IconProp";
 import ComponentMetadata, {
   ComponentCategory,
   ComponentType,
-  NodeType,
 } from "../../../Types/Workflow/Component";
 import React, {
   FunctionComponent,
@@ -38,11 +37,12 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
 
   const [isSearching, setIsSearching] = useState<boolean>(false);
 
+  const [selectedComponentMetadata, setSelectedComponentMetadata] =
+    useState<ComponentMetadata | null>(null);
+
   useEffect(() => {
     setComponents(props.components);
-
     setComponentsToShow([...props.components]);
-
     setCategories(props.categories);
   }, []);
 
@@ -76,14 +76,11 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
     ]);
   }, [search]);
 
-  const [selectedComponentMetadata, setSelectedComponentMetadata] =
-    useState<ComponentMetadata | null>(null);
-
   return (
     <SideOver
-      submitButtonText="Create"
-      title={`Select a ${props.componentsType}`}
-      description={`Please select a component to add to your workflow.`}
+      submitButtonText="Add to Workflow"
+      title={`Add ${props.componentsType}`}
+      description={`Choose a ${props.componentsType.toLowerCase()} to add to your workflow.`}
       onClose={props.onCloseModal}
       submitButtonDisabled={!selectedComponentMetadata}
       onSubmit={() => {
@@ -95,107 +92,197 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
     >
       <>
         <div className="flex flex-col h-full">
-          {/** Search box here */}
-
-          <div className="mt-5">
-            <Input
-              placeholder="Search..."
-              onChange={(text: string) => {
-                setIsSearching(true);
-                setSearch(text);
-              }}
-            />
+          {/* Search box */}
+          <div className="mt-4 mb-4">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Icon
+                  icon={IconProp.Search}
+                  className="h-4 w-4 text-gray-400"
+                />
+              </div>
+              <div className="pl-9">
+                <Input
+                  placeholder={`Search ${props.componentsType.toLowerCase()}s...`}
+                  onChange={(text: string) => {
+                    setIsSearching(true);
+                    setSearch(text);
+                  }}
+                />
+              </div>
+            </div>
           </div>
 
-          <div className="overflow-y-auto overflow-x-hidden my-5">
+          <div className="overflow-y-auto overflow-x-hidden flex-1">
             {!componentsToShow ||
               (componentsToShow.length === 0 && (
-                <div className="w-full flex justify-center mt-20">
-                  <ErrorMessage message="No components that match your search. If you are looking for an integration that does not exist currently - you can use Custom Code or API component to build anything you like. If you are an enterprise customer, feel free to talk to us and we will build it for you." />
+                <div className="w-full flex justify-center mt-20 px-4">
+                  <ErrorMessage message="No components that match your search. If you are looking for an integration that does not exist currently - you can use Custom Code or API component to build anything you like." />
                 </div>
               ))}
 
             {categories &&
               categories.length > 0 &&
               categories.map((category: ComponentCategory, i: number) => {
-                if (
-                  componentsToShow &&
-                  componentsToShow.length > 0 &&
+                const categoryComponents: Array<ComponentMetadata> =
                   componentsToShow.filter(
                     (componentMetadata: ComponentMetadata) => {
                       return componentMetadata.category === category.name;
                     },
-                  ).length > 0
-                ) {
-                  return (
-                    <div key={i}>
-                      <h4 className="text-gray-500 text-base mt-5 flex">
-                        {" "}
+                  );
+
+                if (categoryComponents.length === 0) {
+                  return <div key={i}></div>;
+                }
+
+                return (
+                  <div key={i} className="mb-6">
+                    {/* Category header */}
+                    <div className="flex items-center gap-2 mb-3 px-1">
+                      <div
+                        className="flex items-center justify-center rounded-md"
+                        style={{
+                          width: "28px",
+                          height: "28px",
+                          backgroundColor: "#f1f5f9",
+                        }}
+                      >
                         <Icon
                           icon={category.icon}
-                          className="h-5 w-5 text-gray-500"
-                        />{" "}
-                        <span className="ml-2">{category.name}</span>
-                      </h4>
-                      <p className="text-gray-400 text-sm mb-5">
-                        {category.description}
-                      </p>
-                      <div className="flex flex-wrap ml-2">
-                        {components &&
-                          components.length > 0 &&
-                          components
-                            .filter((componentMetadata: ComponentMetadata) => {
-                              return (
-                                componentMetadata.category === category.name
-                              );
-                            })
-                            .map(
-                              (
-                                componentMetadata: ComponentMetadata,
-                                i: number,
-                              ) => {
-                                return (
-                                  <div
-                                    key={i}
-                                    onClick={() => {
-                                      setSelectedComponentMetadata(
-                                        componentMetadata,
-                                      );
-                                    }}
-                                    className={`m-5 ml-0 mt-0 ${
-                                      selectedComponentMetadata &&
-                                      selectedComponentMetadata.id ===
-                                        componentMetadata.id
-                                        ? "rounded ring-offset-2 ring ring-indigo-500"
-                                        : ""
-                                    }`}
-                                  >
-                                    <ComponentElement
-                                      key={i}
-                                      selected={false}
-                                      data={{
-                                        metadata: componentMetadata,
-                                        metadataId: componentMetadata.id,
-                                        internalId: "",
-                                        nodeType: NodeType.Node,
-                                        componentType:
-                                          componentMetadata.componentType,
-                                        returnValues: {},
-                                        isPreview: true,
-                                        id: "",
-                                        error: "",
-                                        arguments: {},
-                                      }}
-                                    />
-                                  </div>
-                                );
-                              },
-                            )}
+                          className="h-4 w-4 text-gray-500"
+                        />
+                      </div>
+                      <div>
+                        <h4 className="text-sm font-semibold text-gray-700 leading-tight">
+                          {category.name}
+                        </h4>
+                        <p className="text-xs text-gray-400 leading-tight">
+                          {category.description}
+                        </p>
                       </div>
                     </div>
-                  );
-                }
-                return <div key={i}></div>;
+
+                    {/* Component cards grid */}
+                    <div className="grid grid-cols-1 gap-2">
+                      {categoryComponents.map(
+                        (componentMetadata: ComponentMetadata, j: number) => {
+                          const isSelected: boolean =
+                            selectedComponentMetadata !== null &&
+                            selectedComponentMetadata.id ===
+                              componentMetadata.id;
+
+                          return (
+                            <div
+                              key={j}
+                              onClick={() => {
+                                setSelectedComponentMetadata(componentMetadata);
+                              }}
+                              className="cursor-pointer transition-all duration-150"
+                              style={{
+                                padding: "0.75rem",
+                                borderRadius: "10px",
+                                border: isSelected
+                                  ? "2px solid #6366f1"
+                                  : "1px solid #e2e8f0",
+                                backgroundColor: isSelected
+                                  ? "#eef2ff"
+                                  : "#ffffff",
+                                display: "flex",
+                                alignItems: "flex-start",
+                                gap: "0.75rem",
+                                boxShadow: isSelected
+                                  ? "0 0 0 3px rgba(99, 102, 241, 0.1)"
+                                  : "0 1px 2px 0 rgba(0, 0, 0, 0.03)",
+                              }}
+                            >
+                              {/* Icon */}
+                              <div
+                                style={{
+                                  width: "36px",
+                                  height: "36px",
+                                  borderRadius: "8px",
+                                  backgroundColor: isSelected
+                                    ? "#6366f1"
+                                    : "#f1f5f9",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  flexShrink: 0,
+                                  transition: "all 0.15s ease",
+                                }}
+                              >
+                                <Icon
+                                  icon={componentMetadata.iconProp}
+                                  style={{
+                                    color: isSelected ? "#ffffff" : "#64748b",
+                                    width: "1rem",
+                                    height: "1rem",
+                                  }}
+                                />
+                              </div>
+
+                              {/* Text */}
+                              <div style={{ minWidth: 0, flex: 1 }}>
+                                <p
+                                  style={{
+                                    fontSize: "0.8125rem",
+                                    fontWeight: 600,
+                                    color: isSelected ? "#4338ca" : "#1e293b",
+                                    margin: 0,
+                                    lineHeight: "1.25rem",
+                                  }}
+                                >
+                                  {componentMetadata.title}
+                                </p>
+                                <p
+                                  style={{
+                                    fontSize: "0.75rem",
+                                    color: isSelected ? "#6366f1" : "#94a3b8",
+                                    margin: 0,
+                                    marginTop: "2px",
+                                    lineHeight: "1rem",
+                                    display: "-webkit-box",
+                                    WebkitLineClamp: 2,
+                                    WebkitBoxOrient: "vertical",
+                                    overflow: "hidden",
+                                  }}
+                                >
+                                  {componentMetadata.description}
+                                </p>
+                              </div>
+
+                              {/* Selection indicator */}
+                              {isSelected && (
+                                <div
+                                  style={{
+                                    width: "20px",
+                                    height: "20px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "#6366f1",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    flexShrink: 0,
+                                    marginTop: "2px",
+                                  }}
+                                >
+                                  <Icon
+                                    icon={IconProp.Check}
+                                    style={{
+                                      color: "#ffffff",
+                                      width: "0.625rem",
+                                      height: "0.625rem",
+                                    }}
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          );
+                        },
+                      )}
+                    </div>
+                  </div>
+                );
               })}
           </div>
         </div>

package/UI/Components/Workflow/Workflow.tsx

@@ -22,6 +22,7 @@ import React, {
 } from "react";
 import ReactFlow, {
   Background,
+  BackgroundVariant,
   Connection,
   Controls,
   Edge,
@@ -75,9 +76,9 @@ const edgeStyle: React.CSSProperties = {
 };
 
 const selectedEdgeStyle: React.CSSProperties = {
-  strokeWidth: "2px",
-  stroke: "#818cf8",
-  color: "#818cf8",
+  strokeWidth: "2.5px",
+  stroke: "#6366f1",
+  color: "#6366f1",
 };
 
 type GetEdgeDefaultPropsFunction = (selected: boolean) => JSONObject;
@@ -87,9 +88,14 @@ export const getEdgeDefaultProps: GetEdgeDefaultPropsFunction = (
 ): JSONObject => {
   return {
     type: "smoothstep",
+    animated: selected,
     markerEnd: {
-      type: MarkerType.Arrow,
-      color: edgeStyle.color?.toString() || "",
+      type: MarkerType.ArrowClosed,
+      color: selected
+        ? selectedEdgeStyle.color?.toString() || ""
+        : edgeStyle.color?.toString() || "",
+      width: 20,
+      height: 20,
     },
     style: selected ? { ...selectedEdgeStyle } : { ...edgeStyle },
   };
@@ -271,7 +277,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           {
             ...oldEdge,
             markerEnd: {
-              type: MarkerType.Arrow,
+              type: MarkerType.ArrowClosed,
               color: edgeStyle.color?.toString() || "",
             },
             style: edgeStyle,
@@ -398,7 +404,65 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   };
 
   return (
-    <div className="h-[48rem]">
+    <div
+      style={{
+        height: "calc(100vh - 220px)",
+        minHeight: "600px",
+        borderRadius: "8px",
+        overflow: "hidden",
+        border: "1px solid #e2e8f0",
+      }}
+    >
+      <style>
+        {`
+          .react-flow__minimap {
+            border-radius: 8px !important;
+            border: 1px solid #e2e8f0 !important;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
+            overflow: hidden !important;
+            background: #ffffff !important;
+          }
+          .react-flow__controls {
+            border-radius: 8px !important;
+            border: 1px solid #e2e8f0 !important;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
+            overflow: hidden !important;
+          }
+          .react-flow__controls-button {
+            border-bottom: 1px solid #f1f5f9 !important;
+            width: 32px !important;
+            height: 32px !important;
+          }
+          .react-flow__controls-button:hover {
+            background: #f8fafc !important;
+          }
+          .react-flow__controls-button svg {
+            max-width: 14px !important;
+            max-height: 14px !important;
+          }
+          .react-flow__edge:hover .react-flow__edge-path {
+            stroke: #6366f1 !important;
+            stroke-width: 2.5px !important;
+          }
+          .react-flow__handle:hover {
+            transform: scale(1.3) !important;
+          }
+          .react-flow__connection-line {
+            stroke: #6366f1 !important;
+            stroke-width: 2px !important;
+            stroke-dasharray: 5 5 !important;
+          }
+          @keyframes flow-dash {
+            to {
+              stroke-dashoffset: -10;
+            }
+          }
+          .react-flow__edge.animated .react-flow__edge-path {
+            animation: flow-dash 0.5s linear infinite !important;
+            stroke-dasharray: 5 5 !important;
+          }
+        `}
+      </style>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -418,10 +482,42 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         nodeTypes={nodeTypes}
         onEdgeUpdateStart={onEdgeUpdateStart}
         onEdgeUpdateEnd={onEdgeUpdateEnd}
+        snapToGrid={true}
+        snapGrid={[16, 16]}
+        connectionLineStyle={{
+          stroke: "#6366f1",
+          strokeWidth: 2,
+          strokeDasharray: "5 5",
+        }}
+        defaultEdgeOptions={{
+          type: "smoothstep",
+          style: { ...edgeStyle },
+        }}
       >
-        <MiniMap />
+        <MiniMap
+          nodeStrokeWidth={3}
+          nodeColor={(node: Node) => {
+            if (
+              node.data &&
+              node.data.metadata &&
+              node.data.metadata.componentType === ComponentType.Trigger
+            ) {
+              return "#f59e0b";
+            }
+            return "#6366f1";
+          }}
+          maskColor="rgba(241, 245, 249, 0.7)"
+          style={{
+            backgroundColor: "#ffffff",
+          }}
+        />
         <Controls />
-        <Background color="#111827" />
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={20}
+          size={1}
+          color="#cbd5e1"
+        />
       </ReactFlow>
 
       {showComponentsModal && (

package/UI/Config.ts

@@ -11,6 +11,7 @@ import {
   ProbeIngestRoute,
   IntegrationRoute,
   NotificationRoute,
+  PublicDashboardRoute,
   RealtimeRoute,
   StatusPageApiRoute,
   StatusPageRoute,
@@ -159,6 +160,12 @@ export const DASHBOARD_URL: URL = new URL(
   new Route(DashboardRoute.toString()),
 );
 
+export const PUBLIC_DASHBOARD_URL: URL = new URL(
+  HTTP_PROTOCOL,
+  DASHBOARD_HOSTNAME,
+  new Route(PublicDashboardRoute.toString()),
+);
+
 export const INTEGRATION_URL: URL = new URL(
   HTTP_PROTOCOL,
   INTEGRATION_HOSTNAME,
@@ -193,6 +200,8 @@ export const SubscriptionPlans: Array<SubscriptionPlan> =
 export const StatusPageCNameRecord: string =
   env("STATUS_PAGE_CNAME_RECORD") || "";
 
+export const DashboardCNameRecord: string = env("DASHBOARD_CNAME_RECORD") || "";
+
 export const AnalyticsKey: string = env("ANALYTICS_KEY") || "";
 export const AnalyticsHost: string = env("ANALYTICS_HOST");
 

package/Utils/Dashboard/Components/DashboardChartComponent.ts

@@ -4,11 +4,25 @@ import ObjectID from "../../../Types/ObjectID";
 import DashboardBaseComponentUtil from "./DashboardBaseComponent";
 import {
   ComponentArgument,
+  ComponentArgumentSection,
   ComponentInputType,
 } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
 import DashboardChartType from "../../../Types/Dashboard/Chart/ChartType";
 
+const DataSourceSection: ComponentArgumentSection = {
+  name: "Data Source",
+  description: "Configure what data to display on the chart",
+  order: 1,
+};
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Customize the chart appearance",
+  order: 2,
+  defaultCollapsed: true,
+};
+
 export default class DashboardChartComponentUtil extends DashboardBaseComponentUtil {
   public static override getDefaultComponent(): DashboardChartComponent {
     return {
@@ -23,6 +37,13 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       minWidthInDashboardUnits: 6,
       arguments: {
         metricQueryConfig: {
+          metricAliasData: {
+            metricVariable: "a",
+            title: undefined,
+            description: undefined,
+            legend: undefined,
+            legendUnit: undefined,
+          },
           metricQueryData: {
             filterData: {},
             groupBy: undefined,
@@ -42,10 +63,11 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
 
     componentArguments.push({
       name: "Chart Type",
-      description: "Select the type of chart to display",
+      description: "How the data will be visualized",
       required: true,
       type: ComponentInputType.Dropdown,
       id: "chartType",
+      section: DataSourceSection,
       dropdownOptions: [
         {
           label: "Line Chart",
@@ -55,47 +77,56 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
           label: "Bar Chart",
           value: DashboardChartType.Bar,
         },
+        {
+          label: "Area Chart",
+          value: DashboardChartType.Area,
+        },
+        {
+          label: "Stacked Area Chart",
+          value: DashboardChartType.StackedArea,
+        },
+        {
+          label: "Pie Chart",
+          value: DashboardChartType.Pie,
+        },
       ],
     });
 
     componentArguments.push({
-      name: "Chart Configuration",
-      description: "Please select the metrics to display on the chart",
+      name: "Metric Query",
+      description: "Select the metric and filters for this chart",
       required: true,
       type: ComponentInputType.MetricsQueryConfig,
       id: "metricQueryConfig",
+      section: DataSourceSection,
     });
 
     componentArguments.push({
-      name: "Chart Title",
-      description: "The title of the chart",
+      name: "Additional Queries",
+      description: "Overlay more metrics on the same chart",
       required: false,
-      type: ComponentInputType.Text,
-      id: "chartTitle",
+      type: ComponentInputType.MetricsQueryConfigs,
+      id: "metricQueryConfigs",
+      isAdvanced: true,
+      section: DataSourceSection,
     });
 
     componentArguments.push({
-      name: "Chart Description",
-      description: "Description of the chart",
-      required: false,
-      type: ComponentInputType.LongText,
-      id: "chartDescription",
-    });
-
-    componentArguments.push({
-      name: "Legend Text",
-      description: "The text to display in the legend",
+      name: "Title",
+      description: "Displayed above the chart",
       required: false,
       type: ComponentInputType.Text,
-      id: "legendText",
+      id: "chartTitle",
+      section: DisplaySection,
     });
 
     componentArguments.push({
-      name: "Legend Unit",
-      description: "The unit to display in the legend",
+      name: "Description",
+      description: "Subtitle shown below the title",
       required: false,
-      type: ComponentInputType.Text,
-      id: "legendUnit",
+      type: ComponentInputType.LongText,
+      id: "chartDescription",
+      section: DisplaySection,
     });
 
     return componentArguments;