hello everyone welcome to the West path
certified Developer Program level 3 I’m Dave Lee today we’ll be talking about an
advanced topic of this series which is how to develop your own plugin for the
Y’s past – 4 you
first we will guide you through the installation process of all the tools
that you need to get your development environment ready next we will take a
look into the file directories of the dashboard and then in the plug-in
directory there are some important files that we want to focus before we dive
into the coding section we will talk about the starting process of the
plug-in development including the installation of the simple JSON data
source plugin and also setting up dedicated CSV server as our data source
after that we will start to modify the source code of the plug-in step by step
and finally we will upload our plug-in to the dashboard on the wise path to
verify our new feature you can build your plug-in on Windows or Linux and you
have to install the Visual Studio code and that’s also what we’re going to use
during the course and you’re gonna need to install nodejs
with version 8 or above and we’re gonna be using the Garifuna source code with
version of five point four point three and we need to install the grunt to do
the housekeeping stuff for our project okay after installing the nodejs
just type in the node – V in your terminal to make sure that you have
installed the know environment properly once you install the node.js you’re
gonna have the NPM install already and we’re going to download the port from
our source code from the rivana website official website and okay just go ahead
and copy this and right now I’m already in this page where you can download the
graph on orosco it has provided all versions for different platforms like in
Linux and Windows Mac and you have different ways to install the core
source code I’m using Mac to develop our plugin right now but I will not use
these on brew command here instead I’m gonna use the zip file which you can
find in the Linux category here and when you scroll down you can find a
standalone link in Linux binaries just click the link here or you can type your
command in your terminal the disturb you can come in but I’m in Mac right now it
doesn’t come with a double gate utility installed by default but you can all
still click that link and you will download directly so it’s a zip file just download choose a location and then
click Save let’s check the
folder here it’s already downloaded and back to our terminal also in this folder
and you can type in the comment here just copy the whole command to unzip the
file you okay and now you have the folder a
folder called Griffin ah – five point four point three and back to the finder
you’re gonna see here right now okay and when you click in you’re gonna see the
file structure here all right and we also need to install the goof on a pie
chart panel plugin because plugins maybe the panel or the data source or backpack
and applications in our dashboard so there are different types of plugins but
today we’re gonna be working with the panel plugging so here you can copy this
command and just install it to the installation folder of your graph owner
or source code for in your coroner but there is another way there is always
another way to download it copy the link here and actually I will open this page
all right so he provides two ways to install this panel plugin you can go
ahead and copy this command here is basically using the graph on a CLI
command which comes with your graph on a source code e will be installed in your
environment if you install the core fauna with homebrew okay because right
now in my fighter here if you be inside this binary folder so you have this
profile and still I so you can go into this directory and type this command but
if you install your karana with homebrew then the path for this commit this
binary should be already in your environment path okay so you can type
the Griffin on CLI anywhere in your terminal in that case but here because
I’m downloading this graph on our source code this way okay so I need to go into
this folder and then type this command in my terminal to download the other
plug-in but here back to our webpage we can also download the zip file manually
and make sure you choose the right version it’s one point three point zero
ok now let’s click the link here and then safe okay
it should be fast and back to the fighter now we have this the source code
of the type char panel plug-in okay and we’re gonna see in a little bit but
before that let’s just open our core fauna server so you can see in in the
browser okay so right now in my terminal I’m
already in this demo Cortana directory let me go into the
profiler source code directory and you need to go into the binary folder and
just run your fauna server and it’s running so you need to go to
the localhost 3000 port to browse into your dashboard so now let’s open our
browser and then type in localhost for 3,000 and the default username and password to
log in the graph Anna will be admin and also at me
and it’s gonna ask you to change your password but you can keep it for now
now we’re inside is Cortana and we’re running it in our local machine okay so
here this create a dash for and now you can see that there is no pie char panel
that we can choose okay so how do we install hydra manually to find her now we have this zip file
here just double-click it to unzip it and we have this folder and just rename
it and grab this whole folder into the data folder under profile of folder and
also inside the data folder you’re gonna see a Bloggie plugins folder now there
is no manually installed plugin here so now that scrap is whole folder into this
directory okay so right now here you can see that this is the Kronecker father folder and
this is data folder and plugins folder and then the plug-in itself okay so we
have finished the installation for the plugin now how do we make it take effect
you need before you refresh that therefore you need to stop a server ok
and then run this server again so it’s just to restart a graph on a server and
back to the browser refresh this page and now you see that the pie chart is
already in here in the list so you can choose it okay and you’re gonna see a
default display but for now let me go to the data source because we’re gonna use
some data from our CSV server so let’s edit add a data source here after you
install the gravanos and also the pie chart panel source you
need to run the npm install for the ground CLI
and you’re gonna install it globally okay
so here let me just npm make sure you have this npm install and then install
it globally from sila okay and because I already installed it
before so it’s just updated all right so then we’re done with our installation of
the development environment and here is the file directory structure of the
dashboard source code we have the bin folder comm folder data folder public
folder scripts folder and vendor folder in the bin folder you can see the
battering files for running the criminal utilities like you can run the graph on
a server and also you can use the Cortana seal like binary to install
plugins and in the comforter you have the configuration files such as default
dot ini and in data folder you have the plugins folder logs folder and central
folder and most of the time we’re gonna be working with the plugins folder where
we install and modify our plug-in source code and in the public folder it
basically has all the core features or core functions of the dashboard and the
scripts folder contains all the build scripts to build the entire project for
the karana source code and in the vendor folder we be a third-party tools it’s
gonna be located in this folder and inside the plug-in folders or plugging
directory structure basically we have the distribution folder which is called
dist and you’re gonna run your grunt compile
your source code and all the compiled code will be a copy into this dist
folder and of course the SRC which is the source code folder will contain all
the source code and we’re going to be working inside this folder and you have
a bunch of files like plug in JSON it jain’s all the basic information about a
plugin and also the CSS file and the image files and partials folder has the
templates and you it’s gonna be rendered as the front-end user interface okay and
grown files grant file is you don’t want to change the name because it’s the
default name to run the chrome routine so when you run your grown command in
the terminal it’s gonna look for this file and then retrieve all the
information it requires to run all the jobs and in the package.json you have all the
dependencies described in in this file and also we have the Rimi it’s basically
a markdown file and we’re gonna compile and configure all plug-in so really we
have done the first step which is the copy the whole plug-in source code into
the data slash plugins directory and it’s running properly right now just
what we liked what we saw and here I’m gonna use another way to install the
plug-in and this time it’s gonna be the data source okay so like what we
mentioned plugins come with different types like panel data source or back-end
application but right now we’re gonna be working on the simple JSON data source
so it’s a data source plug-in and we’re gonna use the ground
Griffen a CLI to install this plug-in we do this on purpose so you can you have
tried both way to install your plugins okay first we download the zip file in
the second we use it for financial I but it’s just different types of plugins and
then we configure our data source and here is the URL to our CSV server it
provides some mock data so you can use it to verify your plugin
and then after you download the plugin you need to run npm install to install
all dependencies in your project or your source code folder and then after you do
some modification for your source code you’re gonna run the grunt camp run
command to run all the housekeeping jobs like compiling your source code and
removing all the compiled files to the distribution folder and because we
didn’t install our coroner source code with homebrew command which is going to
install all the provenance program into your system folder instead we manually
download the zip file and unzip it to some location in our computer so you
need to go into the binary folder and then run the graph on our server to
start a server okay and also the plug-in directory is gonna be inside this data
directory and this is how you set up the data source which I’m gonna show you in
a minute and before you start to develop your
plugin you need to run NPN install to install all the dependencies that that
is described in your package dot JSON file and also run the ground command
after you finish your modification of the source code and then we start the
graph on a server now let’s try to install our dinosaurs plugin by the
graph on our CLI so copy this how come in here back to
the terminal and because I’m assuming that I didn’t install the coroner using
homebrew I’m going to the binary folder and because here he has a Griffin a CLI
okay so we can run the come in directly right here let me copy this whole come
in here to install our simple JSON data source plugging okay like that okay then it’s done so back to the
fighter you’re gonna see here there is new plug-in installed
besides this pie chart panel we install a while ago okay so right now we have
the simple JSON data source because they are both plugins so they’re gonna be
located in this data and then plugins directory alright and let’s set up our
CSV server let me just copy this CSV server URL and because we already
install something new in our group on our source folder so we need to stop the
server and then run the server again then back to our web page or our browser
refresh the page and then when you click add data source
you can see the new plugin which is simple JSON that we just installed click
it and I’m gonna name it CSV server and then pasting the URL in the slide ok and
then just leave everything else by default okay and click Save and test
ok now it’s working all right we’re not using the with credentials because we’re
running this data source locally but after you finish all your development of
the plug-in and then upload your plugin unto the wise path dashboard you’re
gonna check this with credentials because it’s gonna run in our wise path
system you’re going to need some token to have the permission to use our
Khurana functions okay back to our dashboard now let’s add a
new panel click the pie chart plugin or panel here and then click the title in
the drop down menu click Edit and then choose the CSV server data source that
we just set up and then choose the first one and then add another query choose
the second one so you can see that it has two numbers or values here and in
the options tab here just move this legend to the right side ok so you can
enlarge this whole breadth but we’re gonna change the type to donut okay so
you have you have a donut shape Luke type of display and then what we’re
gonna do is to add another option here under this general section here ok it’s
gonna call a show value and then it’s gonna
show the first Valley which is seven here in the middle okay and we’re also
gonna provide you an ocean page here it’s gonna be included in our email and
when you go into this notion page you can see the table of content and it has
an SRP frame which is covered in another lecture and in this lecture is we’re
talking about the plug-in development so just click this title here and you will
bring you to the section and it’s the final result so at the end of this
development you’re gonna have a new feature called show value it’s gonna be
a switch like checkbox here under its general session but right now it doesn’t
have this option here because it’s brand new and then when you checked this
option it’s gonna show the first value in the center of this Stoner display
okay now everything is all set now we can
start to modify some source code now I’m back to my terminal here inside
is Ravana source folder and then go into the data directory and then the plug-in
directory okay and we’re gonna be dealing with these refine a pie chart okay and let’s open it with the Visual
Studio code and you might have noticed that we haven’t run any and npm install
command we can still see this pie chart is working in our dashboard why is that
because he has already the distribution folder we’ll need when it comes with a
zip file okay when we install it it already has all these files compiled in
this distribution folder or test folder so it doesn’t you don’t really need to
run any npm install command before it can work but and also when we are
working with the development when we’re modifying our code we may be we are not
going to change any parts that are related to the dependencies so maybe we
don’t even need to run npm install also but it’s just the best practice when you
download any new project into your local machine you’re gonna have to run the
your npm install okay that’s just the best practice okay
so right now i have opened my project with my in my visual studio code and
back to the terminal like when we mentioned let’s run npm
install and it’s gonna grab these information in this bad package.json
it’s gonna install all these dependencies into your local project you Oh once it’s done are you gonna see a
folder called node modules created okay and then that’s just run grunt and it’s
gonna grab the information in this grunt file is okay
it’s basically copying compiling all the source code and then copy the results
into the dist folder so let me just show you how it works let’s just delete all
this stitch fusion folder okay so now it’s gone there’s no dis folder in our
project and then I run the ground again you see is created it’s back okay so
it’s basically doing some housekeeping jobs for you okay and then he smooths
all this development process okay so back to our slide take a look at this module Jas okay so
here you’re gonna import your module or your control we say it’s control if
you’re familiar with the angular framework okay basically you are working
with your plugin as a control in the angular framework okay so you’re gonna
import your control into this module ie Jas as this pie chart control component
and then you’re gonna explore it as panel control okay so this is this is a
rule that you need to follow okay right now it already is already done for you
because it’s a working plugin okay so in the module Jas you see that is import
from your imports from your control which has all this business logic for
your plugging and then you ask for this pie chart control as panel control okay
so this is how kronosaurus recognize your panel plugin and I already have my
code snippet here I’m gonna modify these parts one by one and also you can find
all this information all this code snippets in your in our notion page here
when you scroll down in case you through all the steps and after you finish all
the steps you’re gonna have your new plugin working with your new feature
okay so right now the first step is to edit
the template for the panel editor so what is a template it’s basically the
code or rendering the front end okay so basically we’re working when you open
the added at the panel here what we can change
here is under this option tab okay so it has the general section legend section
and the combined session and we’re gonna add one more options here under this
general section so back to our project let’s find this editor dot HTML so you
can see that this is the general section and this legend session okay and this is
the come by section so basically this file represents this option page here
okay this is what we can change alright so right now there’s a some code here
back to the our our code snippet I’m I’m gonna add this code into this this file
so because I’m gonna add this option add right after this divider we field so
this fine is divided divider with okay this divider with field and then pasted
in okay so now it’s done okay so after this stab issue be able to
see these option created in the front-end so right now let’s do the
grunt to recompile the project and now the new files should be already in the
distribution folder but you’re gonna have to restart your server all right
now back to the browser let’s just refresh this page choose HR again let me just give you a name we say new
pie chart okay and then let’s choose our CTV server as our data source
and then add some queries here and then change an option okay you’re gonna move the bedroom to
the right side and then change the type to donut so but you can notice that now
there is a new option here called show value and it’s a check box but it
doesn’t have any function function right now because we have an ad edit any logic
for it right but we already change the template so it has been rendered in the
front end okay now let’s save it okay back to our code snippet the next
step is to add some logic for that value actually is getting this value of this
show variable if it’s true we’re gonna add some tag into these HTML okay
so let’s copy it and go to this rendering ejs because it’s where i
rendered stuff wrong in so let’s go to the rendering Jas scroll down
and right before the place the place where it inserts the HTML document to
the Dom this has some space here and then pasted in okay so when the user
chants the bar box and this video is gonna be true and then it’s gonna add
this code to the canvas okay and then it’s come
canvas it’s gonna be inserted to the top now this HTML text here is baked
basically showing it’s a deep tag and showing the first value like the first
queries here okay you and the first crown will be seven okay
so you are gonna have to see this number in the middle okay but right now we
haven’t done any compilation yet and the next thing we’re gonna do is to set a
default value for the show value variable whenever you add a new variable
to your code you’re gonna set a default value for it and we do it by at this new property
into this panel default object okay it’s gonna be in your control file so let’s
go to the control and it’s your safe there this file for now and then let’s
go to control it’s gonna have this variable called panel defaults it’s an
object so let’s add a new value or new property called show value and the
default very will be false okay and it’s gonna run this low – that defaults to
get all this information from this object okay from this object alright and
if you don’t set these default it’s gonna get the options that is set by the
user okay so so when the user does something for this value is gonna use
value that the user set okay but if the user doesn’t touch it
then it’s going to use the default value which is false
okay now let’s next thing we’re gonna do is to modify the CSS and before that
just take a look what it looks like right now okay listen let’s just leave
this style for a moment okay back to our terminal we need to make sure that we
save everything back to the terminal let’s run Grunk again and then we start a server and then back to our dashboard
refresh the whole page okay now go to this edit editor and check the show
value you see something happened okay so you see that the seven is displayed but
it’s not in the middle why’s that because we add the logic remember we
added the logic to to grab the first value and then put it inside some deep
tag and then put the HTML code into the canvas right so he this is our canvas
and now we have this deep right here but we haven’t set up any style for it so
right now it’s just the default style which is on the top left corner okay but
we want it to be located in the center okay so right now this is some CSS style
for it back to our snippet
in the module Jas is importing the load load plug-in CSS from the SDK and with
this component or method you can specify the dark and the light things for your
grana okay and it’s basically done with this patch our dark CSS and pie chart
like CSS you
let’s take a look in the module jeaious okay this component is loaded and it’s
basically a method I can use okay to load the information from the CSS files all right and after you finish this part
and it’s going to work here the preference the configuration
preference of your dashboard you can see that this is a theme that you can choose
now it has the dark and the light okay but you can also add more if you want
you can add another theme here maybe like median right and then it’s gonna
shown here okay now let’s change something with the
CSS back to the snippets now let’s start from the dark thing now this copy the
whole snip the co-sleeping here and then go to the sis 5 CSS file and open the
dark theme CSS file go to the end of the file and then paste in and then safe okay and why does he quirk
because you see that is controlling this pie chart value class all right and then
in the rendering we remember we add we added a deep tag here and then we
assigned a class called pie chart value no so that’s how they are related and
then let’s do the light thing copy the whole thing here back to this
project open the like CSS and append the whole
code at the end and then safe okay so right now we have defined the style
for this class okay now let’s do the rock round again and then we start a server and then back to the browser you open our – for again and we need to
refresh okay okay now you see that it’s working okay
so it’s basically grabbing the first value which is seven and then put it in
the center of this canvas or this graph okay so now it’s working and before we end this section let’s
review the process first we took a look at this module Jas and it’s basically
import some components from the SDK and also the control you are developing and
your soul is also loading some plug-in CSS files and you need to explore your
control as these panel control right here and the HTML what you need to
notice is that is the best practice to use the butene class provided by the
crow fauna like we – a number or max with some number here for example we
have this with – eight right and then it’s the batch is just the best practice
to use the built-in classes from Pravana and this is just things that were
talking about and here are the events okay so when you
change something it’s gonna invoke the render invent and it’s gonna call the on
render function and it’s based basically running the render Jas component behind
the scene and he also has the in need edit mode event when you add the ad
panel tab page okay and he also has the data received event when the data
required for accessing joins is triggered when the dashboard refreshes
the path data and we have the data snapshot blowed and it’s invent rigor in
snapshot mode to load data and we also have the data error event it’s used to
handle errors when the dashboard is refreshed and the panel that you add in
your dashboard is gonna be saved into this JSON model here you can fight it
here back to our dashboard in the settings and go to this JSON model here
you can see that we have a panels here so it’s an array and the first one is
this one and it’s gonna is using the CSV server as the data source and this is
the queries okay so basically these are the information for your panel okay so
about the JSON model the plotting is rendered through the user configuration
change panel like here and the configured fields are recorded in JSON
and saved in the database okay so we have all this information saved in our
database and you can view this JSON through the dashboard settings menu and
the panel information exists in the panel’s already here
okay is an array the configuration information and
initialized values are defined during the plug-in development like we saw when
we are working with the panel defaults object and the user configure
information such as custom constants and data source queries is not recorded and
cannot be stored so this is rule that we need to follow we don’t want to store
any data related information in this JSON model because it’s gonna be growing
more and more and it’s gonna dragging down the performance of the – for okay
so just keep in mind and this is how we set the default values for the options
and we need to add the code snippets into these files the control and the
template another another place in the rendering
j/s okay is taking these show value and then
check its value to see if the user requires to add the value into the graph
and also these are the stylesheet for the dark and light things now that we have our plugging working in
our local machine in our local crow fauna we need we’re gonna have to upload
plugging to our wise ass dashboard to see if it’s also working there okay so
now let’s go to the dashboard on the wise path and this is loco because it’s
showing loco or 3,000 here but I’m gonna go to the – war on the west pass now
we’re working in the ADB training org and inside the level 3 space ok and now
I’m in my own org in the – War and before I upload I need to create a new
data source like this like what we have done locally but the difference is is
you’re gonna have to choose the proxy for access field and then you need to
check with credentials because otherwise pass you need to have the credential to
access the data and then go to the configuration and plugins here we don’t
have any buggins yeah and before we upload the plug-in we need to zip our
project go to the finder and this is our project right here in our local
directory and what we need to do is just to zip the dist folder so I’m gonna
create a folder called graph on a pie chart panel noon and one thing that you
need to know before you upload the plug-in is that we don’t want to
duplicate ID for the plucking so right now what is the ID for plugging back to
our project in the plug-in JSON here you see there
that evil ID called Cortana HR panel and because on the wise pass the dash for
already has a pie chart panel let me show you okay when you create a dash for
when you scroll down select a pie chart panel you see it’s already there and the
ID is also Griffin a pie chart panel so you’re gonna have a counter like if you
don’t you’re if you upload your plugin with the same ID so here I’m gonna
rename it I’m gonna add new here at the end and I’m gonna also change the name
put up a no I’m gonna call it new pie chart so you’re gonna see new pie chart
here because name is it’s gonna be displayed here in the list okay and then
save it and one important thing is that when you upload you’re plugging the file
or the zip name has to be the same as your ID so here I’m working with that’s
why I I created this folder as proof on a pie chart panel new it has to be the
same as your ID what’s gonna happen if you change the folder is it’s going to
miss the C style sheets that you modified so it’s the style sheets are
not gonna work okay and how do we change that how do we how do we fix it let’s
find the stream or graph on a pie chart panel here in our source folder right
click here and then find in folder then paste in hit enter so these are the
places that are found to have this string okay the first place is in this
module is is actually grab this CSS file from the CSS folder under Griffin
aperture panel all right and because right now you’re using this new file
name or new directory name so you need to rename it okay with the real
situation safe and another place here this is to grab this template okay is
also located in this territory which is not true for right now because we have
been changed of the reg rename okay so but this folder right now is empty okay
I’m gonna just copy this this folder into this new directory okay that’s it
okay so you need you’re gonna have to change the ID to distinguish from the ID
on the wise path – for and you’re gonna change the name and also you’re gonna
change it to a file path for your editor template and also for the CSS files okay
so okay we’re done here and because we have some a some
modifications so of course we need to run the crown again so all the compiled
files will be copied into the dist folder alright and then go to the finder
and we’re cup we’re gonna copy this is under the source directory okay under
the data blog is plugins directory and I’m gonna copy only the deist folder
into the new folder here okay so just grab it like that and then you’re gonna have to
seep this folder okay so I’m gonna compress it so right now we have the zip
folder now I’m already in the dashboard on the Vice pass so you can see here the
URL is not localhost anymore is a DB training level 3 that was a star I oh
and then you need to browse the zip file that we just compressed to upload okay mr. Griffin our new pie chart panel new
zip open and then click upload and it’s showing you some error here it says some
plugins plugins are not registered please restart dashboard on the
management portal and it’s directing you to the men’s room for forum ok so just
click the link here to opening the management portal our program is located
in under the ATV training org and also the level 3 space and right now there
are not many apps yet here and we’re seeing the dashboard application here
and just click the switch bond here to stop the application so it has stopped
it and then starting again right now is starting ok because the state is yellow
here and just wait for a while until we finished starting now screen that means
it completes the startup and then back to the dashboard let’s refresh the page
and you see the new patrol the error message is gone ok and is register here
it’s showing yes it means that we can start using this plug-in now let’s go to
create a new dash or and let’s find the pie chart panel so
you can see that there is new one called new pie chart let’s choose it and in the
deaded editor let’s choose the CSV server as our data source so it’s
basically the same thing that we did in locally add another new query okay so
you see the two numbers are shown here and in the options okay there is a new
function option here it’s called show value okay so right now it’s working and
then we move the legend to the side and then we change the type to donor and
check the show value it’s showing seven so it works the same way as what we saw
in our local computer okay so it’s working and let’s say the – war habet before we finish this session
let’s talk about the plug-in management rules speaking of our plug-in sources
our current plug-in plugins in my space – four are from two sources one is the
graph on our community and the other is those developed by the Audubon tech team
and this plugins plugins deployed with the dashboard by default are all from
the community or those developed in-house so the first rule is the
plugins deployed by default cannot be overridden the default plugins are
placed in the data plugins directory of the dashboard the plugins are downloaded
from the plug-in library maintained by our Advantech – 14 and we will continue
to improve the functionalities or at the plugins so our user can use these
plugins and they are not to be overridden and also the plug-in
conflicts will be checked during the plug-in upload and another rule is the
uploaded plugins are persistent plugins uploaded by the user will be back up to
our database if a new version of – War is deployed the connected database will
remain the same so those previously uploaded plugins will be synchronized
from the database and you can submit your own plugins that you develop to be
part of our dashboard plug-in and we welcome you to contribute to our
dashboard functionalities and this is not a document which talks about the
other rules for developing and submitting your plugins to our wise
dashboard there is a rule we just saw which is the ID name should be unique in
the white space dashboard so you need to change your ID name and another role is
you need to use the same directory name as your ID okay all this information will be in this
light and we’re going to be offering this slide view with the previous one we
just checked ok so this concludes this lecture I hope you enjoy it if you have
any questions just feel free to email us or leave your comments and we’ll be glad
to help you thank you bye bye

HowTo – Grafana Plugin Development Tutorial | WISE-PaaS Dashboard | Advantech
Tagged on:                                                         

One thought on “HowTo – Grafana Plugin Development Tutorial | WISE-PaaS Dashboard | Advantech

  • December 29, 2019 at 6:40 pm

    Thank you for the tutorial. how did you set up the CSV server? what is in back end to CSV server?


Leave a Reply

Your email address will not be published. Required fields are marked *