Feb 20 [ADD] : Initial Commit 'storage_dashboard'

storage_dashboard/README.rst

@@ -0,0 +1,47 @@
+.. image:: https://img.shields.io/badge/licence-LGPL--3-green.svg
+    :target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Storage Dashboard
+=================
+Storage Dashboard Module for Odoo 16 Provides Memory Usage Statistics for
+Various Models in the Current Database.
+
+configuration
+============
+* No Additional Configuration Needed.
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.gnu.org/licenses/lgpl-3.0-standalone.html)
+
+Credits
+-------
+* Developer: (V16) Vishnuraj P
+* Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+For support and more information, please visit https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

storage_dashboard/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import models

storage_dashboard/__manifest__.py

@@ -0,0 +1,47 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': 'Odoo Storage Dashboard',
+    'version': '16.0.1.0.0',
+    'category': 'Extra Tools',
+    'summary': "Storage Dashboard Provides Memory Usage Statistics for Various Models in the Current Database.",
+    'description': "Storage Dashboard Provides Memory Usage Statistics for "
+                   "Various Models in the Current Database.",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'data': [
+        'views/storage_dashboard_menu.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'storage_dashboard/static/src/js/storage_dashboard.js',
+            'storage_dashboard/static/src/xml/storage_dashboard_templates.xml',
+        ]
+    },
+    'images': ['static/description/banner.jpg'],
+    'license': 'LGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

storage_dashboard/doc/RELEASE_NOTES.md

@@ -0,0 +1,7 @@
+## Module <storage_dashboard>
+
+#### 16.02.2024
+#### Version 16.0.1.0.0
+#### ADD
+
+- Initial commit for Storage Dashboard 

storage_dashboard/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import storage_usage

storage_dashboard/models/storage_usage.py

