Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
A
atlas
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
dataplatform
atlas
Commits
6ed883b3
Commit
6ed883b3
authored
6 years ago
by
Abhishek Kadam
Committed by
Sarath Subramanian
6 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
ATLAS-2979: Added service type dropdown to filter entitydef type
Signed-off-by:
Sarath Subramanian
<
ssubramanian@hortonworks.com
>
parent
9300924f
master
No related merge requests found
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
228 additions
and
18 deletions
+228
-18
search.scss
dashboardv2/public/css/scss/search.scss
+91
-0
Overrides.js
dashboardv2/public/js/utils/Overrides.js
+89
-0
SearchLayoutView.js
dashboardv2/public/js/views/search/SearchLayoutView.js
+48
-18
No files found.
dashboardv2/public/css/scss/search.scss
View file @
6ed883b3
...
...
@@ -139,4 +139,94 @@ $color_celeste_approx: #1D1F2B;
margin
:
0px
;
}
}
}
.typeFilter
{
.dropdown
{
span
.type-clear-btn
{
position
:
absolute
;
color
:
#444444
;
font-size
:
8px
;
right
:
23px
;
top
:
12px
;
cursor
:
pointer
;
}
}
button
.dropdown-toggle
{
width
:
99
.5%
;
text-align
:
left
;
background-color
:
white
;
color
:
$color_star_dust_approx
;
border
:
$color_star_dust_approx
;
&
:hover
{
color
:
$color_star_dust_approx
!
important
;
border
:
$color_star_dust_approx
!
important
;
}
}
}
ul
.type-filter-ul
{
color
:
black
;
padding
:
10px
;
max-height
:
415px
;
overflow
:
auto
;
width
:
100%
;
padding-top
:
0px
;
margin-bottom
:
0px
;
li
{
padding
:
2px
;
}
.typeLi
li
{
padding
:
3px
;
background-color
:
#f7fbff
;
margin
:
3px
;
border
:
1px
solid
#dbd6d6
;
border-radius
:
4px
;
&
:hover
{
color
:
$white
;
background-color
:
$color_star_dust_approx
;
cursor
:
pointer
;
}
&
.active
{
background-color
:
#37bb9b
;
color
:
white
;
}
}
.filterLi
li
{
padding
:
2px
;
margin
:
4px
;
}
}
.dark-text
{
color
:
black
;
}
.type-filter-dropdown
{
position
:
absolute
;
top
:
5px
;
background-color
:
#323544
;
}
.filter-sticky-div
{
text-align
:
center
;
position
:
sticky
;
position
:
-
webkit-sticky
;
top
:
0px
;
background-color
:
white
;
padding-top
:
8px
;
&
.row
{
margin-right
:
-10px
;
margin-left
:
-10px
;
}
&
input
.form-control
{
border
:
1px
#c9c9c9
solid
;
}
}
hr
.hr-filter
{
margin-top
:
7px
;
margin-bottom
:
7px
;
border
:
0
;
border-top
:
1px
solid
#bdc3c7
;
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
dashboardv2/public/js/utils/Overrides.js
View file @
6ed883b3
...
...
@@ -133,6 +133,95 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
$
(
this
).
blur
();
});
$
.
fn
.
select2
.
amd
.
define
(
"ServiceTypeFilterDropdownAdapter"
,
[
"select2/utils"
,
"select2/dropdown"
,
"select2/dropdown/attachBody"
,
"select2/dropdown/attachContainer"
,
"select2/dropdown/search"
,
"select2/dropdown/minimumResultsForSearch"
,
"select2/dropdown/closeOnSelect"
,
],
function
(
Utils
,
Dropdown
,
AttachBody
,
AttachContainer
,
Search
,
MinimumResultsForSearch
,
CloseOnSelect
)
{
// Decorate Dropdown with Search functionalities
var
dropdownWithSearch
=
Utils
.
Decorate
(
Utils
.
Decorate
(
Dropdown
,
CloseOnSelect
),
Search
);
dropdownWithSearch
.
prototype
.
render
=
function
()
{
// Copy and modify default search render method
var
$rendered
=
Dropdown
.
prototype
.
render
.
call
(
this
);
// Add ability for a placeholder in the search box
var
placeholder
=
this
.
options
.
get
(
"placeholderForSearch"
)
||
""
;
var
$search
=
$
(
'<span class="select2-search select2-search--dropdown"><div class="row">'
+
'<div class="col-md-10"><input class="select2-search__field" placeholder="'
+
placeholder
+
'" type="search"'
+
' tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off"'
+
' spellcheck="false" role="textbox" /></div>'
+
'<div class="col-md-2"><button type="button" style="margin-left: -20px" class="btn btn-action btn-sm filter " title="Entity Attribute Filter"><i class="fa fa-filter"></i></button></div>'
+
'</div></span>'
);
if
(
!
this
.
options
.
options
.
getFilterBox
)
{
throw
"In order to render the filter options adapter needed getFilterBox function"
}
var
$Filter
=
$
(
'<ul class="type-filter-ul"></ul>'
);
this
.
$Filter
=
$Filter
;
this
.
$Filter
.
append
(
this
.
options
.
options
.
getFilterBox
());
this
.
$Filter
.
hide
();
this
.
$searchContainer
=
$search
;
if
(
$Filter
.
find
(
'input[type="checkbox"]:checked'
).
length
)
{
$search
.
find
(
'button.filter'
).
addClass
(
'active'
);
}
else
{
$search
.
find
(
'button.filter'
).
removeClass
(
'active'
);
}
this
.
$search
=
$search
.
find
(
'input'
);
$rendered
.
prepend
(
$search
);
$rendered
.
append
(
$Filter
);
return
$rendered
;
};
var
oldDropdownWithSearchBindRef
=
dropdownWithSearch
.
prototype
.
bind
;
dropdownWithSearch
.
prototype
.
bind
=
function
(
container
,
$container
)
{
var
self
=
this
;
oldDropdownWithSearchBindRef
.
call
(
this
,
container
,
$container
);
var
self
=
this
;
this
.
$Filter
.
on
(
'click'
,
'li'
,
function
()
{
var
itemCallback
=
self
.
options
.
options
.
onFilterItemSelect
;
itemCallback
&&
itemCallback
(
this
);
})
this
.
$searchContainer
.
find
(
'button.filter'
).
click
(
function
()
{
container
.
$dropdown
.
find
(
'.select2-search'
).
hide
(
150
);
container
.
$dropdown
.
find
(
'.select2-results'
).
hide
(
150
);
self
.
$Filter
.
html
(
self
.
options
.
options
.
getFilterBox
());
self
.
$Filter
.
show
();
});
this
.
$Filter
.
on
(
'click'
,
'button.filterDone'
,
function
()
{
container
.
$dropdown
.
find
(
'.select2-search'
).
show
(
150
);
container
.
$dropdown
.
find
(
'.select2-results'
).
show
(
150
);
self
.
$Filter
.
hide
();
var
filterSubmitCallback
=
self
.
options
.
options
.
onFilterSubmit
;
filterSubmitCallback
&&
filterSubmitCallback
({
filterVal
:
_
.
map
(
self
.
$Filter
.
find
(
'input[type="checkbox"]:checked'
),
function
(
item
)
{
return
$
(
item
).
data
(
'value'
)
})
});
});
container
.
$element
.
on
(
'hideFilter'
,
function
()
{
container
.
$dropdown
.
find
(
'.select2-search'
).
show
();
container
.
$dropdown
.
find
(
'.select2-results'
).
show
();
self
.
$Filter
.
hide
();
});
}
// Decorate the dropdown+search with necessary containers
var
adapter
=
Utils
.
Decorate
(
dropdownWithSearch
,
AttachContainer
);
adapter
=
Utils
.
Decorate
(
adapter
,
AttachBody
);
return
adapter
;
});
// For placeholder support
if
(
!
(
'placeholder'
in
HTMLInputElement
.
prototype
))
{
var
originalRender
=
Backbone
.
Marionette
.
LayoutView
.
prototype
.
render
;
...
...
This diff is collapsed.
Click to expand it.
dashboardv2/public/js/views/search/SearchLayoutView.js
View file @
6ed883b3
...
...
@@ -15,7 +15,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define
([
'require'
,
'backbone'
,
'hbs!tmpl/search/SearchLayoutView_tmpl'
,
...
...
@@ -92,6 +91,7 @@ define(['require',
_
.
extend
(
this
,
_
.
pick
(
options
,
'value'
,
'typeHeaders'
,
'searchVent'
,
'entityDefCollection'
,
'enumDefCollection'
,
'classificationDefCollection'
,
'searchTableColumns'
,
'searchTableFilters'
,
'entityCountCollection'
));
this
.
type
=
"basic"
;
this
.
entityCountObj
=
_
.
first
(
this
.
entityCountCollection
.
toJSON
());
this
.
filterTypeSelected
=
[];
var
param
=
Utils
.
getUrlState
.
getQueryParams
();
this
.
query
=
{
dsl
:
{
...
...
@@ -438,40 +438,68 @@ define(['require',
this
.
updateQueryObject
(
paramObj
);
this
.
setValues
(
paramObj
);
},
renderTypeTagList
:
function
()
{
getFilterBox
:
function
()
{
var
serviceStr
=
''
,
serviceArr
=
[],
that
=
this
;
this
.
typeHeaders
.
fullCollection
.
each
(
function
(
model
)
{
var
serviceType
=
model
.
toJSON
().
serviceType
;
if
(
serviceType
)
{
serviceArr
.
push
(
serviceType
);
}
});
_
.
each
(
_
.
uniq
(
serviceArr
),
function
(
service
)
{
serviceStr
+=
'<li><div class="pretty p-switch p-fill"><input type="checkbox" class="pull-left" data-value="'
+
(
service
)
+
'" value="" '
+
(
_
.
contains
(
that
.
filterTypeSelected
,
service
)
?
"checked"
:
""
)
+
'/><div class="state p-primary"><label>'
+
(
service
.
toUpperCase
())
+
'</label></div></div></li>'
;
});
var
templt
=
serviceStr
+
'<hr class="hr-filter"/><div class="text-right"><div class="divider"></div><button class="btn btn-action btn-sm filterDone">Done</button></div>'
;
return
templt
;
},
renderTypeTagList
:
function
(
options
)
{
var
that
=
this
;
var
serviceTypeToBefiltered
=
(
options
&&
options
.
filterList
);
var
isTypeOnly
=
options
&&
options
.
isTypeOnly
;
this
.
ui
.
typeLov
.
empty
();
var
typeStr
=
'<option></option>'
,
tagStr
=
typeStr
;
this
.
typeHeaders
.
fullCollection
.
each
(
function
(
model
)
{
var
name
=
Utils
.
getName
(
model
.
toJSON
(),
'name'
);
if
(
model
.
get
(
'category'
)
==
'ENTITY'
)
{
if
(
model
.
get
(
'category'
)
==
'ENTITY'
&&
(
serviceTypeToBefiltered
&&
serviceTypeToBefiltered
.
length
?
_
.
contains
(
serviceTypeToBefiltered
,
model
.
get
(
'serviceType'
))
:
true
)
)
{
var
entityCount
=
(
that
.
entityCountObj
.
entity
.
entityActive
[
name
]
+
(
that
.
entityCountObj
.
entity
.
entityDeleted
[
name
]
?
that
.
entityCountObj
.
entity
.
entityDeleted
[
name
]
:
0
));
typeStr
+=
'<option value="'
+
(
name
)
+
'" data-name="'
+
(
name
)
+
'">'
+
(
name
)
+
' '
+
(
entityCount
?
"("
+
entityCount
+
")"
:
''
)
+
'</option>'
;
typeStr
+=
'<option value="'
+
(
name
)
+
'" data-name="'
+
(
name
)
+
'">'
+
(
name
)
+
' '
+
(
entityCount
?
"("
+
entityCount
+
")"
:
''
)
+
'</option>'
;
}
if
(
model
.
get
(
'category'
)
==
'CLASSIFICATION'
)
{
if
(
isTypeOnly
==
undefined
&&
model
.
get
(
'category'
)
==
'CLASSIFICATION'
)
{
var
tagEntityCount
=
that
.
entityCountObj
.
tag
.
tagEntities
[
name
];
tagStr
+=
'<option value="'
+
(
name
)
+
'" data-name="'
+
(
name
)
+
'">'
+
(
name
)
+
' '
+
(
tagEntityCount
?
"("
+
tagEntityCount
+
")"
:
''
)
+
'</option>'
;
tagStr
+=
'<option value="'
+
(
name
)
+
'" data-name="'
+
(
name
)
+
'">'
+
(
name
)
+
' '
+
(
tagEntityCount
?
"("
+
tagEntityCount
+
")"
:
''
)
+
'</option>'
;
}
});
//to insert extra classification list
_
.
each
(
Enums
.
addOnClassification
,
function
(
classificationName
)
{
tagStr
+=
'<option>'
+
classificationName
+
'</option>'
;
});
if
(
_
.
isUndefined
(
isTypeOnly
))
{
//to insert extra classification list
_
.
each
(
Enums
.
addOnClassification
,
function
(
classificationName
)
{
tagStr
+=
'<option>'
+
classificationName
+
'</option>'
;
});
that
.
ui
.
tagLov
.
html
(
tagStr
);
this
.
ui
.
tagLov
.
select2
({
placeholder
:
"Select Classification"
,
allowClear
:
true
});
}
that
.
ui
.
typeLov
.
html
(
typeStr
);
that
.
ui
.
tagLov
.
html
(
tagStr
);
this
.
ui
.
typeLov
.
select2
({
var
typeLovSelect2
=
this
.
ui
.
typeLov
.
select2
({
placeholder
:
"Select Type"
,
dropdownAdapter
:
$
.
fn
.
select2
.
amd
.
require
(
"ServiceTypeFilterDropdownAdapter"
),
allowClear
:
true
,
templateSelection
:
function
(
data
,
container
)
{
$
(
data
.
element
).
attr
(
'data-name'
,
data
.
customValue
);
return
data
.
text
;
getFilterBox
:
this
.
getFilterBox
.
bind
(
this
),
onFilterSubmit
:
function
(
options
)
{
that
.
filterTypeSelected
=
options
.
filterVal
;
that
.
renderTypeTagList
({
"filterList"
:
options
.
filterVal
,
isTypeOnly
:
true
})
}
});
this
.
ui
.
tagLov
.
select2
({
placeholder
:
"Select Classification"
,
allowClear
:
true
typeLovSelect2
.
on
(
"select2:close"
,
function
()
{
typeLovSelect2
.
trigger
(
"hideFilter"
);
});
if
(
typeLovSelect2
&&
serviceTypeToBefiltered
)
{
typeLovSelect2
.
select2
(
'open'
).
trigger
(
"change"
,
{
'manual'
:
true
});
}
},
renderTermList
:
function
()
{
var
getTypeAheadData
=
function
(
data
,
params
)
{
...
...
@@ -669,6 +697,8 @@ define(['require',
}
},
clearSearchData
:
function
()
{
this
.
filterTypeSelected
=
[];
this
.
renderTypeTagList
();
this
.
updateQueryObject
();
this
.
ui
.
typeLov
.
val
(
""
).
trigger
(
"change"
);
this
.
ui
.
tagLov
.
val
(
""
).
trigger
(
"change"
);
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment