[AC-3006] Splunk app UI rewrite #63

mzieniukbw · 2024-09-07T23:37:45Z

🎟️ Tracking

https://bitwarden.atlassian.net/browse/AC-3006

📔 Objective

Rewrite the Splunk UI of the Bitwarden Event Logs application.
Technology: Node, Angular v18, Tailwind
Rewrite Benefits:

Unified tech stack
Better User Experience (visually nicer and consistent)
Validation of fields (required fields, email, server url validations)
Better error handling
Reads the app configuration on load (Server Url, index, date)

ℹ️ Notes

Splunk SDK does not support TypeScript. JS support via import or require also does not work, so splunk sdk is imported during build in form of splunkjs global variable. JS/TS types are defined in splunk-js.service.ts. While Splunk UI in which the app's UI runs provides it's own Splunk SDK in splunkjs global variable, it's outdated and as a result have differences between various Splunk versions.
Simplified GH Actions build - removing the "beta" build, we don't need it anymore.
Ability to specify the index name by field - could address https://bitwarden.atlassian.net/browse/AC-2821
Bitwarden EU support

📷 Screenshots

Note: Splunk CSS seems to override a lot of things, but maybe that's for better, since it's more Splunk native look.

No errors:

Save success:

Validation issues:

⏰ Reminders before review

Contributor guidelines followed
All formatters and local linters executed and passed
Written new unit and / or integration tests where applicable
Protected functional changes with optionality (feature flags)
Used internationalization (i18n) for all UI strings
CI builds passed
Communicated to DevOps any deployment requirements
Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

👍 (:+1:) or similar for great changes
📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
❓ (:question:) for questions
🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
🎨 (:art:) for suggestions / improvements
❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
⛏ (:pick:) for minor or nitpick changes

github-actions · 2024-09-07T23:39:37Z

Checkmarx One – Scan Summary & Details – 1959af96-0d8b-4cf4-bf8a-0591fa47950b

New Issues (14)

Checkmarx found the following issues in this Pull Request

Issue	Source File / Package	Checkmarx Insight
CVE-2024-52798	Npm-path-to-regexp-0.1.10	details Recommended version: 0.1.12 Description: path-to-regexp turns path strings into a regular expressions. In certain cases, path-to-regexp will output a regular expression that can be exploit... Attack Vector: NETWORK Attack Complexity: LOW `ID: lsaufpFhaIHEx6xlAAlTO2NnO3ewOIiIUbBqPX9bAno%3D` Vulnerable Package
CVE-2024-47764	Npm-cookie-0.4.2	details Recommended version: 0.7.0 Description: The NPM package cookie is a basic HTTP cookie parser and serializer for HTTP servers. The cookie name could be used to set other fields of the cook... Attack Vector: NETWORK Attack Complexity: LOW `ID: 6iJsDSfnkKFO%2BqRDcwpPqH%2Fe7ZLEdUAxyzUBfe35HX4%3D` Vulnerable Package
CVE-2024-55565	Npm-nanoid-3.3.7	details Recommended version: 3.3.8 Description: The package nanoid versions through 3.3.7 and 4.0.0 through 5.0.8 mishandle non-integer values. Attack Vector: NETWORK Attack Complexity: LOW `ID: KVQv1ueXePSD2pQFQZ5HQjK1OqR4qdrwOpvaYh6ah5Y%3D` Vulnerable Package
CVE-2025-24010	Npm-vite-5.4.6	details Recommended version: 5.4.18 Description: Vite is a frontend tooling framework for JavaScript. Vite allowed any websites to send any requests to the development server and read the response... Attack Vector: NETWORK Attack Complexity: LOW `ID: qTz8X0%2BV%2Bf98meMs2WPD8ZXamgVMSqLtTRMP6JUrc2Y%3D` Vulnerable Package
CVE-2025-27789	Npm-@babel/helpers-7.26.0	details Recommended version: 7.26.10 Description: Babel is a compiler for writing next-generation JavaScript. In affected versions of Babel, to compile regular expressions named capturing groups, B... Attack Vector: LOCAL Attack Complexity: LOW `ID: W4FQxYJUOmgpFShJ3R6nn0ca6hCe43A9bXeGgLy7kB8%3D` Vulnerable Package
CVE-2025-31125	Npm-vite-5.4.6	details Recommended version: 5.4.18 Description: Vite is a frontend tooling framework for javascript. Vite exposes the content of non-allowed files using `?inline&import` or `?raw?import`. Only ap... Attack Vector: NETWORK Attack Complexity: HIGH `ID: oQQIBBx%2F9ydqNTl6TdkcIWQlWGUT%2FjQ2%2B9xOQwEez30%3D` Vulnerable Package
CVE-2025-31486	Npm-vite-5.4.6	details Recommended version: 5.4.18 Description: A vulnerability in Vite allows the contents of arbitrary files to be returned to the browser. By appending "?.svg" along with "?.wasm?init" or sett... Attack Vector: NETWORK Attack Complexity: HIGH `ID: AnknP26gsIXnCYkfoQACh97sjRbitZ9b950ZadY0Jys%3D` Vulnerable Package
CVE-2025-32395	Npm-vite-5.4.6	details Recommended version: 5.4.18 Description: Vite is a frontend tooling framework for JavaScript. The contents of arbitrary files can be returned to the browser if the dev server is running on... Attack Vector: NETWORK Attack Complexity: LOW `ID: kC%2FFcNH3rVL9zvaE%2BFV3KmFHZnAuS72mP9EXwbYbrvk%3D` Vulnerable Package
Cxbb85e86c-2fac	Npm-esbuild-wasm-0.23.0	details Recommended version: 0.25.0 Description: esbuild is an extremely fast bundler for the web, allowing any website to send any request to the development server and read the response due to d... Attack Vector: NETWORK Attack Complexity: HIGH `ID: Dq5ZEQRwwHZK5XzpLVCZR5A3p5BIWa%2F8kbrt%2BrKRlaY%3D` Vulnerable Package
Cxbb85e86c-2fac	Npm-esbuild-0.23.0	details Recommended version: 0.25.0 Description: esbuild is an extremely fast bundler for the web, allowing any website to send any request to the development server and read the response due to d... Attack Vector: NETWORK Attack Complexity: HIGH `ID: dv%2FhcUm9kV34OJCKrDwqQybnwQmKhg%2FqG9D5q5VlFH0%3D` Vulnerable Package
Cxbb85e86c-2fac	Npm-esbuild-0.21.5	details Recommended version: 0.25.0 Description: esbuild is an extremely fast bundler for the web, allowing any website to send any request to the development server and read the response due to d... Attack Vector: NETWORK Attack Complexity: HIGH `ID: iuRZL8zjkAK9eK8MTLmST6qG6BlFCwT2kf4jXLTI3i4%3D` Vulnerable Package
Cx8bc4df28-fcf5	Npm-debug-4.3.7	details Recommended version: 4.4.0 Description: In NPM "debug" versions prior to 4.4.0, the "enable" function accepts a regular expression from user input without escaping it. Arbitrary regular e... Attack Vector: NETWORK Attack Complexity: HIGH `ID: Dc5Zwc50erIba30dDkvSqpm9bVmLRPNabqe4rhQLzII%3D` Vulnerable Package
Cx8bc4df28-fcf5	Npm-debug-3.2.7	details Recommended version: 4.4.0 Description: In NPM "debug" versions prior to 4.4.0, the "enable" function accepts a regular expression from user input without escaping it. Arbitrary regular e... Attack Vector: NETWORK Attack Complexity: HIGH `ID: zjFUHdqq2m%2FO%2BGqEXgMzo9rrMITr5QDGqV4Hjaw9qFY%3D` Vulnerable Package
Cx8bc4df28-fcf5	Npm-debug-2.6.9	details Recommended version: 4.4.0 Description: In NPM "debug" versions prior to 4.4.0, the "enable" function accepts a regular expression from user input without escaping it. Arbitrary regular e... Attack Vector: NETWORK Attack Complexity: HIGH `ID: ZvlCi8A4981bUlEHCGurTP87lyrhKRpZ80CaNMA6WLw%3D` Vulnerable Package

…gular # Conflicts: # README.md

eliykat

Great work! Some suggestions, some questions. We're still on Angular 16 in clients and we don't use the Angular CLI, so the differences with a brand new app are interesting (and somewhat unfamiliar to me).

ui/projects/setup/src/app/app.component.html

eliykat · 2024-10-30T02:01:12Z

ui/projects/setup/src/app/app.component.html

+          <input
+            type="text"
+            name="clientId"
+            id="clientId"
+            [(ngModel)]="model.clientId"
+            #clientId="ngModel"
+            required
+            class="form-control block flex-1 border-1 rounded-md border-gray-300 focus:border-indigo-600 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 sm:text-sm sm:leading-6"
+          />
+        </div>
+        @if (clientId.invalid) {
+          <div class="alert alert-danger text-red-600 text-sm">
+            Client Id is required
+          </div>
+        }


There's quite a bit of extra work here to recreate what is essentially a typed reactive form. We almost exclusively use reactive forms in our clients repository and it's much easier to manage medium-to-large forms.