@@ -0,0 +1,219 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+import os
+import platform
+import psycopg2
+import psutil
+from odoo import api, models
+from odoo.exceptions import AccessError
+from odoo.tools import config
+
+
+def get_model_storage(db_name, model_name):
+    """ Method to get storage usage of a model it returns storage of
+    specific model passed to this method """
+    sql_model_name = model_name.replace(".", "_")
+    db_host = config['db_host']
+    db_port = config['db_port']
+    db_user = config['db_user']
+    db_password = config['db_password']
+    try:
+        connection = psycopg2.connect(
+            dbname=db_name,
+            user=db_user,
+            password=db_password,
+            host=db_host,
+            port=db_port,
+        )
+        cursor = connection.cursor()
+        cursor.execute(f"""
+            SELECT sum(pg_column_size(x)) 
+            FROM (SELECT * FROM {sql_model_name}) AS x;
+        """)
+        total_storage = cursor.fetchone()[0]
+        cursor.close()
+        connection.close()
+    except psycopg2.Error as e:
+        if 'relation does not exist' in str(e).lower():
+            # Return zero as storage when the relation doesn't exist
+            return '0 bytes'
+        else:
+            return None
+    return total_storage
+
+
+def get_index_data(db_name, model_name):
+    sql_model_name = model_name.replace(".", "_")
+    db_host = config['db_host']
+    db_port = config['db_port']
+    db_user = config['db_user']
+    db_password = config['db_password']
+    try:
+        connection = psycopg2.connect(
+            dbname=db_name,
+            user=db_user,
+            password=db_password,
+            host=db_host,
+            port=db_port,
+        )
+        cursor = connection.cursor()
+        cursor.execute(f"""SELECT
+                    pg_indexes_size('{sql_model_name}');
+                """)
+        index_size = cursor.fetchone()[0]
+        cursor.close()
+        connection.close()
+    except psycopg2.Error as e:
+        if 'relation does not exist' in str(e).lower():
+            # Return zero as storage when the relation doesn't exist
+            return '0 bytes'
+        else:
+            return None
+    return index_size
+
+
+class StorageUsage(models.Model):
+    """ Model for Compute Storage usage of each models """
+    _name = 'storage.usage'
+    _description = "Storage Usage"
+
+    @api.model
+    def get_data(self):
+        """ Method for get all existing models and return model with its
+        storage with the help of get_model_storage_method """
+        user_group_ids = self.env.user.groups_id.ids
+        accessible_model_ids = self.env['ir.model.access'].search([
+            ('group_id', 'in', user_group_ids)
+        ]).mapped('model_id').ids
+        model_names = [record.model for record in self.env['ir.model'].browse(
+            accessible_model_ids)]
+        model_storage = []
+        index_data = []
+        for name in model_names:
+            index_size = get_index_data(self.env.cr.dbname, name) if get_index_data(self.env.cr.dbname, name) else 0
+            if index_size > 100000:
+                index_size = round(index_size / (1024 * 1024), 2)
+                if index_size != 0:
+                    index_data.append({'model': name, 'index_size': index_size})
+            size = get_model_storage(self.env.cr.dbname, name) if get_model_storage(self.env.cr.dbname, name) else 0
+            if size > 100000:
+                size = round(size / (1024 * 1024), 2)
+                if size != 0:
+                    model_storage.append({'model': name, 'size': size})
+        model_storage = sorted(model_storage, key=lambda x: x['size'],
+                               reverse=True)
+        return {'model_storage': model_storage,
+                'index_data': index_data}
+
+    @api.model
+    def get_info(self):
+        """
+        Method for get database information and returns it as a dictionary
+        """
+
+        db_host = config['db_host']
+        db_port = config['db_port']
+        db_user = config['db_user']
+        db_password = config['db_password']
+        try:
+            connection = psycopg2.connect(
+                dbname=self.env.cr.dbname,
+                user=db_user,
+                password=db_password,
+                host=db_host,
+                port=db_port
+            )
+            cursor = connection.cursor()
+            # Version of DB
+            cursor.execute("SELECT version();")
+            db_version = cursor.fetchone()[0]
+            # Total size of DB
+            cursor.execute("""
+                SELECT sum(pg_total_relation_size(schemaname || '.' || 
+                tablename)) FROM pg_tables
+                WHERE schemaname NOT IN ('pg_catalog', 'information_schema');
+            """)
+            db_size = cursor.fetchone()[0] / (1024 * 1024)
+            # total storage test
+            cursor.execute(f"""
+                SELECT sum(pg_column_size(x)) 
+                FROM (SELECT * FROM {"ir_model_data"}) AS x;
+            """)
+            total_storage_bytes = cursor.fetchone()[0]
+            total_storage_kb = total_storage_bytes / 1024
+            # Execute a query to fetch the total relations in DB
+            cursor.execute("""
+                SELECT count(*) FROM information_schema.tables WHERE 
+                table_schema='public';
+            """)
+            # Fetch the result
+            db_tables = cursor.fetchone()[0]
+            cursor.close()
+            connection.close()
+        #   Getting system monitor datas
+            system_datas = dict(psutil.virtual_memory()._asdict())
+            total_memory = system_datas['total'] / (1024 * 1024 * 1024)
+            used_memory = system_datas['used'] / (1024 * 1024 * 1024)
+            available_memory = system_datas['available'] / (1024 * 1024 * 1024)
+            cpu_usage = psutil.cpu_percent(interval=None)
+            operating_system = platform.system()
+            os_ver = platform.release()
+            soft_limit = config.get('limit_memory_soft') / (1024 * 1024 * 1024)
+            hard_limit = config.get('limit_memory_hard') / (1024 * 1024 * 1024)
+            transient_age_limit = config.get('transient_age_limit')
+            limit_time_cpu = config.get('limit_time_cpu')
+            limit_request = config.get('limit_request')
+            limit_time_real = config.get('limit_time_real')
+            http_port = config.get('http_port')
+            db_user = config.get('db_user')
+            # Odoo ram usage
+            process = psutil.Process(os.getpid())
+            memory_info = process.memory_info()
+            ram_usage = memory_info.rss / (1024 * 1024)
+
+            db_date = self.env['ir.config_parameter'].sudo().get_param(
+                'database.create_date')
+        except psycopg2.Error as e:
+            raise AccessError(
+                f"Error while fetching database information via query: {e}")
+        return {
+            'db_name': self.env.cr.dbname,
+            'db_version': db_version,
+            'db_date': db_date,
+            'db_size': f"{round(db_size, 2)} MB",
+            'db_tables': db_tables,
+            'total_storage_kb': total_storage_kb,
+            'total_memory': f"{round(total_memory, 2)} GB",
+            'used_memory': f"{round(used_memory, 2)} GB",
+            'available_memory': f"{round(available_memory, 2)} GB",
+            'cpu_usage': f"{cpu_usage} %",
+            'ram_usage': f"{round(ram_usage, 2)} MB",
+            'os': f"{operating_system +' ' + os_ver}",
+            'db_user': db_user,
+            'soft_limit': f"{soft_limit} GB",
+            'hard_limit': f"{hard_limit} GB",
+            'transient_age_limit': f"{transient_age_limit} GB",
+            'limit_time_cpu': f"{limit_time_cpu} s",
+            'limit_request': limit_request,
+            'limit_time_real': limit_time_real,
+            'http_port': http_port,
+        }

storage_dashboard/static/description/index.html

