Upgrade Vue

.github/workflows/pr.yaml

@@ -20,7 +20,7 @@ jobs:
       - name: Set up .NET
         uses: actions/setup-dotnet@v4
         with:
-          dotnet-version: '8.0.x'
+          dotnet-version: '9.0.x'
 
       - name: Build project
         run: dotnet build

README.md

@@ -4,73 +4,96 @@
 
 Join our community on [Discord](https://discord.gg/322AAB4xKx) for updates, support, and discussions.
 
-## Work in Progress
-
 All checked features are available in latest [NuGet](https://www.nuget.org/packages/ResQueue.MassTransit) version.
 
-### Brokers
-
-- [x] MassTransit
-  - [x] MassTransit.SqlTransport.PostgreSQL
-  - [x] MassTransit.SqlTransport.SqlServer
-
-### Features
-
-- [x] Tabular broker information view
-- [x] Tabular queues view
-- [x] Tabluar messages view
-  - [x] Requeue selected messages (transactional and non-transactional)
-  - [x] Requeue first N messages from the top of the queue
-  - [x] Delete selected messages (transactional and non-transactional)
-  - [x] Purge all messages
-  - [x] Single message view
-    - [x] Job state preview if present
-- [ ] Tabuar topics view
-- [ ] Tabular recurring jobs view
+## Get Started
 
-## Configuration
-
-To set up **ResQueue**, follow these simple steps:
-
-1. Install the latest version of `ResQueue.MassTransit` from NuGet to ensure compatibility with the official MassTransit updates:
+To set up **ResQueue** within your application, follow these simple steps:
 
 ```bash
 dotnet add package ResQueue.MassTransit
 ```
 
-2. In your .NET application, configure **ResQueue** in the `WebApplication` builder by calling `builder.Services.AddResQueue()` with your database connection details. This can be done as follows:
-
-> [!WARNING]
-> ResQueue configuration must follow the MassTransit setup, as MassTransit is a prerequisite for ResQueue to function correctly. Required MassTransit version is at least 8.3.2.
-
 ```csharp
 var builder = WebApplication.CreateBuilder(args);
 
 // MassTransit configuration...
+builder.Services.AddOptions<SqlTransportOptions>().Configure(options =>
+{
+    options.ConnectionString = "your_connection_string";
+});
 
-// ResQueue relays on MassTransit.SqlTransportOptions credentials
+// migrations
+
+// ResQueue uses SqlTransportOptions credentials internaly
 builder.Services.AddResQueue(o => o.SqlEngine = ResQueueSqlEngine.Postgres);
 
-// Make sure you add this line after MassTransit SQL migrations hosted service
+// The order of migrations is very important
+builder.Services.AddPostgresMigrationHostedService();
 builder.Services.AddResQueueMigrationsHostedService();
 
 var app = builder.Build();
 
 app.UseResQueue("resqueue", options =>
 {
-    // Recommended for production environments, add roles too
+    // Highly recommended for production
     options.RequireAuthorization();
 });
 
 app.Run();
 ```
 
-3. Once this is set up, your application should work right out of the box.
+> [!NOTE]
+> You can create a standalone web application and deploy it. Simply add ResQueue nuget package and initialize it. It does not need to be tightly integrated with your existing application. There is also docker image below.
+
+### Message Transformers
+
+Transformers allow you to modify messages on the backend. They are used to generate useful data for the response, such as assembling links to your monitoring system or other relevant resources.
+
+```csharp
+builder.Services.AddResQueue(opt =>
+{
+    // Option 1: Custom transformer class
+    opt.AddTransformer<CustomTransformer>();
+    // ...see below for implementation
+
+    // Option 2: Inline message transformer
+    opt.AppendAdditionalData = (messageDeliveryDto) =>
+    {
+        return new()
+        {
+            { "CurrentDateTime", DateTime.UtcNow.ToString() },
+            { "Custom", "Data" },
+            { "SimpleLink", @"<a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>This is a link</a>" }
+        };
+    };
+});
+
+// Option 1: The custom transformer class
+public class CustomTransformer(
+    IHttpContextAccessor httpContextAccessor
+) : AbstractMessageTransformer
+{
+    public override Task<MessageDeliveryDto> TransformAsync(MessageDeliveryDto message)
+    {
+        message.AdditionalData ??= new();
+
+        // Example using HTTP origin header
+        message.AdditionalData["HttpOrigin"] = httpContextAccessor.HttpContext.Request.Headers["Origin"];
+
+        return Task.FromResult(message);
+    }
+}
+```
+
+Additional data will appear in next format:
 
-**ResQueue** will handle all the configuration and integration with MassTransit for you, making it simple to manage your SQL transports.
+<img width="500" alt="image" src="https://github.com/user-attachments/assets/54e5c085-2d59-452c-8d06-d38208332a4f" />
+
+### Docker support
 
-### Docker (optional)
 Simplify your setup by running ResQueue in standalone mode with Docker. Get up and running effortlessly without additional configurations—just pull the container and you're ready to go.
+
 ```sh
 docker run -it --rm -p 8080:8080 -e ResQueue:SqlEngine=Postgres -e SqlTransport:ConnectionString="Host=host.docker.internal;Database=DATABASE;Username=USERNAME;Password=PASSWORD;" ghcr.io/filipbekic01/resqueue
 ```
@@ -83,4 +106,3 @@ Here's a quick preview of the ResQueue user interface, providing you with a glim
 <img width="1617" alt="image" src="https://github.com/user-attachments/assets/167b0ff2-0dea-4cec-94cf-8dab24ac9d40">
 <img width="1617" alt="image" src="https://github.com/user-attachments/assets/d7f894a2-7021-485f-9147-52694fa00524">
 <img width="1840" alt="image" src="https://github.com/user-attachments/assets/0ed693cb-49d6-40d1-85db-94daed81dad6">
-

backend/ResQueue/ResQueue.Standalone/ResQueue.Standalone.csproj

@@ -1,7 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
     <PropertyGroup>
-        <TargetFramework>net9.0</TargetFramework>
+        <TargetFrameworks>net8.0;net9.0</TargetFrameworks>
+        <LangVersion>13.0</LangVersion>
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
 
@@ -14,8 +15,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="MassTransit.SqlTransport.PostgreSQL" Version="8.3.2"/>
-        <PackageReference Include="MassTransit.SqlTransport.SqlServer" Version="8.3.2"/>
+        <PackageReference Include="MassTransit.SqlTransport.PostgreSQL" Version="8.3.4"/>
+        <PackageReference Include="MassTransit.SqlTransport.SqlServer" Version="8.3.4"/>
     </ItemGroup>
 
 </Project>

backend/ResQueue/WebSample/WebSample.csproj

@@ -1,6 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
     <PropertyGroup>
-        <TargetFramework>net9.0</TargetFramework>
+        <TargetFrameworks>net8.0;net9.0</TargetFrameworks>
         <LangVersion>13.0</LangVersion>
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>enable</Nullable>

frontend/.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

frontend/.prettierrc.json

@@ -1,9 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
-  "tabWidth": 2,
   "singleQuote": true,
-  "printWidth": 120,
-  "trailingComma": "none",
+  "printWidth": 100,
   "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"]
 }

frontend/eslint.config.js

@@ -0,0 +1,41 @@
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
+  skipFormatting,
+
+  {
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'vue/require-default-prop': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          args: 'after-used',
+          ignoreRestSiblings: false,
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+    languageOptions: {
+      globals: {
+        globalThis: false, // means it is not writeable
+      },
+    },
+  },
+]