Amazon Athena और Cube.js का उपयोग करके Nginx लॉग एनालिटिक्स

आमतौर पर, व्यावसायिक उत्पाद या रेडी-मेड ओपन-सोर्स विकल्प, जैसे प्रोमेथियस + ग्राफाना, का उपयोग नेग्नेक्स के संचालन की निगरानी और विश्लेषण करने के लिए किया जाता है। यह निगरानी या वास्तविक समय विश्लेषण के लिए एक अच्छा विकल्प है, लेकिन ऐतिहासिक विश्लेषण के लिए बहुत सुविधाजनक नहीं है। किसी भी लोकप्रिय संसाधन पर, nginx लॉग से डेटा की मात्रा तेजी से बढ़ रही है, और बड़ी मात्रा में डेटा का विश्लेषण करने के लिए, कुछ अधिक विशिष्ट का उपयोग करना तर्कसंगत है।

इस लेख में मैं आपको बताऊंगा कि आप कैसे उपयोग कर सकते हैं एथेना लॉग का विश्लेषण करने के लिए, Nginx को एक उदाहरण के रूप में लेते हुए, और मैं दिखाऊंगा कि ओपन-सोर्स क्यूब.जेएस फ्रेमवर्क का उपयोग करके इस डेटा से एक विश्लेषणात्मक डैशबोर्ड कैसे इकट्ठा किया जाए। यहाँ संपूर्ण समाधान आर्किटेक्चर है:

टीएल:डीआर;
तैयार डैशबोर्ड से लिंक करें.

जानकारी एकत्र करने के लिए हम इसका उपयोग करते हैं धाराप्रवाह, प्रसंस्करण के लिए - एडब्ल्यूएस किनेसिस डेटा फ़ायरहोज़ и एडब्ल्यूएस गोंद, भंडारण के लिए - एडब्ल्यूएस एस 3. इस बंडल का उपयोग करके, आप न केवल nginx लॉग, बल्कि अन्य ईवेंट, साथ ही अन्य सेवाओं के लॉग भी संग्रहीत कर सकते हैं। आप अपने स्टैक के लिए कुछ हिस्सों को समान भागों से बदल सकते हैं, उदाहरण के लिए, आप फ्लुएंट को दरकिनार करते हुए सीधे nginx से काइनेसिस में लॉग लिख सकते हैं, या इसके लिए लॉगस्टैश का उपयोग कर सकते हैं।

Nginx लॉग एकत्रित करना

डिफ़ॉल्ट रूप से, Nginx लॉग कुछ इस तरह दिखते हैं:

4/9/2019 12:58:17 PM1.1.1.1 - - [09/Apr/2019:09:58:17 +0000] "GET /sign-up HTTP/2.0" 200 9168 "https://example.com/sign-in" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" "-"
4/9/2019 12:58:17 PM1.1.1.1 - - [09/Apr/2019:09:58:17 +0000] "GET /sign-in HTTP/2.0" 200 9168 "https://example.com/sign-up" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36" "-"

उन्हें पार्स किया जा सकता है, लेकिन Nginx कॉन्फ़िगरेशन को ठीक करना बहुत आसान है ताकि यह JSON में लॉग तैयार कर सके:

log_format json_combined escape=json '{ "created_at": "$msec", '
            '"remote_addr": "$remote_addr", '
            '"remote_user": "$remote_user", '
            '"request": "$request", '
            '"status": $status, '
            '"bytes_sent": $bytes_sent, '
            '"request_length": $request_length, '
            '"request_time": $request_time, '
            '"http_referrer": "$http_referer", '
            '"http_x_forwarded_for": "$http_x_forwarded_for", '
            '"http_user_agent": "$http_user_agent" }';

access_log  /var/log/nginx/access.log  json_combined;

भंडारण के लिए S3

लॉग्स को स्टोर करने के लिए हम S3 का उपयोग करेंगे। यह आपको लॉग को एक ही स्थान पर संग्रहीत और विश्लेषण करने की अनुमति देता है, क्योंकि एथेना सीधे S3 में डेटा के साथ काम कर सकता है। बाद में लेख में मैं आपको बताऊंगा कि लॉग को सही तरीके से कैसे जोड़ा और संसाधित किया जाए, लेकिन पहले हमें S3 में एक साफ बाल्टी की आवश्यकता होगी, जिसमें और कुछ भी संग्रहीत नहीं किया जाएगा। यह पहले से विचार करने योग्य है कि आप किस क्षेत्र में अपना बकेट बनाएंगे, क्योंकि एथेना सभी क्षेत्रों में उपलब्ध नहीं है।

