forked from kubernetes-ui/label-selector
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
105 lines (97 loc) · 4.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<base href="/">
<title>Label Selector and Filter example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- example theme uses patternfly -->
<link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly.min.css" />
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css" />
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" type="text/css" href="labelFilter.css">
<!-- endbuild -->
<style type="text/css">
</style>
</head>
<body ng-app="exampleApp">
<div style="margin: 10px 10px 0; position: relative">
<div class="filter">
<div class="navbar-filter-widget"></div>
</div>
<div class="active-filters"></div>
</div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sifter/sifter.js"></script>
<script src="bower_components/microplugin/src/microplugin.js"></script>
<script src="bower_components/selectize/dist/js/selectize.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="labelSelector.js"></script>
<script src="labelFilter.js"></script>
<!-- endbuild -->
<script type="text/javascript">
angular.module('exampleApp', ['kubernetesUI'])
.run(function(LabelFilter) {
// Render the filter widget
LabelFilter.setupFilterWidget($(".navbar-filter-widget"), $(".active-filters"));
// If you have loaded k8s API resources, you can pass those to
// LabelFilter.addLabelSuggestionsFromResources(resources, map);
// where map will get the new suggestions added to it
//
// Or you can just create some suggestions yourself (setting suggestions is not required, users have the option to
// type in their own labels/values)
LabelFilter.setLabelSuggestions({
label_1: [
{value: "value-1-1"},
{value: "value-1-2"},
{value: "value-1-3"},
{value: "value-1-4"},
{value: "value-1-5"},
{value: "value-1-6"},
{value: "value-1-7"},
{value: "value-1-8"},
{value: "value-1-9"},
{value: "value-1-10"}
],
label_2: [
{value: "value-2-1"},
{value: "value-2-2"},
{value: "nonbreaking1212121212121212121212121212121212121212121212"}
],
label_3333333333333333333333333333333333333333333333: [
{value: "value-3-1"},
{value: "value-3-2"},
{value: "value31212121212121212121212121212121212121212121212"}
] ,
label_4444444444_4444444444_4444444444_4444444444: [
{value: "value-4-1"},
{value: "value-4-2"},
{value: "value-41212121212121-212121212121-21212121212-1212121212"}
]
});
// Do something when the active filters change
LabelFilter.onActiveFiltersChanged(function(labelSelector) {
console.log("label selector changed...", labelSelector.isEmpty() ? "no active filters" : "there are active filters");
// If you have a set of k8s resources, you can filter them by running
// labelSelector.select(resources);
// which will return a map of resource name to resource for all resources selected by the label selector
// if you want to check specific resources yourself you can use
// labelSelector.match(resource);
// to return a boolean if that resource is matched by the selector
});
});
</script>
</body>
</html>