Amazon Athena এবং Cube.js ব্যবহার করে Nginx লগ বিশ্লেষণ

সাধারণত, বাণিজ্যিক পণ্য বা রেডিমেড ওপেন সোর্স বিকল্প, যেমন Prometheus + Grafana, Nginx-এর ক্রিয়াকলাপ নিরীক্ষণ এবং বিশ্লেষণ করতে ব্যবহৃত হয়। এটি পর্যবেক্ষণ বা রিয়েল-টাইম বিশ্লেষণের জন্য একটি ভাল বিকল্প, কিন্তু ঐতিহাসিক বিশ্লেষণের জন্য খুব সুবিধাজনক নয়। যেকোনো জনপ্রিয় সম্পদে, nginx লগ থেকে ডেটার পরিমাণ দ্রুত বৃদ্ধি পাচ্ছে, এবং বিপুল পরিমাণ ডেটা বিশ্লেষণ করার জন্য, আরও বিশেষ কিছু ব্যবহার করা যৌক্তিক।

এই নিবন্ধে আমি আপনাকে বলব কিভাবে আপনি ব্যবহার করতে পারেন গ্রীক পুরাণের দেবী লগ বিশ্লেষণ করতে, Nginx-কে একটি উদাহরণ হিসাবে নিচ্ছি, এবং আমি দেখাব কিভাবে ওপেন-সোর্স cube.js ফ্রেমওয়ার্ক ব্যবহার করে এই ডেটা থেকে একটি বিশ্লেষণাত্মক ড্যাশবোর্ড একত্র করতে হয়। এখানে সম্পূর্ণ সমাধান আর্কিটেকচার আছে:

TL:DR;
সমাপ্ত ড্যাশবোর্ড লিঙ্ক.

তথ্য সংগ্রহ করতে আমরা ব্যবহার করি সাবলীল, প্রক্রিয়াকরণের জন্য - AWS Kinesis ডেটা ফায়ারহোজ и এডাব্লুএস আঠালো, সঞ্চয়ের জন্য - এডাব্লুএস এস 3. এই বান্ডিলটি ব্যবহার করে, আপনি শুধুমাত্র nginx লগগুলিই নয়, অন্যান্য ইভেন্টগুলির পাশাপাশি অন্যান্য পরিষেবাগুলির লগগুলিও সংরক্ষণ করতে পারেন। আপনি আপনার স্ট্যাকের জন্য অনুরূপ অংশগুলির সাথে কিছু অংশ প্রতিস্থাপন করতে পারেন, উদাহরণস্বরূপ, আপনি nginx থেকে সরাসরি কাইনেসিসে লগ লিখতে পারেন, fluentd বাইপাস করে, অথবা এর জন্য logstash ব্যবহার করতে পারেন।

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-এ ডেটা নিয়ে কাজ করতে পারে৷ পরে নিবন্ধে আমি আপনাকে বলব কীভাবে লগগুলি সঠিকভাবে যুক্ত এবং প্রক্রিয়া করতে হয়, তবে প্রথমে আমাদের এস 3 এ একটি পরিষ্কার বালতি দরকার, যেখানে অন্য কিছুই সংরক্ষণ করা হবে না। আপনি কোন অঞ্চলে আপনার বালতি তৈরি করবেন তা আগে থেকেই বিবেচনা করা মূল্যবান, কারণ অ্যাথেনা সমস্ত অঞ্চলে উপলব্ধ নয়।

এথেনা কনসোলে একটি সার্কিট তৈরি করা হচ্ছে

লগের জন্য এথেনায় একটি টেবিল তৈরি করা যাক। আপনি যদি Kinesis Firehose ব্যবহার করার পরিকল্পনা করেন তবে লেখা এবং পড়া উভয়ের জন্যই এটি প্রয়োজন। এথেনা কনসোল খুলুন এবং একটি টেবিল তৈরি করুন:

এসকিউএল টেবিল তৈরি

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');

কাইনেসিস ফায়ারহোজ স্ট্রীম তৈরি করা

Kinesis Firehose নির্বাচিত বিন্যাসে Nginx থেকে S3 এ প্রাপ্ত ডেটা লিখবে, এটিকে YYYY/MM/DD/HH বিন্যাসে ডিরেক্টরিতে ভাগ করে। ডেটা পড়ার সময় এটি কাজে আসবে। আপনি অবশ্যই, fluentd থেকে সরাসরি S3-এ লিখতে পারেন, কিন্তু এই ক্ষেত্রে আপনাকে JSON লিখতে হবে, এবং ফাইলের বড় আকারের কারণে এটি অদক্ষ। উপরন্তু, PrestoDB বা Athena ব্যবহার করার সময়, JSON হল সবচেয়ে ধীরগতির ডেটা বিন্যাস। তাই Kinesis Firehose কনসোল খুলুন, "ডেলিভারি স্ট্রীম তৈরি করুন" এ ক্লিক করুন, "ডেলিভারি" ক্ষেত্রে "সরাসরি PUT" নির্বাচন করুন:

পরবর্তী ট্যাবে, "রেকর্ড ফর্ম্যাট রূপান্তর" - "সক্ষম" নির্বাচন করুন এবং রেকর্ডিং ফর্ম্যাট হিসাবে "Apache ORC" নির্বাচন করুন৷ কিছু গবেষণা অনুযায়ী ওয়েন ও'ম্যালি, এটি PrestoDB এবং Athena-এর জন্য সর্বোত্তম বিন্যাস। আমরা উপরে তৈরি টেবিলটি স্কিমা হিসাবে ব্যবহার করি। অনুগ্রহ করে মনে রাখবেন আপনি কাইনেসিস-এ যেকোন S3 অবস্থান নির্দিষ্ট করতে পারেন; টেবিল থেকে শুধুমাত্র স্কিমা ব্যবহার করা হয়। কিন্তু যদি আপনি একটি ভিন্ন S3 অবস্থান উল্লেখ করেন, তাহলে আপনি এই টেবিল থেকে এই রেকর্ডগুলি পড়তে পারবেন না।

আমরা স্টোরেজের জন্য S3 নির্বাচন করি এবং বালতিটি যা আমরা আগে তৈরি করেছি। Aws Glue Crawler, যেটা নিয়ে আমি একটু পরে কথা বলব, S3 বালতিতে উপসর্গ দিয়ে কাজ করতে পারে না, তাই এটি খালি রাখা গুরুত্বপূর্ণ।

আপনার লোডের উপর নির্ভর করে অবশিষ্ট বিকল্পগুলি পরিবর্তন করা যেতে পারে; আমি সাধারণত ডিফল্টগুলি ব্যবহার করি। মনে রাখবেন যে S3 কম্প্রেশন উপলব্ধ নয়, তবে ORC ডিফল্টরূপে নেটিভ কম্প্রেশন ব্যবহার করে।

সাবলীল

এখন যেহেতু আমরা লগ সংরক্ষণ এবং গ্রহণ করার কনফিগার করেছি, আমাদের পাঠানো কনফিগার করতে হবে। আমরা ব্যবহার করবো সাবলীল, কারণ আমি রুবিকে ভালোবাসি, কিন্তু আপনি লগস্ট্যাশ ব্যবহার করতে পারেন বা সরাসরি কাইনেসিসে লগ পাঠাতে পারেন। Fluentd সার্ভারটি বিভিন্ন উপায়ে চালু করা যেতে পারে, আমি আপনাকে ডকার সম্পর্কে বলব কারণ এটি সহজ এবং সুবিধাজনক।

প্রথমত, আমাদের fluent.conf কনফিগারেশন ফাইল দরকার। এটি তৈরি করুন এবং উত্স যোগ করুন:

আদর্শ অগ্রবর্তী
পোর্ট 24224
আবদ্ধ 0.0.0.0

এখন আপনি Fluentd সার্ভার শুরু করতে পারেন। আপনার যদি আরও উন্নত কনফিগারেশনের প্রয়োজন হয় তবে যান ডকার হাব আপনার ইমেজ কিভাবে একত্রিত করতে সহ একটি বিস্তারিত গাইড আছে।

$ 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 হল ডিফল্ট Fluentd পোর্ট।

এখন যেহেতু আমাদের Fluentd চলছে, আমরা সেখানে Nginx লগ পাঠাতে পারি। আমরা সাধারণত একটি ডকার কন্টেইনারে Nginx চালাই, এই ক্ষেত্রে ডকারের 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 ভিন্নভাবে চালান, আপনি লগ ফাইল ব্যবহার করতে পারেন, Fluentd আছে ফাইল টেল প্লাগইন.

ফ্লুয়েন্ট কনফিগারেশনে উপরে কনফিগার করা লগ পার্সিং যোগ করা যাক:

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

এবং ব্যবহার করে Kinesis লগ পাঠানো কাইনেসিস ফায়ারহোজ প্লাগইন:

<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-এ কতটা ডেটা রেকর্ড করা হয়েছে, সেইসাথে ত্রুটিগুলিও দেখতে পারেন। Kinesis ভূমিকাতে S3 বালতিতে লেখার অ্যাক্সেস দিতে ভুলবেন না। Kinesis কিছু পার্স করতে না পারলে, এটি একই বালতিতে ত্রুটি যোগ করবে।

এখন আপনি এথেনায় ডেটা দেখতে পারেন। আসুন সাম্প্রতিক অনুরোধগুলি সন্ধান করি যার জন্য আমরা ত্রুটিগুলি ফিরিয়ে দিয়েছি:

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

প্রতিটি অনুরোধের জন্য সমস্ত রেকর্ড স্ক্যান করা হচ্ছে

এখন আমাদের লগগুলি প্রক্রিয়া করা হয়েছে এবং ORC-তে S3 তে সংরক্ষণ করা হয়েছে, সংকুচিত এবং বিশ্লেষণের জন্য প্রস্তুত। Kinesis Firehose এমনকি প্রতিটি ঘন্টার জন্য ডিরেক্টরিতে তাদের সংগঠিত করেছে। যাইহোক, যতক্ষণ না টেবিলটি বিভাজিত না হয়, অ্যাথেনা বিরল ব্যতিক্রমগুলি সহ প্রতিটি অনুরোধে সর্বকালের ডেটা লোড করবে। এটি দুটি কারণে একটি বড় সমস্যা:

