Topic view in new hermes console (#8)

hermes-console-vue/README.md

@@ -13,6 +13,12 @@ Hermes console migrated from AngularJS to Vue 3.
 yarn
 ```
 
+### Run mocked backend server
+
+```sh
+yarn dev-server
+```
+
 ### Compile and Hot-Reload for Development
 
 ```sh

hermes-console-vue/json-server/db.json

@@ -24,21 +24,21 @@
       }
     },
     "subscriptionConstraints":
-      {
-        "pl.group.Topic$subscription": {
-          "consumersNumber": 6
-        },
-        "pl.someAnotherGroup.Topic$someSubscription": {
-          "consumersNumber": 8
-        }
+    {
+      "pl.group.Topic$subscription": {
+        "consumersNumber": 6
+      },
+      "pl.someAnotherGroup.Topic$someSubscription": {
+        "consumersNumber": 8
       }
+    }
   },
   "topics": [
     {
       "id": "pl.allegro.public.group.DummyEvent",
-      "schema": "{\"type\":\"record\",\"name\":\"DummyEvent\",\"namespace\":\"pl.allegro.public.group.DummyEvent\",\"doc\":\"Event emitted when swipe-right notification is sent to a user\",\"fields\":[{\"name\":\"__metadata\",\"type\":[\"null\",{\"type\":\"map\",\"values\":\"string\"}],\"doc\":\"Field internally used by Hermes to propagate metadata.\",\"default\":null},{\"name\":\"waybillId\",\"type\":[\"null\",{\"type\":\"record\",\"name\":\"WaybillId\",\"fields\":[{\"name\":\"waybill\",\"type\":\"string\",\"doc\":\"Waybill\"},{\"name\":\"carrierId\",\"type\":\"string\",\"doc\":\"CarrierId\"}]}],\"doc\":\"WaybillId\",\"default\":null},{\"name\":\"notificationId\",\"type\":\"string\",\"doc\":\"Notification Id\"},{\"name\":\"userId\",\"type\":\"string\",\"doc\":\"User Id\"}]}",
+      "schema": "{\"type\":\"record\",\"name\":\"DummyEvent\",\"namespace\":\"pl.allegro.public.group.DummyEvent\",\"doc\":\"Event emitted when notification is sent to a user\",\"fields\":[{\"name\":\"__metadata\",\"type\":[\"null\",{\"type\":\"map\",\"values\":\"string\"}],\"doc\":\"Field internally used by Hermes to propagate metadata.\",\"default\":null},{\"name\":\"waybillId\",\"type\":[\"null\",{\"type\":\"record\",\"name\":\"WaybillId\",\"fields\":[{\"name\":\"waybill\",\"type\":\"string\",\"doc\":\"Waybill\"},{\"name\":\"carrierId\",\"type\":\"string\",\"doc\":\"CarrierId\"}]}],\"doc\":\"WaybillId\",\"default\":null},{\"name\":\"notificationId\",\"type\":\"string\",\"doc\":\"Notification Id\"},{\"name\":\"userId\",\"type\":\"string\",\"doc\":\"User Id\"}]}",
       "name": "pl.allegro.public.group.DummyEvent",
-      "description": "Events emitted when swipe-right notification is sent to a user.",
+      "description": "Events emitted when notification is sent to a user.",
       "owner": {
         "source": "Service Catalog",
         "id": "41"
@@ -87,6 +87,27 @@
       "throughput": "0.0"
     }
   ],
+  "topicsOwners": [
+    {
+      "id": "41",
+      "name": "your-super-service",
+      "url": "https://google.pl?q=your-super-service"
+    }
+  ],
+  "topicPreview": [
+    {
+      "content": "{\"__metadata\":{\"x-request-id\":\"65157233-0153-4256-91d6-12d5b60d47a2\",\"messageId\":\"32fdedf7-a425-4sad-ad85-dd3fec785ccd\",\"trace-sampled\":\"0\",\"timestamp\":\"1652257893073\"},\"waybillId\":{\"waybill\":\"1234567890000\",\"carrierId\":\"SAMPLE\"},\"notificationId\":\"142a3f4a-a56e-789c-b866-2a27b0d24cb1\",\"userId\":\"12345678\"}",
+      "truncated": false
+    },
+    {
+      "content": "{\"__metadata\":{\"x-request-id\":\"44a558de-5e12-456f-1d3c-vc55f7v3ffd7\",\"messageId\":\"b33fcc74-2016-24f9-3cb3-ebc4bg49e5e2\",\"trace-sampled\":\"0\",\"timestamp\":\"1652257893205\"},\"waybillId\":{\"waybill\":\"1234567890000\",\"carrierId\":\"SAMPLE\"},\"notificationId\":\"12a3456d-b78e-9efa-a150-28c2f9f2f747\",\"userId\":\"98765432\"}",
+      "truncated": false
+    }
+  ],
+  "topicSubscriptions": [
+    "foobar-service",
+    "barbaz-service"
+  ],
   "consumerGroups": [
     {
       "clusterName": "kafka-1",
@@ -386,4 +407,4 @@
       "cluster": "kafka-cluster"
     }
   ]
-}
+}