एथेना कंसोल में एक सर्किट बनाना

आइए लॉग के लिए एथेना में एक तालिका बनाएं। यदि आप काइनेसिस फ़ायरहोज़ का उपयोग करने की योजना बना रहे हैं तो यह लिखने और पढ़ने दोनों के लिए आवश्यक है। एथेना कंसोल खोलें और एक तालिका बनाएं:

SQL तालिका निर्माण

CREATE EXTERNAL TABLE `kinesis_logs_nginx`(
  `created_at` double, 
  `remote_addr` string, 
  `remote_user` string, 
  `request` string, 
  `status` int, 
  `bytes_sent` int, 
  `request_length` int, 
  `request_time` double, 
  `http_referrer` string, 
  `http_x_forwarded_for` string, 
  `http_user_agent` string)
ROW FORMAT SERDE 
  'org.apache.hadoop.hive.ql.io.orc.OrcSerde' 
STORED AS INPUTFORMAT 
  'org.apache.hadoop.hive.ql.io.orc.OrcInputFormat' 
OUTPUTFORMAT 
  'org.apache.hadoop.hive.ql.io.orc.OrcOutputFormat'
LOCATION
  's3://<YOUR-S3-BUCKET>'
TBLPROPERTIES ('has_encrypted_data'='false');

काइनेसिस फ़ायरहोज़ स्ट्रीम बनाना

काइनेसिस फ़ायरहोज़ Nginx से S3 में प्राप्त डेटा को चयनित प्रारूप में लिखेगा, इसे YYYY/MM/DD/HH प्रारूप में निर्देशिकाओं में विभाजित करेगा। डेटा पढ़ते समय यह काम आएगा। बेशक, आप fluentd से सीधे S3 पर लिख सकते हैं, लेकिन इस मामले में आपको JSON लिखना होगा, और फ़ाइलों के बड़े आकार के कारण यह अक्षम है। इसके अतिरिक्त, PrestoDB या एथेना का उपयोग करते समय, JSON सबसे धीमा डेटा प्रारूप है। तो काइनेसिस फ़ायरहोज़ कंसोल खोलें, "डिलीवरी स्ट्रीम बनाएं" पर क्लिक करें, "डिलीवरी" फ़ील्ड में "डायरेक्ट पुट" चुनें:

अगले टैब में, "रिकॉर्ड प्रारूप रूपांतरण" - "सक्षम" चुनें और रिकॉर्डिंग प्रारूप के रूप में "अपाचे ओआरसी" चुनें। कुछ शोध के अनुसार ओवेन ओ'मैली, यह PrestoDB और एथेना के लिए इष्टतम प्रारूप है। हम ऊपर बनाई गई तालिका को एक स्कीमा के रूप में उपयोग करते हैं। कृपया ध्यान दें कि आप काइनेसिस में कोई भी S3 स्थान निर्दिष्ट कर सकते हैं; तालिका से केवल स्कीमा का उपयोग किया जाता है। लेकिन यदि आप कोई भिन्न S3 स्थान निर्दिष्ट करते हैं, तो आप इस तालिका से इन रिकॉर्ड्स को नहीं पढ़ पाएंगे।

हम स्टोरेज और उस बकेट के लिए S3 का चयन करते हैं जिसे हमने पहले बनाया था। एडब्ल्यूएस ग्लू क्रॉलर, जिसके बारे में मैं थोड़ी देर बाद बात करूंगा, एस3 बाल्टी में उपसर्गों के साथ काम नहीं कर सकता, इसलिए इसे खाली छोड़ना महत्वपूर्ण है।

शेष विकल्प आपके लोड के आधार पर बदले जा सकते हैं; मैं आमतौर पर डिफ़ॉल्ट वाले का उपयोग करता हूं। ध्यान दें कि S3 संपीड़न उपलब्ध नहीं है, लेकिन ORC डिफ़ॉल्ट रूप से मूल संपीड़न का उपयोग करता है।

धाराप्रवाह

