From aa81e02b285485e64a89f82f5772f0ff12b4a663 Mon Sep 17 00:00:00 2001
From: Vedangi Mittal <vedangimittal3004@gmail.com>
Date: Tue, 10 Sep 2024 16:01:49 +0530
Subject: [PATCH] Implemented Sessions page

- Implemented Sessions page
- Jira story: https://jsw.ibm.com/browse/PFEBMC-2397

Signed-off-by: Vedangi Mittal <vedangimittal3004@gmail.com>
---
 src/components/Global/TableToolbar.vue        |   2 +-
 src/router/routes.js                          |   9 +
 src/store/index.js                            |   2 +
 .../SecurityAndAccess/SessionsStore.js        |  29 +-
 .../SecurityAndAccess/Sessions/Sessions.vue   | 439 +++++++++---------
 5 files changed, 251 insertions(+), 230 deletions(-)

diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 76a610cb60..e0ee1bad47 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -13,7 +13,7 @@
             :data-test-id="`table-button-${action.value}Selected`"
             variant="primary"
             class="d-block"
-            @click="emit('batch-action', action.value)"
+            @click="$emit('batch-action', action.value)"
           >
             {{ action.label }}
           </BButton>
diff --git a/src/router/routes.js b/src/router/routes.js
index 79466005ce..be6c0d1857 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -19,6 +19,7 @@ import PowerRestorePolicy from '@/views/Settings/PowerRestorePolicy';
 import ConcurrentMaintenance from '../views/HardwareStatus/ConcurrentMaintenance/ConcurrentMaintenance.vue';
 import IBMiServiceFunctions from '@/views/Logs/IBMiServiceFunctions';
 import Notices from '@/views/Notices/Notices.vue';
+import Sessions from '@/views/SecurityAndAccess/Sessions';
 
 const roles = {
   administrator: 'Administrator',
@@ -152,6 +153,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.memory'),
         },
       },