hermes-console-vue/json-server/routes.json

@@ -3,10 +3,13 @@
   "/workload-constraints": "/constraints",
   "/consistency/inconsistencies/topics": "/inconsistentTopics",
   "/topics/:id/metrics": "/topicsMetrics/:id",
+  "/topics/:id/preview": "/topicPreview",
+  "/topics/:id/subscriptions": "/topicSubscriptions",
   "/topics/:topicName/subscriptions/:id": "/subscriptions/:id",
   "/topics/:topicName/subscriptions/:id/consumer-groups": "/consumerGroups",
   "/topics/:topicName/subscriptions/:id/health": "/subscriptionsHealth/:id",
   "/topics/:topicName/subscriptions/:id/metrics": "/subscriptionsMetrics/:id",
   "/topics/:topicName/subscriptions/:id/undelivered": "/subscriptionUndeliveredMessages",
-  "/topics/:topicName/subscriptions/:id/undelivered/last": "/subscriptionUndeliveredMessages/:id"
-}
+  "/topics/:topicName/subscriptions/:id/undelivered/last": "/subscriptionUndeliveredMessages/:id",
+  "/owners/sources/Service%20Catalog/:id": "/topicsOwners/:id"
+}

hermes-console-vue/package.json

@@ -14,36 +14,39 @@
     "dev-server": "json-server json-server/db.json --routes json-server/routes.json"
   },
   "dependencies": {
-    "axios": "1.3.3",
-    "vue": "3.2.45",
+    "axios": "1.4.0",
+    "vue": "3.3.4",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.6",
-    "vuetify": "3.1.3"
+    "vue-router": "4.2.2",
+    "vuetify": "3.3.2"
   },
   "devDependencies": {
     "@mdi/font": "7.1.96",
     "@rushstack/eslint-patch": "1.2.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/vue": "6.6.1",
+    "@testing-library/user-event": "14.4.3",
+    "@testing-library/vue": "7.0.0",
     "@types/jsdom": "21.1.0",
     "@types/node": "18.13.0",
     "@vitejs/plugin-vue": "4.0.0",
     "@vue/eslint-config-prettier": "7.0.0",
     "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.2.10",
+    "@vue/test-utils": "2.3.2",
     "@vue/tsconfig": "0.1.3",
     "eslint": "8.34.0",
     "eslint-plugin-sort-imports-es6-autofix": "0.6.0",
     "eslint-plugin-vue": "9.9.0",
-    "jsdom": "21.1.0",
+    "jsdom": "22.1.0",
     "json-server": "0.17.1",
+    "msw": "1.2.2",
     "npm-run-all": "4.1.5",
     "prettier": "2.8.4",
     "sass": "1.58.1",
-    "typescript": "~4.9.5",
+    "typescript": "4.9.5",
     "vite": "4.1.1",
+    "vite-plugin-rewrite-all": "1.0.1",
     "vite-plugin-vuetify": "1.0.2",
-    "vitest": "0.28.5",
+    "vitest": "0.31.4",
     "vue-tsc": "1.0.24"
   }
 }

hermes-console-vue/src/api/hermes-client/index.ts

@@ -0,0 +1,44 @@
+import axios from 'axios';
+import type {
+  MessagePreview,
+  TopicMetrics,
+  TopicWithSchema,
+} from '@/api/topic';
+import type { Owner } from '@/api/owner';
+import type { ResponsePromise } from '@/utils/axios-utils';
+import type { Subscription } from '@/api/subscription';
+
+export function fetchTopic(
+  topicName: string,
+): ResponsePromise<TopicWithSchema> {
+  return axios.get(`/topics/${topicName}`);
+}
+
+export function fetchTopicOwner(ownerId: string): ResponsePromise<Owner> {
+  return axios.get(`/owners/sources/Service Catalog/${ownerId}`);
+}
+
+export function fetchTopicMessagesPreview(
+  topicName: string,
+): ResponsePromise<MessagePreview[]> {
+  return axios.get(`/topics/${topicName}/preview`);
+}
+
+export function fetchTopicMetrics(
+  topic: String,
+): ResponsePromise<TopicMetrics> {
+  return axios.get<TopicMetrics>(`/topics/${topic}/metrics`);
+}
+
+export function fetchTopicSubscriptions(
+  topicName: string,
+): ResponsePromise<string[]> {
+  return axios.get(`/topics/${topicName}/subscriptions`);
+}
+
+export function fetchTopicSubscriptionDetails(
+  topicName: string,
+  subscription: string,
+): ResponsePromise<Subscription> {
+  return axios.get(`/topics/${topicName}/subscriptions/${subscription}`);
+}

hermes-console-vue/src/api/owner.ts