अब जब हमने लॉग संग्रहीत करने और प्राप्त करने को कॉन्फ़िगर कर लिया है, तो हमें भेजने को कॉन्फ़िगर करने की आवश्यकता है। हम इस्तेमाल करेंगे धाराप्रवाह, क्योंकि मुझे रूबी पसंद है, लेकिन आप लॉगस्टैश का उपयोग कर सकते हैं या सीधे किनेसिस पर लॉग भेज सकते हैं। फ्लुएंट सर्वर को कई तरीकों से लॉन्च किया जा सकता है, मैं आपको डॉकर के बारे में बताऊंगा क्योंकि यह सरल और सुविधाजनक है।

सबसे पहले, हमें fluent.conf कॉन्फ़िगरेशन फ़ाइल की आवश्यकता है। इसे बनाएं और स्रोत जोड़ें:

टाइप आगे
पोर्ट 24224
बाँध 0.0.0.0

अब आप फ़्लुएंट सर्वर प्रारंभ कर सकते हैं. यदि आपको अधिक उन्नत कॉन्फ़िगरेशन की आवश्यकता है, तो यहां जाएं डॉकर हब इसमें एक विस्तृत मार्गदर्शिका दी गई है, जिसमें आपकी छवि को कैसे संयोजित करना शामिल है।

$ docker run 
  -d 
  -p 24224:24224 
  -p 24224:24224/udp 
  -v /data:/fluentd/log 
  -v <PATH-TO-FLUENT-CONF>:/fluentd/etc fluentd 
  -c /fluentd/etc/fluent.conf
  fluent/fluentd:stable

यह कॉन्फ़िगरेशन पथ का उपयोग करता है /fluentd/log भेजने से पहले लॉग को कैश करने के लिए। आप इसके बिना काम कर सकते हैं, लेकिन फिर जब आप पुनः आरंभ करते हैं, तो आप कड़ी मेहनत के साथ कैश की गई सभी चीजें खो सकते हैं। आप किसी भी पोर्ट का उपयोग कर सकते हैं; 24224 डिफ़ॉल्ट फ़्लुएंटडी पोर्ट है।

अब जबकि हमारे पास फ़्लुएंट चल रहा है, हम वहां Nginx लॉग भेज सकते हैं। हम आमतौर पर Nginx को Docker कंटेनर में चलाते हैं, ऐसी स्थिति में Docker के पास fluentd के लिए एक देशी लॉगिंग ड्राइवर होता है:

$ docker run 
--log-driver=fluentd 
--log-opt fluentd-address=<FLUENTD-SERVER-ADDRESS>
--log-opt tag="{{.Name}}" 
-v /some/content:/usr/share/nginx/html:ro 
-d 
nginx

यदि आप Nginx को अलग तरीके से चलाते हैं, तो आप लॉग फ़ाइलों का उपयोग कर सकते हैं, फ़्लुएंटडी के पास है फ़ाइल टेल प्लगइन.

आइए ऊपर कॉन्फ़िगर की गई लॉग पार्सिंग को फ़्लुएंट कॉन्फ़िगरेशन में जोड़ें:

<filter YOUR-NGINX-TAG.*>
  @type parser
  key_name log
  emit_invalid_record_to_error false
  <parse>
    @type json
  </parse>
</filter>

और काइनेसिस का उपयोग करके लॉग भेज रहे हैं काइनेसिस फ़ायरहोज़ प्लगइन:

<match YOUR-NGINX-TAG.*>
    @type kinesis_firehose
    region region
    delivery_stream_name <YOUR-KINESIS-STREAM-NAME>
    aws_key_id <YOUR-AWS-KEY-ID>
    aws_sec_key <YOUR_AWS-SEC_KEY>
</match>

एथेना

यदि आपने सब कुछ सही ढंग से कॉन्फ़िगर किया है, तो थोड़ी देर के बाद (डिफ़ॉल्ट रूप से, काइनेसिस रिकॉर्ड हर 10 मिनट में एक बार डेटा प्राप्त करता है) आपको S3 में लॉग फ़ाइलें देखनी चाहिए। काइनेसिस फ़ायरहोज़ के "मॉनिटरिंग" मेनू में आप देख सकते हैं कि S3 में कितना डेटा रिकॉर्ड किया गया है, साथ ही त्रुटियाँ भी। काइनेसिस भूमिका के लिए S3 बकेट तक लेखन पहुंच देना न भूलें। यदि काइनेसिस कुछ पार्स नहीं कर सका, तो यह त्रुटियों को उसी बकेट में जोड़ देगा।

