Skip to content

Instantly share code, notes, and snippets.

@kazekent
Last active April 22, 2020 08:13
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kazekent/8684313 to your computer and use it in GitHub Desktop.
Save kazekent/8684313 to your computer and use it in GitHub Desktop.
Simple Freshdesk Dashing widget

Simple Freshdesk Dashing widget

Description

Dashing widget to display a short list of Freshdesk users with the most tickets assigned.

##Usage

Add this to your Gemfile and run bundle install:

gem 'freshdesk', git: 'git@github.com:dvliman/freshdesk-api.git'

The files freshdesk_dash.coffee, freshdesk_dash.html and freshdesk_dash.scss go in the /widget/freshdesk_dash directory.

The freshdesk_dash.rb goes into the /jobs directory.

Put the following in your dashingboard.erb file to make the current and following event show up in your dashboard:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="freshdesk-dash" data-view="FreshdeskDash" data-title="Freshdesk" data-unordered="true"></div>
</li>

##Settings (freshdesk_dash.rb)

You will need to provide the company sub-domain and an API key from Freshdesk API

class Dashing.FreshdeskDash extends Dashing.Widget
ready: ->
if @get('unordered')
$(@node).find('ol').remove()
else
$(@node).find('ul').remove()
<h1 class="title" data-bind="title"></h1>
<ol>
<li data-foreach-item="items" data-addclass-unassigned="item.unassigned">
<span class="label" data-bind="item.label"></span>
<span class="value" data-bind="item.value"></span>
</li>
</ol>
<ul class="list-nostyle">
<li data-foreach-item="items" data-addclass-unassigned="item.unassigned">
<span class="label" data-bind="item.label"></span>
<span class="value" data-bind="item.value"></span>
</li>
</ul>
<div>
<p class="updated-at">&nbsp;</p>
<p class="more-info" data-bind="moreinfo"></p>
</div>
company_subdomain = "your-sub-domain"
freshdesk_apikey = "YOUR-API-KEY"
require 'freshdesk'
freshdesk_client = ::Freshdesk.new("http://#{company_subdomain}.freshdesk.com/", freshdesk_apikey, "X")
freshdesk_client.response_format = 'json'
SCHEDULER.every '5m', :first_in => 0 do |job|
tickets = []
page_num = 1
begin
# Fetching all tickets in a looped call; way to slow. Better to use a specific filter.
tickets_data_str = freshdesk_client.get_tickets(filter_name: 'all_tickets', page: page_num)
tickets_data = JSON.parse(tickets_data_str)
new_tickets = tickets_data.select do |t|
!t['deleted'] && t['status'].to_i < 4 # (4 == Resolved)
end
tickets += new_tickets
page_num += 1
end until tickets_data.size < 30 || page_num > 100
assigned_tickets = tickets.group_by{|t| t['responder_name'] }
assignment_summaries = assigned_tickets.map do |r, d|
is_assigned = (r && d && d.first['responder_id'].to_i > 0)
name = is_assigned ? r : 'UNASSIGNED'
{label: name, value: d.size, unassigned: !is_assigned }
end.sort_by{|d| -d[:value] }
send_event('freshdesk-dash', {
title: "Freshdesk (#{tickets.size})",
moreinfo: "Total of #{tickets.size} open tickets",
items: assignment_summaries.first(7)
})
end
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #12b0c5;
$value-color: #fff;
$title-color: rgba(255, 255, 255, 0.7);
$label-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
$unassigned-color: rgba(255, 255, 255, 0.4);
// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-freshdesk-dash {
background-color: $background-color;
vertical-align: top;
.title {
color: $title-color;
}
ol, ul {
margin: 0 15px;
text-align: left;
color: $label-color;
margin-bottom: 25px;
}
ol {
list-style-position: inside;
}
li {
margin-bottom: 5px;
}
.list-nostyle {
list-style: none;
}
.label {
color: $label-color;
}
li.unassigned .label {
color: $unassigned-color;
}
.value {
float: right;
margin-left: 12px;
font-weight: 600;
color: $value-color;
}
.updated-at {
color: rgba(0, 0, 0, 0.3);
}
.more-info {
color: $moreinfo-color;
}
}
@socialstijn
Copy link

Hello, do you know if this is still working? I've installed the plugin but data is not being displayed.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment