커스텀 패널

{
  "type": "sophonz-kpi-panel",
  "title": "",
  "datasource": {
    "type": "grafana-clickhouse-datasource",
    "uid": "clickhouse"
  },
  "targets": [
    {
      "refId": "A",
      "format": 1,
      "rawSql": "SELECT uniqCombined64(sessionID) AS v\nFROM sophonz_traces.distributed_sophonz_index_v2\nWHERE $__timeFilter(timestamp)\n  AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace)\n  AND $__conditionalAll(serviceName IN (${serviceName:singlequote}), $serviceName)"
    },
    {
      "refId": "B",
      "format": 1,
      "rawSql": "SELECT uniqCombined64(sessionID) AS v\nFROM sophonz_traces.distributed_sophonz_index_v2\nWHERE timestamp >= $__fromTime - ($__toTime - $__fromTime) AND timestamp < $__fromTime\n  AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace)\n  AND $__conditionalAll(serviceName IN (${serviceName:singlequote}), $serviceName)"
    },
    {
      "refId": "C",
      "format": 1,
      "rawSql": "SELECT $__timeInterval(timestamp) AS t, uniqCombined64(sessionID) AS v\nFROM sophonz_traces.distributed_sophonz_index_v2\nWHERE $__timeFilter(timestamp)\n  AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace)\n  AND $__conditionalAll(serviceName IN (${serviceName:singlequote}), $serviceName)\nGROUP BY t\nORDER BY t"
    }
  ],
  "options": {
    "color": "#015AE4",
    "comparisonLabel": "vs 이전 기간",
    "decimals": 0,
    "label": "세션 수",
    "previousRefId": "B",
    "sentiment": "neutral",
    "seriesRefId": "C",
    "showSparkline": true,
    "unit": "short",
    "valueRefId": "A"
  },
  "gridPos": {
    "h": 5,
    "w": 4,
    "x": 0,
    "y": 10
  }
}

{
  "type": "sophonz-session-timeline-panel",
  "title": "Session Timeline",
  "datasource": {
    "type": "grafana-clickhouse-datasource",
    "uid": "clickhouse"
  },
  "targets": [
    {
      "refId": "A",
      "format": 1,
      "editorType": "sql",
      "queryType": "table",
      "rawSql": "SELECT lower(if(appSpanType != '', appSpanType, stringTagMap['span.type'])) AS spanType, timestamp AS startTime, if(httpURL != '', httpURL, if(appScreenName != '', appScreenName, name)) AS title, durationNano, hasError, (webVersion = '') AS isNative, spanID AS spanId, traceID AS traceId, '${spanId}' AS _selspan FROM sophonz_traces.distributed_sophonz_index_v2 WHERE $__timeFilter(timestamp) AND sessionID = '${sessionId}' AND isRootSpan = true AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace) ORDER BY timestamp"
    }
  ],
  "options": {
    "durationField": "durationNano",
    "fullCategories": true,
    "hasErrorField": "hasError",
    "isNativeField": "isNative",
    "showHeader": true,
    "spanIdField": "spanId",
    "spanTypeField": "spanType",
    "timeField": "startTime",
    "title": "",
    "titleField": "title",
    "traceIdField": "traceId"
  },
  "gridPos": {
    "h": 10,
    "w": 24,
    "x": 0,
    "y": 0
  }
}

{
  "type": "sophonz-session-timeline-graph-panel",
  "title": "화면 흐름 (Screen Flow)",
  "datasource": {
    "type": "grafana-clickhouse-datasource",
    "uid": "clickhouse"
  },
  "targets": [
    {
      "refId": "A",
      "format": 1,
      "editorType": "sql",
      "queryType": "table",
      "rawSql": "SELECT timestamp AS time, if(appScreenName != '', appScreenName, stringTagMap['screen.name']) AS screen, lower(if(appSpanType != '', appSpanType, stringTagMap['span.type'])) AS spanType, hasError, if(httpURL != '', httpURL, if(appScreenName != '', appScreenName, name)) AS title, if(stringTagMap['http.url'] != '', stringTagMap['http.url'], httpURL) AS url, responseStatusCode AS statusCode, if(stringTagMap['target_element_text'] != '', stringTagMap['target_element_text'], stringTagMap['target_element_tag']) AS elementName, spanID AS spanId, traceID AS traceId, '${spanId}' AS _selSpan, '${traceId}' AS _selTrace FROM sophonz_traces.distributed_sophonz_index_v2 WHERE $__timeFilter(timestamp) AND sessionID = '${sessionId}' AND isRootSpan = true AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace) ORDER BY timestamp"
    }
  ],
  "options": {
    "direction": "LR",
    "eventField": "elementName",
    "hasErrorField": "hasError",
    "screenField": "screen",
    "showHeader": true,
    "spanIdField": "spanId",
    "spanTypeField": "spanType",
    "statusField": "statusCode",
    "timeField": "time",
    "title": "",
    "titleField": "title",
    "traceIdField": "traceId",
    "urlField": "url"
  },
  "gridPos": {
    "h": 13,
    "w": 12,
    "x": 0,
    "y": 10
  }
}

