{"id":15637592,"url":"https://github.com/dsuryd/dotnetify-pulse","last_synced_at":"2025-04-09T18:17:34.109Z","repository":{"id":133278434,"uuid":"222571322","full_name":"dsuryd/dotNetify-Pulse","owner":"dsuryd","description":"Customizable real-time monitoring for .NET Core services.","archived":false,"fork":false,"pushed_at":"2020-07-23T17:17:41.000Z","size":803,"stargazers_count":127,"open_issues_count":2,"forks_count":22,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T18:17:29.923Z","etag":null,"topics":["aspnetcore","logging","monitoring","realtime"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsuryd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-19T00:20:35.000Z","updated_at":"2025-01-28T05:33:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ad0a17e-f8ab-406b-aa92-ac30bd255bde","html_url":"https://github.com/dsuryd/dotNetify-Pulse","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsuryd%2FdotNetify-Pulse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsuryd%2FdotNetify-Pulse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsuryd%2FdotNetify-Pulse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsuryd%2FdotNetify-Pulse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsuryd","download_url":"https://codeload.github.com/dsuryd/dotNetify-Pulse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085321,"owners_count":21045139,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspnetcore","logging","monitoring","realtime"],"created_at":"2024-10-03T11:12:14.056Z","updated_at":"2025-04-09T18:17:34.084Z","avatar_url":"https://github.com/dsuryd.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg width=\"300px\" src=\"http://dotnetify.net/content/images/dotnetify-logo.png\"\u003e\u003c/p\u003e\n\n[![NuGet version](https://badge.fury.io/nu/DotNetify.Pulse.svg)](https://badge.fury.io/nu/DotNetify.Pulse)\n\n## DotNetify-Pulse\n\nAdds an endpoint to any .NET Core service that opens a customizable web view to monitor the service's log activities and resource usage in real-time. \n\n### How to Install\n\n[[Link to demo project]](https://github.com/dsuryd/dotNetify-Pulse/tree/master/Demo/NetCoreService)\n\n##### 1. Install the nuget package:\n```\ndotnet add package DotNetify.Pulse\n```\n\n##### 2. Configure the services and the pipeline in `Startup.cs`:\n```csharp\nusing DotNetify;\nusing DotNetify.Pulse;\n...\n\npublic void ConfigureServices(IServiceCollection services)\n{\n   services.AddSignalR();\n   services.AddDotNetify();\n   services.AddDotNetifyPulse();\n}\n\npublic void Configure(IApplicationBuilder app)\n{\n   app.UseWebSockets();\n   app.UseDotNetify();\n   app.UseDotNetifyPulse();\n\n   // .NET Core 2.x only:\n   app.UseSignalR(config =\u003e config.MapDotNetifyHub());\n   \n   // .NET Core 3.x only:\n   app.UseRouting();\n   app.UseEndpoints(endpoints =\u003e endpoints.MapHub\u003cDotNetifyHub\u003e(\"/dotnetify\"));\n}\n```\n\n##### 3. Build, then open your web browser to `\u003cservice-base-url\u003e/pulse`. You should see this page:\n\u003e *Internet connection is required for loading the UI scripts from public CDN.*\n\n\u003cimg src=\"https://github.com/dsuryd/dotNetify-Pulse/blob/master/Demo/pulse-demo.gif\" /\u003e\n\n##### 4. If you plan to use `dotnet publish`:\n- copy the folder 'pulse-ui' from the build output to your project.\n- set the build action of the files in the folder to `Content` and `Copy if newer`.\n\n### How to Customize\n\n#### Overview \nBefore you proceed, let's first do a bit of a dive on how this thing works. \n\nThis library uses:\n- SignalR to push data from your service to the web browser.\n- [DotNetify](https://dotnetify.net) to write the code using MVVM + Reactive programming.\n- [DotNetify-Elements](https://dotnetify.net/elements) to provide HTML5 web components for the view.\n\nThere is a dotNetify view model in this repo named `PulseVM`. This class is the one that pushes data to the browser view, and it only does that when the page is opened.  \n\nWhen it's instantiated, it will look for service objects that implements *IPulseDataProvider* and passes its own instance to the interface's `Configure` method so that service object can add properties for the data stream.  The view model then regularly checks for data updates on those properties and push them to the browser.\n\nOn the browser side, when it sends the `/pulse` HTTP request, this library's middleware intercepts it and returns `index.html`.  You can find it and other static files in your service's output directory under `pulse-ui` folder.  The HTML markup uses highly specialized web components from dotNetify-Elements to display data grid and charts and for layout.  These components are designed so that they can be configured from the server-side view model and maintain connection with the data properties to auto-update, without requiring client-side scripting.\n\n#### Steps\n\n##### 1. Create your custom data provider class that implements _IPulseDataProvider_.\n\nFor example, let's create a simple clock provider:\n- Use `AddProperty` to add a new observable property named \"Clock\" to the Pulse view model, with an initial value.\n- Create a timer to emit new value every second.\n\n```csharp\nusing DotNetify.Pulse;\nusing System.Reactive.Linq;\n...\npublic class ClockProvider : IPulseDataProvider\n{\n   public IDisposable Configure(PulseVM pulseVM, out OnPushUpdate onPushUpdate)\n   {\n      var clockProperty = pulseVM.AddProperty\u003cstring\u003e(\"Clock\", DateTime.Now.ToString(\"hh:mm:ss\"));\n\n      onPushUpdate = _ =\u003e { };  // No op.\n\n      return Observable\n         .Interval(TimeSpan.FromSeconds(1))\n         .Subscribe(_ =\u003e clockProperty.OnNext(DateTime.Now.ToString(\"hh:mm:ss\")));\n   }\n}\n```\n\n##### 2. Register the provider in the startup's _ConfigureServices_.\n\n```csharp\nservices.TryAddEnumerable(ServiceDescriptor.Singleton\u003cIPulseDataProvider, ClockProvider\u003e());\n```\n\n##### 3. Add a web component to the static HTML page and associate it with the property.\n\nTo do this, you will override the default HTML fragment file called _\"section.html\"_.  Notice that when you build your service, the library creates in your project a folder called _\"pulse-ui\"_ which contains _\"section_template.html\"_.  \n\n- Copy and paste this folder to a new one and name it *_\"custom-pulse-ui\"_*.\n- Rename _\"section_template.html\"_ to *_\"section.html\"_*.\n- Right-click on _\"section.html\"_, select Properties, and set the \"Copy to Output Directory\" to *_\"Copy if newer\"_*.\n- Edit the html file and insert the following:\n```html\n...\n\u003cd-frame\u003e\n   \u003cdiv class=\"card\" style=\"width: 200px; font-size: 40px\"\u003e\n      \u003cd-element id=\"Clock\"\u003e\u003c/d-element\u003e\n   \u003c/div\u003e\n...\n```\n\u003e Read the [dotNetify-Elements documentation](https://dotnetify.net/elements) for info on all the available web components.\n\n##### 4.  Configure the location of the custom UI folder in the startup's _Configure_.\n\n```csharp\napp.UseDotNetifyPulse(config =\u003e config.UIPath = Directory.GetCurrentDirectory() + \"\\\\custom-pulse-ui\");\n```\n\n##### 5. (Optional) Add to application settings.\n\nIf you want to pass application settings through `appsettings.json`, you can include your custom configuration in the _\"DotNetifyPulse\"_ configuration section, under `\"Providers\"`.  For example:\n```json\n{\n  \"DotNetifyPulse\": {\n    \"Providers\": {\n       \"ClockProvider\": {\n          \"TimeFormat\": \"hh:mm:ss\"\n       }\n    }\n  }\n}\n```\nTo read the settings, inject `PulseConfiguration` type in your constructor, and use the `GetProvider` method:\n```csharp\ninternal class ClockSettings\n{\n   public string TimeFormat { get; set; }\n}\n\npublic ClockProvider(PulseConfiguration config)\n{\n   var settings = config.GetProvider\u003cClockSettings\u003e(\"ClockProvider\");\n}\n```\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsuryd%2Fdotnetify-pulse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsuryd%2Fdotnetify-pulse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsuryd%2Fdotnetify-pulse/lists"}