Building IRIS Responsive dashboard with Python Flask Web Framework
Tags: css, database, python, programming
Published: 2024-03-12 18:46:17

<p>Hi Community,</p>
<p>This post is a introduction of my openexchange <a href="https://openexchange.intersystems.com/package/iris-python-apps" rel="nofollow">iris-python-apps </a> application. Build by using&nbsp;<a href="https://docs.intersystems.com/iris20212/csp/docbook/DocBook.UI.Page.cls?KEY=AFL_epython" rel="nofollow">Embedded Python</a>&nbsp;and&nbsp;<a href="https://flask.palletsprojects.com/" rel="nofollow">Python Flask Web Framework</a>.&nbsp;<br>Application also demonstrates some of the Python functionalities&nbsp;like Data Science, Data Plotting, Data Visualization and QR Code generation.</p>
<p><img alt="image" src="https://user-images.githubusercontent.com/18219467/155213244-803fecb4-5c76-4805-9bb0-ca5a11411129.png"></p>
<h3>&nbsp;</h3>
<h3>&nbsp;Features</h3>
<ul>
<li>
<h4>&nbsp;Responsive bootstrap IRIS Dashboard</h4></li>
<li>
<h4>&nbsp;View dashboard details along with interoperability events log and messages.</h4></li>
<li>
<h4>&nbsp;Use of Python plotting from IRIS</h4></li>
<li>
<h4>&nbsp;Use of&nbsp;<a href="https://jupyter.org/" rel="nofollow">Jupyter Notebook </a></h4></li>
<li>
<h4>&nbsp;Introduction to Data Science, Data Plotting and Data Visualization.</h4></li>
<li>
<h4>&nbsp;QR Code generator from python. <!--break--></h4></li>
</ul>
<h2 style="margin-bottom: 11px;">Responsive bootstrap IRIS Dashboard by using embedded python</h2>
<p style="margin-bottom:11px">Below is the code of user defined function&nbsp;<code>get_dashboard_stats()</code> to get data from&nbsp;SYS.Stats.Dashboard IRIS class by using&nbsp;embedded python :</p>

<pre><code>&nbsp;  import iris&nbsp; &nbsp;
&nbsp; &nbsp;// make sure to connect with %SYS namespace by using custom object script function
&nbsp; &nbsp; iris.cls("Embedded.Utils").SetNameSpace("%SYS")
&nbsp; &nbsp; ref = iris.cls("SYS.Stats.Dashboard").Sample()
&nbsp; &nbsp; last_backup = ref.LastBackup
&nbsp; &nbsp;&nbsp;#check if variable is empty
&nbsp; &nbsp; if not last_backup:
&nbsp; &nbsp; &nbsp; &nbsp; last_backup = "Never"
&nbsp;   #content data dictionary to store data to be used in HTML page
&nbsp; &nbsp; content = {
&nbsp; &nbsp; &nbsp; &nbsp; 'ApplicationErrors':ref.ApplicationErrors,
&nbsp; &nbsp; &nbsp; &nbsp; 'CSPSessions':ref.CSPSessions,
&nbsp; &nbsp; &nbsp; &nbsp; 'CacheEfficiency':ref.CacheEfficiency,
&nbsp; &nbsp; &nbsp; &nbsp; 'DatabaseSpace' : ref.DatabaseSpace,
&nbsp; &nbsp; &nbsp; &nbsp; 'DiskReads' : ref.DiskReads,
&nbsp; &nbsp; &nbsp; &nbsp; 'DiskWrites' : ref.DiskWrites,
&nbsp; &nbsp; &nbsp; &nbsp; 'ECPAppServer' : ref.ECPAppServer,
&nbsp; &nbsp; &nbsp; &nbsp; 'ECPAppSrvRate' : ref.ECPAppSrvRate,
&nbsp; &nbsp; &nbsp; &nbsp; 'ECPDataServer' : ref.ECPDataServer,
&nbsp; &nbsp; &nbsp; &nbsp; 'ECPDataSrvRate' : ref.ECPDataSrvRate,
&nbsp; &nbsp; &nbsp; &nbsp; 'GloRefs' : ref.GloRefs,
&nbsp; &nbsp; &nbsp; &nbsp; 'GloRefsPerSec' : ref.GloRefsPerSec,
&nbsp; &nbsp; &nbsp; &nbsp; 'GloSets' : ref.GloSets,
&nbsp; &nbsp; &nbsp; &nbsp; 'JournalEntries' : ref.JournalEntries,
&nbsp; &nbsp; &nbsp; &nbsp; 'JournalSpace' : ref.JournalSpace,
&nbsp; &nbsp; &nbsp; &nbsp; 'JournalStatus' : ref.JournalStatus,
&nbsp; &nbsp; &nbsp; &nbsp; 'LastBackup' : last_backup,
&nbsp; &nbsp; &nbsp; &nbsp; 'LicenseCurrent' : ref.LicenseCurrent,
&nbsp; &nbsp; &nbsp; &nbsp; 'LicenseCurrentPct' : ref.LicenseCurrentPct,
&nbsp; &nbsp; &nbsp; &nbsp; 'LicenseHigh' : ref.LicenseHigh,
&nbsp; &nbsp; &nbsp; &nbsp; 'LicenseHighPct' : ref.LicenseHighPct,
&nbsp; &nbsp; &nbsp; &nbsp; 'LicenseLimit' : ref.LicenseLimit,
&nbsp; &nbsp; &nbsp; &nbsp; 'LicenseType' : ref.LicenseType,
&nbsp; &nbsp; &nbsp; &nbsp; 'LockTable' : ref.LockTable,
&nbsp; &nbsp; &nbsp; &nbsp; 'LogicalReads' : ref.LogicalReads,
&nbsp; &nbsp; &nbsp; &nbsp; 'Processes' : ref.Processes,
&nbsp; &nbsp; &nbsp; &nbsp; 'RouRefs' : ref.RouRefs,
&nbsp; &nbsp; &nbsp; &nbsp; 'SeriousAlerts' : ref.SeriousAlerts,
&nbsp; &nbsp; &nbsp; &nbsp; 'ShadowServer' : ref.ShadowServer,
&nbsp; &nbsp; &nbsp; &nbsp; 'ShadowSource' : ref.ShadowSource,
&nbsp; &nbsp; &nbsp; &nbsp; 'SystemUpTime' : ref.SystemUpTime,
&nbsp; &nbsp; &nbsp; &nbsp; 'WriteDaemon' : &nbsp;ref.WriteDaemon,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_pro' &nbsp; : tot_pro,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_msg' &nbsp; : tot_msg,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_usr' &nbsp; : tot_usr,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_apps' &nbsp;: tot_apps,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_ev' : tot_ev,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_ev_assert' : tot_ev_assert,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_ev_error' : tot_ev_error,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_ev_warning' : tot_ev_warning,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_ev_info' : tot_ev_info,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_ev_trace' : tot_ev_trace,
&nbsp; &nbsp; &nbsp; &nbsp; 'tot_ev_alert' : tot_ev_alert
 &nbsp; &nbsp; &nbsp;  }
