mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
Ashish Kolhe
cb178787f2
### **PR Type**
Enhancement, Tests
___
### **Description**
- Replace icon tabs with reusable app-tabs component
- Introduce Alerts/Incidents viewMode switching logic
- Add extensive UI tests for new tab functionality
- Update getPath logic and dev script configuration
___
### Diagram Walkthrough
```mermaid
flowchart LR
TabsComp["app-tabs component"] --> ViewState["viewMode state"]
ViewState --> AlertsView["Alerts view UI"]
ViewState --> IncidentsView["Incidents view UI"]
Tests["UI tests"] --> TabsComp
```
<details> <summary><h3> File Walkthrough</h3></summary>
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>zincutils.ts</strong><dd><code>Refine getPath base URL
logic</code>
</dd></summary>
<hr>
web/src/utils/zincutils.ts
<ul><li>refine getPath logic for web base path<br> <li> conditionally
prepend "/web/" on localhost</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9819/files#diff-d3d59688cccdcc6c84ebe88b698c6910030abecc3125f4c0ef81b0df023699ba">+1/-1</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>AlertList.vue</strong><dd><code>Replace custom tabs
with app-tabs</code>
</dd></summary>
<hr>
web/src/components/alerts/AlertList.vue
<ul><li>remove custom icon-only view tabs<br> <li> integrate
<code>app-tabs</code> for view switching<br> <li> add
<code>viewTabs</code> computed property<br> <li> update related SCSS
styling</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9819/files#diff-be3e41b823e163b226ffc270d95cc4981e59c600851e4e0d10ee5e4ee994ac8e">+35/-92</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Tests</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>alertsPage.js</strong><dd><code>Add view mode tab
methods and locators</code>
</dd></summary>
<hr>
tests/ui-testing/pages/alertsPages/alertsPage.js
<ul><li>add locators for alert and incident tabs<br> <li> implement
click and expect methods for tabs<br> <li> add search methods for both
views</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9819/files#diff-79ee01d6d7f145f19207b93b87143b545a1188cfc6a82bc8c45fecfbf68f8a1d">+113/-0</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>alertsIncidentsTabs.spec.js</strong><dd><code>Add E2E
tests for alerts/incidents tabs</code>
</dd></summary>
<hr>
tests/ui-testing/playwright-tests/Alerts/alertsIncidentsTabs.spec.js
<ul><li>add E2E tests for tabs visibility and switching<br> <li> cover
functional and edge-case scenarios</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9819/files#diff-3776665660a181de2d08e4d3bccc481191e7ac88f4e4b0943c869ffa4eb12ffd">+347/-0</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Configuration
changes</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>package.json</strong><dd><code>Add base path to dev
script</code>
</dd></summary>
<hr>
web/package.json
- update `dev` script to include base `/web/`
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9819/files#diff-b861012a5dd72b8a9f3281b7cf09f5a779c98569d040b1bbc1db50f1b15e7cce">+1/-1</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
139 lines
4.6 KiB
JSON
139 lines
4.6 KiB
JSON
{
|
|
"name": "zinc-observe-web",
|
|
"version": "0.1.0",
|
|
"license": "AGPL-3.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite --base /web/",
|
|
"devcloud": "NODE_ENV=devcloud vite --mode=devcloud",
|
|
"build-alpha1": "run-p type-check build-only-alpha1",
|
|
"build-cloud-prod": "run-p type-check build-only-cloud-prod",
|
|
"build": "run-p type-check build-only",
|
|
"postbuild": "run-p copy",
|
|
"preview": "vite preview",
|
|
"copy": "cd dist && mkdir src && cd src && mkdir assets && cd .. && cd .. && cp -r src/assets/* dist/src/assets/",
|
|
"test:unit": "vitest --environment jsdom --root src/",
|
|
"test:unit:coverage": "vitest --coverage --run",
|
|
"test:coverage:check": "./coverage.sh check",
|
|
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
|
|
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
|
|
"build-only": "vite build",
|
|
"build-only-alpha1": "vite build --mode=alpha1",
|
|
"build-only-cloud-prod": "vite build --mode=production",
|
|
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
|
|
},
|
|
"dependencies": {
|
|
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
|
"@joakimono/echarts-extension-leaflet": "^1.0.2",
|
|
"@openobserve/browser-logs": "0.3.1",
|
|
"@openobserve/browser-rum": "0.3.1",
|
|
"@openobserve/node-sql-parser": "^0.1.5",
|
|
"@openobserve/rrweb-player": "^0.2.1",
|
|
"@quasar/extras": "^1.16.16",
|
|
"@tanstack/vue-table": "^8.20.5",
|
|
"@tanstack/vue-virtual": "^3.11.2",
|
|
"@vue-flow/background": "^1.3.2",
|
|
"@vue-flow/controls": "^1.1.2",
|
|
"@vue-flow/core": "^1.42.1",
|
|
"acorn": "^8.15.0",
|
|
"acorn-walk": "^8.3.4",
|
|
"cron-parser": "^5.4.0",
|
|
"d3-force": "^3.0.0",
|
|
"d3-scale": "^4.0.2",
|
|
"date-fns": "^4.1.0",
|
|
"date-fns-tz": "^3.2.0",
|
|
"dompurify": "^3.2.3",
|
|
"echarts": "^5.6.0",
|
|
"echarts-gl": "^2.0.9",
|
|
"escodegen": "^2.1.0",
|
|
"flag-icons": "^7.3.2",
|
|
"gridstack": "^12.2.1",
|
|
"highlight.js": "^11.11.1",
|
|
"js-beautify": "^1.15.4",
|
|
"js-cookie": "^3.0.5",
|
|
"json-2-csv": "^5.5.9",
|
|
"jszip": "^3.10.1",
|
|
"leaflet": "^1.9.4",
|
|
"lodash-es": "^4.17.21",
|
|
"lucide-vue-next": "^0.562.0",
|
|
"luxon": "^3.5.0",
|
|
"marked": "^17.0.1",
|
|
"moment": "^2.30.1",
|
|
"moment-timezone": "^0.6.0",
|
|
"monaco-editor": "^0.52.2",
|
|
"node-polyfill-webpack-plugin": "^4.1.0",
|
|
"quasar": "^2.17.7",
|
|
"reodotdev": "^1.0.0",
|
|
"rollup-plugin-node-polyfills": "^0.2.1",
|
|
"rollup-plugin-polyfill-node": "^0.13.0",
|
|
"rudder-sdk-js": "^2.52.7",
|
|
"sql-formatter": "^15.6.5",
|
|
"uuid": "^13.0.0",
|
|
"vue": "^3.5.14",
|
|
"vue-drag-resize": "^1.5.4",
|
|
"vue-draggable-next": "^2.2.1",
|
|
"vue-i18n": "^11.1.10",
|
|
"vue-router": "^4.5.0",
|
|
"vuex": "^4.1.0"
|
|
},
|
|
"devDependencies": {
|
|
"@cypress/vue": "^6.0.2",
|
|
"@cypress/webpack-dev-server": "^5.4.1",
|
|
"@quasar/vite-plugin": "^1.9.0",
|
|
"@rushstack/eslint-patch": "^1.10.5",
|
|
"@tailwindcss/postcss": "^4.1.18",
|
|
"@tailwindcss/typography": "^0.5.16",
|
|
"@tailwindcss/vite": "^4.1.18",
|
|
"@types/axios": "^0.14.4",
|
|
"@types/d3-force": "^3.0.10",
|
|
"@types/d3-scale": "^4.0.8",
|
|
"@types/fs-extra": "^11.0.4",
|
|
"@types/js-cookie": "^3.0.6",
|
|
"@types/jsdom": "^27.0.0",
|
|
"@types/leaflet": "^1.9.16",
|
|
"@types/lodash-es": "^4.17.12",
|
|
"@types/luxon": "^3.4.2",
|
|
"@types/node": "^25.0.3",
|
|
"@types/uuid": "^10.0.0",
|
|
"@vitejs/plugin-vue": "^6.0.3",
|
|
"@vitejs/plugin-vue-jsx": "^5.1.3",
|
|
"@vitest/coverage-v8": "^4.0.16",
|
|
"@vitest/ui": "^4.0.16",
|
|
"@vue/eslint-config-prettier": "^10.2.0",
|
|
"@vue/eslint-config-typescript": "^14.3.0",
|
|
"@vue/test-utils": "^2.4.6",
|
|
"@vue/tsconfig": "^0.8.1",
|
|
"autoprefixer": "^10.4.20",
|
|
"c8": "^10.1.3",
|
|
"cypress": "^15.8.1",
|
|
"cypress-localstorage-commands": "^2.2.7",
|
|
"dotenv": "^17.2.3",
|
|
"eslint": "^9.10.0",
|
|
"eslint-config-prettier": "^10.0.1",
|
|
"eslint-plugin-cypress": "^5.2.0",
|
|
"eslint-plugin-vue": "^10.6.2",
|
|
"fs-extra": "^11.3.0",
|
|
"happy-dom": "^20.0.7",
|
|
"jsdom": "^27.3.0",
|
|
"msw": "^2.7.3",
|
|
"npm-run-all": "^4.1.5",
|
|
"postcss": "^8.4.39",
|
|
"prettier": "^3.4.2",
|
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
"rollup-plugin-visualizer": "^6.0.5",
|
|
"sass": "^1.77.8",
|
|
"sass-loader": "^16.0.6",
|
|
"start-server-and-test": "^2.0.4",
|
|
"tailwindcss": "^4.1.18",
|
|
"typescript": "~5.9.3",
|
|
"vite": "^7.3.0",
|
|
"vite-plugin-istanbul": "^7.2.1",
|
|
"vite-plugin-monaco-editor": "^1.1.0",
|
|
"vitest": "^4.0.16",
|
|
"vitest-canvas-mock": "^1.1.3",
|
|
"vue-tsc": "^3.2.1"
|
|
}
|
|
}
|