Added documentation, addd plugin to sample app

plugins/kafka/README.md

@@ -1,13 +1,87 @@
-# kafka
+# Kafka Plugin
 
-Welcome to the kafka plugin!
+<img src="./src/assets/screenshot-1.png">
 
-_This plugin was created through the Backstage CLI_
+## Setup
 
-## Getting started
+1. Run:
 
-Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/kafka](http://localhost:3000/kafka).
+```bash
+yarn add @backstage/plugin-kafka @backstage/plugin-kafka-backend
+```
 
-You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
-This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
-It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
+2. Add the plugin backend:
+
+In a new file named `kafka.js` under `backend/src/plugins`:
+
+```js
+import { createRouter } from '@backstage/plugin-kafka-backend';
+import { PluginEnvironment } from '../types';
+
+export default async function createPlugin({
+  logger,
+  config,
+}: PluginEnvironment) {
+  return await createRouter({ logger, config });
+}
+```
+
+And then add to `packages/backend/src/index.ts`:
+
+```js
+async function main() {
+  // ...
+  const kafkaEnv = useHotMemoize(module, () => createEnv('kafka'));
+  // ...
+
+  const apiRouter = Router();
+  // ...
+  apiRouter.use('/kafka', await kafka(kafkaEnv));
+  // ...
+```
+
+3. Add the plugin frontend to `packages/app/src/plugin.ts`:
+
+```js
+export { plugin as Kafka } from '@backstage/plugin-kafka';
+```
+
+4. Register the plugin frontend router in `packages/app/src/components/catalog/EntityPage.tsx`:
+
+```jsx
+import { Router as KafkaRouter } from '@backstage/plugin-kafka';
+
+// Then, somewhere inside <EntityPageLayout>
+
+<EntityPageLayout.Content
+  path="/kafka/*"
+  title="Kafka"
+  element={<KafkaRouter entity={entity} />}
+/>;
+```
+
+5. Add broker configs for the backend in your `app-config.yaml`:
+
+```yaml
+kafka:
+  clientId: backstage
+  brokers:
+    - localhost:9092
+```
+
+6. Add `kafka.apache.org/consumer-group` annotation to your services:
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  # ...
+  annotations:
+    kafka.apache.org/consumer-group: consumer-group-name
+spec:
+  type: service
+```
+
+## Features
+
+- List topics offsets and consumer group offsets for configured services.

plugins/kafka/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-kafka",
-  "version": "0.1.1",
+  "version": "0.1.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -34,7 +34,7 @@
     "@backstage/cli": "^0.4.2",
     "@backstage/dev-utils": "^0.1.6",
     "@backstage/test-utils": "^0.1.5",
-    "@backstage/plugin-kafka-backend": "^0.1.1",
+    "@backstage/plugin-kafka-backend": "^0.1.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^10.4.1",
     "@testing-library/user-event": "^12.0.7",

plugins/kafka/src/constants.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 export const KAFKA_CONSUMER_GROUP_ANNOTATION =
-  'kafka.apache.org/consumer-groups';
+  'kafka.apache.org/consumer-group';