@@ -0,0 +1,580 @@
+<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div class="d-flex align-items-center justify-content-between"
+         style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="assets/misc/cybrosys-logo.png" width="42" height="42"
+             style="width: 42px; height: 42px;"/>
+        <div>
+            <div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                 class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- APP HERO -->
+                <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+                    Odoo Storage Dashboard</h1>
+                <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
+                    Storage Dashboard Provides Memory Usage Statistics for Various Models in the Current Database</p>
+                <!-- END OF APP HERO -->
+                <img src="assets/screenshots/hero.gif" class="img-responsive"
+                     style="width: 100%; margin-left: auto; margin-right: auto;"/>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/compass.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Explore This Module</h2>
+</div>
+
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn more about this module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View features of this module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                 style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View screenshots for this module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36"/>
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Overview</h2>
+</div>
+
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">This module crafted by Cybrosys Technologies;
+        StorageDashboard provides memory usage statistics for
+        various models in the current database.
+    </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Features</h2>
+</div>
+
+<div class="row"
+     style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Easy to Understand Storage Consumption.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Shows Database Details.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Shows Total Storage Used by Database.</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Index Chart</span>
+        </div>
+        <div class="d-flex align-items-center"
+             style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2"/>
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Shows Model wise Storage Usage.</span>
+        </div>
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;"
+     id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pictures.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Screenshots</h2>
+</div>
+
+<div class="row">
+    <div class="col-sm-12">
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                Activate Storage Dashboard module.
+            </h3>
+            <img src="assets/screenshots/1.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                There will be a new Menu "Memory Usage" General Settings.
+            </h3>
+            <img src="assets/screenshots/2.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                The view of Storage Dashboard.
+            </h3>
+            <img src="assets/screenshots/3.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
+                System monitor details and database details
+            </h3>
+            <img src="assets/screenshots/4.png" class="img-thumbnail">
+        </div>
+    </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/categories.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Related Products</h2>
+</div>
+
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/odoo_dynamic_dashboard/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/hide_menu_user/#"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/web_login_styles/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active"
+                     style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/todo_list/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/4.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/access_restriction_by_ip/#"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
+                         style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/auto_logout_idle_user_odoo/"
+                           target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block"
+                                     style="border-radius: 0px;"
+                                     src="assets/modules/6.jpg">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+               style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i
+                    class="fa fa-chevron-left"
+                    style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1"
+                    data-slide="next" style="width:35px; color:#000">
+            <span class="carousel-control-next-icon"><i
+                    class="fa fa-chevron-right"
+                    style="font-size:24px"></i></span></a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/star.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our Services</h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/cogs.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Customization</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/wrench.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Implementation</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/lifebuoy.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Support</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/user.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire Odoo Developer</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/puzzle.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Integration</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/update.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Migration</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/consultation.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Consultancy</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/training.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Implementation</h6>
+        </div>
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                 style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/license.png" class="img-responsive"
+                     height="48px" width="48px">
+            </div>
+            <h6 class="text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo Licensing Consultancy</h6>
+        </div>
+    </div>
+</div>
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/corporate.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Our Industries</h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/trading-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure and sell your products</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/pos-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy configuration and convivial experience</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/education-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for educational management</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/manufacturing-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and schedule your operations</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/ecom-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile friendly, awe-inspiring product pages</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/service-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of services and invoice</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/restaurant-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or restaurant methodically</p>
+            </div>
+        </div>
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                 style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/hotel-black.png"
+                     class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management</h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An all-inclusive hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center"
+     style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+         style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/customer-support.png"/>
+    </div>
+    <h2 class="mt-2"
+        style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">
+        Support</h2>
+</div>
+
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/support.png" height="48" width="48"
+                         style="width: 42px; height: 42px;"/>
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help?
+                        Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52"
+                         style="width: 52px; height: 52px;"/>
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            +91 86068 27707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="assets/misc/logo.png" width="144" height="31"
+                 style="width:144px; height: 31px; margin-top: 40px;"/>
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

storage_dashboard/static/src/js/storage_dashboard.js