If this used a reactive form, you could declare the form's structure and validators in app.component.ts, and then there'd be less boilerplate throughout the template to declare bindings on everything. Let me know if I can help with this.

eliykat · 2024-10-30T02:08:37Z

ui/projects/setup/src/app/app.component.html

There is some strange responsive behaviour here on small screens:

Screen.Recording.2024-10-30.at.12.07.02.PM.mov

eliykat · 2024-10-30T04:09:10Z

ui/projects/setup/src/splunk/splunk.service.ts

+  private readonly globalNamespaceService = new SplunkJsServiceBuilder({
+    owner: "-",
+    app: "-",
+    sharing: "app",
+  });
+  private readonly bitwardenAppService;
+
+  constructor(config: AppConfig) {
+    this.bitwardenAppService = new SplunkJsServiceBuilder({
+      owner: "nobody",
+      app: config.appName,
+      sharing: "app",
+    });
+  }


Does the namespace distinguish between global Splunk configuration (e.g. indexes) and Bitwarden app configuration (e.g. client ID and secret)? That's what I get from the docs but I'm just confirming my own understanding. (maybe some jsdoc comments explaining that would also be useful)

eliykat · 2024-10-30T04:19:21Z

ui/projects/setup/src/splunk/bitwarden-splunk.service.ts

The different levels of abstraction between BitwardenSplunkService, SplunkService and SplunkJsServiceBuilder/SplunkJsProvider make sense, however the relationship between them isn't immediately clear. I suggest some jsdoc comments would really help, and could also explain the global SplunkJs variable which is also non-standard. e.g.

SplunkJsProvider: returns the global Splunk SDK object from the splunk-sdk package, injected via angular.json

SplunkJsServiceBuilder: instantiates a new Splunk service from the SDK using the provided namespace

SplunkService: a Typescript wrapper around the Splunk service, maintaining a similar interface

BitwardenSplunkService: a wrapper around SplunkService with a Bitwarden specific interface

ui/projects/setup/src/splunk/splunk-js.service.ts

package.sh

splunk_configuration.yml

eliykat · 2024-10-30T04:43:00Z

When running the app in development mode (npm run start), I get the following errors. It works fine when deployed though. I've set the properties in environment.development.ts. What am I missing?

Co-authored-by: Thomas Rittson <[email protected]>

mzieniukbw · 2024-11-24T23:39:43Z

When running the app in development mode (npm run start), I get the following errors. It works fine when deployed though. I've set the properties in environment.development.ts. What am I missing?

I have not documented it, but because splunk runs on different port than the development mode and CORS is enabled, splunk rejects any http calls when loading the bitwarden app configuration.
You need to add http://localhost:4200 into CORS policy and disable SSL. With docker, you can do that by creating a file like this one: https://github.com/bitwarden/splunk/blob/976a69b3b79c84292b1a514907d143d5228a5335/splunk_configuration.yml
and passing it to the splunk during first time startup:

splunk/docker-compose.yml

Line 14 in 976a69b

- ./splunk_configuration.yml:/tmp/defaults/default.yml

(version 9.1). If this is not first time setup, you have to stop the service and get rid of the volume, otherwise the CORS file settings won't be applied.

The http calls will still fail, since bitwarden event logs app is not installed in splunk. You can install it with: ./package.sh && ./deploy.sh splunk-splunk91-1

I was planning on adding this to the contributing docs if that works for you.

…ocs.

eliykat · 2024-11-25T04:15:49Z

The contributing docs sound like a good place to include this info. Thanks! Please re-request my review when your changes are ready 👍

Raised https://bitwarden.atlassian.net/browse/PM-15355 for unit test coverage

# Conflicts: # .github/workflows/build.yml # deploy.sh # package/appserver/static/javascript/setup_page.js # package/appserver/static/javascript/views/setup_page.js

ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


ui/package.json