+      {
+        path: '/security-and-access/sessions',
+        name: 'sessions',
+        component: Sessions,
+        meta: {
+          title: i18n.global.t('appPageTitle.sessions'),
+        },
+      },
       {
         path: '/:pathMatch(.*)*',
         name: 'page-not-found',
diff --git a/src/store/index.js b/src/store/index.js
index fd8e8dead4..8d296f97f2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -15,6 +15,7 @@ import PowerPolicyStore from './modules/Settings/PowerPolicyStore';
 import ConcurrentMaintenanceStore from './modules/HardwareStatus/ConcurrentMaintenanceStore';
 import IBMiServiceFunctionsStore from './modules/Logs/IBMiServiceFunctionsStore';
 import AuditLogsStore from './modules/Logs/AuditLogsStore';
+import SessionsStore from './modules/SecurityAndAccess/SessionsStore.js';
 
 // ... (export use other stores)
 export {
@@ -34,4 +35,5 @@ export {
   ConcurrentMaintenanceStore,
   IBMiServiceFunctionsStore,
   AuditLogsStore,
+  SessionsStore,
 };
diff --git a/src/store/modules/SecurityAndAccess/SessionsStore.js b/src/store/modules/SecurityAndAccess/SessionsStore.js
index 794c75a7f4..b9848be307 100644
--- a/src/store/modules/SecurityAndAccess/SessionsStore.js
+++ b/src/store/modules/SecurityAndAccess/SessionsStore.js
@@ -1,20 +1,16 @@
 import api, { getResponseCount } from '@/store/api';
 import i18n from '@/i18n';
+import { defineStore } from 'pinia';
 
-const SessionsStore = {
-  namespaced: true,
-  state: {
+export const SessionsStore = defineStore('sessions', {
+  state: () => ({
     allConnections: [],
-  },
+  }),
   getters: {
-    allConnections: (state) => state.allConnections,
-  },
-  mutations: {
-    setAllConnections: (state, allConnections) =>
-      (state.allConnections = allConnections),
+    allConnectionsGetter: (state) => state.allConnections,
   },
   actions: {
-    async getSessionsData({ commit }) {
+    async getSessionsData() {
       return await api
         .get('/redfish/v1/SessionService/Sessions')
         .then((response) =>
@@ -29,19 +25,20 @@ const SessionsStore = {
             let filteredIPAddress =
               sessionUri.data?.ClientOriginIPAddress.split('::ffff:').pop();
             return {
+              isSelected: false,
               clientID: sessionUri.data?.Context,
               username: sessionUri.data?.UserName,
               ipAddress: filteredIPAddress,
               uri: sessionUri.data['@odata.id'],
             };
           });
-          commit('setAllConnections', allConnectionsData);
+          this.allConnections = allConnectionsData;
         })
         .catch((error) => {
           console.log('Client Session Data:', error);
         });
     },
-    async disconnectSessions({ dispatch }, uris = []) {
+    async disconnectSessions(uris) {
       const promises = uris.map((uri) =>
         api.delete(uri).catch((error) => {
           console.log(error);
@@ -51,7 +48,7 @@ const SessionsStore = {
       return await api
         .all(promises)
         .then((response) => {
-          dispatch('getSessionsData');
+          this.getSessionsData();
           return response;
         })
         .then(
@@ -60,7 +57,7 @@ const SessionsStore = {
             const toastMessages = [];
 
             if (successCount) {
-              const message = i18n.tc(
+              const message = i18n.global.t(
                 'pageSessions.toast.successDelete',
                 successCount,
               );
@@ -68,7 +65,7 @@ const SessionsStore = {
             }
 
             if (errorCount) {
-              const message = i18n.tc(
+              const message = i18n.global.t(
                 'pageSessions.toast.errorDelete',
                 errorCount,
               );
@@ -79,5 +76,5 @@ const SessionsStore = {
         );
     },
   },
-};
+});
 export default SessionsStore;
diff --git a/src/views/SecurityAndAccess/Sessions/Sessions.vue b/src/views/SecurityAndAccess/Sessions/Sessions.vue
index 4ca2ff9123..7f482c8e7f 100644
--- a/src/views/SecurityAndAccess/Sessions/Sessions.vue
+++ b/src/views/SecurityAndAccess/Sessions/Sessions.vue
@@ -1,8 +1,8 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.sessions')" />
-    <b-row>
-      <b-col md="8" xl="6">
+    <BRow>
+      <BCol md="8" xl="6">
         <alert variant="warning" class="mb-4">
           <div class="font-weight-bold">
             {{ $t('pageSessions.alert.heading') }}
@@ -11,72 +11,80 @@
             {{ $t('pageSessions.alert.message') }}
           </div>
         </alert>
-      </b-col>
-    </b-row>
-    <b-row class="align-items-end">
-      <b-col sm="6" md="5" xl="4">
+      </BCol>
+    </BRow>
+    <BRow class="align-items-end">
+      <BCol sm="6" md="5" xl="4" class="searchStyle">
         <search
           :placeholder="$t('pageSessions.table.searchSessions')"
           data-test-id="sessions-input-searchSessions"
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
+          @change-search="onChangeSearch"
+          @clear-search="onClearSearch"
         />
-      </b-col>
-      <b-col sm="3" md="3" xl="2">
+      </BCol>
+      <BCol sm="3" md="3" xl="2">
         <table-cell-count
           :filtered-items-count="filteredRows"
           :total-number-of-cells="allConnections.length"
         ></table-cell-count>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col>
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol>
         <table-toolbar
           ref="toolbar"
-          :selected-items-count="selectedRows.length"
+          :selected-items-count="selectedRowsLists.length"
           :actions="batchActions"
-          @clear-selected="clearSelectedRows($refs.table)"
+          @clear-selected="clearSelectedRows(tableSessionsRef)"
           @batch-action="onBatchAction"
         >
         </table-toolbar>
-        <b-table
+        <BTable
           id="table-session-logs"
-          ref="table"
+          ref="tableSessionsRef"
           responsive="md"
           selectable
           no-select-on-click
           hover
-          show-empty
-          sort-by="clientID"
+          sticky-header="75vh"
+          :sort-by="[{ key: 'clientID', order: 'asc' }]"
           :busy="isBusy"
+          show-empty
           :fields="fields"
           :items="allConnections"
-          :filter="searchFilter"
+          :filter="searchFilterInput"
           :empty-text="$t('global.table.emptyMessage')"
-          :per-page="perPage"
-          :current-page="currentPage"
+          :per-page="itemPerPage"
+          :current-page="currentPageNo"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, allConnections.length)"
         >
           <!-- Checkbox column -->
           <template #head(checkbox)>
-            <b-form-checkbox
-              v-model="tableHeaderCheckboxModel"
+            <BFormCheckbox
+              v-model="tableHeaderCheckbox"
               data-test-id="sessions-checkbox-selectAll"
-              :indeterminate="tableHeaderCheckboxIndeterminate"
-              @change="onChangeHeaderCheckbox($refs.table)"
+              :indeterminate="tableHeaderCheckboxIndeterminated"
+              @change="
+                onChangeHeaderCheckbox(tableSessionsRef, tableHeaderCheckbox)
+              "
+              @update:modelValue="toggleAll"
             >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-            </b-form-checkbox>
+            </BFormCheckbox>
           </template>
           <template #cell(checkbox)="row">
-            <b-form-checkbox
-              v-model="row.rowSelected"
+            <BFormCheckbox
+              v-model="sessionsStore.allConnections[row.index].isSelected"
               :data-test-id="`sessions-checkbox-selectRow-${row.index}`"
-              @change="toggleSelectRow($refs.table, row.index)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-            </b-form-checkbox>
+              @change="
+                toggleSelectRow(
+                  tableSessionsRef,
+                  row.index,
+                  sessionsStore.allConnections[row.index].isSelected,
+                  row.item,
+                )
+              "
+            ></BFormCheckbox>
           </template>
 
           <!-- Actions column -->
@@ -92,217 +100,222 @@
               @click-table-action="onTableRowAction($event, row.item)"
             ></table-row-action>
           </template>
-        </b-table>
-      </b-col>
-    </b-row>
+        </BTable>
+      </BCol>
+    </BRow>
 
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
-        <b-form-group
+    <BRow>
+      <BCol sm="6">
+        <BFormGroup
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
           label-for="pagination-items-per-page"
         >
-          <b-form-select
+          <BFormSelect
             id="pagination-items-per-page"
-            v-model="perPage"
+            v-model="itemPerPage"
             :options="itemsPerPageOptions"
           />
-        </b-form-group>
-      </b-col>
-      <b-col sm="6">
+        </BFormGroup>
+      </BCol>
+      <BCol sm="6">
         <b-pagination
-          v-model="currentPage"
+          v-model="currentPageNo"
+          class="b-pagination"
           first-number
           last-number
-          :per-page="perPage"
+          :per-page="itemPerPage"
           :total-rows="getTotalRowCount(filteredRows)"
           aria-controls="table-session-logs"
         />
-      </b-col>
-    </b-row>
-  </b-container>
+      </BCol>
+    </BRow>
+    <BModal
+      v-model="openModal"
+      :title="$t('pageSessions.modal.disconnectTitle', { count: count }, count)"
+      :ok-title="$t('pageSessions.action.disconnect')"
+      :cancel-title="$t('global.action.cancel')"
+      @ok="handleOk"
+    >
+      <p>
+        {{
+          $t('pageSessions.modal.disconnectMessage', { count: count }, count)
+        }}
+      </p>
+    </BModal>
+  </BContainer>
 </template>
 
-<script>
-import PageTitle from '@/components/Global/PageTitle';
-import Search from '@/components/Global/Search';
-import TableCellCount from '@/components/Global/TableCellCount';
-import TableRowAction from '@/components/Global/TableRowAction';
-import TableToolbar from '@/components/Global/TableToolbar';
-import Alert from '@/components/Global/Alert';
-
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import BVPaginationMixin, {
-  currentPage,
-  perPage,
-  itemsPerPageOptions,
-} from '@/components/Mixins/BVPaginationMixin';
-import BVTableSelectableMixin, {
-  selectedRows,
+<script setup>
+import { ref, onMounted, computed, onBeforeMount } from 'vue';
+import { SessionsStore } from '@/store';
+import { onBeforeRouteLeave } from 'vue-router';
+import i18n from '@/i18n';
+import eventBus from '@/eventBus';
+import usePaginationComposable from '@/components/Composables/usePaginationComposable';
+import useTableSelectableComposable from '@/components/Composables/useTableSelectableComposable';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import Search from '@/components/Global/Search.vue';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import TableToolbar from '@/components/Global/TableToolbar.vue';
+import Alert from '@/components/Global/Alert.vue';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import useToastComposable from '@/components/Composables/useToastComposable';
+const { hideLoader, startLoader, endLoader } = useLoadingBar();
+const { currentPage, perPage, itemsPerPageOptions, getTotalRowCount } =
+  usePaginationComposable();
+const {
+  clearSelectedRows,
+  toggleSelectRow,
+  onRowSelected,
+  onChangeHeaderCheckbox,
+  selectedRowsList,
   tableHeaderCheckboxModel,
   tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-
-export default {
-  components: {
-    Alert,
-    PageTitle,
-    Search,
-    TableCellCount,
-    TableRowAction,
-    TableToolbar,
+} = useTableSelectableComposable();
+const sessionsStore = SessionsStore();
+const Toast = useToastComposable();
+const tableSessionsRef = ref(null);
+const isBusy = ref(true);
+const tableHeaderCheckbox = ref(tableHeaderCheckboxModel);
+const tableHeaderCheckboxIndeterminated = ref(tableHeaderCheckboxIndeterminate);
+const currentPageNo = ref(currentPage);
+const itemPerPage = ref(perPage);
+const searchTotalFilteredRows = ref(0);
+const openModal = ref(false);
+const count = ref(0);
+const searchFilterInput = ref('');
+const isAllSelected = ref(false);
+const urisStore = ref();
+const selectedRowsLists = ref(selectedRowsList);
+const selectedRowsNo = ref(0);
+const fields = ref([
+  {
+    key: 'checkbox',
   },
-  mixins: [
-    BVPaginationMixin,
-    BVTableSelectableMixin,
-    BVToastMixin,
-    LoadingBarMixin,
-    SearchFilterMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
+  {
+    key: 'clientID',
+    label: i18n.global.t('pageSessions.table.clientID'),
   },
-  data() {
+  {
+    key: 'username',
+    label: i18n.global.t('pageSessions.table.username'),
+  },
+  {
+    key: 'ipAddress',
+    label: i18n.global.t('pageSessions.table.ipAddress'),
+  },
+  {
+    key: 'actions',
+    label: '',
+  },
+]);
+const batchActions = ref([
+  {
+    value: 'disconnect',
+    label: i18n.global.t('pageSessions.action.disconnect'),
+  },
+]);
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
+
+const filteredRows = computed(() => {
+  return searchFilterInput.value
+    ? searchTotalFilteredRows.value
+    : allConnections.value.length;
+});
+
+const allConnections = computed(() => {
+  return sessionsStore.allConnectionsGetter.map((session) => {
     return {
-      isBusy: true,
-      fields: [
-        {
-          key: 'checkbox',
-        },
-        {
-          key: 'clientID',
-          label: this.$t('pageSessions.table.clientID'),
-        },
-        {
-          key: 'username',
-          label: this.$t('pageSessions.table.username'),
-        },
-        {
-          key: 'ipAddress',
-          label: this.$t('pageSessions.table.ipAddress'),
-        },
-        {
-          key: 'actions',
-          label: '',
-        },
-      ],
-      batchActions: [
+      ...session,
+      actions: [
         {
           value: 'disconnect',
-          label: this.$t('pageSessions.action.disconnect'),
+          title: i18n.global.t('pageSessions.action.disconnect'),
         },
       ],
-      currentPage: currentPage,
-      itemsPerPageOptions: itemsPerPageOptions,
-      perPage: perPage,
-      selectedRows: selectedRows,
-      searchTotalFilteredRows: 0,
-      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
-      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
-      searchFilter: searchFilter,
     };
-  },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.allConnections.length;
-    },
-    allConnections() {
-      return this.$store.getters['sessions/allConnections'].map((session) => {
-        return {
-          ...session,
-          actions: [
-            {
-              value: 'disconnect',
-              title: this.$t('pageSessions.action.disconnect'),
-            },
-          ],
-        };
-      });
-    },
-  },
-  created() {
-    this.startLoader();
-    this.$store.dispatch('sessions/getSessionsData').finally(() => {
-      this.endLoader();
-      this.isBusy = false;
+  });
+});
+onBeforeMount(() => {
+  eventBus.on('clear-selected', () => {
+    sessionsStore?.allConnectionsGetter?.map((singleConnection) => {
+      singleConnection.isSelected = false;
     });
-  },
-  methods: {
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    onChangeSearchInput(event) {
-      this.searchFilter = event;
-    },
-    disconnectSessions(uris) {
-      this.$store
-        .dispatch('sessions/disconnectSessions', uris)
-        .then((messages) => {
-          messages.forEach(({ type, message }) => {
-            if (type === 'success') {
-              this.successToast(message);
-            } else if (type === 'error') {
-              this.errorToast(message);
-            }
-          });
-        });
-    },
-    onTableRowAction(action, { uri }) {
-      if (action === 'disconnect') {
-        this.$bvModal
-          .msgBoxConfirm(this.$tc('pageSessions.modal.disconnectMessage'), {
-            title: this.$tc('pageSessions.modal.disconnectTitle'),
-            okTitle: this.$t('pageSessions.action.disconnect'),
-            cancelTitle: this.$t('global.action.cancel'),
-          })
-          .then((deleteConfirmed) => {
-            if (deleteConfirmed) this.disconnectSessions([uri]);
-          });
-      }
-    },
-    onBatchAction(action) {
-      if (action === 'disconnect') {
-        const uris = this.selectedRows.map((row) => row.uri);
-        this.$bvModal
-          .msgBoxConfirm(
-            this.$tc(
-              'pageSessions.modal.disconnectMessage',
-              this.selectedRows.length,
-            ),
-            {
-              title: this.$tc(
-                'pageSessions.modal.disconnectTitle',
-                this.selectedRows.length,
-              ),
-              okTitle: this.$t('pageSessions.action.disconnect'),
-              cancelTitle: this.$t('global.action.cancel'),
-            },
-          )
-          .then((deleteConfirmed) => {
-            if (deleteConfirmed) {
-              this.disconnectSessions(uris);
-            }
-          });
+    clearSelectedRows(tableSessionsRef);
+  });
+});
+onMounted(() => {
+  startLoader();
+  sessionsStore.getSessionsData().finally(() => {
+    isBusy.value = false;
+    endLoader();
+  });
+});
+const onFiltered = (filteredItems) => {
+  searchTotalFilteredRows.value = filteredItems.length;
+};
+const onChangeSearch = (event) => {
+  searchFilterInput.value = event;
+};
+const onClearSearch = () => {
+  searchFilterInput.value = '';
+};
+const disconnectSessions = (uris) => {
+  sessionsStore.disconnectSessions(uris).then((messages) => {
+    messages.forEach(({ type, message }) => {
+      if (type === 'success') {
+        Toast.successToast(message);
+      } else if (type === 'error') {
+        Toast.errorToast(message);
       }
-    },
-  },
+    });
+  });
+};
+const onTableRowAction = (action, { uri }) => {
+  if (action === 'disconnect') {
+    urisStore.value = uri;
+    selectedRowsNo.value = selectedRowsLists.value.map((row) => row.uri).length;
+    count.value = 1;
+    openModal.value = true;
+  }
+};
+const onBatchAction = (action) => {
+  if (action === 'disconnect') {
+    const uris = selectedRowsLists.value.map((row) => row.uri);
+    urisStore.value = uris;
+    selectedRowsNo.value = selectedRowsLists.value.map((row) => row.uri).length;
+    count.value = selectedRowsNo.value;
+    openModal.value = true;
+  }
+};
+const handleOk = () => {
+  openModal.value = false;
+  if (selectedRowsNo.value > 1) {
+    disconnectSessions(urisStore.value);
+  } else {
+    disconnectSessions([urisStore.value]);
+  }
+  selectedRowsNo.value = 0;
+};
+const toggleAll = (checked) => {
+  sessionsStore?.allConnections?.map((singleConnection) => {
+    singleConnection.isSelected = checked;
+  });
+  isAllSelected.value = checked;
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 #table-session-logs {
   td .btn-link {
     width: auto !important;
   }
 }
+.searchStyle {
+  height: 74px;
+}
 </style>