add logs tab (#163)

* add logs tab (reads from redis)
add info component
add winston-redis-stream for temporary storage for logs

* fix unit tests

* lint fixes

.eslintrc

@@ -5,7 +5,6 @@
 	],
 	"extends": [
 		"eslint:recommended",
-		"pipedrive",
 		"plugin:@typescript-eslint/eslint-recommended",
 		"plugin:prettier/recommended",
 		"plugin:@typescript-eslint/recommended"
@@ -16,7 +15,7 @@
 	},
 	"rules": {
 		"@typescript-eslint/ban-ts-comment": "warn",
-		"camelcase": "warn",
+		"camelcase": "off",
 		"no-unused-vars": "off",
 		"@typescript-eslint/no-unused-vars": ["warn"]
 	},
@@ -28,7 +27,6 @@
 				"plugin:@typescript-eslint/recommended",
 				"plugin:react/recommended",
 				"plugin:react/jsx-runtime",
-				"pipedrive",
 				"plugin:prettier/recommended"
 			],
 			"env": {
@@ -47,7 +45,6 @@
 				"eslint:recommended",
 				"plugin:react/recommended",
 				"plugin:react/jsx-runtime",
-				"pipedrive",
 				"plugin:prettier/recommended"
 			],
 			"settings": {

CHANGELOG.md

@@ -16,9 +16,17 @@ Types of changes:
 
 ## [Unreleased]
 
+## [5.2.0] 2022-10-08
+
+### Added
+
+- logs tab added
+- add winston-redis-stream dependency for logs to stream to redis
+
 ## [5.1.1] 2022-10-07
 
 ### Changed
+
 - fix re-opening pages/navigation on refresh
 
 ## [5.1.0] 2022-10-06

README.md

@@ -169,7 +169,6 @@ erDiagram
 
 ```
 
-
 ## Configuration
 
 We use environment variables for configuration.
@@ -206,7 +205,6 @@ For development we rely on docker network and use hostnames from `docker-compose
 Node service uses to connect to mysql & redis and change it if you install it with own setup.
 For dynamic service discovery (if you need multiple hosts for scaling), override `app/config.js` and `diplomat.js`
 
-
 ## Use cases / FAQ
 
 ### When/now do I register schema?

client/__mocks__/fileMock.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-undef
 module.exports = 'test-file-stub';

client/__mocks__/styleMock.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-undef
 module.exports = {};

client/clients/index.jsx

@@ -1,4 +1,4 @@
-//eslint-disable-next-line
+// eslint-disable-next-line
 import React, { useState } from 'react';
 import { HashRouter as Router } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
@@ -10,6 +10,7 @@ import { CLIENTS_LIST } from '../utils/queries';
 import { ColumnPanel } from '../components/styled';
 import ClientVersions from './versions';
 import ClientPersistedQueries from './clientPersistedQueries';
+import Info from '../components/Info';
 
 export default function Clients() {
 	const { loading, data } = useQuery(CLIENTS_LIST);
@@ -22,7 +23,12 @@ export default function Clients() {
 	}
 
 	if (!data || data.clients.length === 0) {
-		return <div style={{ padding: '10px' }}>No clients found</div>;
+		return (
+			<Info>
+				No clients found. Use gql-schema-registry-worker to process
+				queries from KAFKA_QUERIES_TOPIC
+			</Info>
+		);
 	}
 
 	const clients = data.clients.map((client) => {

client/components/Info.jsx

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+export default function Info({ children }) {
+	return (
+		<div
+			style={{
+				padding: '10px 15px',
+				color: 'white',
+				backgroundColor: '#3279e2',
+			}}
+		>
+			{children}
+		</div>
+	);
+}

client/components/Main.jsx

@@ -8,6 +8,7 @@ import Clients from '../clients';
 
 import ServicesTab from '../schema/Tab';
 import PersistedQueriesTab from '../persisted-queries/Tab';
+import Logs from '../logs';
 
 const UITabs = [
 	{
@@ -25,6 +26,11 @@ const UITabs = [
 		href: '/persisted-queries',
 		component: PersistedQueries,
 	},
+	{
+		Title: <span>Logs</span>,
+		href: '/logs',
+		component: Logs,
+	},
 ];
 
 const Main = () => {

client/logs/index.jsx

@@ -0,0 +1,60 @@
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+import { useQuery } from '@apollo/client';
+
+import SpinnerCenter from '../components/SpinnerCenter';
+
+import { LOGS } from '../utils/queries';
+import Info from '../components/Info';
+
+import { format } from 'date-fns';
+
+export default function PersistedQueries() {
+	const { loading, data } = useQuery(LOGS);
+
+	if (loading) {
+		return <SpinnerCenter />;
+	}
+
+	if (!data || !data.logs.length) {
+		return <Info>No Logs yet</Info>;
+	}
+
+	return (
+		<div>
+			<Info>
+				You can see last schema-registry logs. Useful in case of
+				validation errors
+			</Info>
+
+			<table>
+				{data.logs.map((row, i) => (
+					<tr key={i}>
+						<td
+							style={{
+								borderRight: '1px solid gray',
+								padding: '0 10px',
+							}}
+						>
+							{format(new Date(row.timestamp), 'd MMMM / HH:mm', {
+								timeZone: 'UTC',
+							})}
+						</td>
+						<td>{row.level.indexOf('error') > 0 ? '🔴' : 'ℹ️'} </td>
+						<td>
+							{typeof row.message === 'string' ? row.message : ''}
+							{typeof row.message === 'object' &&
+								row.message.map((row, j) => {
+									return (
+										<div key={j}>
+											{row.message}({row.extensions.code})
+										</div>
+									);
+								})}
+						</td>
+					</tr>
+				))}
+			</table>
+		</div>
+	);
+}

client/persisted-queries/index.jsx

@@ -1,9 +1,12 @@
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
 import { useQuery } from '@apollo/client';
 
 import SpinnerCenter from '../components/SpinnerCenter';
 import PersistedQuery from './PersistedQuery';
 
 import { PERSISTED_QUERIES } from '../utils/queries';
+import Info from '../components/Info';
 
 export default function PersistedQueries() {
 	const { loading, data } = useQuery(PERSISTED_QUERIES);
@@ -13,7 +16,12 @@ export default function PersistedQueries() {
 	}
 
 	if (!data || !data.persistedQueries.length) {
-		return <div style={{ padding: 10 }}>No persisted queries found</div>;
+		return (
+			<Info>
+				No persisted queries found. Integrate gateway to publish
+				persisted query to schema-registry API
+			</Info>
+		);
 	}
 
 	return (

client/schema/service-list/index.jsx

@@ -7,25 +7,27 @@ import { useRouteMatch, useHistory } from 'react-router-dom';
 
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import Info from '../../components/Info';
 
 const ServiceList = () => {
 	const { data } = useQuery(SERVICES_LIST);
 
 	if (!data || !data.services || data.services.length === 0) {
 		return (
 			<ServiceListColumnEmpty>
-				<p>No federated services found</p>
-				<p>
+				<Info>
+					No federated services found
+					<br />
 					Use{' '}
 					<a
 						href={
-							'https://github.com/pipedrive/graphql-schema-registry#post-schemapush'
+							'https://github.com/pipedrive/graphql-schema-registry#-post-schemapush'
 						}
 					>
 						POST /schema/push
 					</a>{' '}
 					to add one
-				</p>
+				</Info>
 			</ServiceListColumnEmpty>
 		);
 	}

client/utils/queries.js

@@ -121,3 +121,9 @@ export const CLIENT_VERSION_PERSISTED_QUERIES = gql`
 		}
 	}
 `;
+
+export const LOGS = gql`
+	query getLogs {
+		logs
+	}
+`;