अब आप एथेना में डेटा देख सकते हैं. आइए नवीनतम अनुरोध खोजें जिनके लिए हमने त्रुटियाँ लौटाईं:

SELECT * FROM "db_name"."table_name" WHERE status > 499 ORDER BY created_at DESC limit 10;

प्रत्येक अनुरोध के लिए सभी रिकॉर्ड स्कैन करना

अब हमारे लॉग संसाधित हो गए हैं और ORC में S3 में संग्रहीत, संपीड़ित और विश्लेषण के लिए तैयार हैं। काइनेसिस फ़ायरहोज़ ने उन्हें प्रत्येक घंटे के लिए निर्देशिकाओं में भी व्यवस्थित किया। हालाँकि, जब तक तालिका को विभाजित नहीं किया जाता है, एथेना दुर्लभ अपवादों के साथ, हर अनुरोध पर सभी समय का डेटा लोड करेगा। यह दो कारणों से एक बड़ी समस्या है:

• डेटा की मात्रा लगातार बढ़ रही है, जिससे क्वेरीज़ धीमी हो रही हैं;
• एथेना को स्कैन किए गए डेटा की मात्रा के आधार पर बिल किया जाता है, जिसमें प्रति अनुरोध न्यूनतम 10 एमबी होता है।

इसे ठीक करने के लिए, हम AWS ग्लू क्रॉलर का उपयोग करते हैं, जो S3 में डेटा को क्रॉल करेगा और विभाजन की जानकारी ग्लू मेटास्टोर में लिखेगा। यह हमें एथेना से पूछताछ करते समय विभाजन को फ़िल्टर के रूप में उपयोग करने की अनुमति देगा, और यह केवल क्वेरी में निर्दिष्ट निर्देशिकाओं को स्कैन करेगा।

अमेज़ॅन ग्लू क्रॉलर की स्थापना

अमेज़ॅन ग्लू क्रॉलर S3 बकेट में सभी डेटा को स्कैन करता है और विभाजन के साथ तालिकाएँ बनाता है। AWS ग्लू कंसोल से एक ग्लू क्रॉलर बनाएं और एक बकेट जोड़ें जहां आप डेटा संग्रहीत करते हैं। आप एक क्रॉलर का उपयोग कई बकेट के लिए कर सकते हैं, ऐसी स्थिति में यह निर्दिष्ट डेटाबेस में उन नामों के साथ तालिकाएँ बनाएगा जो बकेट के नामों से मेल खाते हैं। यदि आप इस डेटा का नियमित रूप से उपयोग करने की योजना बना रहे हैं, तो अपनी आवश्यकताओं के अनुरूप क्रॉलर के लॉन्च शेड्यूल को कॉन्फ़िगर करना सुनिश्चित करें। हम सभी टेबलों के लिए एक क्रॉलर का उपयोग करते हैं, जो हर घंटे चलता है।

विभाजित टेबल

क्रॉलर के पहले लॉन्च के बाद, प्रत्येक स्कैन की गई बकेट के लिए तालिकाएँ सेटिंग्स में निर्दिष्ट डेटाबेस में दिखाई देनी चाहिए। एथेना कंसोल खोलें और Nginx लॉग के साथ तालिका ढूंढें। आइए कुछ पढ़ने का प्रयास करें:

SELECT * FROM "default"."part_demo_kinesis_bucket"
WHERE(
  partition_0 = '2019' AND
  partition_1 = '04' AND
  partition_2 = '08' AND
  partition_3 = '06'
  );

यह क्वेरी 6 अप्रैल, 7 को सुबह 8 बजे से 2019 बजे के बीच प्राप्त सभी रिकॉर्ड का चयन करेगी। लेकिन एक गैर-विभाजित तालिका से पढ़ने की तुलना में यह कितना अधिक कुशल है? आइए उन्हीं रिकॉर्ड्स को ढूंढें और चुनें, उन्हें टाइमस्टैम्प द्वारा फ़िल्टर करें:

केवल एक सप्ताह के लॉग के साथ डेटासेट पर 3.59 सेकंड और 244.34 मेगाबाइट डेटा। आइए विभाजन द्वारा फ़िल्टर करने का प्रयास करें:

थोड़ा तेज़, लेकिन सबसे महत्वपूर्ण - केवल 1.23 मेगाबाइट डेटा! यदि मूल्य निर्धारण में प्रति अनुरोध न्यूनतम 10 मेगाबाइट न हो तो यह बहुत सस्ता होगा। लेकिन यह अभी भी बहुत बेहतर है, और बड़े डेटासेट पर अंतर कहीं अधिक प्रभावशाली होगा।

Cube.js का उपयोग करके एक डैशबोर्ड बनाना

डैशबोर्ड को असेंबल करने के लिए, हम Cube.js विश्लेषणात्मक ढांचे का उपयोग करते हैं। इसमें बहुत सारे कार्य हैं, लेकिन हम दो में रुचि रखते हैं: विभाजन फ़िल्टर और डेटा पूर्व-एकत्रीकरण का स्वचालित रूप से उपयोग करने की क्षमता। यह डेटा स्कीमा का उपयोग करता है डेटा स्कीमा, SQL उत्पन्न करने और डेटाबेस क्वेरी निष्पादित करने के लिए जावास्क्रिप्ट में लिखा गया है। हमें केवल यह इंगित करने की आवश्यकता है कि डेटा स्कीमा में विभाजन फ़िल्टर का उपयोग कैसे करें।

आइए एक नया Cube.js एप्लिकेशन बनाएं। चूँकि हम पहले से ही AWS स्टैक का उपयोग कर रहे हैं, इसलिए तैनाती के लिए लैम्ब्डा का उपयोग करना तर्कसंगत है। यदि आप हेरोकू या डॉकर में क्यूब.जेएस बैकएंड को होस्ट करने की योजना बना रहे हैं तो आप पीढ़ी के लिए एक्सप्रेस टेम्पलेट का उपयोग कर सकते हैं। दस्तावेज़ दूसरों का वर्णन करता है होस्टिंग के तरीके.

$ npm install -g cubejs-cli
$ cubejs create nginx-log-analytics -t serverless -d athena

क्यूब.जेएस में डेटाबेस एक्सेस को कॉन्फ़िगर करने के लिए पर्यावरण चर का उपयोग किया जाता है। जनरेटर एक .env फ़ाइल बनाएगा जिसमें आप अपनी कुंजियाँ निर्दिष्ट कर सकते हैं एथेना.

अब हमें चाहिए डेटा स्कीमा, जिसमें हम सटीक रूप से इंगित करेंगे कि हमारे लॉग कैसे संग्रहीत हैं। वहां आप यह भी निर्दिष्ट कर सकते हैं कि डैशबोर्ड के लिए मीट्रिक की गणना कैसे करें।

निर्देशिका में schema, एक फ़ाइल बनाएं Logs.js. यहाँ nginx के लिए एक उदाहरण डेटा मॉडल है:

आचार संहिता

const partitionFilter = (from, to) => `
    date(from_iso8601_timestamp(${from})) <= date_parse(partition_0 || partition_1 || partition_2, '%Y%m%d') AND
    date(from_iso8601_timestamp(${to})) >= date_parse(partition_0 || partition_1 || partition_2, '%Y%m%d')
    `

cube(`Logs`, {
  sql: `
  select * from part_demo_kinesis_bucket
  WHERE ${FILTER_PARAMS.Logs.createdAt.filter(partitionFilter)}
  `,

  measures: {
    count: {
      type: `count`,
    },

    errorCount: {
      type: `count`,
      filters: [
        { sql: `${CUBE.isError} = 'Yes'` }
      ]
    },

    errorRate: {
      type: `number`,
      sql: `100.0 * ${errorCount} / ${count}`,
      format: `percent`
    }
  },

  dimensions: {
    status: {
      sql: `status`,
      type: `number`
    },

    isError: {
      type: `string`,
      case: {
        when: [{
          sql: `${CUBE}.status >= 400`, label: `Yes`
        }],
        else: { label: `No` }
      }
    },

    createdAt: {
      sql: `from_unixtime(created_at)`,
      type: `time`
    }
  }
});

यहां हम वेरिएबल का उपयोग कर रहे हैं FILTER_PARAMSविभाजन फ़िल्टर के साथ SQL क्वेरी उत्पन्न करने के लिए।

