@zintrust/workers 0.1.27

package/src/ui/utils/jsonValidator.js

@@ -0,0 +1,444 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/**
+ * JSON Validation Utilities
+ * Client-side validation using backend schemas
+ */
+
+/**
+ * Validation result interface
+ */
+const createValidationResult = (isValid, errors = [], warnings = []) => ({
+  isValid,
+  errors: [...errors],
+  warnings: [...warnings],
+});
+
+/**
+ * Worker validation schemas (mirroring backend)
+ */
+const WorkerValidationSchemas = {
+  create: {
+    required: ['name', 'queueName', 'processor', 'version'],
+    fields: {
+      name: {
+        type: 'string',
+        minLength: 3,
+        maxLength: 50,
+        pattern: /^[a-zA-Z0-9_-]+$/,
+      },
+      queueName: {
+        type: 'string',
+        minLength: 3,
+        maxLength: 50,
+        pattern: /^[a-zA-Z0-9_-]+$/,
+      },
+      processor: {
+        type: 'string',
+        minLength: 1,
+        maxLength: 255,
+      },
+      version: {
+        type: 'string',
+        pattern: /^\d+\.\d+\.\d+$/,
+      },
+      driver: {
+        type: 'string',
+        allowedValues: ['database', 'redis', 'memory'],
+        optional: true,
+      },
+      concurrency: {
+        type: 'number',
+        min: 1,
+        max: 1000,
+        optional: true,
+      },
+      autoStart: {
+        type: 'boolean',
+        optional: true,
+      },
+      infrastructure: {
+        type: 'object',
+        optional: true,
+        fields: {
+          driver: {
+            type: 'string',
+            allowedValues: ['database', 'redis', 'memory'],
+          },
+          persistence: {
+            type: 'object',
+            optional: true,
+            fields: {
+              driver: {
+                type: 'string',
+                allowedValues: ['memory', 'redis', 'database'],
+              },
+            },
+          },
+          deadLetterQueue: {
+            type: 'object',
+            optional: true,
+            fields: {
+              enabled: {
+                type: 'boolean',
+              },
+              maxRetries: {
+                type: 'number',
+                min: 0,
+                max: 10,
+              },
+            },
+          },
+          autoScaler: {
+            type: 'object',
+            optional: true,
+            fields: {
+              enabled: {
+                type: 'boolean',
+              },
+              minWorkers: {
+                type: 'number',
+                min: 0,
+                integer: true,
+              },
+              maxWorkers: {
+                type: 'number',
+                min: 1,
+                integer: true,
+              },
+            },
+          },
+        },
+      },
+      features: {
+        type: 'object',
+        optional: true,
+        fields: {
+          clustering: { type: 'boolean' },
+          metrics: { type: 'boolean' },
+          autoScaling: { type: 'boolean' },
+          circuitBreaker: { type: 'boolean' },
+          deadLetterQueue: { type: 'boolean' },
+          resourceMonitoring: { type: 'boolean' },
+          compliance: { type: 'boolean' },
+          observability: { type: 'boolean' },
+          plugins: { type: 'boolean' },
+          versioning: { type: 'boolean' },
+          datacenterOrchestration: { type: 'boolean' },
+        },
+      },
+      datacenter: {
+        type: 'object',
+        optional: true,
+        fields: {
+          primaryRegion: {
+            type: 'string',
+            minLength: 3,
+            maxLength: 20,
+            pattern: /^[a-z0-9-]+$/,
+          },
+          secondaryRegions: {
+            type: 'array',
+            optional: true,
+            itemType: 'string',
+          },
+          affinityRules: {
+            type: 'object',
+            optional: true,
+            fields: {
+              preferLocal: { type: 'boolean' },
+              maxLatency: { type: 'number', min: 0 },
+              avoidRegions: {
+                type: 'array',
+                optional: true,
+                itemType: 'string',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+/**
+ * Validate string field against schema constraints
+ */
+const validateStringField = (value, fieldSchema, fieldName, path, errors) => {
+  if (fieldSchema.minLength && value.length < fieldSchema.minLength) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} must be at least ${fieldSchema.minLength} characters long`,
+      code: 'STRING_TOO_SHORT',
+    });
+  }
+
+  if (fieldSchema.maxLength && value.length > fieldSchema.maxLength) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} must be at most ${fieldSchema.maxLength} characters long`,
+      code: 'STRING_TOO_LONG',
+    });
+  }
+
+  if (fieldSchema.pattern && !fieldSchema.pattern.test(value)) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} format is invalid`,
+      code: 'INVALID_FORMAT',
+    });
+  }
+};
+
+/**
+ * Validate number field against schema constraints
+ */
+const validateNumberField = (value, fieldSchema, fieldName, path, errors) => {
+  if (fieldSchema.min !== undefined && value < fieldSchema.min) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} must be at least ${fieldSchema.min}`,
+      code: 'NUMBER_TOO_SMALL',
+    });
+  }
+
+  if (fieldSchema.max !== undefined && value > fieldSchema.max) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} must be at most ${fieldSchema.max}`,
+      code: 'NUMBER_TOO_LARGE',
+    });
+  }
+
+  if (fieldSchema.integer && !Number.isInteger(value)) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} must be a whole number (integer)`,
+      code: 'NOT_INTEGER',
+    });
+  }
+};
+
+/**
+ * Validate array field against schema constraints
+ */
+const validateArrayField = (value, fieldSchema, fieldName, path, errors, warnings) => {
+  if (fieldSchema.itemType) {
+    value.forEach((item, index) => {
+      const itemResult = validateField(
+        item,
+        { type: fieldSchema.itemType },
+        `${fieldName}[${index}]`,
+        `${path || fieldName}[${index}]`
+      );
+      if (!itemResult.isValid) {
+        errors.push(...itemResult.errors);
+      }
+      warnings.push(...itemResult.warnings);
+    });
+  }
+};
+
+/**
+ * Validate object field against schema constraints
+ */
+const validateObjectField = (value, fieldSchema, fieldName, path, errors, warnings) => {
+  if (fieldSchema.fields) {
+    Object.keys(fieldSchema.fields).forEach((subFieldName) => {
+      const subFieldSchema = fieldSchema.fields[subFieldName];
+      const subPath = path ? `${path}.${subFieldName}` : subFieldName;
+      const subResult = validateField(value[subFieldName], subFieldSchema, subFieldName, subPath);
+      if (!subResult.isValid) {
+        errors.push(...subResult.errors);
+      }
+      warnings.push(...subResult.warnings);
+    });
+  }
+};
+
+/**
+ * Check if field meets basic requirements (required/optional)
+ */
+const validateBasicRequirements = (value, fieldSchema, fieldName, path) => {
+  const errors = [];
+  const warnings = [];
+
+  // Check if field is required and missing
+  if (fieldSchema.required && (value === undefined || value === null)) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} is required`,
+      code: 'REQUIRED_FIELD',
+    });
+    return { shouldStop: true, result: createValidationResult(false, errors, warnings) };
+  }
+
+  // Skip validation if field is optional and not provided
+  if (fieldSchema.optional && (value === undefined || value === null)) {
+    return { shouldStop: true, result: createValidationResult(true, errors, warnings) };
+  }
+
+  return { shouldStop: false, result: null };
+};
+
+/**
+ * Validate field type
+ */
+const validateFieldType = (value, fieldSchema, fieldName, path) => {
+  const errors = [];
+  const warnings = [];
+
+  if (fieldSchema.type) {
+    const expectedType = fieldSchema.type;
+    const actualType = Array.isArray(value) ? 'array' : typeof value;
+
+    if (actualType !== expectedType) {
+      errors.push({
+        path: path || fieldName,
+        message: `${fieldName} must be of type ${expectedType}, got ${actualType}`,
+        code: 'INVALID_TYPE',
+      });
+      return { isValid: false, errors, warnings };
+    }
+  }
+
+  return { isValid: true, errors, warnings };
+};
+
+/**
+ * Perform type-specific validations
+ */
+const performTypeSpecificValidations = (value, fieldSchema, fieldName, path, errors, warnings) => {
+  if (typeof value === 'string') {
+    validateStringField(value, fieldSchema, fieldName, path, errors);
+  } else if (typeof value === 'number') {
+    validateNumberField(value, fieldSchema, fieldName, path, errors);
+  }
+
+  // Allowed values validation
+  if (fieldSchema.allowedValues && !fieldSchema.allowedValues.includes(value)) {
+    errors.push({
+      path: path || fieldName,
+      message: `${fieldName} must be one of: ${fieldSchema.allowedValues.join(', ')}`,
+      code: 'INVALID_VALUE',
+    });
+  }
+
+  // Array validation
+  if (Array.isArray(value)) {
+    validateArrayField(value, fieldSchema, fieldName, path, errors, warnings);
+  }
+
+  // Object validation
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+    validateObjectField(value, fieldSchema, fieldName, path, errors, warnings);
+  }
+};
+
+/**
+ * Validate a single field against schema
+ */
+const validateField = (value, fieldSchema, fieldName, path = '') => {
+  const errors = [];
+  const warnings = [];
+
+  // Check basic requirements (required/optional)
+  const basicCheck = validateBasicRequirements(value, fieldSchema, fieldName, path);
+  if (basicCheck.shouldStop) {
+    return basicCheck.result;
+  }
+
+  // Validate field type
+  const typeCheck = validateFieldType(value, fieldSchema, fieldName, path);
+  if (!typeCheck.isValid) {
+    return createValidationResult(false, typeCheck.errors, typeCheck.warnings);
+  }
+
+  // Perform type-specific validations
+  performTypeSpecificValidations(value, fieldSchema, fieldName, path, errors, warnings);
+
+  return createValidationResult(errors.length === 0, errors, warnings);
+};
+
+/**
+ * Validate worker data against schema
+ */
+const validateWorkerData = (data, schemaName = 'create') => {
+  const schema = WorkerValidationSchemas[schemaName];
+  if (!schema) {
+    return createValidationResult(
+      false,
+      [],
+      [
+        {
+          path: 'schema',
+          message: `Unknown validation schema: ${schemaName}`,
+          code: 'UNKNOWN_SCHEMA',
+        },
+      ]
+    );
+  }
+
+  const errors = [];
+  const warnings = [];
+
+  // Check required fields
+  schema.required.forEach((fieldName) => {
+    if (!(fieldName in data)) {
+      errors.push({
+        path: fieldName,
+        message: `${fieldName} is required`,
+        code: 'REQUIRED_FIELD',
+      });
+    }
+  });
+
+  // Validate all fields
+  Object.keys(data).forEach((fieldName) => {
+    const fieldSchema = schema.fields[fieldName];
+    if (fieldSchema) {
+      const result = validateField(data[fieldName], fieldSchema, fieldName);
+      if (!result.isValid) {
+        errors.push(...result.errors);
+      }
+      warnings.push(...result.warnings);
+    } else {
+      warnings.push({
+        path: fieldName,
+        message: `Unknown field: ${fieldName}`,
+        code: 'UNKNOWN_FIELD',
+      });
+    }
+  });
+
+  return createValidationResult(errors.length === 0, errors, warnings);
+};
+
+/**
+ * Validate JSON string
+ */
+const validateJsonString = (jsonString) => {
+  try {
+    const data = JSON.parse(jsonString);
+    return {
+      isValid: true,
+      data,
+      error: null,
+    };
+  } catch (error) {
+    return {
+      isValid: false,
+      data: null,
+      error: error.message,
+    };
+  }
+};
+
+/**
+ * Sealed namespace for JSON validation utilities
+ */
+export const JsonValidator = Object.freeze({
+  validateWorkerData,
+  validateJsonString,
+  schemas: WorkerValidationSchemas,
+  createValidationResult,
+});

package/src/ui/workers/index.html

@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ZinTrust Workers Dashboard</title>
+    <link rel="stylesheet" href="workers/styles.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <div class="header-top">
+          <div style="display: flex; align-items: center; gap: 16px">
+            <div class="logo-frame">
+              <img src="/zintrust.svg" alt="ZinTrust" class="logo-img" />
+            </div>
+            <h1>ZinTrust Workers</h1>
+          </div>
+          <div class="header-actions">
+            <button id="theme-toggle" class="theme-toggle">
+              <svg class="icon" viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="5" />
+                <path
+                  d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+                />
+              </svg>
+              Theme
+            </button>
+            <button id="auto-refresh-toggle" class="btn" onclick="toggleAutoRefresh()">
+              <svg id="auto-refresh-icon" class="icon" viewBox="0 0 24 24">
+                <polygon points="5 3 19 12 5 21 5 3" />
+              </svg>
+              <span id="auto-refresh-label">Auto Refresh</span>
+            </button>
+            <button class="btn" onclick="fetchData()">
+              <svg class="icon" viewBox="0 0 24 24">
+                <path d="M23 4v6h-6" />
+                <path d="M1 20v-6h6" />
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+              </svg>
+              Refresh
+            </button>
+            <button class="btn btn-primary" onclick="showAddWorkerModal()">
+              <svg class="icon" viewBox="0 0 24 24">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Add Worker
+            </button>
+          </div>
+        </div>
+
+        <div class="nav-bar">
+          <nav class="nav-links">
+            <a href="/queue-monitor" class="nav-link">Queue Monitor</a>
+            <a href="/telemetry" class="nav-link">Telemetry</a>
+            <a href="/metrics" class="nav-link">Metrics</a>
+          </nav>
+        </div>
+
+        <div class="filters-bar">
+          <div class="filter-group">
+            <span>Status:</span>
+            <select id="status-filter">
+              <option value="">All Status</option>
+              <option value="running">Running</option>
+              <option value="stopped">Stopped</option>
+              <option value="error">Error</option>
+              <option value="paused">Paused</option>
+            </select>
+          </div>
+          <div class="filter-group">
+            <span>Driver:</span>
+            <select id="driver-filter">
+              <option value="">All Drivers</option>
+            </select>
+          </div>
+          <div class="filter-group">
+            <span>Sort:</span>
+            <select id="sort-select">
+              <option value="name">Sort by Name</option>
+              <option value="status">Sort by Status</option>
+              <option value="driver">Sort by Driver</option>
+              <option value="health">Sort by Health</option>
+              <option value="version">Sort by Version</option>
+              <option value="processed">Sort by Performance</option>
+            </select>
+          </div>
+          <div style="flex-grow: 1"></div>
+          <div class="search-box">
+            <svg class="search-icon" viewBox="0 0 24 24">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+            <input type="text" id="search-input" placeholder="Search workers..." />
+          </div>
+        </div>
+      </div>
+
+      <div id="loading" style="text-align: center; padding: 40px; color: var(--muted)">
+        <div>Loading workers...</div>
+      </div>
+
+      <div
+        id="error"
+        style="display: none; text-align: center; padding: 40px; color: var(--danger)"
+      >
+        <div>Failed to load workers data</div>
+        <button class="btn" onclick="fetchData()" style="margin-top: 16px">Retry</button>
+      </div>
+
+      <div id="workers-content" style="display: none">
+        <div class="summary-bar" id="queue-summary">
+          <div class="summary-item">
+            <span class="summary-label">Queue Driver</span>
+            <span class="summary-value" id="queue-driver">-</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Queues</span>
+            <span class="summary-value" id="queue-total">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Jobs</span>
+            <span class="summary-value" id="queue-jobs">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Processing</span>
+            <span class="summary-value" id="queue-processing">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Failed</span>
+            <span class="summary-value" id="queue-failed">0</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Drivers</span>
+            <div class="drivers-list" id="drivers-list"></div>
+          </div>
+        </div>
+        <div class="table-container">
+          <div class="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 250px">Worker</th>
+                  <th style="width: 120px">Status</th>
+                  <th style="width: 120px">Health</th>
+                  <th style="width: 100px">Driver</th>
+                  <th style="width: 100px">Version</th>
+                  <th style="width: 320px">Performance</th>
+                  <th style="width: 180px">Actions</th>
+                </tr>
+              </thead>
+              <tbody id="workers-tbody">
+                <!-- Workers will be populated here -->
+              </tbody>
+            </table>
+          </div>
+
+          <div class="pagination">
+            <div class="pagination-info" id="pagination-info">Showing 0-0 of 0 workers</div>
+            <div class="pagination-controls">
+              <button class="page-btn" id="prev-btn" onclick="loadPage('prev')" disabled>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="15 18 9 12 15 6"></polyline>
+                </svg>
+              </button>
+              <div id="page-numbers" style="display: flex; gap: 8px"></div>
+              <button class="page-btn" id="next-btn" onclick="loadPage('next')" disabled>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+              </button>
+
+              <div class="page-size-selector">
+                <span>Show:</span>
+                <select id="limit-select" onchange="changeLimit(this.value)">
+                  <option value="10">10</option>
+                  <option value="25">25</option>
+                  <option value="50">50</option>
+                  <option value="100">100</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="workers/main.js"></script>
+  </body>
+</html>