&nbsp; &nbsp; return content</code></pre>
<p style="margin-bottom:11px">&nbsp;</p>
<p style="margin-bottom:11px">Below is the main python code (app.py) to call get_dashboard_stats() user defined function to get deta, render index.html page and pass content data to it:</p>

<pre><code>@app.route("/")
 def index():
&nbsp;   #get dashboard data in dictionary variable
&nbsp; &nbsp; content = util.get_dashboard_stats()
 &nbsp;  return render_template('index.html', content = content)</code></pre>
<p><br>index.html use content dictionary variable to display related data. e.g&nbsp;<code>{ content.CSPSessions }</code>&nbsp;is used to display CSP Sessions:</p>
<pre><code>&lt;div class="row"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="col-lg-2 col-6"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- small box --&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="small-box bg-info"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="inner"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;{ content.CSPSessions }&lt;/h3&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;CSP Sessions&lt;/p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="icon"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;i class="ion ion-ios-photos"&gt;&lt;/i&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href="/processes" class="small-box-footer"&gt;View Details &lt;i class="fas fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
 &lt;/div&gt;</code></pre>
<p>&nbsp;</p>
<p><strong>From dashboard we can also view details of running processes, messages, security users, applications and event logs by using&nbsp;iris.sql.exec()&nbsp;functionality.</strong><br><img alt="image" src="https://user-images.githubusercontent.com/18219467/155213360-2662ec39-c4ad-487f-819a-8956b56130fc.png"><br><br>Application also display plotting in HTML by using python matplotlib library:</p>
<p><img alt="image" src="https://user-images.githubusercontent.com/18219467/155135340-93a791cc-e193-47de-bbf5-645c9968bc7a.png"></p>
<p>Below is the python code to display ploting in html:</p>
<pre><code>app.route("/matplot")
def matplot():
&nbsp; &nbsp; #Returns html with the img tag for your plot.
&nbsp; &nbsp; content = util.get_sidebar_stats()
&nbsp; &nbsp; num_x_points = int(request.args.get("num_x_points", 50))
&nbsp; &nbsp; return render_template('matplot.html', content = content, num_x_points = num_x_points) &nbsp;
@app.route("/matplot-as-image-&lt;int:num_x_points&gt;.png")
def plot_png(num_x_points=50):
&nbsp; &nbsp; # renders the plot on the fly.
&nbsp; &nbsp; fig = Figure()
&nbsp; &nbsp; axis = fig.add_subplot(1, 1, 1)
&nbsp; &nbsp; x_points = range(num_x_points)
&nbsp; &nbsp; axis.plot(x_points, [random.randint(1, 30) for x in x_points])
&nbsp; &nbsp; output = io.BytesIO()
&nbsp; &nbsp; FigureCanvasAgg(fig).print_png(output)
&nbsp; &nbsp; return Response(output.getvalue(), mimetype="image/png")</code></pre>
<p><!--break--></p>
<h3><strong>Introduction to Data Science, Data Plotting, Data Visualization and generation of QR code by using&nbsp;<a href="https://jupyter.org/" rel="nofollow">Jupyter Notebook </a></strong><br><br><img alt="image" src="https://user-images.githubusercontent.com/18219467/155152427-1eb17fe1-47f5-494a-b18b-287c9b188d45.png"></h3>
<h4 dir="auto"><img src="https://user-images.githubusercontent.com/18219467/155152819-f6874b0d-94bd-47fa-b82f-498ebd6c6120.png"><br><br><img alt="image" src="https://user-images.githubusercontent.com/18219467/155154309-7b99f442-6240-481f-bee6-4dbd62309c2e.png"><br>QR Code generation with Python</h4>
<p dir="auto"><img src="https://user-images.githubusercontent.com/18219467/155153417-f8aaea5b-1cfd-4ea8-af4e-f70c8a5ccff8.png"><br><strong>Thanks</strong></p>