हम वे मेट्रिक्स और पैरामीटर भी सेट करते हैं जिन्हें हम डैशबोर्ड पर प्रदर्शित करना चाहते हैं और पूर्व-एकत्रीकरण निर्दिष्ट करते हैं। Cube.js पूर्व-एकत्रित डेटा के साथ अतिरिक्त तालिकाएँ बनाएगा और डेटा आते ही स्वचालित रूप से अपडेट हो जाएगा। इससे न केवल प्रश्नों की गति तेज हो जाती है, बल्कि एथेना का उपयोग करने की लागत भी कम हो जाती है।

आइए इस जानकारी को डेटा स्कीमा फ़ाइल में जोड़ें:

preAggregations: {
  main: {
    type: `rollup`,
    measureReferences: [count, errorCount],
    dimensionReferences: [isError, status],
    timeDimensionReference: createdAt,
    granularity: `day`,
    partitionGranularity: `month`,
    refreshKey: {
      sql: FILTER_PARAMS.Logs.createdAt.filter((from, to) => 
        `select
           CASE WHEN from_iso8601_timestamp(${to}) + interval '3' day > now()
           THEN date_trunc('hour', now()) END`
      )
    }
  }
}

हम इस मॉडल में निर्दिष्ट करते हैं कि उपयोग किए गए सभी मैट्रिक्स के लिए डेटा को पूर्व-एकत्रित करना और महीने के अनुसार विभाजन का उपयोग करना आवश्यक है। पूर्व-एकत्रीकरण विभाजन डेटा संग्रह और अद्यतन करने में काफी तेजी ला सकता है।

अब हम डैशबोर्ड को असेंबल कर सकते हैं!

Cube.js बैकएंड प्रदान करता है बाकी एपीआई और लोकप्रिय फ्रंट-एंड फ्रेमवर्क के लिए क्लाइंट लाइब्रेरी का एक सेट। डैशबोर्ड बनाने के लिए हम क्लाइंट के रिएक्ट संस्करण का उपयोग करेंगे। Cube.js केवल डेटा प्रदान करता है, इसलिए हमें विज़ुअलाइज़ेशन लाइब्रेरी की आवश्यकता होगी - मुझे यह पसंद है रिचार्ज करता है, लेकिन आप कोई भी उपयोग कर सकते हैं।

Cube.js सर्वर अनुरोध स्वीकार करता है JSON प्रारूप, जो आवश्यक मेट्रिक्स निर्दिष्ट करता है। उदाहरण के लिए, यह गणना करने के लिए कि Nginx ने दिन में कितनी त्रुटियाँ दीं, आपको निम्नलिखित अनुरोध भेजने की आवश्यकता है:

{
  "measures": ["Logs.errorCount"],
  "timeDimensions": [
    {
      "dimension": "Logs.createdAt",
      "dateRange": ["2019-01-01", "2019-01-07"],
      "granularity": "day"
    }
  ]
}

आइए NPM के माध्यम से Cube.js क्लाइंट और रिएक्ट घटक लाइब्रेरी स्थापित करें:

$ npm i --save @cubejs-client/core @cubejs-client/react

हम घटकों का आयात करते हैं cubejs и QueryRendererडेटा डाउनलोड करने और डैशबोर्ड एकत्र करने के लिए:

डैशबोर्ड कोड

import React from 'react';
import { LineChart, Line, XAxis, YAxis } from 'recharts';
import cubejs from '@cubejs-client/core';
import { QueryRenderer } from '@cubejs-client/react';

const cubejsApi = cubejs(
  'YOUR-CUBEJS-API-TOKEN',
  { apiUrl: 'http://localhost:4000/cubejs-api/v1' },
);

export default () => {
  return (
    <QueryRenderer
      query={{
        measures: ['Logs.errorCount'],
        timeDimensions: [{
            dimension: 'Logs.createdAt',
            dateRange: ['2019-01-01', '2019-01-07'],
            granularity: 'day'
        }]
      }}
      cubejsApi={cubejsApi}
      render={({ resultSet }) => {
        if (!resultSet) {
          return 'Loading...';
        }

        return (
          <LineChart data={resultSet.rawData()}>
            <XAxis dataKey="Logs.createdAt"/>
            <YAxis/>
            <Line type="monotone" dataKey="Logs.errorCount" stroke="#8884d8"/>
          </LineChart>
        );
      }}
    />
  )
}

डैशबोर्ड स्रोत यहां उपलब्ध हैं कोडसैंडबॉक्स.

स्रोत: www.habr.com