add monitoring/alerting and third party service plugin

static/app.js

@@ -8,6 +8,9 @@ import './plugins/database.js';
 import './plugins/messageQueue.js';
 import './plugins/cdn.js';
 import './plugins/microservice.js';
+import './plugins/datapipeline.js';
+import './plugins/monitorAlerting.js';
+import './plugins/thirdPartyService.js';
 import { PluginRegistry } from './pluginRegistry.js';
 
 export class CanvasApp {

static/game.html

@@ -810,19 +810,59 @@
                     <label>API Version</label>
                     <input type="text" name="apiVersion" />
                   </div>
+                  <div id="datapipeline-group" data-group="pipeline-group" class="prop-group">
+                    <label>Batch Size</label>
+                    <input type="number" name="batchSize" min="1" />
+
+                    <label>Schedule</label>
+                    <select name="schedule">
+                      <option value="realtime">Real-time</option>
+                      <option value="hourly">Hourly</option>
+                      <option value="daily">Daily</option>
+                      <option value="weekly">Weekly</option>
+                    </select>
+
+                    <label>Transformations</label>
+                    <select name="transformations">
+                      <option value="normalize">Normalize</option>
+                      <option value="dedupe">Dedupe</option>
+                      <option value="filter">Filter</option>
+                      <option value="enrich">Enrich</option>
+                      <option value="aggregate">Aggregate</option>
+                    </select>
+
+                    <label>Destination</label>
+                    <input type="text" name="destination" placeholder="e.g. data warehouse" />
+                  </div>
+                  <div id="monitor-group" data-group="monitor-group" class="prop-group">
+  <label>Monitoring Tool</label>
+  <select name="tool">
+    <option value="Prometheus">Prometheus</option>
+    <option value="Datadog">Datadog</option>
+    <option value="New Relic">New Relic</option>
+    <option value="Grafana Cloud">Grafana Cloud</option>
+  </select>
+
+  <label>Alert Threshold (%)</label>
+  <input type="number" name="alertThreshold" min="0" max="100" />
+</div>
+                  <div id="third-party-group" data-group="third-party-group" class="prop-group">
+  <label>Provider</label>
+  <input type="text" name="provider" />
+
+  <label>Latency (ms)</label>
+  <input type="number" name="latency" min="0" />
+</div>
+
 
                   <!-- PUT NEW COMPONENTS BEFORE THIS BUTTON -->
                   <button id="node-props-save" disabled>save</button>
                 </div>
                 <div id="bottom-panel">
                   <button id="run-button" disabled>Test Design</button>
-
                 </div>
-
               </div>
-
             </div>
-
             <!-- Metrics-->
             <div id="content3" class="tab-content">This is Tab 3 content.</div>
           </div>

static/plugins/datapipeline.js

@@ -0,0 +1,11 @@
+import { PluginRegistry } from "../pluginRegistry.js";
+
+PluginRegistry.register('data pipeline', {
+    type: 'data pipeline',
+    label: 'Data Pipeline',
+    props: [
+        { name: 'label', type: 'string', default: 'pipeline', group: 'label-group' },
+        { name: 'batchSize', type: 'number', default: 500, group: 'pipeline-group' },
+        { name: 'transformation', type: 'string', default: 'map', group: 'pipeline-group' }
+    ]
+});

static/plugins/monitorAlerting.js

@@ -0,0 +1,11 @@
+import { PluginRegistry } from "../pluginRegistry.js";
+
+PluginRegistry.register('monitoring/alerting', {
+    type: 'monitoring/alerting',
+    label: 'Monitoring/Alerting',
+    props: [
+        { name: 'label', type: 'string', default: 'monitor', group: 'label-group' },
+        { name: 'tool', type: 'string', default: 'Prometheus', group: 'monitor-group' },
+        { name: 'alertThreshold', type: 'number', default: 80, group: 'monitor-group' }
+    ]
+});

static/plugins/thirdPartyService.js

@@ -0,0 +1,11 @@
+import { PluginRegistry } from "../pluginRegistry.js";
+
+PluginRegistry.register('third party service', {
+    type: 'third party service',
+    label: 'Third-Party Service',
+    props: [
+        { name: 'label', type: 'string', default: 'third party service', group: 'label-group' },
+        { name: 'provider', type: 'string', default: 'Stripe', group: 'third-party-group' },
+        { name: 'latency', type: 'number', default: 200, group: 'third-party-group' }
+    ]
+});