|
|
@@ -0,0 +1,391 @@
|
|
|
+<style>
|
|
|
+ .system {height:99%; overflow:hidden;}
|
|
|
+ .data-info .board{ height:300px; display:grid; grid-template-columns:auto 200px 200px; gap:20px; align-items:center}
|
|
|
+ /*.board { background-image: linear-gradient(to bottom, #ffffff,#ffffff,#f3f3f3,#d3d3d3d3)}*/
|
|
|
+ .number {font-size:48px; font-family:courier;padding:8px; ;}
|
|
|
+ .etl {display:grid; grid-template-columns: 250px auto; gap:2;}
|
|
|
+ .chart {box-shadow : 0px 1px 4px 2px #d3d3d3; width:200px; height:250px;
|
|
|
+ display:grid; align-items:center;
|
|
|
+ background-image: linear-gradient(to bottom,#f3f3f3,#ffffff);
|
|
|
+ overflow:hidden;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog { width:450px; min-height:200px; display:grid; grid-template-rows: 40px 80% auto; gap:4px}
|
|
|
+ .dialog .title-bar { border-top-left-radius: 8px; border-top-right-radius: 8px ; padding:4px; background-color:#f3f3f3; gap:2px; display:grid; grid-template-columns: auto 32px; align-items:center}
|
|
|
+ .dialog .action {display:grid; align-items: flex-end; padding-left:25%; padding-right:25%;}
|
|
|
+ .dialog .message {display:grid; align-items: center; grid-template-columns: 20% auto;}
|
|
|
+ .dialog .message .text {line-height:2; text-transform: capitalize;}
|
|
|
+ .fa-exclamation-triangle {color:orange}
|
|
|
+ .fa-question-circle{color:#009df7}
|
|
|
+</style>
|
|
|
+
|
|
|
+<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
|
|
|
+<script src="{{context}}/static/js/io/dialog.js"></script>
|
|
|
+<script src="{{context}}/static/js/io/io.js"></script>
|
|
|
+<script src="{{context}}/static/js/io/healthcare.js"></script>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var select = function(node){
|
|
|
+ var value = $($(node).children()[0]).attr('data-value')
|
|
|
+
|
|
|
+ jx.utils.patterns.visitor($('.tab'),function(_item){
|
|
|
+ var button = $(_item).children()[0]
|
|
|
+ $(_item).removeClass('selected')
|
|
|
+ //alert([$(button).attr('data-value'),value])
|
|
|
+ if($(button).attr('data-value') == value){
|
|
|
+ $(node).addClass('selected')
|
|
|
+ $('.'+value).show()
|
|
|
+
|
|
|
+ }else{
|
|
|
+ var m = '.'+ $(button).attr('data-value')
|
|
|
+
|
|
|
+ $(m).hide()
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ var monitor = {}
|
|
|
+ monitor.listen = {handler:null}
|
|
|
+
|
|
|
+ monitor.data = function(){
|
|
|
+ var http = HttpClient.instance()
|
|
|
+ http.get("/data",function(x){
|
|
|
+ var r = JSON.parse(x.responseText)
|
|
|
+ var keys = jx.utils.keys(r) //-- process,files
|
|
|
+ for (var i in keys){
|
|
|
+ var prefix = keys[i]
|
|
|
+ if(prefix == 'process'){
|
|
|
+ if(r[prefix].counts != 0){
|
|
|
+ //
|
|
|
+ // We should insure the listeners are enabled
|
|
|
+ if(monitor.listen.handler == null){
|
|
|
+ monitor.listen.handler = setInterval(
|
|
|
+ function(){
|
|
|
+ console.log('running ...')
|
|
|
+ monitor.data()},5000)
|
|
|
+
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if (monitor.listen.handler != null){
|
|
|
+
|
|
|
+ clearInterval(monitor.listen.handler)
|
|
|
+ }
|
|
|
+ dialog.close()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ monitor.render(prefix,r[prefix])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ monitor.render = function(prefix,r){
|
|
|
+ prefix = '.'+prefix
|
|
|
+
|
|
|
+ var div = jx.dom.get.instance('DIV')
|
|
|
+ var label = jx.dom.get.instance('DIV')
|
|
|
+ div.align = 'center'
|
|
|
+
|
|
|
+ div.innerHTML = r.counts
|
|
|
+ div.className = 'number'
|
|
|
+ label.innerHTML = prefix.replace(/\./,'')
|
|
|
+ label.style.textTransform = 'capitalize'
|
|
|
+ label.className = 'small bold border-top'
|
|
|
+ div.append(label)
|
|
|
+
|
|
|
+
|
|
|
+ $(prefix + ' .board').empty()
|
|
|
+ $(prefix+' .board').append(div)
|
|
|
+
|
|
|
+ var charts = jx.utils.patterns.visitor(r.chart,function(option){
|
|
|
+
|
|
|
+
|
|
|
+ var div = jx.dom.get.instance('div')
|
|
|
+
|
|
|
+ div.className = 'chart'
|
|
|
+ div.align='center'
|
|
|
+ $(prefix+' .board').append(div)
|
|
|
+
|
|
|
+ var chart = new ApexCharts($(div)[0],option)
|
|
|
+ //chart.render()
|
|
|
+ div.chart = chart
|
|
|
+
|
|
|
+ return chart
|
|
|
+
|
|
|
+ })
|
|
|
+ var observers = jx.utils.patterns.visitor(charts,function(_item){
|
|
|
+ var m = function(_chart){
|
|
|
+ this.chart = _chart ;
|
|
|
+ this.apply = function(caller){this.chart.render();
|
|
|
+ caller.notify()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return new m(_item)
|
|
|
+ })
|
|
|
+ jx.utils.patterns.observer(observers,'apply')
|
|
|
+ //jx.utils.patterns.iterator(charts,'render')
|
|
|
+
|
|
|
+ /*setTimeout(function(){
|
|
|
+ jx.utils.patterns.visitor(charts,function(_item){_item.render()})
|
|
|
+ },1000) */
|
|
|
+ }
|
|
|
+ var setup = {}
|
|
|
+ setup.open = function(){
|
|
|
+ $('.dashboard').slideUp(
|
|
|
+ function(){
|
|
|
+ $('.setup').slideDown()
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function(){
|
|
|
+ /*var shandler = new io();
|
|
|
+
|
|
|
+ if (shandler.disconnected ==false){
|
|
|
+ shandler.disconnect()
|
|
|
+ }
|
|
|
+ var socket = io.connect()
|
|
|
+ socket.on('connect',function(e){
|
|
|
+ socket.emit('connect',{name:'steve'})
|
|
|
+ })
|
|
|
+ socket.on('update',function(e){
|
|
|
+ console.log(e)
|
|
|
+ console.log()
|
|
|
+ })
|
|
|
+ var socket = io.connect('http://localhost:81',{cors:{AccessControlAllowOrigin:'*'}}) //('http://localhost:81/stream')
|
|
|
+ socket.on('procs',function(e){
|
|
|
+
|
|
|
+ })
|
|
|
+ socket.on('data',function(e){
|
|
|
+
|
|
|
+ $('.logs').empty()
|
|
|
+ var div = $('.logs')
|
|
|
+
|
|
|
+ var option = e.apex
|
|
|
+ option.plotOptions.pie.size = 220
|
|
|
+ option.plotOptions.pie = {dataLabels: {show:true,name:{show:true},value:{show:true}}}
|
|
|
+
|
|
|
+ option.legend.show = false
|
|
|
+ console.log(option)
|
|
|
+ c = new ApexCharts(div[0],option)
|
|
|
+ c.render()
|
|
|
+ socket.emit("procs",{"name":"steve"})
|
|
|
+ })*/
|
|
|
+
|
|
|
+ select($('.tab')[0])
|
|
|
+ monitor.data()
|
|
|
+
|
|
|
+ $('.email').text($('#email').val())
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="system setup">
|
|
|
+ <div class="status">
|
|
|
+
|
|
|
+ {% if not store.type %}
|
|
|
+ <div >
|
|
|
+ <span class="caption bold border-bottom" style="padding-right:10">Current Configuration</span>
|
|
|
+ <p></p>
|
|
|
+ <div style="display:grid; align-items:center; grid-template-columns:32px auto;">
|
|
|
+ <i class="fa fa-times" style="font-size:28; margin:4px;"></i> <span>System needs to be initialized !</span>
|
|
|
+ </div>
|
|
|
+ <p></p>
|
|
|
+ <div class="active-button border-round" style="width:50%">
|
|
|
+ <div class="icon">
|
|
|
+ <i class="fas fa-cog" style="font-size:28"></i>
|
|
|
+ </div>
|
|
|
+ <div class="bold" align="center">Initialize</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {% else %}
|
|
|
+ <div class="border-right">
|
|
|
+
|
|
|
+ <span class="caption bold border-bottom" style="padding-right:10">Current Configuration</span>
|
|
|
+ <p>
|
|
|
+ </p>
|
|
|
+ <div class="item" style="display:grid; align-items:center">
|
|
|
+ <div class="bold" style="text-transform: capitalize;">Owner </div><div class="bold">:</div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <input type="text" id="email" value="{{owner}}">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <div class="bold" style="text-transform: capitalize;">store</div><div class="bold">:</div>
|
|
|
+ <div class="">{{store.type}}</div>
|
|
|
+ </div>
|
|
|
+ <p></p>
|
|
|
+ <div class="active-button border-round" style="width:50%" onclick="healthcare.io.update()">
|
|
|
+ <div class="icon">
|
|
|
+ <I class="fas fa-download" style="font-size:28"></I>
|
|
|
+ </div>
|
|
|
+ <div class="bold" align="center">Update Config</div>
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ <div class="code">
|
|
|
+ #<br>
|
|
|
+ healthcare-io.py --init <span class="email"></span> --store mongo
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {%endif%}
|
|
|
+ <p></p>
|
|
|
+ <br>
|
|
|
+ <div class="border-right">
|
|
|
+ <span class="caption bold border-bottom" style="padding-right:10">Manage Plan</span>
|
|
|
+ <p></p>
|
|
|
+ <div style="line-height: 2;">Insure your account is tied to a cloud service provider.
|
|
|
+ <br>We support <span class="bold">google-drive, dropbox, one-drive or box. </span>
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ <div class="bold active-button border-round" style="width:50%" onclick="jx.modal.show({url:'https://healthcareio.the-phi.com/store/healthcareio/plans'})">
|
|
|
+ <div>
|
|
|
+ <img src="{{context}}/static/img/logo.svg" />
|
|
|
+ </div>
|
|
|
+ <div align="center">Open Plan Console</div>
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <div class="border-right" style="height:30%"></div>
|
|
|
+ </div>
|
|
|
+ <div class="_border-right"></div>
|
|
|
+ <div >
|
|
|
+ <span class="caption bold border-bottom" style="padding-right:10">
|
|
|
+ Manage Processes</span>
|
|
|
+ <p>
|
|
|
+ <div class="input-form" style="grid-template-columns: 30% auto;">
|
|
|
+ <div class="item" style="grid-row:1; grid-column:1; ">
|
|
|
+ <div class="label">Process #</div>
|
|
|
+ <input type="text" class="procs batch"placeholder="#" style="width:64px; text-align:right" value="{{args.batch}}" onchange="healthcare.io.apply()"/>
|
|
|
+ </div>
|
|
|
+ <div class="item" style="grid-row:1; grid-column:2 ">
|
|
|
+ <div class="label">Folder #</div>
|
|
|
+ <input type="text" placeholder="Process counts" value="/data"/ class="data folder" disabled>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div style="display:grid; grid-template-columns:repeat(2,215px); gap:2px;">
|
|
|
+ <div class="active-button border-round bold io-apply" style="margin-top:32; display:none" onclick="healthcare.io.apply()">
|
|
|
+ <div class="icon"><i class="far fa-save" style="font-size:28; color:#4682B4"></i></div>
|
|
|
+ <div align="center">Apply</div>
|
|
|
+ </div>
|
|
|
+ <div class="active-button border-round bold" style="margin-top:32" onclick="healthcare.io.stop()">
|
|
|
+ <i class="far fa-stop-circle" style="font-size:28; color:maroon"></i>
|
|
|
+
|
|
|
+ <div align="center">Stop</div>
|
|
|
+ </div>
|
|
|
+ <div class="active-button border-round bold" style="margin-top:32" onclick="healthcare.io.run()">
|
|
|
+ <i class="fas fa-running" style="font-size:28; color:green"></i>
|
|
|
+ <div align="center">Run</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <div class="code">
|
|
|
+ <div class="bold"># The command that will be executed</div>
|
|
|
+ <div>healthcare-io.py --parse --folder /data --batch <span class="batch">{{args.batch}}</span></div>
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <div style="display:grid; grid-template-columns:auto 48px ; gap:2px">
|
|
|
+ <div class="bold caption border-bottom">Process Monitoring</div>
|
|
|
+ <div class="active" align="center" title="reload" onclick="monitor.data()"><i class="fas fa-sync"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="small">Powered by smart-top</div>
|
|
|
+ <p></p>
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="tab selected" onclick="select(this)">
|
|
|
+ <div class="active" data-value="process" >
|
|
|
+ <i class="far fa-clock" style="color:maroon"></i>
|
|
|
+ <span>Process</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab" onclick="select(this)">
|
|
|
+ <div class="active" data-value="files"><i class="fas fa-file-alt"></i> Files</div>
|
|
|
+ </div>
|
|
|
+ <div class="tab" onclick="select(this)">
|
|
|
+ <div class="active" data-value="export"><i class="fas fa-upload"></i> Export</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="data-info">
|
|
|
+ <div class="process ">
|
|
|
+
|
|
|
+ <div class="board"></div>
|
|
|
+ <div class="small" align="center">
|
|
|
+ <div class="border-top bold" style="color:#4682B4;">Running Processes and resource usage</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="files">
|
|
|
+ <div class="board"></div>
|
|
|
+ <div class="small" align="center">
|
|
|
+ <div class="border-top bold" style="color:#4682B4;">Summary of files found and processed</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="export">
|
|
|
+ <p></p>
|
|
|
+ <div class="etl">
|
|
|
+ <div class="" >
|
|
|
+ <div class="menu" style="position:absolute; width:200">
|
|
|
+ <div class="items ">
|
|
|
+ <div class="bold active" style="display:grid; grid-template-columns:80% auto;">
|
|
|
+ <span>
|
|
|
+ <i class="fas fa-cloud"></i>
|
|
|
+ Cloud</span>
|
|
|
+ <span class="glyph">
|
|
|
+ <i class="fas fa-angle-down"></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="item-group border-round border small">
|
|
|
+ <div class="item" onclick="healthcare.io.publish.database.init('s3')">AWS S3</div>
|
|
|
+ <div class="item" onclick="healthcare.io.publish.database.init('bigquery')">Google Bigquery</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="items ">
|
|
|
+ <div class="bold active"style="display:grid; grid-template-columns:80% auto;">
|
|
|
+ <span>
|
|
|
+ <i class="fas fa-database"></i>
|
|
|
+ Database</span>
|
|
|
+ <span class="glyph">
|
|
|
+ <i class="fas fa-angle-down"></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="item-group border-round border small">
|
|
|
+ <div class="bold">SQL</div>
|
|
|
+
|
|
|
+ <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('postgresql')">PostgreSQL</div>
|
|
|
+ <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('mysql')">MySQL</div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="bold">NoSQL</div>
|
|
|
+ <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('mongodb')">Mongodb</div>
|
|
|
+ <div class="item" style="margin-left:15px; margin-right:32px" onclick="healthcare.io.publish.database.init('couchdb')">Couchdb</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="active-button border-round" style="width:50%">
|
|
|
+ <div class="icon"><i class="fas fa-running" style="font-size:28"></i></div> <div class="bold" align="center">Start</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
