starred/openobserve
1
0
Fork 0
mirror of https://github.com/openobserve/openobserve.git synced 2026-11-04 16:09:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: all the list tables should have same style (#7510)

Browse Source 
### **User description**
1. all the tables that are there in the application should be having the
same style


___

### **PR Type**
Enhancement


___

### **Description**
- Unify header layout across list pages

- Apply `o2-quasar-table` classes globally

- Standardize column widths and sticky actions

- Introduce dark/light table theme CSS


___

### **Changes diagram**

```mermaid
flowchart LR
  Pages["List Pages"] -- "use" --> Header["Header Bar Component"]
  Header -- "wraps" --> Table["q-table with header slot"]
  Table -- "applies" --> Styles["Global table CSS"]
```


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>18
files</summary><table>
<tr>
<td><strong>PipelinesList.vue</strong><dd><code>Refactor pipeline list
header & table styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-85e3ef322f3eea0fc6d74d89431ba338a1153cb82ee06bef0f7c5f439c04267d">+243/-232</a></td>

</tr>

<tr>
<td><strong>AlertList.vue</strong><dd><code>Update alerts list table
header and styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-be3e41b823e163b226ffc270d95cc4981e59c600851e4e0d10ee5e4ee994ac8e">+147/-154</a></td>

</tr>

<tr>
<td><strong>LogStream.vue</strong><dd><code>Enhance log stream header &
table style</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-56f4223b74568c10bc305741cc9fc3a8830184a251b4eaa6a2649033bc6200e3">+140/-135</a></td>

</tr>

<tr>
<td><strong>EnrichmentTableList.vue</strong><dd><code>Unify enrichment
tables header & styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-6a29e253f59405d3c0f756dba36afd7483f10ad86927cbbc3348ede6372c3077">+54/-34</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AlertsDestinationList.vue</strong><dd><code>Revamp alert
destinations list layout</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-e9d05ba6c071c0e2f5d9ef7acdef757f79910abd6897b29e27b069a10d4ba8de">+66/-39</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ServiceAccountsList.vue</strong><dd><code>Style service
accounts list header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-3afe835bcfbec3fda2e9550850c29581092ee0717e7dd8de8888e774a0048d24">+55/-61</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>User.vue</strong><dd><code>Revise users table header and
styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-e973c2a665f9b27b94673ba64cc5b23650300836a727a2e07673c8e26305aee5">+51/-45</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ReportList.vue</strong><dd><code>Format report list header &
table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-f7d700f7e67fbaba3c58ab5d2c614925db743101828214445ce9dae35dc29067">+64/-39</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>CipherKeys.vue</strong><dd><code>Style cipher keys list
header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-950b715cff2c964d8542512692030c370733b57d698abf40e1dcb3cce2cfaf7a">+56/-34</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>TemplateList.vue</strong><dd><code>Rework alert templates
list styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-7df66364d7d69a26cfa25cbc555d0e090c2f73e51c8386d9b0435bae4412564c">+59/-36</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>PipelinesDestinationList.vue</strong><dd><code>Enhance
pipeline destinations list UI</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-088c66f5a34e73a5350a794a772e5d905262277337c937dd36f4295072203ebf">+52/-28</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>FunctionList.vue</strong><dd><code>Uniform function list
header & styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-6ff9af50a1597504b7f0dca91e61cf30c800b4a17b4be2ed2c3a4f7a7b2d7068">+50/-33</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ListOrganizations.vue</strong><dd><code>Refine organizations
list header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-572ed99323d3e36d126074eccc10b68f6eef983d92f89d06b205fef0925c93a3">+41/-36</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppRoles.vue</strong><dd><code>Style IAM roles table header
& actions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-191634ef09436199f91f442968110a01f54ae46b5ceee67476f52613ad796db4">+42/-42</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppGroups.vue</strong><dd><code>Style IAM groups header &
table actions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-402fb2a5338e60fdc3da489f4d50b5cf52f06b4e884a6fe7b82441c9fa5ea22c">+14/-17</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppTable.vue</strong><dd><code>Add header slot & table
styling support</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-efcf66a9e913b5d3a7c2eea800b7f4e54d9e5268307131482fd40f32e2074d8e">+7/-8</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>GroupUsers.vue</strong><dd><code>Enhance group users
selection table styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-114c767db76d4a09278c765d8aba39a1936c861488f39e7f0f6b3883499a3c40">+6/-15</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>GroupServiceAccounts.vue</strong><dd><code>Style group
service-accounts selection table</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-b7afafc6b850c2d6edc2b855e78ff51d95d101937ec001a5790d130f4fb60695">+5/-14</a>&nbsp;
&nbsp; </td>

</tr>

</table></details></td></tr><tr><td><strong>Formatting</strong></td><td><details><summary>1
files</summary><table>
<tr>
<td><strong>index.vue</strong><dd><code>Adjust settings page title
spacing</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-699c63979f851c48ad440a078e93282fd797a18fc065e5331b2e41122ddb8b69">+2/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></details></td></tr><tr><td><strong>Configuration
changes</strong></td><td><details><summary>1 files</summary><table>
<tr>
<td><strong>app.scss</strong><dd><code>Add global table styling
definitions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-5703d12504b0395cbfbbfad02a592bc391496026e5f03743102ce06c210ea05f">+128/-1</a>&nbsp;
</td>

</tr>
</table></details></td></tr><tr><td><strong>Additional
files</strong></td><td><details><summary>3 files</summary><table>
<tr>
  <td><strong>GroupRoles.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-d7d1d9ec26ff77175b0e961e3e53e7ced45c9211eae8a0c00f7ac1cdac88ae14">+3/-8</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>EditRole.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-263b6bc7d29fdf8358c8437cd637f1350aa3733cc2706eae8ff00028686cc0f5">+0/-14</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
  <td><strong>PermissionsTable.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-609d4d7245b7309cf30cc45c22c996c6b068ebc042a9673e75ee3bbd2aa00a2a">+7/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></details></td></tr></tr></tbody></table>

___

