mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-06 00:09:22 +00:00
Sai Nikhil
ddf7a2e62e
### **User description**
1. functions list and enrichment table list --> added padding for
functions and enrichment tables list header
2. dashboards --> actions tab in dashboard table should be sticky always
3. alert list --> when it is realtime there wont be period and frequency
4. pipeline list --> removed sql query column for both realtime and
scheduled pipeline and also when it is realtime period and frequency
should be -- in all tabs
___
### **PR Type**
Enhancement
___
### **Description**
- Show “--” for empty alert period and frequency
- Hide period/frequency in real-time alerts tab
- Remove SQL Query column from pipelines list
- Custom table header and styling in dashboards
___
<details> <summary><h3> File Walkthrough</h3></summary>
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>AlertList.vue</strong><dd><code>Conditional display and
hiding of alert columns</code>
</dd></summary>
<hr>
web/src/components/alerts/AlertList.vue
<ul><li>Default to "--" when period/frequency empty<br> <li> Append
"Mins" only for non-cron frequencies<br> <li> Conditionally hide
period/frequency in realTime tab<br> <li> Insert
<code>folder_name</code> column when searching folders<br> <li> Set
mapped period/frequency to empty for real-time alerts</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7637/files#diff-be3e41b823e163b226ffc270d95cc4981e59c600851e4e0d10ee5e4ee994ac8e">+15/-10</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>PipelinesList.vue</strong><dd><code>Remove SQL column
and add placeholders</code>
</dd></summary>
<hr>
web/src/components/pipeline/PipelinesList.vue
<ul><li>Deleted <code>sql_query</code> column from displayed columns<br>
<li> For real-time pipelines set placeholders "--" for fields</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7637/files#diff-85e3ef322f3eea0fc6d74d89431ba338a1153cb82ee06bef0f7c5f439c04267d">+4/-9</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>Dashboards.vue</strong><dd><code>Custom header and
table styling in dashboards</code>
</dd></summary>
<hr>
web/src/views/Dashboards/Dashboards.vue
<ul><li>Added theme-based table classes<br> <li> Replaced
header-selection slot with custom header slot<br> <li> Applied width
style to "#" column<br> <li> Tagged actions column with
<code>actions-column</code> class</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7637/files#diff-8da3187db8ce3d795d0f196ede6b2290221ffa3e27b15dcc2b645e44dd196213">+31/-4</a>
</td>
</tr>
</table></td></tr><tr><td><strong>Formatting</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>EnrichmentTableList.vue</strong><dd><code>Remove
pagination padding override</code>
</dd></summary>
<hr>
web/src/components/functions/EnrichmentTableList.vue
<ul><li>Removed inline padding override on QTablePagination<br> <li>
Cleaned up redundant style attributes</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7637/files#diff-6a29e253f59405d3c0f756dba36afd7483f10ad86927cbbc3348ede6372c3077">+0/-1</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>FunctionList.vue</strong><dd><code>Remove pagination
padding override</code>
</dd></summary>
<hr>
web/src/components/functions/FunctionList.vue
<ul><li>Removed inline padding override on QTablePagination<br> <li>
Cleaned up redundant style attributes</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7637/files#diff-6ff9af50a1597504b7f0dca91e61cf30c800b4a17b4be2ed2c3a4f7a7b2d7068">+0/-1</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
web
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensionsfrom VSCode's command palette - Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Windowfrom the command palette.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
For stand-alone UI development environment, create .env file and which contains below environment variable
VITE_OPENOBSERVE_ENDPOINT=http://localhost:5080/
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Cypress
npm run test:e2e:dev
This runs the end-to-end tests against the Vite development server. It is much faster than the production build.
But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):
npm run build
npm run test:e2e
Lint with ESLint
npm run lint