@@ -0,0 +1,5 @@
+export interface Owner {
+  id: string;
+  name: string;
+  url: string;
+}

hermes-console-vue/src/api/topic.ts

@@ -26,35 +26,49 @@ export interface Topic {
   modifiedAt: number; // java.time.Instant
 }
 
-type TopicName = string;
+export type TopicName = string;
 
-interface RetentionTime {
+export interface RetentionTime {
   duration: number;
   retentionUnit: string; // java.util.concurrent.TimeUnit
 }
 
-enum Ack {
-  NONE,
-  LEADER,
-  ALL,
+export enum Ack {
+  NONE = 'NONE',
+  LEADER = 'LEADER',
+  ALL = 'ALL',
 }
 
-interface PublishingAuth {
+export interface PublishingAuth {
   publishers: string[];
   enabled: boolean;
   unauthenticatedAccessEnabled: boolean;
 }
 
-interface TopicDataOfflineStorage {
+export interface TopicDataOfflineStorage {
   enabled: boolean;
   retentionTime: OfflineRetentionTime;
 }
 
-interface OfflineRetentionTime {
+export interface OfflineRetentionTime {
   duration: number;
   infinite: boolean;
 }
 
-interface TopicLabel {
+export interface TopicLabel {
   value: string;
 }
+
+export interface TopicMetrics {
+  published: number;
+  volume: number;
+  rate: string;
+  deliveryRate: string;
+  subscriptions: number;
+  throughput: string;
+}
+
+export interface MessagePreview {
+  content: string;
+  truncated: boolean;
+}

hermes-console-vue/src/components/console-footer/ConsoleFooter.spec.ts

@@ -6,6 +6,6 @@ describe('ConsoleFooter', () => {
     // when
     const { getByText } = render(ConsoleFooter);
     // then
-    expect(getByText(/allegro tech & contributors/i)).toBeInTheDocument();
+    expect(getByText(/allegro tech & contributors/i)).toBeVisible();
   });
 });

hermes-console-vue/src/components/environment-badge/EnviromentBadge.spec.ts

@@ -10,6 +10,6 @@ describe('EnvironmentBadge', () => {
       },
     });
     // then
-    expect(getByText('PROD')).toBeInTheDocument();
+    expect(getByText('PROD')).toBeVisible();
   });
 });

hermes-console-vue/src/components/key-value-card/KeyValueCard.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect } from 'vitest';
+import { h } from 'vue';
+import { render } from '@/utils/test-utils';
+import KeyValueCard from '@/components/key-value-card/KeyValueCard.vue';
+
+describe('KeyValueCard', () => {
+  const Component = h(KeyValueCard, { title: 'Sample title' }, () => [
+    h('span', 'Hello'),
+    h('span', 'World!'),
+  ]);
+
+  it('should render title properly', () => {
+    // given
+    const { getByText } = render(Component);
+
+    // expect
+    expect(getByText('Sample title')).toBeVisible();
+  });
+
+  it('should render body', () => {
+    // given
+    const { getByText, getByRole } = render(Component);
+
+    // expect
+    const table = getByRole('table');
+    expect(table).to.exist;
+    expect(getByText('Hello')).toBeVisible();
+    expect(getByText('World!')).toBeVisible();
+  });
+});

hermes-console-vue/src/components/key-value-card/KeyValueCard.vue

@@ -1,55 +1,19 @@
 <script setup lang="ts">
-  import { computed } from 'vue';
-  import TooltipIcon from '@/components/tooltip-icon/TooltipIcon.vue';
-
-  interface KeyValueEntry {
-    displayIf?: boolean;
-    name: string;
-    nameHref?: string;
-    value?: string | number | boolean;
-    tooltip?: string;
-  }
-
   const props = defineProps<{
-    cardTitle: string;
-    entries: KeyValueEntry[];
+    title: string;
   }>();
-
-  // TODO: test filtering
-  const filteredEntries = computed(() =>
-    props.entries.filter((entry) => entry.displayIf !== false),
-  );
 </script>
 
 <template>
-  <v-card class="mb-2">
+  <v-card>
     <template #title>
       <p class="font-weight-bold">
-        {{ props.cardTitle }}
+        {{ props.title }}
       </p>
     </template>
     <v-table density="compact">
       <tbody>
-        <tr v-for="entry in filteredEntries" :key="entry.name">
-          <th class="text-body-2 text-medium-emphasis">
-            <component
-              :is="entry.nameHref ? 'a' : 'span'"
-              :href="entry.nameHref"
-            >
-              {{ entry.name }}
-            </component>
-          </th>
-          <td class="text-body-2">
-            <div class="d-flex">
-              {{ entry.value }}
-              <tooltip-icon
-                class="ml-auto"
-                v-if="entry.tooltip"
-                :content="entry.tooltip"
-              />
-            </div>
-          </td>
-        </tr>
+        <slot></slot>
       </tbody>
     </v-table>
   </v-card>