Display the compatibility matrix (hyperledger-iroha#356)

* [feat]: impl basic compat matrix functionality Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [build]: replace compat matrix URL with a deployed one Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [docs]: add TODO to the README Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [build]: specify prod service url Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [feat]: impl basic compat matrix functionality Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [build]: replace compat matrix URL with a deployed one Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [docs]: add TODO to the README Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [build]: specify prod service url Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [docs]: add SDK Compatibility Matrix to Language-specific guides Signed-off-by: alexstroke <111361420+astrokov7@users.noreply.github.com> * [docs]: add Compatibility Matrix description to README Signed-off-by: alexstroke <111361420+astrokov7@users.noreply.github.com> * [docs]: add new ENV var in the README Signed-off-by: alexstroke <111361420+astrokov7@users.noreply.github.com> * [docs]: update README instruction Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [refactor]: enhance compat-matrix presentation with icons Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * [chore]: refine lints Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> * Emplace note as `::: info` block Co-authored-by: Ekaterina Mekhnetsova <mekkatya@gmail.com> Signed-off-by: Aleksandr Petrosyan <a-p-petrosyan@yandex.ru> --------- Signed-off-by: Dmitry Balashov <a.marcius26@gmail.com> Signed-off-by: alexstroke <111361420+astrokov7@users.noreply.github.com> Signed-off-by: Aleksandr Petrosyan <a-p-petrosyan@yandex.ru> Co-authored-by: astrokov7 <111361420+astrokov7@users.noreply.github.com> Co-authored-by: Aleksandr Petrosyan <a-p-petrosyan@yandex.ru> Co-authored-by: Ekaterina Mekhnetsova <mekkatya@gmail.com>
6r1d · Aug 24, 2023 · 42b3584 · 42b3584
1 parent 4cd26e7
commit 42b3584
Show file tree

Hide file tree

Showing 10 changed files with 240 additions and 3 deletions.
diff --git a/.env b/.env
@@ -1 +1,2 @@
 VITE_FEEDBACK_URL=https://164.92.190.45/feedback/form
+VITE_COMPAT_MATRIX_URL=https://docs-compat.iroha2.tachi.soramitsu.co.jp/compat-matrix
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -94,6 +94,10 @@ function getGuideSidebar(): DefaultTheme.SidebarItem[] {
               text: 'JavaScript',
               link: '/guide/javascript',
             },
+            {
+              text: 'Compatibility Matrix',
+              link: '/guide/compatibility-matrix',
+            },
           ],
         },
       ],

