feat (#129): add auto-expand dropdowns UI option (#134)

Author: followynne

samples/WebApi/WebApi.csproj

@@ -22,7 +22,7 @@
     <!-- Serilog UI packages  -->
     <ItemGroup>
         <!-- comment/uncomment to directly reference Nuget release
-        <PackageReference Include="Serilog.UI" Version="3.0.0"/>
+        <PackageReference Include="Serilog.UI" Version="3.0.1"/>
         <PackageReference Include="Serilog.UI.MsSqlServerProvider" Version="3.0.0"/>
         <PackageReference Include="Serilog.UI.ElasticSearchProvider" Version="3.0.0"/>
         -->

samples/WebApp/Program.cs

@@ -39,6 +39,7 @@
 app.UseSerilogUi(options => options
     .WithHomeUrl("/#Test")
     .WithAuthenticationType(AuthenticationType.Jwt)
+    .WithExpandedDropdownsByDefault()
     .EnableAuthorizationOnAppRoutes()
     .InjectJavascript("/js/serilog-ui/custom.js")
 );

samples/WebApp/WebApp.csproj

@@ -38,7 +38,7 @@
     <!-- Serilog UI packages  -->
     <ItemGroup>
         <!-- comment/uncomment to directly reference Nuget release
-        <PackageReference Include="Serilog.UI" Version="3.0.0"/>
+        <PackageReference Include="Serilog.UI" Version="3.0.1"/>
         <PackageReference Include="Serilog.UI.MongoDbProvider" Version="3.0.0"/>
         -->
 

src/Serilog.Ui.Web/Endpoints/SerilogUiAppRoutes.cs

@@ -77,6 +77,7 @@ private async Task<string> LoadStream(Stream stream, UiOptions options)
                 options.HomeUrl,
                 BlockHomeAccess,
                 options.RoutePrefix,
+                options.ExpandDropdownsByDefault
             };
             var encodeAuthOpts = Uri.EscapeDataString(JsonSerializer.Serialize(feOpts, JsonSerializerOptions));
 

src/Serilog.Ui.Web/Models/UiOptions.cs

@@ -29,6 +29,11 @@ public class UiOptions(ProvidersOptions options)
     /// <value>The route prefix.</value>
     public string RoutePrefix { get; private set; } = "serilog-ui";
 
+    /// <summary>
+    /// Get the option to auto-expand dropdowns in the log viewer.
+    /// </summary>
+    public bool ExpandDropdownsByDefault { get; private set; }
+
     /// <summary>
     /// Sets the type of the authentication.
     /// </summary>
@@ -56,6 +61,16 @@ public UiOptions HideSerilogUiBrand()
         return this;
     }
 
+    /// <summary>
+    /// Sets the expand dropdowns by default property to true.
+    /// </summary>
+    public UiOptions WithExpandedDropdownsByDefault()
+    {
+        ExpandDropdownsByDefault = true;
+        return this;
+    }
+
+
     /// <summary>
     /// Injects additional CSS stylesheets into the index.html page.
     /// Each call to the method adds a stylesheet entry.  

src/Serilog.Ui.Web/Serilog.Ui.Web.csproj

@@ -4,7 +4,7 @@
     <PackageId>Serilog.UI</PackageId>
     <TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
     <LangVersion>latest</LangVersion>
-    <Version>3.0.0</Version>
+    <Version>3.0.1</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/Serilog.Ui.Web/package.json

@@ -15,10 +15,10 @@
   },
   "dependencies": {
     "@fontsource/mononoki": "^5.0.11",
-    "@mantine/core": "^7.12.0",
-    "@mantine/dates": "^7.12.0",
-    "@mantine/hooks": "^7.12.0",
-    "@mantine/notifications": "^7.12.0",
+    "@mantine/core": "^7.12.1",
+    "@mantine/dates": "^7.12.1",
+    "@mantine/hooks": "^7.12.1",
+    "@mantine/notifications": "^7.12.1",
     "@tabler/icons-react": "^3.12.0",
     "@tanstack/react-query": "^5.51.23",
     "dayjs": "^1.11.12",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^22.2.0",
+    "@types/node": "^22.3.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
@@ -51,7 +51,7 @@
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-testing-library": "^6.3.0",
     "eslint-plugin-vitest": "^0.5.4",
     "eslint-plugin-vitest-globals": "^1.5.0",
     "happy-dom": "^14.12.3",
@@ -64,7 +64,7 @@
     "shiki": "^1.12.1",
     "testing-library-selector": "^0.3.1",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.0.1",
+    "typescript-eslint": "^8.1.0",
     "vite": "^5.4.0",
     "vite-plugin-checker": "^0.7.2",
     "vite-plugin-mkcert": "^1.17.5",

src/Serilog.Ui.Web/src/app/components/Table/PropertiesModal.tsx

@@ -44,7 +44,7 @@ const PropertiesModal = ({
         radius="sm"
         size="xl"
         closeButtonProps={{ 'aria-label': 'close-properties-modal' }}
-        title="Additional Columns"
+        title="Enrichment Data"
         overlayProps={overlayProps(colorScheme, theme.colors)}
       >
         <Box display="grid" style={boxGridProperties}>
@@ -73,16 +73,17 @@ const RenderProps = memo(
     prop: unknown;
     logPropertyType: string;
   }) => {
-    const { isUtc } = useSerilogUiProps();
+    const { expandDropdownsByDefault, isUtc } = useSerilogUiProps();
     const { additionalColumn, removeProperties } = useColumnsInfo(name, logPropertyType);
 
     if (!additionalColumn) return null;
 
     const propertyName = capitalize(name);
+    const defaultAccordionValue = expandDropdownsByDefault ? propertyName : null;
 
     if (additionalColumn.codeType && !removeProperties) {
       return (
-        <Accordion style={{ order: 1 }}>
+        <Accordion defaultValue={defaultAccordionValue} style={{ order: 1 }}>
           <Accordion.Item value={propertyName}>
             <Accordion.Control icon={<IconCodeDots />}>{propertyName}</Accordion.Control>
             <Accordion.Panel>

src/Serilog.Ui.Web/src/app/components/Table/SerilogResults.tsx

@@ -106,7 +106,7 @@ const TableHead = memo(() => {
         {!removeException && (
           <TableHeader text="Exception" columnType={ColumnType.code} />
         )}
-        <TableHeader text="Additional Columns" columnType={ColumnType.code} />
+        <TableHeader text="Enrichment Data" columnType={ColumnType.code} />
       </Table.Tr>
     </Table.Thead>
   );

src/Serilog.Ui.Web/src/types/types.ts

@@ -101,6 +101,7 @@ export interface SerilogUiConfig {
   routePrefix?: string;
   homeUrl?: string;
   showBrand?: boolean;
+  expandDropdownsByDefault?: boolean;
   blockHomeAccess?: boolean;
   disabledSortOnKeys?: string[];
   columnsInfo?: ColumnsInfo;