• ডেটা ভলিউম ক্রমাগত ক্রমবর্ধমান হয়, কোয়েরি কমিয়ে দেয়;
• অ্যাথেনাকে স্ক্যান করা ডেটার পরিমাণের উপর ভিত্তি করে বিল করা হয়, প্রতি অনুরোধে ন্যূনতম 10 এমবি।

এটি ঠিক করার জন্য, আমরা AWS Glue Crawler ব্যবহার করি, যা S3-এ ডেটা ক্রল করবে এবং Glue Metastore-এ পার্টিশনের তথ্য লিখবে। এটি আমাদের অ্যাথেনাকে অনুসন্ধান করার সময় একটি ফিল্টার হিসাবে পার্টিশনগুলি ব্যবহার করার অনুমতি দেবে এবং এটি শুধুমাত্র কোয়েরিতে নির্দিষ্ট ডিরেক্টরিগুলি স্ক্যান করবে।

Amazon Glue Crawler সেট আপ করা হচ্ছে

Amazon Glue Crawler S3 বাকেটের সমস্ত ডেটা স্ক্যান করে এবং পার্টিশন সহ টেবিল তৈরি করে। AWS Glue কনসোল থেকে একটি Glue Crawler তৈরি করুন এবং একটি বালতি যোগ করুন যেখানে আপনি ডেটা সঞ্চয় করেন। আপনি বেশ কয়েকটি বালতির জন্য একটি ক্রলার ব্যবহার করতে পারেন, এই ক্ষেত্রে এটি নির্দিষ্ট ডাটাবেসে বালতিগুলির নামের সাথে মেলে এমন নামগুলির সাথে টেবিল তৈরি করবে৷ আপনি যদি এই ডেটা নিয়মিত ব্যবহার করার পরিকল্পনা করেন, তাহলে আপনার প্রয়োজন অনুসারে ক্রলারের লঞ্চের সময়সূচী কনফিগার করতে ভুলবেন না। আমরা সমস্ত টেবিলের জন্য একটি ক্রলার ব্যবহার করি, যা প্রতি ঘন্টায় চলে।

বিভাজিত টেবিল

ক্রলারের প্রথম লঞ্চের পরে, প্রতিটি স্ক্যান করা বাকেটের জন্য টেবিলগুলি সেটিংসে নির্দিষ্ট করা ডাটাবেসে উপস্থিত হওয়া উচিত। Athena কনসোল খুলুন এবং 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 বিশ্লেষণাত্মক কাঠামো ব্যবহার করি। এটিতে অনেকগুলি ফাংশন রয়েছে, তবে আমরা দুটি বিষয়ে আগ্রহী: স্বয়ংক্রিয়ভাবে পার্টিশন ফিল্টার এবং ডেটা প্রাক-একত্রীকরণ ব্যবহার করার ক্ষমতা। এটি ডেটা স্কিমা ব্যবহার করে ডেটা স্কিমা, এসকিউএল তৈরি করতে এবং একটি ডাটাবেস ক্যোয়ারী চালানোর জন্য জাভাস্ক্রিপ্টে লেখা। আমাদের শুধুমাত্র ডেটা স্কিমাতে পার্টিশন ফিল্টারটি কীভাবে ব্যবহার করতে হয় তা নির্দেশ করতে হবে।

আসুন একটি নতুন Cube.js অ্যাপ্লিকেশন তৈরি করি। যেহেতু আমরা ইতিমধ্যে AWS স্ট্যাক ব্যবহার করছি, তাই স্থাপনার জন্য Lambda ব্যবহার করা যৌক্তিক। আপনি যদি Heroku বা Docker-এ Cube.js ব্যাকএন্ড হোস্ট করার পরিকল্পনা করেন তাহলে প্রজন্মের জন্য এক্সপ্রেস টেমপ্লেট ব্যবহার করতে পারেন। ডকুমেন্টেশন অন্যদের বর্ণনা করে হোস্টিং পদ্ধতি.

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

cube.js-এ ডাটাবেস অ্যাক্সেস কনফিগার করতে এনভায়রনমেন্ট ভেরিয়েবল ব্যবহার করা হয়। জেনারেটর একটি .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একটি পার্টিশন ফিল্টার সহ একটি এসকিউএল কোয়েরি তৈরি করতে।

এছাড়াও আমরা ড্যাশবোর্ডে যে মেট্রিক্স এবং প্যারামিটারগুলি প্রদর্শন করতে চাই তা সেট করি এবং প্রাক-সমষ্টি নির্দিষ্ট করি। 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"
    }
  ]
}

আসুন Cube.js ক্লায়েন্ট এবং NPM এর মাধ্যমে প্রতিক্রিয়া উপাদান লাইব্রেরি ইনস্টল করি:

$ 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