{
  "type": "sophonz-service-flow-panel",
  "title": "Service Flow",
  "datasource": {
    "type": "grafana-clickhouse-datasource",
    "uid": "clickhouse"
  },
  "targets": [
    {
      "refId": "A",
      "format": 1,
      "editorType": "sql",
      "rawSql": "SELECT\n  spanID, parentSpanID, serviceName, name, appSpanType, clientPlatform,\n  durationNano, hasError, traceID\nFROM sophonz_traces.distributed_sophonz_index_v2\nWHERE $__timeFilter(timestamp)\n  AND sessionID = '${sessionId}'\n  AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace)\nORDER BY timestamp ASC\nLIMIT 20000"
    }
  ],
  "options": {
    "direction": "LR",
    "durationField": "",
    "expandAll": false,
    "hasErrorField": "",
    "nameField": "",
    "parentSpanIdField": "",
    "serviceField": "",
    "showHeader": true,
    "spanIdField": "",
    "spanTypeField": "",
    "title": ""
  },
  "gridPos": {
    "h": 13,
    "w": 12,
    "x": 12,
    "y": 10
  }
}

{
  "type": "sophonz-requestmap-panel",
  "title": "리퀘스트 히트맵 (Request Map)",
  "datasource": {
    "type": "grafana-clickhouse-datasource",
    "uid": "clickhouse"
  },
  "targets": [
    {
      "refId": "A",
      "format": 1,
      "editorType": "sql",
      "queryType": "table",
      "rawSql": "SELECT timestamp AS time, durationNano / 1e6 AS responseTime, responseStatusCode AS statusCode FROM sophonz_traces.distributed_sophonz_index_v2 WHERE $__timeFilter(timestamp) AND lower(if(appSpanType != '', appSpanType, stringTagMap['span.type'])) IN ('xhr','fetch') AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace) AND $__conditionalAll(serviceName IN (${serviceName:singlequote}), $serviceName) ORDER BY timestamp LIMIT 100000"
    }
  ],
  "options": {
    "binMs": 0,
    "countField": "",
    "responseTimeField": "responseTime",
    "showHeader": true,
    "statusField": "statusCode",
    "timeField": "time",
    "title": ""
  },
  "gridPos": {
    "h": 10,
    "w": 12,
    "x": 12,
    "y": 0
  }
}

{
  "type": "sophonz-dynamicxhr-panel",
  "title": "DynamicXHR Monitor",
  "datasource": {
    "type": "grafana-clickhouse-datasource",
    "uid": "clickhouse"
  },
  "targets": [
    {
      "refId": "A",
      "format": 1,
      "editorType": "sql",
      "queryType": "table",
      "rawSql": "SELECT countIf(lower(if(appSpanType != '', appSpanType, stringTagMap['span.type'])) IN ('xhr','fetch')) AS total, countIf(lower(if(appSpanType != '', appSpanType, stringTagMap['span.type'])) IN ('xhr','fetch') AND (responseStatusCode = 0 OR responseStatusCode >= 400)) AS error, uniqCombined64(sessionID) AS session FROM sophonz_traces.distributed_sophonz_index_v2 WHERE $__timeFilter(timestamp) AND $__conditionalAll(serviceNamespace IN (${serviceNamespace:singlequote}), $serviceNamespace) AND $__conditionalAll(serviceName IN (${serviceName:singlequote}), $serviceName)"
    }
  ],
  "options": {
    "bounceDirection": "horizontal",
    "errorField": "error",
    "sessionField": "session",
    "showCounts": true,
    "showHeader": true,
    "showPercent": true,
    "title": "",
    "totalField": "total"
  },
  "gridPos": {
    "h": 10,
    "w": 12,
    "x": 0,
    "y": 0
  }
}