> <details> <summary> Need help?</summary><li>Type <code>/help how to
...</code> in the comments thread for any questions about PR-Agent
usage.</li><li>Check out the <a
href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a>
for more information.</li></details>
This commit is contained in:
Sai Nikhil
2025-07-18 15:05:36 +05:30
committed by GitHub
parent b9986c94fe
commit 174e90e1e2
26 changed files with 1251 additions and 992 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/AppTable.vue
+7 -8
View File
@@ -42,7 +42,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:filter="filter && filter.value"
:filter-method="filter && filter.method"
@virtual-scroll="onScroll"
class="full-height"
>
<template #no-data>
<NoData class="q-mb-lg" />
@@ -52,6 +51,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<q-th
v-for="col in props.cols"
:key="col.name"
:class="col.classes || ''"
:props="props"
:style="col.style"
>
@@ -60,13 +60,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-tr>
</template>
<template #top="scope">
<div class="tw-flex tw-items-center tw-justify-between tw-w-full q-py-xs ">
<span class="tw-font-bold tw-text-[14px] tw-w-full q-pa-none">
{{ rows.length }} {{ title }}
</span>
<QTablePagination
:scope="scope"
:resultTotal="resultTotal"
:perPageOptions="perPageOptions"
position="top"
@update:changeRecordPerPage="changePagination"
style="padding: 0px;"
/>
</div>
</template>
<template v-slot:body="props">
<q-tr :props="props" :key="`m_${props.row.index}`">
@@ -124,7 +130,6 @@ import { ref } from "vue";
import QTablePagination from "@/components/shared/grid/Pagination.vue";
import { computed,watch } from "vue";
import NoData from "./shared/grid/NoData.vue";
const props = defineProps({
columns: {
type: Array,
@@ -242,12 +247,6 @@ watch(
top: 0;
opacity: 1;
z-index: 1;
background: #f5f5f5;
}
.q-table--dark .thead-sticky,
.q-table--dark .tfoot-sticky {
background: #565656 !important;
}
.q-table__bottom {
web/src/components/actionScripts/ActionScipts.vue
+56 -62
View File
@@ -19,13 +19,46 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<div
data-test="action-scripts-list-page"
class="q-pa-none flex tw-w-full"
style="height: calc(100vh - 42px)"
class="q-pa-none tw-w-full"
style="height: calc(100vh - 57px)"
:class="store.state.theme === 'dark' ? 'dark-theme' : 'light-theme'"
>
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3 tw-w-full"
:class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title" data-test="alerts-list-title">
{{ t("actions.header") }}
</div>
<div class="tw-full-width tw-flex tw-items-center tw-justify-end">
<q-input
data-test="action-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto no-border tw-w-[350px]"
:placeholder="t('actions.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="action-list-add-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`actions.add`)"
@click="showAddUpdateFn({})"
/>
</div>
</div>
<div
v-if="!showAddActionScriptDialog"
class="full-width action-scripts-table"
style="height: calc(100vh - 112px) ; overflow-y: auto;"
>
<q-table
data-test="action-scripts-table"
@@ -37,7 +70,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:filter="filterQuery"
:filter-method="filterData"
style="width: 100%"
>
class="o2-quasar-table"
:class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #no-data>
<NoData />
</template>
@@ -95,32 +130,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<template #top="scope">
<div class="q-table__title" data-test="alerts-list-title">
{{ t("actions.header") }}
</div>
<q-input
data-test="action-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border tw-w-[350px]"
:placeholder="t('actions.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="action-list-add-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`actions.add`)"
@click="showAddUpdateFn({})"
/>
<QTablePagination
:scope="scope"
:pageTitle="t('actions.header')"
@@ -140,6 +149,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Rendering the of the columns -->
<!-- here we can add the classes class so that the head will be sticky -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<template v-else>
@@ -355,6 +380,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px;",
},
{
name: "name",
@@ -411,6 +437,7 @@ export default defineComponent({
label: t("alerts.actions"),
align: "center",
sortable: false,
classes: "actions-column",
},
]);
const activeTab: any = ref("alerts");
@@ -948,39 +975,6 @@ export default defineComponent({
</script>
<style lang="scss">
.q-table {
&__top {
border-bottom: 1px solid $border-color;
justify-content: flex-end;
}
}
.alert-list-table {
th:last-child,
td:last-child {
position: sticky;
right: 0;
z-index: 1;
background: #ffffff;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
}
}
.dark-theme {
th:last-child,
td:last-child {
background: var(--q-dark);
box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
}
}
.light-theme {
th:last-child,
td:last-child {
background: #ffffff;
}
}
.alerts-tabs {
.q-tabs {
&--vertical {
web/src/components/alerts/AlertList.vue
+152 -156
View File
@@ -25,18 +25,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
<div
v-if="!showAddAlertDialog && !showImportAlertDialog"
class="flex justify-between full-width q-px-md q-pt-md"
class="flex justify-between full-width tw-py-3 tw-px-4 items-center"
>
<div class="q-table__title" data-test="alerts-list-title">
{{ t("alerts.header") }}
</div>
<div class="flex q-ml-auto tw-ps-2 alerts-list-tabs items-center">
<app-tabs
class="q-mr-md"
<div class="flex q-ml-auto tw-ps-2 items-center">
<div class="app-tabs-container q-mr-md">
<app-tabs
class="tabs-selection-container"
:class="store.state.theme === 'dark' ? 'tabs-selection-container-dark' : 'tabs-selection-container-light'"
:tabs="tabs"
v-model:active-tab="activeTab"
@update:active-tab="filterAlertsByTab"
/>
</div>
<q-input
v-model="dynamicQueryModel"
dense
@@ -83,7 +86,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<q-btn
data-test="alert-list-add-alert-btn"
class="q-ml-md q-mb-xs text-bold no-border"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
@@ -122,14 +125,34 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
row-key="alert_id"
:pagination="pagination"
style="width: 100%"
class="o2-quasar-table"
:class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #header-selection="scope">
<q-checkbox
v-model="scope.selected"
size="sm"
color="secondary"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Adding this block to render the select-all checkbox -->
<q-th auto-width>
<q-checkbox
v-model="props.selected"
size="sm"
color="secondary"
@update:model-value="props.select"
/>
</q-th>
<!-- Rendering the rest of the columns -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
<template v-slot:body-selection="scope">
<q-checkbox
v-model="scope.selected"
@@ -196,118 +219,121 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</template>
<template v-else-if="col.name == 'actions'">
<div
data-test="alert-list-loading-alert"
v-if="alertStateLoadingMap[props.row.uuid]"
style="
display: inline-block;
width: 33.14px;
height: auto;
"
class="flex justify-center items-center q-ml-xs"
:title="`Turning ${props.row.enabled ? 'Off' : 'On'}`"
<div class="tw-flex tw-items-center actions-container"
>
<q-circular-progress
indeterminate
rounded
size="16px"
:value="1"
color="secondary"
<div
data-test="alert-list-loading-alert"
v-if="alertStateLoadingMap[props.row.uuid]"
style="
display: inline-block;
width: 33.14px;
height: auto;
"
class="flex justify-center items-center q-ml-xs"
:title="`Turning ${props.row.enabled ? 'Off' : 'On'}`"
>
<q-circular-progress
indeterminate
rounded
size="16px"
:value="1"
color="secondary"
/>
</div>
<q-btn
v-else
:data-test="`alert-list-${props.row.name}-pause-start-alert`"
:icon="
props.row.enabled ? outlinedPause : outlinedPlayArrow
"
class="q-ml-xs material-symbols-outlined"
padding="sm"
unelevated
size="sm"
:color="props.row.enabled ? 'negative' : 'positive'"
round
flat
:title="
props.row.enabled
? t('alerts.pause')
: t('alerts.start')
"
@click.stop="toggleAlertState(props.row)"
/>
</div>
<q-btn
v-else
:data-test="`alert-list-${props.row.name}-pause-start-alert`"
:icon="
props.row.enabled ? outlinedPause : outlinedPlayArrow
"
class="q-ml-xs material-symbols-outlined"
padding="sm"
unelevated
size="sm"
:color="props.row.enabled ? 'negative' : 'positive'"
round
flat
:title="
props.row.enabled
? t('alerts.pause')
: t('alerts.start')
"
@click.stop="toggleAlertState(props.row)"
/>
<q-btn
:data-test="`alert-list-${props.row.name}-update-alert`"
icon="edit"
unelevated
size="sm"
round
flat
:title="t('alerts.edit')"
@click.stop="editAlert(props.row)"
></q-btn>
<q-btn
icon="content_copy"
:title="t('alerts.clone')"
unelevated
size="sm"
round
flat
@click.stop="duplicateAlert(props.row)"
:data-test="`alert-list-${props.row.name}-clone-alert`"
></q-btn>
<q-btn
:icon="outlinedMoreVert"
unelevated
size="sm"
round
flat
@click.stop="openMenu($event, props.row)"
:data-test="`alert-list-${props.row.name}-more-options`"
>
<q-menu>
<q-list style="min-width: 100px">
<q-item
class="flex items-center"
clickable
v-close-popup
@click="moveAlertToAnotherFolder(props.row)"
>
<q-item-section dense avatar>
<q-icon
size="16px"
:name="outlinedDriveFileMove"
/>
</q-item-section>
<q-item-section>Move</q-item-section>
</q-item>
<q-btn
:data-test="`alert-list-${props.row.name}-update-alert`"
icon="edit"
unelevated
size="sm"
round
flat
:title="t('alerts.edit')"
@click.stop="editAlert(props.row)"
></q-btn>
<q-btn
icon="content_copy"
:title="t('alerts.clone')"
unelevated
size="sm"
round
flat
@click.stop="duplicateAlert(props.row)"
:data-test="`alert-list-${props.row.name}-clone-alert`"
></q-btn>
<q-btn
:icon="outlinedMoreVert"
unelevated
size="sm"
round
flat
@click.stop="openMenu($event, props.row)"
:data-test="`alert-list-${props.row.name}-more-options`"
>
<q-menu>
<q-list style="min-width: 100px">
<q-item
class="flex items-center"
clickable
v-close-popup
@click="moveAlertToAnotherFolder(props.row)"
>
<q-item-section dense avatar>
<q-icon
size="16px"
:name="outlinedDriveFileMove"
/>
</q-item-section>
<q-item-section>Move</q-item-section>
</q-item>
<q-item
class="flex items-center justify-center"
clickable
v-close-popup
@click="showDeleteDialogFn(props)"
>
<q-item-section dense avatar>
<q-icon size="16px" :name="outlinedDelete" />
</q-item-section>
<q-item-section>{{
t("alerts.delete")
}}</q-item-section>
</q-item>
<q-item
class="flex items-center justify-center"
clickable
v-close-popup
@click="exportAlert(props.row)"
>
<q-item-section dense avatar>
<q-icon size="16px" name="download" />
</q-item-section>
<q-item-section>Export</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-item
class="flex items-center justify-center"
clickable
v-close-popup
@click="showDeleteDialogFn(props)"
>
<q-item-section dense avatar>
<q-icon size="16px" :name="outlinedDelete" />
</q-item-section>
<q-item-section>{{
t("alerts.delete")
}}</q-item-section>
</q-item>
<q-item
class="flex items-center justify-center"
clickable
v-close-popup
@click="exportAlert(props.row)"
>
<q-item-section dense avatar>
<q-icon size="16px" name="download" />
</q-item-section>
<q-item-section>Export</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</template>
<template v-else>
{{ props.row[col.field] }}
@@ -754,6 +780,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -809,6 +836,7 @@ export default defineComponent({
align: "center",
sortable: false,
style: "width: 150px",
classes: 'actions-column' //this is the class that we are adding to the actions column so that we can apply the styling to the actions column only
},
];
if (searchAcrossFolders.value && searchQuery.value != "") {
@@ -2023,40 +2051,6 @@ export default defineComponent({
width: calc(14vw);
}
.q-table {
&__top {
border-bottom: 1px solid $border-color;
justify-content: flex-end;
}
}
.alert-list-table {
th:last-child,
td:last-child {
//the fixed width as we have moved some actions to the menu so lot of space is occupied by actions section so remvoed that
padding: 10px !important;
position: sticky;
right: 0;
z-index: 1;
background: #ffffff;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
}
}
.dark-theme {
th:last-child,
td:last-child {
background: var(--q-dark);
box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
}
}
.light-theme {
th:last-child,
td:last-child {
background: #ffffff;
}
}
.alerts-tabs {
.q-tabs {
@@ -2118,8 +2112,9 @@ export default defineComponent({
</style>
<style lang="scss" scoped>
.dark-mode {
.dark-theme {
background-color: $dark-page;
.alerts-list-tabs {
height: fit-content;
@@ -2129,6 +2124,7 @@ export default defineComponent({
}
:deep(.rum-tab) {
&:hover {
background: #464646;
}
web/src/components/alerts/AlertsDestinationList.vue
+66 -39
View File
@@ -15,18 +15,62 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<q-page class="q-pa-none" style="min-height: inherit">
<div v-if="!showDestinationEditor && !showImportDestination">
<q-page class="q-pa-none" style="height: 100%; min-height: inherit" >
<div v-if="!showDestinationEditor && !showImportDestination" style="height: calc(100vh - 112px); overflow-y: auto;" >
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title" data-test="alert-destinations-list-title">
{{ t("alert_destinations.header") }}
</div>
<div class="tw-flex tw-justify-end">
<q-input
data-test="destination-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto no-border"
:placeholder="t('alert_destinations.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
class="q-ml-md text-bold"
padding="sm lg"
outline
no-caps
:label="t(`dashboard.import`)"
@click="importDestination"
data-test="destination-import"
/>
<q-btn
data-test="alert-destination-list-add-alert-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:disable="!templates.length"
:label="t(`alert_destinations.add`)"
@click="editDestination(null)"
/>
</div>
</div>
<q-table
data-test="alert-destinations-list-table"
ref="qTable"
:rows="destinations"
:columns="columns"
row-key="id"
style="width: 100%"
style="width: 100%;"
:pagination="pagination"
:filter="filterQuery"
:filter-method="filterData"
class="o2-quasar-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #no-data>
<div
@@ -97,41 +141,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div class="q-table__title" data-test="alert-destinations-list-title">
{{ t("alert_destinations.header") }}
</div>
<q-input
data-test="destination-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border"
:placeholder="t('alert_destinations.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
class="q-ml-md text-bold"
padding="sm lg"
outline
no-caps
:label="t(`dashboard.import`)"
@click="importDestination"
data-test="destination-import"
/>
<q-btn
data-test="alert-destination-list-add-alert-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:disable="!templates.length"
:label="t(`alert_destinations.add`)"
@click="editDestination(null)"
/>
<QTablePagination
:scope="scope"
@@ -152,6 +161,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Render the table headers -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<div v-else-if="showDestinationEditor && !showImportDestination">
@@ -228,12 +251,14 @@ export default defineComponent({
const { t } = useI18n();
const q = useQuasar();
const { getAllActions } = useActions();
const columns: any = ref<QTableProps["columns"]>([
{
name: "#",
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -255,6 +280,7 @@ export default defineComponent({
label: t("alert_destinations.method"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "actions",
@@ -262,7 +288,7 @@ export default defineComponent({
label: t("alert_destinations.actions"),
align: "center",
sortable: false,
style: "width: 110px",
classes:'actions-column'
},
]);
const destinations: Ref<DestinationPayload[]> = ref([]);
@@ -551,6 +577,7 @@ export default defineComponent({
exportDestination,
showImportDestination,
importDestination,
store,
};
},
});
web/src/components/alerts/PipelinesDestinationList.vue
+52 -28
View File
@@ -16,7 +16,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<q-page class="q-pa-none" style="min-height: inherit">
<div v-if="!showDestinationEditor">
<div v-if="!showDestinationEditor" style="height: calc(100vh - 112px); overflow-y: auto;">
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title" data-test="alert-destinations-list-title">
{{ t("pipeline_destinations.header") }}
</div>
<div class="tw-flex tw-justify-end">
<q-input
data-test="destination-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto no-border"
:placeholder="t('alert_destinations.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="alert-destination-list-add-alert-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`alert_destinations.add`)"
@click="editDestination(null)"
/>
</div>
</div>
<q-table
data-test="alert-destinations-list-table"
ref="qTable"
@@ -27,6 +58,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:pagination="pagination"
:filter="filterQuery"
:filter-method="filterData"
class="o2-quasar-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #no-data>
<template>
@@ -62,32 +95,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div class="q-table__title" data-test="alert-destinations-list-title">
{{ t("pipeline_destinations.header") }}
</div>
<q-input
data-test="destination-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border"
:placeholder="t('alert_destinations.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="alert-destination-list-add-alert-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`alert_destinations.add`)"
@click="editDestination(null)"
/>
<QTablePagination
:scope="scope"
:pageTitle="t('pipeline_destinations.header')"
@@ -107,6 +114,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- render the table headers -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<div v-else>
@@ -166,6 +187,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -187,6 +209,7 @@ export default defineComponent({
label: t("alert_destinations.method"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "actions",
@@ -194,7 +217,7 @@ export default defineComponent({
label: t("alert_destinations.actions"),
align: "center",
sortable: false,
style: "width: 110px",
classes:'actions-column'
},
]);
const destinations: Ref<DestinationPayload[]> = ref([]);
@@ -422,6 +445,7 @@ export default defineComponent({
pagination,
outlinedDelete,
routeTo,
store,
};
},
});
web/src/components/alerts/TemplateList.vue
+59 -36
View File
@@ -16,7 +16,47 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<q-page class="q-pa-none" style="min-height: inherit">
<div v-if="!showImportTemplate && !showTemplateEditor">
<div v-if="!showImportTemplate && !showTemplateEditor" style="height: calc(100vh - 112px); overflow-y: auto;">
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title" data-test="alert-templates-list-title">
{{ t("alert_templates.header") }}
</div>
<div class="tw-flex tw-justify-end">
<q-input
data-test="template-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border"
:placeholder="t('alert_templates.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
class="q-ml-md text-bold"
padding="sm lg"
outline
no-caps
:label="t(`dashboard.import`)"
@click="importTemplate"
data-test="template-import"
/>
<q-btn
data-test="alert-template-list-add-alert-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`alert_templates.add`)"
@click="editTemplate(null)"
/>
</div>
</div>
<q-table
data-test="alert-templates-list-table"
ref="qTableRef"
@@ -28,6 +68,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:pagination="pagination"
:filter="filterQuery"
:filter-method="filterData"
class="o2-quasar-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #no-data>
<NoData />
@@ -73,40 +115,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div class="q-table__title" data-test="alert-templates-list-title">
{{ t("alert_templates.header") }}
</div>
<q-input
data-test="template-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border"
:placeholder="t('alert_templates.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
class="q-ml-md text-bold"
padding="sm lg"
outline
no-caps
:label="t(`dashboard.import`)"
@click="importTemplate"
data-test="template-import"
/>
<q-btn
data-test="alert-template-list-add-alert-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`alert_templates.add`)"
@click="editTemplate(null)"
/>
<QTablePagination
:scope="scope"
:pageTitle="t('alert_templates.header')"
@@ -125,6 +133,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- render the table headers -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<div v-else-if="!showImportTemplate && showTemplateEditor">
@@ -177,6 +199,7 @@ const columns: any = ref<QTableProps["columns"]>([
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -191,7 +214,7 @@ const columns: any = ref<QTableProps["columns"]>([
label: t("alert_templates.actions"),
align: "center",
sortable: false,
style: "width: 110px",
classes:'actions-column'
},
]);
const showTemplateEditor = ref(false);
web/src/components/functions/EnrichmentTableList.vue
+54 -34
View File
@@ -19,6 +19,35 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<q-page class="q-pa-none" style="min-height: inherit">
<div v-if="!showAddJSTransformDialog">
<div :class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
class="tw-flex tw-items-center tw-justify-between tw-py-3 tw-px-4"
>
<div class="q-table__title">
{{ t("function.enrichmentTables") }}
</div>
<div class="q-ml-auto" data-test="enrichment-tables-search-input">
<q-input
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto no-border search-en-table-input"
:placeholder="t('function.searchEnrichmentTable')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
</div>
<q-btn
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`function.addEnrichmentTable`)"
@click="showAddUpdateFn({})"
/>
</div>
<q-table
ref="qTable"
:rows="jsTransforms"
@@ -28,7 +57,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:filter="filterQuery"
:filter-method="filterData"
style="width: 100%"
dense
:class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
class="o2-quasar-table"
>
<template #no-data>
<NoData />
@@ -94,33 +124,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div class="q-table__title">
{{ t("function.enrichmentTables") }}
</div>
<div class="q-ml-auto" data-test="enrichment-tables-search-input">
<q-input
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border search-en-table-input"
:placeholder="t('function.searchEnrichmentTable')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
</div>
<q-btn
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`function.addEnrichmentTable`)"
@click="showAddUpdateFn({})"
/>
<QTablePagination
style="padding: 0px !important;"
:scope="scope"
:pageTitle="t('function.enrichmentTables')"
:position="'top'"
@@ -139,6 +144,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Rendering the of the columns -->
<!-- here we can add the classes class so that the head will be sticky -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<div v-else>
@@ -222,6 +242,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -239,6 +260,7 @@ export default defineComponent({
sort: (a, b, rowA, rowB) => {
return parseInt(rowA.doc_num) - parseInt(rowB.doc_num);
},
style: "width: 150px",
},
{
name: "storage_size",
@@ -249,6 +271,7 @@ export default defineComponent({
sort: (a, b, rowA, rowB) => {
return rowA.original_storage_size - rowB.original_storage_size;
},
style: "width: 150px",
},
{
name: "compressed_size",
@@ -257,14 +280,17 @@ export default defineComponent({
align: "left",
sortable: false,
sort: (a, b, rowA, rowB) =>
rowA.original_compressed_size - rowB.original_compressed_size,
rowA.original_compressed_size- rowB.original_compressed_size,
style: "width: 150px",
},
{
name: "actions",
field: "actions",
label: t("function.actions"),
align: "center",
sortable: false,
classes: "actions-column",
},
]);
const { getStreams, resetStreamType, getStream } = useStreams();
@@ -592,12 +618,6 @@ export default defineComponent({
</script>
<style lang="scss">
.q-table {
&__top {
border-bottom: 1px solid $border-color;
justify-content: flex-end;
}
}
.search-en-table-input {
.q-field__inner {
web/src/components/functions/FunctionList.vue
+50 -33
View File
@@ -19,6 +19,35 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<q-page class="q-pa-none" style="min-height: inherit">
<div v-if="!showAddJSTransformDialog">
<div class="tw-flex tw-items-center tw-justify-between tw-py-3 tw-px-4"
:class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title">
{{ t("function.header") }}
</div>
<div class="q-ml-auto" data-test="functions-list-search-input">
<q-input
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto no-border"
:placeholder="t('function.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
</div>
<q-btn
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`function.add`)"
@click="showAddUpdateFn({})"
/>
</div>
<q-table
ref="qTable"
:rows="jsTransforms"
@@ -28,7 +57,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:filter="filterQuery"
:filter-method="filterData"
style="width: 100%"
dense
:class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
class="o2-quasar-table"
>
<template #no-data>
<NoData />
@@ -82,33 +112,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div class="q-table__title">
{{ t("function.header") }}
</div>
<div class="q-ml-auto" data-test="functions-list-search-input">
<q-input
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border"
:placeholder="t('function.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
</div>
<q-btn
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`function.add`)"
@click="showAddUpdateFn({})"
/>
<QTablePagination
style="padding: 0px !important;"
:scope="scope"
:pageTitle="t('function.header')"
:position="'top'"
@@ -127,6 +132,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Rendering the of the columns -->
<!-- here we can add the classes class so that the head will be sticky -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<div v-else>
@@ -253,6 +274,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -267,6 +289,7 @@ export default defineComponent({
label: t("function.actions"),
align: "center",
sortable: false,
classes:'actions-column'
},
]);
@@ -620,12 +643,6 @@ export default defineComponent({
</script>
<style lang="scss">
.q-table {
&__top {
border-bottom: 1px solid $border-color;
justify-content: flex-end;
}
}
.pipeline-list-container {
max-height: 200px; /* Adjust based on item height to fit 5 items */
overflow-y: auto;
web/src/components/iam/groups/AppGroups.vue
+15 -18
View File
@@ -15,24 +15,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div>
<div class="q-pa-none">
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div
data-test="iam-groups-section-title"
style="font-size: 18px; padding-top: 12px"
class="q-mb-md q-px-md"
class="q-table__title"
>
{{ t("iam.groups") }}
</div>
<div>
<div class="q-px-md q-mb-sm q-pb-xs row items-center justify-between">
<div class=" row items-center justify-end">
<div date-test="iam-groups-search-input">
<q-input
v-model="filterQuery"
filled
dense
class="q-pr-sm"
style="width: 500px"
class="col-6"
:placeholder="t('iam.searchGroup')"
>
<template #prepend>
@@ -42,7 +41,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
<q-btn
data-test="alert-list-add-alert-btn"
class="q-ml-md q-mb-xs text-bold no-border q-mr-sm"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
@@ -50,16 +49,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@click="addGroup"
/>
</div>
<div
data-test="iam-groups-table-title"
class="q-px-md q-pt-sm q-ml-xs text-bold"
style="font-size: 14px; padding-bottom: 12px"
>
{{ rows.length }} {{ t("iam.groups") }}
</div>
</div>
<div>
<app-table
data-test="iam-groups-table-section"
class="iam-table"
class="iam-table o2-quasar-app-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-app-table-dark': 'o2-quasar-app-table-light'"
:rows="rows"
:columns="columns"
pagination
@@ -69,6 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
method: filterGroups,
}"
:bordered="false"
:title="t('iam.groups')"
>
<template v-slot:actions="slotProps: any">
<div>
@@ -151,6 +147,7 @@ const columns: any = [
label: "#",
field: "#",
align: "left",
style: "width: 67px;",
},
{
name: "group_name",
@@ -167,7 +164,7 @@ const columns: any = [
sortable: false,
slot: true,
slotName: "actions",
style: "width: 400px",
classes: "actions-column",
},
];
web/src/components/iam/groups/EditGroup.vue
-6
View File
@@ -63,12 +63,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="flex justify-end q-px-md q-py-sm full-width"
style="position: sticky; bottom: 0px; z-index: 2"
:class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
:style="{
'box-shadow':
store.state.theme === 'dark'
? 'rgb(45 45 45) 0px -4px 7px 0px'
: 'rgb(240 240 240) 0px -4px 7px 0px',
}"
>
<q-btn
data-test="add-alert-cancel-btn"
web/src/components/iam/groups/GroupRoles.vue
+3 -14
View File
@@ -15,17 +15,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div data-test="iam-roles-selection-section" class="col q-pr-xs">
<div data-test="iam-roles-selection-section" class="col">
<div
class="flex justify-start bordered q-px-md q-py-sm"
style="position: sticky; top: 0px; z-index: 2"
:class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
:style="{
'box-shadow':
store.state.theme === 'dark'
? 'rgb(45 45 45) 0px 4px 7px 0px'
: 'rgb(240 240 240) 0px 4px 7px 0px',
}"
>
<div class="q-mr-md">
<div
@@ -83,13 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-input>
</div>
</div>
<div data-test="iam-roles-selection-table" class="q-px-md">
<div
data-test="iam-roles-selection-table-title"
class="q-my-sm text-bold"
>
{{ rows.length }} Roles
</div>
<div data-test="iam-roles-selection-table">
<template v-if="rows.length">
<app-table
:rows="rows"
@@ -100,6 +88,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
value: userSearchKey,
method: filterRoles,
}"
:title="t('iam.roles')"
>
<template v-slot:select="slotProps: any">
<q-checkbox
web/src/components/iam/groups/GroupServiceAccounts.vue
+5 -14
View File
@@ -15,17 +15,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div class="col q-pr-xs">
<div class="col">
<div
data-test="iam-service-accounts-selection-filters"
class="flex justify-start bordered q-px-md q-py-sm"
:class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
:style="{
'box-shadow':
store.state.theme === 'dark'
? 'rgb(45 45 45) 0px 4px 7px 0px'
: 'rgb(240 240 240) 0px 4px 7px 0px',
}"
style="position: sticky; top: 0px; z-index: 2"
>
<div data-test="iam-service-accounts-selection-show-toggle" class="q-mr-md">
@@ -81,13 +75,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-input>
</div>
</div>
<div data-test="iam-service-accounts-selection-table" class="q-px-md">
<div
data-test="iam-service-accounts-selection-table-title"
class="q-my-sm text-bold"
>
{{ rows.length }} {{t('iam.serviceAccounts')}}
</div>
<div data-test="iam-service-accounts-selection-table">
<template v-if="rows.length">
<app-table
:rows="rows"
@@ -95,10 +83,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:dense="true"
:virtual-scroll="false"
style="height: fit-content"
class="o2-quasar-table"
:filter="{
value: userSearchKey,
method: filterUsers,
}"
:title="t('iam.serviceAccounts')"
>
<template v-slot:select="slotProps: any">
<q-checkbox
@@ -192,6 +182,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
sortable: false,
slot: true,
slotName: "select",
style: "width: 67px"
},
{
name: "email",
web/src/components/iam/groups/GroupUsers.vue
+6 -15
View File
@@ -15,17 +15,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div class="col q-pr-xs">
<div class="col">
<div
data-test="iam-users-selection-filters"
class="flex justify-start items-center bordered q-px-md q-py-sm"
class="flex justify-start bordered q-px-md q-py-sm"
:class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
:style="{
'box-shadow':
store.state.theme === 'dark'
? 'rgb(45 45 45) 0px 4px 7px 0px'
: 'rgb(240 240 240) 0px 4px 7px 0px',
}"
style="position: sticky; top: 0px; z-index: 2"
>
<div data-test="iam-users-selection-show-toggle" class="q-mr-md">
@@ -106,13 +100,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<div data-test="iam-users-selection-table" class="q-px-md">
<div
data-test="iam-users-selection-table-title"
class="q-my-sm text-bold"
>
{{ rows.length }} Users
</div>
<div data-test="iam-users-selection-table">
<template v-if="rows.length">
<app-table
:rows="rows"
@@ -124,6 +112,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
value: userSearchKey,
method: filterUsers,
}"
:title="t('iam.users')"
class="o2-quasar-table"
>
<template v-slot:select="slotProps: any">
<q-checkbox
@@ -228,6 +218,7 @@ const columns = computed(() => {
sortable: false,
slot: true,
slotName: "select",
style: "width: 67px"
},
{
name: "email",
web/src/components/iam/organizations/ListOrganizations.vue
+40 -36
View File
@@ -18,7 +18,40 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
<q-page class="q-pa-none">
<q-table
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
style="position: sticky; top: 0; z-index: 1000 ;"
>
<div class="q-table__title full-width" data-test="organizations-title-text">{{ t("organization.header") }}</div>
<div class="full-width tw-flex tw-justify-end">
<q-input
v-model="filterQuery"
filled
dense
class="col-6"
:placeholder="t('organization.search')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<q-btn
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
style="float: right; cursor: pointer !important"
no-caps
dense
:label="t(`organization.add`)"
@click="addOrganization"
data-test="Add Organization"
/>
</div>
</div>
<div>
<q-table
ref="qTable"
:rows="organizations"
:columns="columns"
@@ -27,6 +60,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:filter="filterQuery"
:filter-method="filterData"
:loading="loading"
class="o2-quasar-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #no-data><NoData /></template>
@@ -47,41 +82,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template> -->
<template #top="scope">
<div
class="full-width flex justify-between items-start"
style="margin-bottom: 2px; height: 44px"
>
<div class="q-table__title">{{ t("organization.header") }}</div>
</div>
<div class="full-width row q-mb-xs items-start">
<div class="col">
<q-input
v-model="filterQuery"
filled
dense
class="col-6 q-pr-sm"
style="width: 400px"
:placeholder="t('organization.search')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="col-3">
<q-btn
class="q-ml-md q-mb-xs text-bold no-border float-right"
padding="sm lg"
color="secondary"
no-caps
dense
:label="t(`organization.add`)"
@click="addOrganization"
data-test="Add Organization"
/>
</div>
</div>
<QTablePagination
:scope="scope"
:pageTitle="t('organization.header')"
@@ -104,6 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- @update:maxRecordToReturn="changeMaxRecordToReturn" -->
</template>
</q-table>
</div>
<q-dialog
v-model="showAddOrganizationDialog"
position="right"
@@ -159,6 +160,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px;",
},
{
name: "name",
@@ -173,6 +175,7 @@ export default defineComponent({
label: t("organization.identifier"),
align: "left",
sortable: true,
},
{
name: "type",
@@ -180,6 +183,7 @@ export default defineComponent({
label: t("organization.type"),
align: "left",
sortable: true,
style: "width: 150px;",
},
]);
web/src/components/iam/roles/AppRoles.vue
+41 -42
View File
@@ -15,52 +15,47 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div
data-test="iam-roles-section-title"
style="font-size: 18px; padding-top: 12px"
class="q-mb-md q-px-md"
>
{{ t("iam.roles") }}
</div>
<div>
<div class="q-px-md q-mb-sm q-pb-xs row items-center justify-between">
<div date-test="iam-roles-search-input">
<q-input
v-model="filterQuery"
filled
dense
class="q-pr-sm"
style="width: 500px"
:placeholder="t('iam.searchRole')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<q-page class="q-pa-none">
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div
data-test="iam-roles-section-title"
class="q-table__title"
>
{{ t("iam.roles") }}
</div>
<div class="row items-center justify-end">
<div date-test="iam-roles-search-input">
<q-input
v-model="filterQuery"
filled
dense
class="col-6"
:placeholder="t('iam.searchRole')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
</div>
<q-btn
data-test="alert-list-add-alert-btn"
class="q-ml-md q-mb-xs text-bold no-border q-mr-sm"
padding="sm lg"
color="secondary"
no-caps
:label="t(`iam.addRole`)"
@click="addRole"
/>
</div>
<div
data-test="iam-roles-table-title"
class="q-px-md q-pt-sm q-ml-xs text-bold"
style="font-size: 14px; padding-bottom: 12px"
>
{{ rows.length }} {{ t("iam.roles") }}
<!-- Add QTablePagination here -->
<q-btn
data-test="alert-list-add-alert-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`iam.addRole`)"
@click="addRole"
/>
</div>
</div>
<div>
<app-table
data-test="iam-roles-table-section"
class="iam-table"
class="iam-table o2-quasar-app-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-app-table-dark': 'o2-quasar-app-table-light'"
:rows="rows"
:columns="columns"
pagination
@@ -70,6 +65,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
method: filterRoles,
}"
:bordered="false"
:title="t('iam.roles')"
>
<template v-slot:actions="slotProps: any">
<div>
@@ -107,6 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:cancel="deleteConformDialog.show = false"
v-model="deleteConformDialog.show"
/>
</q-page>
</template>
<script setup lang="ts">
@@ -145,6 +143,7 @@ const columns: any = [
label: "#",
field: "#",
align: "left",
style: "width: 67px"
},
{
name: "role_name",
@@ -161,7 +160,7 @@ const columns: any = [
sortable: false,
slot: true,
slotName: "actions",
style: "width: 400px",
classes: "actions-column",
},
];
web/src/components/iam/roles/EditRole.vue
-14
View File
@@ -75,13 +75,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div
class="flex justify-between items-center"
:class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
:style="{
'box-shadow':
store.state.theme === 'dark'
? 'rgb(45 45 45) 0px 4px 7px 0px'
: 'rgb(240 240 240) 0px 4px 7px 0px',
height: '56px',
}"
>
<div
v-show="permissionsUiType === 'table'"
@@ -200,7 +193,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div
data-test="edit-role-permissions-table-section"
class="q-px-md q-my-sm"
>
<div v-show="permissionsUiType === 'table'">
<permissions-table
@@ -286,12 +278,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="flex justify-end q-px-md q-py-sm full-width"
style="position: sticky; bottom: 0px; z-index: 2"
:class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
:style="{
'box-shadow':
store.state.theme === 'dark'
? 'rgb(45 45 45) 0px -4px 7px 0px'
: 'rgb(240 240 240) 0px -4px 7px 0px',
}"
>
<q-btn
data-test="edit-role-cancel-btn"
web/src/components/iam/roles/PermissionsTable.vue
+7 -1
View File
@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div
data-test="edit-role-permissions-table-title"
v-if="!level"
class="q-mb-md text-bold"
class="tw-py-[19px] tw-px-[16px] tw-font-bold tw-text-[14px]"
>
{{ visibleResourceCount }} Permissions
</div>
@@ -380,9 +380,15 @@ defineExpose({
<style scoped></style>
<style lang="scss">
.iam-permissions-table {
th{
height: 48px !important;
}
.q-table--bordered {
border: none;
}
.q-table__card{
border-radius: 0px !important;
}
.q-virtual-scroll__padding {
}
web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
+55 -62
View File
@@ -20,16 +20,50 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<q-page class="q-pa-none " :class="store.state.theme === 'dark' ? 'dark-theme' : 'light-theme'" style="min-height: inherit">
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3 tw-full-width"
:class="store.state.theme =='dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div
class="q-table__title full-width"
data-test="service-accounts-title-text"
>
{{ t("serviceAccounts.header") }}
</div>
<div class="full-width tw-flex tw-justify-end">
<q-input
v-model="filterQuery"
filled
dense
class="col-6"
:placeholder="t('serviceAccounts.search')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<q-btn
class="q-ml-md text-bold no-border"
padding="sm lg"
style="float: right; cursor: pointer !important"
color="secondary"
no-caps
dense
:label="t(`serviceAccounts.add`)"
@click="addRoutePush({})"
/>
</div>
</div>
<q-table
ref="qTable"
class="service-accounts-table"
class="o2-quasar-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
:rows="serviceAccountsState.service_accounts_users"
:columns="columns"
row-key="id"
:pagination="pagination"
:filter="filterQuery"
:filter-method="filterData"
dense
>
<template #no-data>
<NoData></NoData>
@@ -126,38 +160,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div
class="q-table__title full-width q-mb-md"
data-test="service-accounts-title-text"
>
{{ t("serviceAccounts.header") }}
</div>
<div class="full-width row q-mb-xs items-start">
<q-input
v-model="filterQuery"
filled
dense
class="col-6 q-pr-sm"
:placeholder="t('serviceAccounts.search')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<div class="col-6">
<q-btn
class="q-ml-md q-mb-xs text-bold no-border"
style="float: right; cursor: pointer !important"
padding="sm lg"
color="secondary"
no-caps
dense
:label="t(`serviceAccounts.add`)"
@click="addRoutePush({})"
/>
</div>
</div>
<QTablePagination
:scope="scope"
:pageTitle="t('serviceAccounts.header')"
@@ -177,6 +179,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Rendering the rest of the columns -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
<q-dialog
@@ -367,6 +384,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px;",
},
{
name: "email",
@@ -381,6 +399,7 @@ export default defineComponent({
label: t("user.description"),
align: "left",
sortable: true,
style: "width: 150px;",
},
{
name: "token",
@@ -388,6 +407,7 @@ export default defineComponent({
label: "token",
align: "left",
sortable: false,
style: "width: 230px;", //because token might take more space for displaying the token , eye button and copy button
},
{
name: "actions",
@@ -395,6 +415,7 @@ export default defineComponent({
label: t("user.actions"),
align: "center",
sortable: false,
classes: "actions-column",
},
]);
const userEmail: any = ref("");
@@ -769,34 +790,6 @@ export default defineComponent({
<style lang="scss" scoped>
.service-accounts-table {
th:last-child,
td:last-child {
position: sticky;
right: 0;
z-index: 1;
background: #ffffff;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
}
}
.dark-theme {
th:last-child,
td:last-child {
background: var(--q-dark);
box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
}
}
.light-theme {
th:last-child,
td:last-child {
background: #ffffff;
}
}
.disabled-opacity {
opacity: 0.1 !important;
}
web/src/components/iam/users/User.vue
+51 -45
View File
@@ -18,6 +18,48 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
<q-page class="q-pa-none" style="min-height: inherit">
<div class="tw-flex tw-flex-row tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div
class="q-table__title full-width"
data-test="user-title-text"
>
{{ t("iam.basicUsers") }}
</div>
<div class="full-width tw-flex tw-justify-end">
<q-input
v-model="filterQuery"
filled
dense
class="col-6"
:placeholder="t('user.search')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<div class="col-6" v-if="config.isCloud == 'true'">
<member-invitation
:key="currentUserRole"
v-model:currentrole="currentUserRole"
/>
</div>
<div class="col-6" v-else>
<q-btn
class="q-ml-md text-bold no-border"
style="float: right; cursor: pointer !important"
padding="sm lg"
color="secondary"
no-caps
dense
:label="t(`user.add`)"
@click="addRoutePush({})"
data-test="add-basic-user"
/>
</div>
</div>
</div>
<q-table
ref="qTable"
:rows="usersState.users"
@@ -26,6 +68,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:pagination="pagination"
:filter="filterQuery"
:filter-method="filterData"
class="o2-quasar-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #no-data>
<NoData></NoData>
@@ -33,7 +77,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols"
:key="col.name" :props="props">
:class="col.classes"
:key="col.name" :props="props">
<span>{{ col.label }}</span>
</q-th>
</q-tr>
@@ -71,44 +116,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div
class="q-table__title full-width q-mb-md"
data-test="user-title-text"
>
{{ t("iam.basicUsers") }}
</div>
<div class="full-width row q-mb-xs items-start">
<q-input
v-model="filterQuery"
filled
dense
class="col-6 q-pr-sm"
:placeholder="t('user.search')"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<div class="col-6" v-if="config.isCloud == 'true'">
<member-invitation
:key="currentUserRole"
v-model:currentrole="currentUserRole"
/>
</div>
<div class="col-6" v-else>
<q-btn
class="q-ml-md q-mb-xs text-bold no-border"
style="float: right; cursor: pointer !important"
padding="sm lg"
color="secondary"
no-caps
dense
:label="t(`user.add`)"
@click="addRoutePush({})"
data-test="add-basic-user"
/>
</div>
</div>
<QTablePagination
:scope="scope"
:pageTitle="t('iam.basicUsers')"
@@ -292,6 +299,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "email",
@@ -306,6 +314,7 @@ export default defineComponent({
label: t("user.firstName"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "last_name",
@@ -313,6 +322,7 @@ export default defineComponent({
label: t("user.lastName"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "role",
@@ -320,12 +330,14 @@ export default defineComponent({
label: t("user.role"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "actions",
field: "actions",
label: t("user.actions"),
align: "left",
classes: 'actions-column'
},
]);
const userEmail: any = ref("");
@@ -893,12 +905,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.q-table {
&__top {
border-bottom: 1px solid $border-color;
justify-content: flex-end;
}
}
.iconHoverBtn {
cursor: pointer !important;
web/src/components/pipeline/PipelinesList.vue
+80 -115
View File
@@ -24,6 +24,56 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
"
class="full-wdith pipeline-list-table"
>
<div class="flex justify-between full-width tw-py-3 tw-px-4 items-center"
:class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title" data-test="pipeline-list-title">
{{ t("pipeline.header") }}
</div>
<div class="tw-flex tw-items-centertabs q-ml-auto">
<div class="app-tabs-container q-mr-md">
<app-tabs
data-test="pipeline-list-tabs"
class="tabs-selection-container"
:class="store.state.theme === 'dark' ? 'tabs-selection-container-dark' : 'tabs-selection-container-light'"
:tabs="tabs"
v-model:active-tab="activeTab"
@update:active-tab="updateActiveTab"
/>
</div>
<q-input
data-test="pipeline-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="no-border"
:placeholder="t('pipeline.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="pipeline-list-import-pipeline-btn"
class="q-ml-md text-bold"
padding="sm lg"
no-caps
:label="t(`pipeline.import`)"
@click="routeToImportPipeline"
/>
<q-btn
data-test="pipeline-list-add-pipeline-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`pipeline.addPipeline`)"
@click="routeToAddPipeline"
/>
</div>
</div>
<q-table
data-test="pipeline-list-table"
ref="qTableRef"
@@ -34,9 +84,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:filter="filterQuery"
:filter-method="filterData"
style="width: 100%"
dense
selection="multiple"
v-model:selected="selectedPipelines"
class="o2-quasar-table"
:class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template v-slot:body="props">
<q-tr
@@ -170,9 +221,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #no-data>
<no-data />
</template>
<template #header-selection="scope">
<q-checkbox v-model="scope.selected" size="sm" color="secondary" />
</template>
<template v-slot:body-selection="scope">
<q-checkbox v-model="scope.selected" size="sm" color="secondary" />
</template>
@@ -188,49 +236,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div class="q-table__title" data-test="pipeline-list-title">
{{ t("pipeline.header") }}
</div>
<div class="tw-flex tw-items-center report-list-tabs q-ml-auto">
<app-tabs
data-test="pipeline-list-tabs"
class="q-mr-md"
:tabs="tabs"
v-model:active-tab="activeTab"
@update:active-tab="updateActiveTab"
/>
<q-input
data-test="pipeline-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-mb-xs no-border"
:placeholder="t('pipeline.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="pipeline-list-import-pipeline-btn"
class="q-ml-md q-mb-xs text-bold"
padding="sm lg"
no-caps
:label="t(`pipeline.import`)"
@click="routeToImportPipeline"
/>
<q-btn
data-test="pipeline-list-add-pipeline-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`pipeline.addPipeline`)"
@click="routeToAddPipeline"
/>
</div>
<q-table-pagination
:scope="scope"
:pageTitle="t('pipeline.header')"
@@ -261,6 +266,31 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</div>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Adding this block to render the select-all checkbox -->
<q-th auto-width>
<q-checkbox
v-model="props.selected"
size="sm"
color="secondary"
@update:model-value="(val) => props.selected = val"
/>
</q-th>
<!-- Rendering the rest of the columns -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
</div>
@@ -487,7 +517,7 @@ const editingPipeline = ref<any | null>(null);
const getColumnsForActiveTab = (tab: any) => {
let realTimeColumns = [
{ name: "#", label: "#", field: "#", align: "left" },
{ name: "#", label: "#", field: "#", align: "left", style: "width: 67px;" },
{
name: "name",
@@ -513,7 +543,7 @@ const getColumnsForActiveTab = (tab: any) => {
];
let scheduledColumns = [
{ name: "#", label: "#", field: "#", align: "left" },
{ name: "#", label: "#", field: "#", align: "left", style: "width: 67px;" },
{
name: "name",
@@ -567,6 +597,7 @@ const getColumnsForActiveTab = (tab: any) => {
label: t("alerts.actions"),
align: "center",
sortable: false,
classes: "actions-column",
};
if (tab === "all") {
const allColumns = [...scheduledColumns, actionsColumn];
@@ -845,33 +876,6 @@ const exportBulkPipelines = () => {
};
</script>
<style lang="scss" scoped>
.pipeline-list-table {
th:last-child,
td:last-child {
position: sticky;
right: 0;
z-index: 1;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
width: 100px;
}
}
.dark-theme {
th:last-child,
td:last-child {
background: var(--q-dark);
box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
width: 100px;
}
}
.light-theme {
th:last-child,
td:last-child {
background: #ffffff;
width: 100px;
}
}
.dark-mode {
background-color: $dark-page;
@@ -894,31 +898,6 @@ const exportBulkPipelines = () => {
}
}
}
.report-list-tabs {
height: fit-content;
:deep(.rum-tabs) {
border: 1px solid #eaeaea;
height: fit-content;
border-radius: 4px;
overflow: hidden;
}
:deep(.rum-tab) {
width: fit-content !important;
padding: 4px 12px !important;
border: none !important;
&:hover {
background: #eaeaea;
}
&.active {
background: #5960b2;
color: #ffffff !important;
}
}
}
.expanded-content {
padding: 0 3rem;
@@ -942,20 +921,6 @@ const exportBulkPipelines = () => {
border-left: #7a54a2 3px solid;
}
:deep(.pipeline-list-table thead th:last-child) {
position: sticky;
right: 0;
z-index: 1;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
width: 100px;
}
:deep(.dark-theme.pipeline-list-table thead th:last-child) {
background: var(--q-dark);
}
:deep(.light-theme.pipeline-list-table thead th:last-child) {
background: #ffffff;
}
.bottom-btn {
display: flex;
width: 100%;
web/src/components/reports/ReportList.vue
+66 -39
View File
@@ -21,7 +21,51 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
style="height: calc(100vh - 57px)"
:class="store.state.theme === 'dark' ? 'dark-mode' : ''"
>
<div class="full-width">
<div class="tw-flex tw-justify-between tw-items-center tw-w-full tw-py-3 tw-px-4"
:class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title" data-test="report-list-title">
{{ t("reports.header") }}
</div>
<div class="tw-flex tw-items-center">
<div class="app-tabs-container q-mr-md">
<app-tabs
class="tabs-selection-container"
:tabs="tabs"
:class="store.state.theme === 'dark' ? 'tabs-selection-container-dark' : 'tabs-selection-container-light'"
v-model:active-tab="activeTab"
@update:active-tab="filterReports"
/>
</div>
<q-input
data-test="report-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto no-border"
:placeholder="t('reports.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="report-list-add-report-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`reports.add`)"
@click="createNewReport"
/>
</div>
</div>
<div class="full-width o2-quasar-table"
style="height: calc(100vh - 112px) ; overflow-y: auto;"
:class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<q-table
data-test="report-list-table"
ref="reportListTableRef"
@@ -105,43 +149,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<template #top="scope">
<div class="tw-flex tw-justify-between tw-w-full">
<div class="q-table__title" data-test="report-list-title">
{{ t("reports.header") }}
</div>
<div class="tw-flex tw-items-center report-list-tabs">
<app-tabs
class="q-mr-md"
:tabs="tabs"
v-model:active-tab="activeTab"
@update:active-tab="filterReports"
/>
<q-input
data-test="report-list-search-input"
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border"
:placeholder="t('reports.search')"
>
<template #prepend>
<q-icon name="search" class="cursor-pointer" />
</template>
</q-input>
<q-btn
data-test="report-list-add-report-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`reports.add`)"
@click="createNewReport"
/>
</div>
</div>
<QTablePagination
:scope="scope"
:pageTitle="t('reports.header')"
@@ -161,6 +168,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Rendering the of the columns -->
<!-- here we can add the classes class so that the head will be sticky -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
@@ -258,6 +281,7 @@ const columns: any = ref<QTableProps["columns"]>([
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -272,6 +296,7 @@ const columns: any = ref<QTableProps["columns"]>([
label: t("alerts.owner"),
align: "center",
sortable: true,
style: "width: 150px",
},
{
name: "description",
@@ -279,6 +304,7 @@ const columns: any = ref<QTableProps["columns"]>([
label: t("alerts.description"),
align: "center",
sortable: false,
style: "width: 300px",
},
{
name: "last_triggered_at",
@@ -286,14 +312,15 @@ const columns: any = ref<QTableProps["columns"]>([
label: t("alerts.lastTriggered"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "actions",
field: "actions",
label: t("alerts.actions"),
align: "center",
style: "width: 300px",
sortable: false,
classes: "actions-column",
},
]);
web/src/components/settings/CipherKeys.vue
+56 -36
View File
@@ -16,8 +16,42 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- eslint-disable vue/x-invalid-end-tag -->
<template>
<q-page class="q-pa-none">
<div v-if="!showAddDialog">
<q-page class="q-pa-none" style="min-height: inherit;">
<div v-if="!showAddDialog" style="height: calc(100vh - 112px); overflow-y: auto;">
<div class="tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-3"
:class="store.state.theme == 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div
class="col q-table__title items-start"
data-test="cipher-keys-list-title"
>
{{ t("cipherKey.header") }}
</div>
<div class="col-auto flex">
<q-input
v-model="filterQuery"
filled
dense
class="q-ml-none"
style="width: 400px"
:placeholder="t('cipherKey.search')"
clearable
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<q-btn
class="text-bold no-border q-ml-md"
padding="sm lg"
color="secondary"
no-caps
dense
:label="t(`cipherKey.add`)"
@click="addCipherKey"
/>
</div>
</div>
<q-table
ref="qTable"
:rows="tabledata"
@@ -26,7 +60,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:pagination="pagination"
:filter="filterQuery"
:filter-method="filterData"
:loading="loading"
class="o2-quasar-table"
:class="store.state.theme == 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
>
<template #no-data><NoData /></template>
<template v-slot:body-cell-actions="props">
@@ -58,41 +93,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</q-td>
</template>
<template #top="scope">
<div class="row full-width">
<div
class="col q-table__title items-start"
data-test="cipher-keys-list-title"
>
{{ t("cipherKey.header") }}
</div>
<div class="col-auto flex">
<q-input
v-model="filterQuery"
filled
dense
class="q-ml-none q-mb-xs"
style="width: 400px"
:placeholder="t('cipherKey.search')"
clearable
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
<q-btn
class="q-mb-xs text-bold no-border q-ml-md"
padding="sm lg"
color="secondary"
no-caps
dense
:label="t(`cipherKey.add`)"
@click="addCipherKey"
/>
</div>
</div>
<div class="row full-width">
<QTablePagination
v-if="resultTotal > 0"
:scope="scope"
:pageTitle="t('cipherKey.header')"
:resultTotal="resultTotal"
@@ -113,6 +115,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:changeRecordPerPage="changePagination"
/>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Render the table headers -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<div v-else>
@@ -168,6 +184,7 @@ export default defineComponent({
label: "#",
field: "#",
align: "left",
style: "width: 67px",
},
{
name: "name",
@@ -182,6 +199,7 @@ export default defineComponent({
label: t("cipherKey.storeType"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "mechanism_type",
@@ -189,6 +207,7 @@ export default defineComponent({
label: t("cipherKey.mechanismType"),
align: "left",
sortable: true,
style: "width: 150px",
},
{
name: "actions",
@@ -196,6 +215,7 @@ export default defineComponent({
label: t("cipherKey.actions"),
align: "left",
sortable: false,
classes:'actions-column'
},
]);
const perPageOptions = [
web/src/components/settings/index.vue
+2 -2
View File
@@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- eslint-disable vue/x-invalid-end-tag -->
<template>
<q-page class="management-page">
<div class="head q-table__title q-mx-md q-my-sm">
<div class="head q-table__title q-mx-md q-py-sm">
{{ t("settings.header") }}
</div>
<q-separator class="separator" />
@@ -165,7 +165,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template v-slot:after>
<div
style="position: absolute; top: -5px; left: -16px; z-index: 90; "
style="position: absolute; top: -5px; left: -16px; z-index: 1200; "
>
<!-- Place the content you want in the middle here -->
<q-btn
web/src/styles/app.scss
+187 -1
View File
@@ -172,4 +172,190 @@
border: 1px solid #454F5B;
background-color: #212121;
}
}
}
// this is the default table style for all tables in the app
//to apply this style to a table , we need to add a class o2-quasar-table to the table
//add if we want to apply dark theme to the table , we need to add a class dark-o2-quasar-table to the table
//add if we want to apply light theme to the table , we need to add a class light-o2-quasar-table to the table
//if there are actions in the table , we need to add a class actions-column to the last column
.o2-quasar-table{
th,td {
padding: 0px 16px !important;
height: 36px !important;
};
th:last-child.actions-column,
td:last-child.actions-column {
//the fixed width as we have moved some actions to the menu so lot of space is occupied by actions section so remvoed that
position: sticky;
right: 0;
z-index: 1;
background: #ffffff;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
}
}
//here we have dark theme styling for the table
//`. we are changing the background color of the actions column
.o2-quasar-table-dark{
th:last-child.actions-column,
td:last-child.actions-column {
background: var(--q-dark);
box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1);
width: 150px;
}
}
.o2-quasar-table-light{
th:last-child.actions-column,
td:last-child.actions-column {
background: #ffffff;
width: 150px;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1);
}
}
//this is for in some of pages we are having a header for eg: pipelines ,functions ,enrichments listing pages
//there to maintain consistency of the page name and add buttons to be at the top while scrolling the table
//we need to have this because here it is a embededded in q-splitter
.o2-table-header-dark{
background-color: #181A1B;
position: sticky;
top: 0;
z-index: 1000;
}
.o2-table-header-light{
background-color: #ffffff;
position: sticky;
top: 0;
z-index: 1000;
}
//this is used to target the table in the app-table component internally it uses q-table component
//but due to virtual scroll the classes are different so we need to target the classes differently
//here we have q-virtual-scroll__content and q-table classes to target td and th respectively
//we have also added the actions-column class to the last column of the table
//we have also added the o2-quasar-app-table-dark and o2-quasar-app-table-light classes to the table to target the dark and light theme for actions column
//we have also added the o2-quasar-app-table-dark and o2-quasar-app-table-light classes to the table to target the dark and light theme for actions column
.o2-quasar-app-table{
.q-virtual-scroll__content{
th,td{
padding: 0px 16px !important;
height: 36px !important;
}
td:last-child.actions-column {
//the fixed width as we have moved some actions to the menu so lot of space is occupied by actions section so remvoed that
position: sticky;
right: 0;
z-index: 1;
width: 150px !important;
}
}
.q-table{
thead{
th:last-child.actions-column{
position: sticky;
right: 0;
z-index: 1;
}
}
}
}
.o2-quasar-app-table-light{
.q-virtual-scroll__content{
td:last-child.actions-column {
background: #ffffff !important;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1) !important;
width: 150px !important;
}
}
.q-table{
thead{
th:last-child.actions-column{
background: #ffffff !important;
box-shadow: -4px 0px 4px 0 rgba(0, 0, 0, 0.1) !important;
width: 150px !important;
}
}
}
}
.o2-quasar-app-table-dark{
.q-virtual-scroll__content{
td:last-child.actions-column {
background: var(--q-dark) !important;
box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1) !important;
width: 150px !important;
}
}
.q-table{
thead{
th:last-child.actions-column{
background: var(--q-dark) !important;
box-shadow: -4px 0px 4px 0 rgba(144, 144, 144, 0.1) !important;
width: 150px !important;
}
}
}
}
//this is used to add a border to the tabs container
//so to make this work just introduce a new div around the app-tabs component and add the class app-tabs-container to it
//and then add the class tabs-selection-container-dark or tabs-selection-container-light to the app-tabs component
.app-tabs-container{
border: 1px solid #cacaca;
padding: 4px;
border-radius: 2px;
}
.tabs-selection-container-dark{
border: none !important;
border-radius: none !important;
.rum-tab{
border-radius: 4px !important;
height: 30px !important;
margin: 0 2px !important;
padding: 4px 12px !important;
border-bottom: none !important;
width: auto !important;
white-space: normal !important;
}
.active{
background-color: $primary !important;
color: white !important;
border: 1px solid #cacaca !important;
border-bottom: 1px solid #cacaca !important;
}
.rum-tab:hover{
background-color: #373A3B !important;
}
.rum-tab.active:hover{
background-color: $primary !important;
}
}
.tabs-selection-container-light{
border: none !important;
border-radius: none !important;
.rum-tab{
border-radius: 4px !important;
height: 30px !important;
margin: 0 2px !important;
padding: 4px 12px !important;
border-bottom: none !important;
width: auto !important;
white-space: normal !important;
}
.rum-tab.active{
background-color: $primary !important;
color: white !important;
border: 1px solid #cacaca !important;
}
.rum-tab:hover{
background-color: #f0f0f0 !important;
}
.rum-tab.active:hover{
background-color: $primary !important;
}
}
web/src/views/Functions.vue
+1 -1
View File
@@ -91,7 +91,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<template v-slot:after>
<div
class="tw-overflow-auto q-mx-sm q-my-sm"
class="tw-overflow-auto q-mx-sm"
style="height: calc(100vh - 57px)"
>
<!-- :templates="templates"
web/src/views/LogStream.vue
+140 -135
View File
@@ -18,9 +18,84 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- eslint-disable vue/attribute-hyphenation -->
<template>
<q-page class="q-pa-none" style="min-height: inherit">
<div style="height: calc(100vh - 57px); overflow-y: auto;" >
<div class="flex items-center justify-between tw-py-3 tw-px-4"
:class="store.state.theme === 'dark' ? 'o2-table-header-dark' : 'o2-table-header-light'"
>
<div class="q-table__title" data-test="log-stream-title-text">
{{ t("logStream.header") }}
</div>
<div class="flex items-start">
<div class="flex justify-between items-end q-px-md">
<div
style="
border: 1px solid #cacaca;
padding: 4px;
border-radius: 2px;
"
>
<template
v-for="visual in streamFilterValues"
:key="visual.value"
>
<q-btn
:color="
visual.value === selectedStreamType ? 'primary' : ''
"
:flat="visual.value === selectedStreamType ? false : true"
dense
emit-value
no-caps
class="visual-selection-btn"
style="height: 30px; margin: 0 2px; padding: 4px 12px"
@click="onChangeStreamFilter(visual.value)"
>
{{ visual.label }}</q-btn
>
</template>
</div>
</div>
<div data-test="streams-search-stream-input">
<q-input
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto no-border"
:placeholder="t('logStream.search')"
debounce="300"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
</div>
<q-btn
data-test="log-stream-refresh-stats-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`logStream.refreshStats`)"
@click="getLogStream(true)"
/>
<q-btn
v-if="isSchemaUDSEnabled"
data-test="log-stream-add-stream-btn"
class="q-ml-md text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`logStream.add`)"
@click="addStream"
/>
</div>
</div>
<q-table
data-test="log-stream-table"
class="org-streams-table"
class="o2-quasar-table"
:class="store.state.theme === 'dark' ? 'o2-quasar-table-dark' : 'o2-quasar-table-light'"
ref="qTable"
v-model:selected="selected"
:rows="logStream"
@@ -31,7 +106,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-model:pagination="pagination"
:filter="filterQuery"
:filter-method="filterData"
style="width: 100%"
style="width: 100%; "
:rows-per-page-options="perPageOptions"
@request="onRequest"
>
@@ -46,9 +121,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<q-spinner-hourglass color="primary" size="lg" />
</div>
</template>
<template #header-selection="scope">
<q-checkbox v-model="scope.selected" size="sm" color="secondary" />
</template>
<template #body-selection="scope">
<q-checkbox v-model="scope.selected" size="sm" color="secondary" />
</template>
@@ -91,129 +163,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<template #top="scope">
<div class="flex justify-between items-center full-width">
<div class="q-table__title" data-test="log-stream-title-text">
{{ t("logStream.header") }}
<div class="flex justify-between items-center full-width" style="font-size: 12px">
<div class="q-table__separator col text-bold tw-text-[14px]">
{{scope.pagination.rowsNumber}} Stream(s)
</div>
<div class="flex items-start">
<div class="flex justify-between items-end q-px-md">
<div
style="
border: 1px solid #cacaca;
padding: 4px;
border-radius: 2px;
"
>
<template
v-for="visual in streamFilterValues"
:key="visual.value"
>
<q-btn
:color="
visual.value === selectedStreamType ? 'primary' : ''
"
:flat="visual.value === selectedStreamType ? false : true"
dense
emit-value
no-caps
class="visual-selection-btn"
style="height: 30px; margin: 0 2px; padding: 4px 12px"
@click="onChangeStreamFilter(visual.value)"
>
{{ visual.label }}</q-btn
>
</template>
</div>
</div>
<div data-test="streams-search-stream-input">
<q-input
v-model="filterQuery"
borderless
filled
dense
class="q-ml-auto q-mb-xs no-border"
:placeholder="t('logStream.search')"
debounce="300"
>
<template #prepend>
<q-icon name="search" />
</template>
</q-input>
</div>
<q-btn
data-test="log-stream-refresh-stats-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`logStream.refreshStats`)"
@click="getLogStream(true)"
/>
<q-btn
v-if="isSchemaUDSEnabled"
data-test="log-stream-add-stream-btn"
class="q-ml-md q-mb-xs text-bold no-border"
padding="sm lg"
color="secondary"
no-caps
:label="t(`logStream.add`)"
@click="addStream"
/>
</div>
</div>
<div
class="flex justify-between items-center full-width q-mt-sm"
style="font-size: 12px"
>
<div class="q-table__separator col text-bold">
{{ scope.pagination.rowsNumber }} Stream(s)
</div>
<div class="q-table__control" v-if="scope.pagination.rowsNumber > 0">
Showing
{{ (scope.pagination.page - 1) * scope.pagination.rowsPerPage + 1 }}
-
{{
scope.pagination.page * scope.pagination.rowsPerPage >
scope.pagination.rowsNumber
? scope.pagination.rowsNumber
: scope.pagination.page * scope.pagination.rowsPerPage
}}
of {{ scope.pagination.rowsNumber }}
<div class="q-btn-group row no-wrap inline q-ml-md">
<q-btn
icon="chevron_left"
color="grey-8"
round
dense
flat
size="sm"
class="q-px-sm"
:disable="scope.isFirstPage"
@click="scope.prevPage"
/>
<hr
class="q-separator q-separator--vertical"
aria-orientation="vertical"
/>
<q-btn
icon="chevron_right"
color="grey-8"
round
dense
flat
size="sm"
class="q-px-sm"
:disable="scope.isLastPage"
@click="scope.nextPage"
/>
<div class="q-table__control tw-font-[600]" v-if="scope.pagination.rowsNumber > 0">
Showing {{ ((scope.pagination.page - 1) * scope.pagination.rowsPerPage) + 1 }} - {{((scope.pagination.page * scope.pagination.rowsPerPage) > scope.pagination.rowsNumber) ? scope.pagination.rowsNumber : scope.pagination.page * scope.pagination.rowsPerPage}} of {{scope.pagination.rowsNumber}}
<div class=" row no-wrap inline tw-ml-4">
<q-btn-group>
<q-btn
icon="chevron_left"
:text-color="scope.isFirstPage ? '$light-text2' : '$dark'"
class="pageNav"
color="#FAFBFD"
size="sm"
flat
:disable="scope.isFirstPage"
@click="scope.prevPage"
/>
<q-separator vertical />
<q-btn
icon="chevron_right"
:text-color="scope.isLastPage ? '$light-text2' : '$dark'"
class="pageNav"
color="#FAFBFD"
size="sm"
flat
:disable="scope.isLastPage"
@click="scope.nextPage"
/>
</q-btn-group>
</div>
</div>
</div>
</template>
<template v-slot:pagination="scope">
<q-btn
<div class="tw-flex tw-items-center tw-justify-between tw-py-3 tw-px-4">
<q-btn
v-if="selected.length > 0"
class="delete-btn absolute-bottom-left q-pl-lg"
class="delete-btn absolute-bottom-left q-pl-lg tw-ml-4"
color="red"
icon="delete"
:label="isDeleting ? 'Deleting...' : 'Delete'"
@@ -249,8 +237,36 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@click="scope.nextPage"
/>
</div>
</div>
</template>
</q-table>
<template v-slot:header="props">
<q-tr :props="props">
<!-- Adding this block to render the select-all checkbox -->
<q-th auto-width>
<q-checkbox
v-model="props.selected"
size="sm"
color="secondary"
@update:model-value="props.select"
/>
</q-th>
<!-- Rendering the rest of the columns -->
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="col.classes"
:style="col.style"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
</q-table>
</div>
<q-dialog
v-model="showIndexSchemaDialog"
position="right"
@@ -482,6 +498,7 @@ export default defineComponent({
field: "actions",
label: t("user.actions"),
align: "center",
classes: "actions-column",
},
]);
@@ -968,22 +985,10 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.org-streams-table {
:deep(.q-table th),
:deep(.q-table td) {
padding: 0px 16px;
height: 32px;
}
}
</style>
<style lang="scss">
.q-table {
&__top {
border-bottom: 1px solid $border-color;
justify-content: flex-end;
}
}
.bottom-bar {
display: flex;
width: 100%;