diff --git a/.vitepress/theme/components/CompatibilityMatrixTable.vue b/.vitepress/theme/components/CompatibilityMatrixTable.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { useTask } from '@vue-kakuyaku/core'
+import { SSpinner } from '@soramitsu-ui/ui'
+import { computed } from 'vue'
+import CompatibilityMatrixTableIcon, { type Status } from './CompatibilityMatrixTableIcon.vue'
+
+interface Matrix {
+  included_sdks: MatrixSdkDeclaration[]
+  stories: MatrixStory[]
+}
+
+interface MatrixSdkDeclaration {
+  name: string
+}
+
+interface MatrixStory {
+  name: string
+  results: MatrixStoryResult[]
+}
+
+interface MatrixStoryResult {
+  status: Status
+}
+
+const COMPAT_MATRIX_URL: string = import.meta.env.VITE_COMPAT_MATRIX_URL
+
+const task = useTask<Matrix>(
+  () => {
+    return fetch(COMPAT_MATRIX_URL, {}).then((x) => x.json())
+  },
+  { immediate: true },
+)
+
+const table = computed(() => {
+  if (!task.state.fulfilled) return null
+  const data = task.state.fulfilled.value
+
+  const headers = ['Story', ...data.included_sdks.map((x) => x.name)]
+  const rows = data.stories.map((story) => {
+    return { story: story.name, results: story.results.map((x) => x.status) }
+  })
+
+  return { headers, rows }
+})
+</script>
+
+<template>
+  <table v-if="table">
+    <thead>
+      <th
+        v-for="name in table.headers"
+        :key="name"
+      >
+        {{ name }}
+      </th>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(row, i) in table.rows"
+        :key="i"
+      >
+        <td>{{ row.story }}</td>
+        <td
+          v-for="(status, j) in row.results"
+          :key="j"
+          class="status-cell"
+          :title="`Status: ${status}`"
+        >
+          <CompatibilityMatrixTableIcon :status="status" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div
+    v-else
+    class="border rounded p-2 my-4"
+  >
+    <div
+      v-if="task.state.pending"
+      class="flex space-x-2 items-center"
+    >
+      <SSpinner /> <span>Loading data...</span>
+    </div>
+    <div v-else-if="task.state.rejected">
+      Failed to load compatibility matrix data: {{ task.state.rejected.reason }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.border {
+  border-color: var(--vp-c-border);
+}
+
+td.status-cell {
+  font-size: 1.3em;
+  padding: 0;
+
+  svg {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/CompatibilityMatrixTableIcon.vue b/.vitepress/theme/components/CompatibilityMatrixTableIcon.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import IconCheck from './icons/IconCheck.vue'
+import IconCancelOutlineRounded from './icons/IconCancelOutlineRounded.vue'
+import IconQuestionMarkRounded from './icons/IconQuestionMarkRounded.vue'
+import { computed } from 'vue'
+
+export type Status = 'ok' | 'failed' | 'no-data'
+
+const props = defineProps<{
+  status: Status
+}>()
+
+// eslint-disable-next-line vue/return-in-computed-property
+const chosenComponent = computed(() => {
+  switch (props.status) {
+    case 'ok':
+      return IconCheck
+    case 'failed':
+      return IconCancelOutlineRounded
+    case 'no-data':
+      return IconQuestionMarkRounded
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="chosenComponent"
+    :data-status="status"
+    class="compat-matrix-table-icon"
+  />
+</template>
+
+<style lang="scss">
+svg.compat-matrix-table-icon {
+  &[data-status='ok'] {
+    color: var(--vp-c-green);
+  }
+
+  &[data-status='failed'] {
+    color: var(--vp-c-red);
+  }
+
+  &[data-status='no-data'] {
+    color: var(--vp-c-yellow);
+  }
+}
+</style>
diff --git a/.vitepress/theme/components/icons/IconCancelOutlineRounded.vue b/.vitepress/theme/components/icons/IconCancelOutlineRounded.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'MaterialSymbolsCancelOutlineRounded',
+}
+</script>
diff --git a/.vitepress/theme/components/icons/IconCheck.vue b/.vitepress/theme/components/icons/IconCheck.vue
@@ -7,13 +7,13 @@
   >
     <path
       fill="currentColor"
-      d="m10.6 16.6l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4l4.25 4.25ZM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      d="m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L10.6 13.8ZM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
     />
   </svg>
 </template>
 
-<script>
+<script lang="ts">
 export default {
-  name: 'MaterialSymbolsCheckCircleOutline',
+  name: 'MaterialSymbolsCheckCircleOutlineRounded',
 }
 </script>
diff --git a/.vitepress/theme/components/icons/IconQuestionMarkRounded.vue b/.vitepress/theme/components/icons/IconQuestionMarkRounded.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M12.025 16q-.6 0-1.012-.425t-.363-1q.075-1.05.5-1.825t1.35-1.6q1.025-.9 1.563-1.563t.537-1.512q0-1.025-.687-1.7T12 5.7q-.8 0-1.363.338t-.912.837q-.35.5-.862.675t-.988-.025q-.575-.25-.787-.825t.087-1.075Q7.9 4.5 9.125 3.75T12 3q2.625 0 4.038 1.462t1.412 3.513q0 1.25-.537 2.138t-1.688 2.012q-.85.8-1.2 1.3t-.475 1.15q-.1.625-.525 1.025t-1 .4ZM12 22q-.825 0-1.413-.588T10 20q0-.825.588-1.413T12 18q.825 0 1.413.588T14 20q0 .825-.588 1.413T12 22Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'MaterialSymbolsQuestionMarkRounded',
+}
+</script>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -7,11 +7,20 @@ import MermaidRenderWrap from './components/MermaidRenderWrap.vue'
 
 import 'virtual:uno.css'
 import './style/index.scss'
+import { defineAsyncComponent } from 'vue'
 
 export default {
   ...ThemeDefault,
   Layout: LayoutCustom,
   enhanceApp({ app }: EnhanceAppContext) {
     app.component('MermaidRenderWrap', MermaidRenderWrap)
+    app.component(
+      'CompatibilityMatrixTable',
+      defineAsyncComponent(() => import('./components/CompatibilityMatrixTable.vue')),
+    )
+    app.component(
+      'CompatibilityMatrixTableIcon',
+      defineAsyncComponent(async () => import('./components/CompatibilityMatrixTableIcon.vue')),
+    )
   },
 }
diff --git a/README.md b/README.md
@@ -117,6 +117,18 @@ When a user submits the form, a simple POST request with a JSON body is sent to
 
 This variable will be picked up by the application during dev/build mode. Read more about it in the [Vite documentation](https://vitejs.dev/guide/env-and-mode.html).
 
+### Compatibility matrix
+
+**Note:** configuring this is **required**.
+
+The SDK Compatibility Matrix provides an insightful look into the interoperability of various stories across multiple SDKs within Hyperledger Iroha 2. 
+
+The underlying data for the matrix is sourced from a [backend service](https://github.com/soramitsu/iroha2-docs-compat-matrix-service), ensuring low-latency response with preprocessed data. To configure access to the service (e.g. deployed at `https://docs-compat.iroha2.tachi.soramitsu.co.jp`), set the following environment variable:
+
+```
+VITE_COMPAT_MATRIX_URL=https://docs-compat.iroha2.tachi.soramitsu.co.jp/compat-matrix
+```
+
 ## License
 
 Iroha documentation files are made available under the Creative Commons

diff --git a/src/guide/compatibility-matrix.md b/src/guide/compatibility-matrix.md
@@ -0,0 +1,20 @@
+# Compatibility Matrix
+
+In our continuous efforts to provide clear documentation and to ensure seamless compatibility across multiple SDKs,
+we present the **SDK Compatibility Matrix**. This matrix provides an instantaneous overview of how different stories,
+sourced from TestOps API, fare across varying SDKs.
+
+The matrix consists of:
+
+- **Stories**: Represented in the first column of the matrix, these are directly fetched from the TestOps API.
+- **SDKs**: Each subsequent column represents an SDK, such as "Java/Kotlin", "JavaScript", "Swift", etc.
+- **Status Symbols**: The status of each story for an SDK is denoted with:
+    - <CompatibilityMatrixTableIcon status="ok" class="inline-block relative -top-0.5" /> indicating the story passed.
+    - <CompatibilityMatrixTableIcon status="failed" class="inline-block relative -top-0.5" /> indicating the story failed to pass.
+    - <CompatibilityMatrixTableIcon status="no-data" class="inline-block relative -top-0.5" /> indicating the data is missing.
+
+<CompatibilityMatrixTable />
+
+::: info
+The data for this matrix is retrieved dynamically from our [backend service](https://github.com/soramitsu/iroha2-docs-compat-matrix-service), balancing the latest information with a swift response for documentation readers.
+:::