@@ -0,0 +1,156 @@
+odoo.define("dashboard_dashboard.DashboardDashboard", function (require) {
+    "use strict";
+    var AbstractAction = require('web.AbstractAction');
+    var core = require('web.core');
+    var QWeb = core.qweb;
+    var _t = core._t;
+    var rpc = require('web.rpc');
+    var self = this;
+/*
+    * Extends Action and shows different charts based on database related data
+    fetched from python model.
+*/
+    var DashBoard = AbstractAction.extend({
+        //Adding Chart.js on js libraries.
+        jsLibs: [
+            '/web/static/lib/Chart/Chart.js',
+        ],
+        contentTemplate: 'DashboardDashboard',
+        // Method for Change cart view
+        init: function(parent, context) {
+           this._super(parent, context);
+           this.dashboard_templates = ['MainSection'];
+           this.chart = [];
+        },
+        start: function() {
+           var self = this;
+           this.set("title", 'Dashboard');
+           return this._super().then(function() {
+               self.render_dashboards();
+           });
+        },
+        willStart: function(){
+            var self = this;
+            return this._super()
+        },
+        render_dashboards: function() {
+           var self = this;
+           this.fetch_data()
+           var templates = ['MainSection'];
+           _.each(templates, function(template) {
+               self.$('.o_hr_dashboard').append(QWeb.render(template, {widget: self}))
+           });
+        },
+        //  Method for fetching data related for database and model storage
+        //  form storage.usage python model.
+        fetch_data: function() {
+            var self = this
+            var def0 = this._rpc({
+               model: 'storage.usage',
+               method: "get_info",
+            })
+            .then(function (result) {
+                $('#db_info_title').replaceWith('<span>' + result['db_name'] + '</span>');
+                $('#db_info_body').replaceWith('<span>' + result['db_version'] + '</span>');
+                $('#db_date').replaceWith('<span>' + result['db_date'] + '</span>');
+                $('#db_tables').replaceWith('<span>' + result['db_tables'] + '</span>');
+                $('#db_size_body').replaceWith('<span>' + result['db_size'] + '</span>');
+                $('#total_memory').text(result['total_memory']);
+                $('#used_memory').text(result['used_memory']);
+                $('#available_memory').text(result['available_memory']);
+                $('#cpu_usage').text(result['cpu_usage']);
+                $('#ram_usage').text(result['ram_usage']);
+                $('#os').text(result['os']);
+                $('#soft_limit').text(result['soft_limit']);
+                $('#hard_limit').text(result['hard_limit']);
+                $('#transient_age_limit').text(result['transient_age_limit']);
+                $('#limit_time_cpu').text(result['limit_time_cpu']);
+                $('#limit_request').text(result['limit_request']);
+                $('#limit_time_real').text(result['limit_time_real']);
+                $('#http_port').text(result['http_port']);
+                $('#db_user').text(result['db_user']);
+            });
+            var def1 = this._rpc({
+               model: 'storage.usage',
+               method: "get_data",
+            })
+            .then(function (result) {
+                var indexModelsArray = result.index_data.map(function(item){
+                    return item.model
+                });
+                var indexSizeArray = result.index_data.map(function(item){
+                    return item.index_size
+                });
+                var modelsArray = result.model_storage.map(function(item) {
+                    return item.model;
+                });
+                var sizesArray = result.model_storage.map(function(item) {
+                return item.size;
+                });
+                const get_colors = () => {
+                    var color = []
+                        for (var j = 0; j < result.index_data.length; j++) {
+                            var r = Math.floor(Math.random() * 255);
+                            var g = Math.floor(Math.random() * 255);
+                            var b = Math.floor(Math.random() * 255);
+                            color.push("rgb(" + r + "," + g + "," + b + ")");
+                        }
+                    return color
+                }
+                //  Chart templates.
+                self.chart.push(new Chart("chart_example", {
+                    type: 'bar',
+                    data: {
+                        labels: modelsArray, // Labels for each segment
+                        datasets: [{
+                            label: 'Size Used',
+                            backgroundColor: get_colors(),
+                            data: sizesArray,
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        tooltips: {
+                            callbacks: {
+                                label: function (tooltipItem, data) {
+                                    var label = data.labels[tooltipItem.index];
+                                    var value = data.datasets[0].data[tooltipItem.index];
+                                    return label + " : " + value.toLocaleString() + " MB";
+                                }
+                            }
+                        }
+                    }
+                }));
+
+                self.chart.push(new Chart("chart_index", {
+                    type: 'line',
+                    data: {
+                        labels: indexModelsArray, // Labels for each segment
+                        datasets: [{
+                            label: 'Index Size',
+                            fill: false,
+                            borderColor: 'rgb(75, 192, 192)',
+                            data: indexSizeArray,
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        tooltips: {
+                            callbacks: {
+                                label: function (tooltipItem, data) {
+                                    var label = data.labels[tooltipItem.index];
+                                    var value = data.datasets[0].data[tooltipItem.index];
+                                    return label + " : " + value.toLocaleString() + " MB";
+                                }
+                            }
+                        }
+                    }
+                }));
+            });
+        },
+   });
+   core.action_registry.add('storage_dashboard_tag', DashBoard);
+   return DashBoard;
+});

storage_dashboard/static/src/xml/storage_dashboard_templates.xml

@@ -0,0 +1,180 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Templet for Storage dashboard. -->
+<templates id="template" xml:space="preserve">
+    <t t-name="DashboardDashboard">
+       <div class="oh_dashboards">
+           <div class="container-fluid my-5 o_hr_dashboard"/>
+       </div>
+    </t>
+    <t t-name="MainSection">
+        <!--    The container of dashboard    -->
+        <div style="display:flex;justify-content: center;">
+        <!--    The Chart showing section.    -->
+            <section class="dashboard_main" id="main_section">
+                <div class="card">
+                    <div class="card-header" style="background:lavender;">
+                        <div class="row">
+                            <div class="col">
+                                <h3>Model Size Chart</h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body mt-3" id="in_ex_body_hide">
+                        <div class="row">
+                            <div class="col-md-12 chart_canvas">
+                                <div id="chart_canvas">
+                                    <canvas id="chart_example" width="800" height="400" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="dashboard_main" id="main_section">
+                <div class="card" style="margin-left:10px;">
+                    <div class="card-header" style="background:lavender;">
+                        <div class="row">
+                            <div class="col">
+                                <h3>Index Size Chart</h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body mt-3" id="in_ex_body_hide">
+                        <div class="row">
+                            <div class="col-md-12 chart_canvas">
+                                <div id="chart_canvas">
+                                    <canvas id="chart_index" width="800" height="400"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+        <section>
+            <div class="card" style="margin-top:20px;margin-left:70px;margin-right:70px;">
+                <div class="card-header" style="background:bisque;">
+                    <div class="row">
+                        <div class="col">
+                            <h3>Database Details</h3>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-body mt-3" id="in_ex_body_hide">
+                    <div class="row">
+                        <div class="col">
+                            <table class="table table-striped">
+                                <tr>
+                                    <td><strong>Database Name </strong></td>
+                                    <td><span id="db_info_title"> </span></td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Database Version </strong></td>
+                                    <td><span id="db_info_body"> </span></td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Database Created on </strong></td>
+                                    <td><span id="db_date"> </span></td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Database Size</strong></td>
+                                    <td><span id="db_size_body"> </span></td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Total Tables </strong></td>
+                                    <td><span id="db_tables"> </span></td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <div>
+            <section>
+                <div class="card" style="margin-top:20px;margin-left:70px;margin-right:70px;">
+                    <div class="card-header" style="background:bisque;">
+                        <div class="row">
+                            <div class="col">
+                                <h3>System Monitor</h3>
+                            </div>
+                        </div>
+                    </div>
+                        <!--card-body-->
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="chart" style="display:flex;">
+                                    <table class="table table-bordered" style="margin-right:10px;">
+                                        <tbody>
+                                            <tr>
+                                                <th>Total Memory</th>
+                                                <td><span id="total_memory"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Used Memory</th>
+                                                <td><span id="used_memory"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Available Memory</th>
+                                                <td><span id="available_memory"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>CPU Usage</th>
+                                                <td><span id="cpu_usage"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Odoo RAM Usage</th>
+                                                <td><span id="ram_usage"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Operating System</th>
+                                                <td><span id="os"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Database User</th>
+                                                <td><span id="db_user"/></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                    <table class="table table-bordered">
+                                        <tbody>
+                                            <tr>
+                                                <th>Soft Memory Limit</th>
+                                                <td><span id="soft_limit"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Hard Memory Limit</th>
+                                                <td><span id="hard_limit"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Transient Age Limit</th>
+                                                <td><span id="transient_age_limit"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>CPU Limit Time</th>
+                                                <td><span id="limit_time_cpu"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Limit Request</th>
+                                                <td><span id="limit_request"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Real Limit Time</th>
+                                                <td><span id="limit_time_real"/></td>
+                                            </tr>
+                                            <tr>
+                                                <th>Http Port</th>
+                                                <td><span id="http_port"/></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </t>
+</templates>

storage_dashboard/views/storage_dashboard_menu.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<!--  Record for adding client action on memory usage menu  -->
+    <record id="action_storage_dashboard" model="ir.actions.client">
+        <field name="name">Memory Usage</field>
+        <field name="tag">storage_dashboard_tag</field>
+    </record>
+<!--  Adding MemoryUsage menu on Administration   -->
+    <menuitem
+            id="storage_dashboard_menu"
+            name="Memory Usage"
+            parent="base.menu_administration"
+            action="action_storage_dashboard"
+            sequence="200"
+    />
+</odoo>