snow-flow 2.0.5 → 2.0.7

package/servicenow/widgets/openai_incident_classifier/style.css

@@ -0,0 +1,354 @@
+.openai-incident-classifier-widget {
+  padding: 20px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.widget-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.widget-header h3 {
+  margin: 0;
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.header-controls .btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+}
+
+.btn-primary:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+}
+
+.filters-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 6px;
+}
+
+.filters-section label {
+  font-weight: 500;
+  margin-bottom: 5px;
+  display: block;
+  color: #495057;
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border-color 0.3s ease;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.loading-overlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  margin: 20px 0;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #007bff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 15px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-message {
+  background: #f8d7da;
+  color: #721c24;
+  padding: 15px;
+  border-radius: 4px;
+  margin: 20px 0;
+  border: 1px solid #f5c6cb;
+}
+
+.error-message i {
+  margin-right: 8px;
+}
+
+.statistics-cards {
+  margin-bottom: 30px;
+}
+
+.stat-card {
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  height: 100px;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: #007bff;
+  margin-bottom: 8px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #6c757d;
+  font-weight: 500;
+}
+
+.charts-section {
+  margin-bottom: 30px;
+}
+
+.chart-container {
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.chart-container h4 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.data-table-section {
+  margin-bottom: 20px;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 15px;
+}
+
+.table th,
+.table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 14px;
+}
+
+.table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #495057;
+}
+
+.table tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.classification-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: white;
+  text-transform: uppercase;
+}
+
+.badge-hardware { background-color: #dc3545; }
+.badge-software { background-color: #007bff; }
+.badge-network { background-color: #28a745; }
+.badge-security { background-color: #fd7e14; }
+.badge-access { background-color: #6f42c1; }
+.badge-other { background-color: #6c757d; }
+
+.confidence-bar {
+  position: relative;
+  height: 20px;
+  background: #e9ecef;
+  border-radius: 10px;
+  overflow: hidden;
+  min-width: 80px;
+}
+
+.confidence-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #dc3545 0%, #ffc107 50%, #28a745 100%);
+  transition: width 0.3s ease;
+}
+
+.confidence-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+}
+
+.priority-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: white;
+}
+
+.priority-1 { background-color: #dc3545; }
+.priority-2 { background-color: #fd7e14; }
+.priority-3 { background-color: #ffc107; color: #333; }
+.priority-4 { background-color: #28a745; }
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
+}
+
+.pagination-section {
+  margin-top: 20px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.page-item {
+  margin: 0 2px;
+}
+
+.page-link {
+  display: block;
+  padding: 8px 12px;
+  text-decoration: none;
+  background: white;
+  border: 1px solid #dee2e6;
+  color: #007bff;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.page-link:hover {
+  background-color: #e9ecef;
+  color: #0056b3;
+}
+
+.page-item.active .page-link {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.page-item.disabled .page-link {
+  color: #6c757d;
+  pointer-events: none;
+  background-color: #fff;
+  border-color: #dee2e6;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -15px;
+}
+
+.col-md-3, .col-md-4 {
+  flex: 0 0 auto;
+  padding: 0 15px;
+}
+
+.col-md-3 {
+  width: 25%;
+}
+
+.col-md-4 {
+  width: 33.333333%;
+}
+
+@media (max-width: 768px) {
+  .col-md-3, .col-md-4 {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+  
+  .widget-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .header-controls {
+    margin-top: 10px;
+  }
+  
+  .table {
+    font-size: 12px;
+  }
+  
+  .table th,
+  .table td {
+    padding: 8px;
+  }
+}

package/servicenow/widgets/openai_incident_classifier/template.html

@@ -0,0 +1,167 @@
+<div class="openai-incident-classifier-widget">
+  <div class="widget-header">
+    <h3>OpenAI Incident Classification</h3>
+    <div class="header-controls">
+      <button class="btn btn-primary" ng-click="c.refreshData()" ng-disabled="c.isLoading">
+        <i class="fa fa-refresh" ng-class="{'fa-spin': c.isLoading}"></i>
+        Refresh
+      </button>
+    </div>
+  </div>
+
+  <div class="filters-section">
+    <div class="row">
+      <div class="col-md-4">
+        <label>Start Date:</label>
+        <input type="date" class="form-control" ng-model="c.dateRange.start" ng-change="c.onDateRangeChange()">
+      </div>
+      <div class="col-md-4">
+        <label>End Date:</label>
+        <input type="date" class="form-control" ng-model="c.dateRange.end" ng-change="c.onDateRangeChange()">
+      </div>
+      <div class="col-md-4">
+        <label>Priority:</label>
+        <select class="form-control" ng-model="c.selectedPriority" ng-change="c.onPriorityChange()">
+          <option value="">All Priorities</option>
+          <option value="1">Critical</option>
+          <option value="2">High</option>
+          <option value="3">Moderate</option>
+          <option value="4">Low</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="loading-overlay" ng-if="c.isLoading">
+    <div class="spinner"></div>
+    <p>Analyzing incidents with OpenAI...</p>
+  </div>
+
+  <div class="error-message" ng-if="c.error">
+    <i class="fa fa-exclamation-triangle"></i>
+    {{c.error}}
+  </div>
+
+  <div class="statistics-cards" ng-if="!c.isLoading && !c.error">
+    <div class="row">
+      <div class="col-md-3">
+        <div class="stat-card">
+          <div class="stat-value">{{c.statistics.totalIncidents}}</div>
+          <div class="stat-label">Total Incidents</div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="stat-card">
+          <div class="stat-value">{{c.statistics.classifiedIncidents}}</div>
+          <div class="stat-label">Classified</div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="stat-card">
+          <div class="stat-value">{{c.statistics.averageConfidence}}%</div>
+          <div class="stat-label">Avg Confidence</div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="stat-card">
+          <div class="stat-value">{{c.statistics.processingTime}}s</div>
+          <div class="stat-label">Processing Time</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="charts-section" ng-if="!c.isLoading && !c.error">
+    <div class="row">
+      <div class="col-md-4">
+        <div class="chart-container">
+          <h4>Classification Distribution</h4>
+          <canvas id="classificationChart" width="400" height="300"></canvas>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="chart-container">
+          <h4>Priority Distribution</h4>
+          <canvas id="priorityChart" width="400" height="300"></canvas>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="chart-container">
+          <h4>Trend Analysis</h4>
+          <canvas id="trendChart" width="400" height="300"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="data-table-section" ng-if="!c.isLoading && !c.error">
+    <h4>Incident Details</h4>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>Number</th>
+          <th>Short Description</th>
+          <th>AI Classification</th>
+          <th>Confidence</th>
+          <th>Priority</th>
+          <th>Created</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="incident in c.incidents">
+          <td>
+            <a href="/nav_to.do?uri=incident.do?sys_id={{incident.sys_id}}" target="_blank">
+              {{incident.number}}
+            </a>
+          </td>
+          <td>{{incident.short_description}}</td>
+          <td>
+            <span class="classification-badge" ng-class="'badge-' + incident.ai_classification.toLowerCase()">
+              {{incident.ai_classification}}
+            </span>
+          </td>
+          <td>
+            <div class="confidence-bar">
+              <div class="confidence-fill" style="width: {{incident.ai_confidence}}%"></div>
+              <span class="confidence-text">{{incident.ai_confidence}}%</span>
+            </div>
+          </td>
+          <td>
+            <span class="priority-badge" ng-class="'priority-' + incident.priority">
+              {{incident.priority_label}}
+            </span>
+          </td>
+          <td>{{incident.created_date | date:'short'}}</td>
+          <td>
+            <button class="btn btn-sm btn-secondary" ng-click="c.reclassifyIncident(incident)">
+              Reclassify
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="pagination-section" ng-if="!c.isLoading && !c.error && c.pagination.totalPages > 1">
+    <nav>
+      <ul class="pagination">
+        <li class="page-item" ng-class="{disabled: c.pagination.currentPage === 1}">
+          <a class="page-link" href="#" ng-click="c.goToPage(1)">First</a>
+        </li>
+        <li class="page-item" ng-class="{disabled: c.pagination.currentPage === 1}">
+          <a class="page-link" href="#" ng-click="c.goToPage(c.pagination.currentPage - 1)">Previous</a>
+        </li>
+        <li class="page-item" ng-repeat="page in c.pagination.pages" ng-class="{active: page === c.pagination.currentPage}">
+          <a class="page-link" href="#" ng-click="c.goToPage(page)">{{page}}</a>
+        </li>
+        <li class="page-item" ng-class="{disabled: c.pagination.currentPage === c.pagination.totalPages}">
+          <a class="page-link" href="#" ng-click="c.goToPage(c.pagination.currentPage + 1)">Next</a>
+        </li>
+        <li class="page-item" ng-class="{disabled: c.pagination.currentPage === c.pagination.totalPages}">
+          <a class="page-link" href="#" ng-click="c.goToPage(c.pagination.totalPages)">Last</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>

package/servicenow/widgets/openai_incident_classifier/widget.json

@@ -0,0 +1,86 @@
+{
+  "name": "openai_incident_classifier",
+  "title": "OpenAI Incident Classification Widget",
+  "description": "AI-powered incident classification widget with date range filtering, visual analytics, and real-time OpenAI integration for intelligent incident categorization and analysis",
+  "category": "incident",
+  "version": "1.0.0",
+  "author": "ServiceNow Multi-Agent System",
+  "created": "2025-07-17",
+  "last_modified": "2025-07-17",
+  "dependencies": {
+    "chart_js": "^3.9.1",
+    "angular": "^1.8.3",
+    "bootstrap": "^4.6.0"
+  },
+  "features": [
+    "OpenAI GPT-3.5-turbo integration for intelligent incident classification",
+    "Date range filtering with interactive date picker",
+    "Visual analytics with Chart.js (pie, bar, line charts)",
+    "Real-time incident classification with confidence scoring",
+    "Responsive design for mobile and desktop",
+    "Pagination for large datasets",
+    "Six classification categories: Hardware, Software, Network, Security, Access, Other",
+    "Fallback rule-based classification when OpenAI is unavailable",
+    "Manual reclassification functionality",
+    "Export capabilities for reporting"
+  ],
+  "configuration": {
+    "openai_api_key": {
+      "type": "system_property",
+      "key": "x_openai.api_key",
+      "required": true,
+      "description": "OpenAI API key for classification services"
+    },
+    "custom_fields": {
+      "incident_table": [
+        {
+          "name": "u_ai_classification",
+          "type": "string",
+          "max_length": 50,
+          "description": "AI-generated classification category"
+        },
+        {
+          "name": "u_ai_confidence",
+          "type": "decimal",
+          "description": "Confidence score (0-100) for AI classification"
+        },
+        {
+          "name": "u_ai_classification_date",
+          "type": "date_time",
+          "description": "Timestamp when AI classification was performed"
+        }
+      ]
+    }
+  },
+  "installation": {
+    "steps": [
+      "1. Configure OpenAI API key in System Properties (x_openai.api_key)",
+      "2. Create custom fields on incident table: u_ai_classification, u_ai_confidence, u_ai_classification_date",
+      "3. Deploy widget to ServiceNow instance",
+      "4. Add widget to Service Portal page using Designer",
+      "5. Test widget functionality and AI classification"
+    ]
+  },
+  "demo_data": {
+    "sample_incidents": [
+      {
+        "number": "INC0000001",
+        "short_description": "Laptop screen flickering",
+        "classification": "Hardware",
+        "confidence": 85
+      },
+      {
+        "number": "INC0000002", 
+        "short_description": "Email application crashing",
+        "classification": "Software",
+        "confidence": 92
+      },
+      {
+        "number": "INC0000003",
+        "short_description": "Cannot connect to VPN",
+        "classification": "Network",
+        "confidence": 78
+      }
+    ]
+  }
+}