@@ -0,0 +1,59 @@
+{


vgrassia

Build workflow changes look good to me.

eliykat · 2025-11-22T04:02:08Z

@mzieniukbw This is (finally!) in our regular sprint work so I will be taking it over. I will preserve your commits (and co-authorship) but I will open my own PR once it is ready for review by the team. That should also drop you off the Github notifications so we don't bother you. Thanks again for your work here!

mzieniukbw added 4 commits August 24, 2024 07:59

AC-3006: Splunk UI rewrite

7d65ace

AC-3006: Splunk UI rewrite part 2

15ed91f

AC-3006: Splunk UI rewrite part 3

976a69b

AC-3006: Splunk UI rewrite part 4

5782273

mzieniukbw added 13 commits September 8, 2024 00:41

AC-3006: build fix

bc39d92

AC-3006: build fix

6f51e0b

AC-3006: cleanup

31ddb84

AC-3006: build fix

89e2fb3

AC-3006: build fix

3959604

AC-3006: build simplification

dd9bd8f

AC-3006: Configuration typo

2a4bd06

AC-3006: Server Url fixes

e3cd954

AC-3006: Checkmarx violations fix

eb3ccf9

AC-3006: Moving hardcoded credentials to environment variables

fd69280

AC-3006: Fix <a> insecure target

6a41753

Merge branch 'refs/heads/main' into km/ac-3006/frontend-rewrite-in-an…

6eb416d

…gular # Conflicts: # README.md

AC-3006: Fix Server url parsing to include pathname for self-hosted

6afbe6d

mzieniukbw marked this pull request as ready for review October 7, 2024 09:54

mzieniukbw requested a review from a team October 7, 2024 09:54

mzieniukbw requested a review from a team as a code owner October 7, 2024 09:54

mzieniukbw requested review from addisonbeck and eliykat October 7, 2024 09:54

eliykat removed the request for review from addisonbeck October 8, 2024 06:43

eliykat requested changes Oct 30, 2024

View reviewed changes

eliykat linked an issue Oct 30, 2024 that may be closed by this pull request

Support for EU cloud instance #56

Open

mzieniukbw added 2 commits November 6, 2024 14:14

AC-3006: Add back the package validation in package.sh

23dc38e

AC-3006: Split SplunkJS service into type and builder

10f7c26

mzieniukbw requested a review from a team as a code owner November 6, 2024 14:23

mzieniukbw and others added 3 commits November 24, 2024 17:47

Update ui/projects/setup/src/app/app.component.html

aab1795

Co-authored-by: Thomas Rittson <[email protected]>

AC-3006: Server URL dropdown

f62090a

AC-3006: Fix start date label

6b5a85b

AC-3006: Remove README.md. Will document everything in contributing d…

c79c5ff

…ocs.

mzieniukbw added 9 commits November 25, 2024 10:31

AC-3006: Remove empty tests

5c281c4

Raised https://bitwarden.atlassian.net/browse/PM-15355 for unit test coverage

AC-3006: More restrictive scope access

743b79e

AC-3006: Less verbose logging

0338ce8

AC-3006: Less verbose logging part 2

5ab0484

AC-3006: Validator rename

ccbb26d

AC-3006: Autogenerated comments cleanup

3d64ff9

AC-3006: Locking npm dependencies

7ec66f2

AC-3006: Less verbose logging part 3

c7da3c6

Merge branch 'main' into km/ac-3006/frontend-rewrite-in-angular

4e7e598

# Conflicts: # .github/workflows/build.yml # deploy.sh # package/appserver/static/javascript/setup_page.js # package/appserver/static/javascript/views/setup_page.js

mzieniukbw requested a review from eliykat February 20, 2025 20:01

Merge branch 'main' into km/ac-3006/frontend-rewrite-in-angular

eb58b43

github-advanced-security bot found potential problems May 5, 2025

View reviewed changes

vgrassia approved these changes Nov 19, 2025

View reviewed changes

eliykat closed this Nov 22, 2025

eliykat mentioned this pull request Nov 26, 2025

[PM-13313] Angular rewrite of Splunk setup UI #130

Merged

[AC-3006] Splunk app UI rewrite #63

[AC-3006] Splunk app UI rewrite #63

Uh oh!

Conversation

mzieniukbw commented Sep 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎟️ Tracking

📔 Objective

ℹ️ Notes

📷 Screenshots

No errors:

Save success:

Validation issues:

⏰ Reminders before review

🦮 Reviewer guidelines

Uh oh!

github-actions bot commented Sep 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eliykat left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

eliykat Oct 30, 2024

Choose a reason for hiding this comment

Uh oh!

eliykat Oct 30, 2024

Choose a reason for hiding this comment

Uh oh!

eliykat Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eliykat Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

eliykat commented Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mzieniukbw commented Nov 24, 2024

Uh oh!

eliykat commented Nov 25, 2024

Uh oh!

Check failure

Check warning

Check warning

Check warning

Check warning

Check notice

Check warning

Check warning

Check warning

Check warning

vgrassia left a comment

Choose a reason for hiding this comment

Uh oh!

eliykat commented Nov 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mzieniukbw commented Sep 7, 2024 •

edited

Loading

github-actions bot commented Sep 7, 2024 •

edited

Loading

eliykat left a comment •

edited

Loading

eliykat Oct 30, 2024 •

edited

Loading

eliykat Oct 30, 2024 •

edited

Loading

eliykat commented Oct 30, 2024 •

edited

Loading