rails_mini_profiler 0.4.0 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. checksums.yaml +4 -4
  2. data/app/controllers/rails_mini_profiler/profiled_requests_controller.rb +13 -10
  3. data/app/javascript/images/check.svg +3 -0
  4. data/app/javascript/images/chevron.svg +3 -0
  5. data/app/javascript/images/filter.svg +1 -0
  6. data/app/javascript/images/logo_variant.svg +2 -2
  7. data/app/javascript/images/search.svg +4 -5
  8. data/app/javascript/js/checklist_controller.js +48 -0
  9. data/app/javascript/js/enable_controller.js +24 -0
  10. data/app/javascript/js/filter_controller.js +44 -0
  11. data/app/javascript/js/search_controller.js +18 -0
  12. data/app/javascript/js/select_controller.js +47 -0
  13. data/app/javascript/packs/rails-mini-profiler.js +23 -15
  14. data/app/javascript/stylesheets/components/page_header/page_header.scss +3 -0
  15. data/app/javascript/stylesheets/components/pagination.scss +14 -13
  16. data/app/javascript/stylesheets/components/profiled_request_table/placeholder.scss +33 -0
  17. data/app/javascript/stylesheets/components/profiled_request_table/profiled_request_table.scss +179 -0
  18. data/app/javascript/stylesheets/flamegraph.scss +3 -2
  19. data/app/javascript/stylesheets/flashes.scss +3 -5
  20. data/app/javascript/stylesheets/navbar.scss +7 -13
  21. data/app/javascript/stylesheets/profiled_requests.scss +35 -120
  22. data/app/javascript/stylesheets/rails-mini-profiler.scss +90 -61
  23. data/app/javascript/stylesheets/traces.scss +17 -17
  24. data/app/presenters/rails_mini_profiler/profiled_request_presenter.rb +8 -15
  25. data/app/search/rails_mini_profiler/base_search.rb +67 -0
  26. data/app/search/rails_mini_profiler/profiled_request_search.rb +34 -0
  27. data/app/views/rails_mini_profiler/badge.html.erb +2 -2
  28. data/app/views/rails_mini_profiler/profiled_requests/index.html.erb +8 -58
  29. data/app/views/rails_mini_profiler/profiled_requests/shared/header/_header.erb +20 -0
  30. data/app/views/rails_mini_profiler/profiled_requests/shared/table/_placeholder.erb +12 -0
  31. data/app/views/rails_mini_profiler/profiled_requests/shared/table/_table.erb +14 -0
  32. data/app/views/rails_mini_profiler/profiled_requests/shared/table/_table_head.erb +125 -0
  33. data/app/views/rails_mini_profiler/profiled_requests/shared/table/_table_row.erb +21 -0
  34. data/app/views/rails_mini_profiler/profiled_requests/show.html.erb +1 -1
  35. data/lib/rails_mini_profiler/configuration.rb +3 -0
  36. data/lib/rails_mini_profiler/engine.rb +12 -8
  37. data/lib/rails_mini_profiler/middleware.rb +3 -3
  38. data/lib/rails_mini_profiler/tracing/controller_tracer.rb +15 -0
  39. data/lib/rails_mini_profiler/tracing/null_trace.rb +7 -0
  40. data/lib/rails_mini_profiler/tracing/sequel_tracer.rb +37 -0
  41. data/lib/rails_mini_profiler/tracing/sequel_tracker.rb +37 -0
  42. data/lib/rails_mini_profiler/tracing/subscriptions.rb +34 -0
  43. data/lib/rails_mini_profiler/{models → tracing}/trace.rb +10 -2
  44. data/lib/rails_mini_profiler/tracing/trace_factory.rb +37 -0
  45. data/lib/rails_mini_profiler/tracing/tracer.rb +31 -0
  46. data/lib/rails_mini_profiler/tracing/view_tracer.rb +12 -0
  47. data/lib/rails_mini_profiler/tracing.rb +11 -0
  48. data/lib/rails_mini_profiler/version.rb +1 -1
  49. data/lib/rails_mini_profiler.rb +4 -8
  50. data/vendor/assets/images/check.svg +3 -0
  51. data/vendor/assets/images/chevron.svg +3 -0
  52. data/vendor/assets/images/filter.svg +1 -0
  53. data/vendor/assets/images/logo_variant.svg +2 -2
  54. data/vendor/assets/images/search.svg +4 -5
  55. data/vendor/assets/javascripts/rails-mini-profiler.css +1 -1
  56. data/vendor/assets/javascripts/rails-mini-profiler.js +1 -1
  57. metadata +33 -4
  58. data/lib/rails_mini_profiler/tracers.rb +0 -85
@@ -0,0 +1,179 @@
1
+ .table {
2
+ width: 100%;
3
+ border: hidden 1px var(--border-color);
4
+
5
+ /* Hack to get table row borders, see https://stackoverflow.com/a/2586780/2553104 */
6
+ border-collapse: collapse;
7
+ border-radius: 5px;
8
+ box-shadow: 0 0 0 1px var(--border-color);
9
+ table-layout: fixed;
10
+ }
11
+
12
+ .table th,
13
+ .table td {
14
+ padding: 0.5rem 1rem;
15
+ }
16
+
17
+ .table thead tr {
18
+ border: hidden 1px var(--border-color);
19
+ box-shadow: 0 0 0 1px var(--border-color);
20
+ color: var(--grey-400);
21
+ }
22
+
23
+ .table tr:nth-child(even) {
24
+ background: var(--grey-50);
25
+ }
26
+
27
+ .table thead th {
28
+ font-weight: 400;
29
+ }
30
+
31
+ .table-filter-icon {
32
+ width: 14px;
33
+ margin-left: 0.5rem;
34
+ }
35
+
36
+ .table tbody tr:not(.no-row) {
37
+ border: solid 1px var(--border-color);
38
+ color: var(--grey-700);
39
+ cursor: pointer;
40
+ }
41
+
42
+ .table tbody tr:not(.no-row):hover {
43
+ background: var(--grey-100);
44
+ }
45
+
46
+ .request-checkbox {
47
+ z-index: 1;
48
+ width: 1rem;
49
+ height: 1rem;
50
+ }
51
+
52
+ .dropdown-body {
53
+ padding: 0.33rem 0.5rem;
54
+ }
55
+
56
+ .dropdown-search-field {
57
+ padding: 0.5rem 0.5rem;
58
+ border: 1px solid var(--grey-400);
59
+ border-radius: 5px;
60
+ color: var(--grey-700);
61
+ }
62
+
63
+ .dropdown-toggle {
64
+ display: flex;
65
+ align-items: center;
66
+ color: inherit;
67
+
68
+ &:hover {
69
+ color: var(--grey-900);
70
+ }
71
+ }
72
+
73
+ .dropdown-container {
74
+ position: absolute;
75
+ z-index: 1;
76
+ display: flex;
77
+ overflow: hidden;
78
+ min-width: 240px;
79
+ box-sizing: border-box;
80
+ flex-direction: column;
81
+ border: 1px solid var(--grey-200);
82
+ margin-top: 0.3em;
83
+ background: white;
84
+ border-radius: 5px;
85
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
86
+ color: var(--grey-400);
87
+ cursor: default;
88
+ }
89
+
90
+ .dropdown-search {
91
+ display: flex;
92
+ flex-direction: column;
93
+ }
94
+
95
+ .dropdown-search button {
96
+ display: flex;
97
+ flex-direction: column;
98
+ }
99
+
100
+ .dropdown-entry {
101
+ display: flex;
102
+ padding: 0.33rem 1rem;
103
+ text-decoration: none;
104
+
105
+ &:hover {
106
+ background: var(--grey-100);
107
+ color: var(--grey-900);
108
+ }
109
+ }
110
+
111
+ .dropdown-entry input {
112
+ margin-right: 0.5em;
113
+ }
114
+
115
+ .dropdown-header {
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: space-between;
119
+ padding: 0.5rem 1rem;
120
+ border-bottom: 1px solid var(--grey-200);
121
+ background: var(--grey-100);
122
+ font-size: 0.833rem;
123
+ text-align: left;
124
+ }
125
+
126
+ .dropdown-header button {
127
+ padding: 0;
128
+ border: none;
129
+ background: none;
130
+ color: var(--grey-500);
131
+ font-size: 0.833rem;
132
+ outline: none;
133
+ text-decoration: underline;
134
+
135
+ &:hover {
136
+ box-shadow: none;
137
+ color: var(--grey-900);
138
+ }
139
+ }
140
+
141
+ .dropdown-footer {
142
+ width: 100%;
143
+ padding: 0.5rem;
144
+ border: none;
145
+ background: var(--red-500);
146
+ border-radius: 0;
147
+ color: white;
148
+ font-weight: 600;
149
+ outline: none;
150
+
151
+ &:hover {
152
+ background: var(--red-600);
153
+ }
154
+ }
155
+
156
+ .dropdown-search-button {
157
+ display: inline-block;
158
+ padding: 0.5em 0.5em;
159
+ border: none;
160
+ background: var(--red-500);
161
+ border-radius: 5px;
162
+ color: white;
163
+ cursor: pointer;
164
+ font-size: 1rem;
165
+ font-weight: 600;
166
+ text-align: center;
167
+ text-decoration: none;
168
+
169
+ &:hover {
170
+ background: var(--red-600);
171
+ }
172
+ }
173
+
174
+ .request-path {
175
+ overflow: hidden;
176
+ max-width: 280px;
177
+ text-overflow: ellipsis;
178
+ white-space: nowrap;
179
+ }
@@ -1,9 +1,10 @@
1
1
  #wrapper {
2
- height: 100vh;
3
2
  width: 100%;
3
+ height: 100vh;
4
4
  }
5
5
 
6
6
  #speedscope-iframe {
7
7
  width: 100%;
8
8
  height: 100%;
9
- border: none; }
9
+ border: none;
10
+ }
@@ -1,17 +1,15 @@
1
1
  .flash {
2
- margin-top: 1rem;
3
2
  padding: 1rem 1rem;
4
-
3
+ margin-top: 1rem;
5
4
  border-radius: 5px;
6
5
  }
7
6
 
8
7
  .flash-error {
9
- color: white;
10
8
  background: var(--red-500);
9
+ color: white;
11
10
  }
12
11
 
13
12
  .flash-notice {
14
- color: white;
15
13
  background: var(--green-400);
16
-
14
+ color: white;
17
15
  }
@@ -1,13 +1,10 @@
1
1
  .header {
2
- margin: 0;
3
- padding: 1.5rem 0;
4
-
5
2
  display: flex;
6
3
  justify-content: center;
7
-
8
- box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
9
-
4
+ padding: 1.5rem 0;
5
+ margin: 0;
10
6
  background: var(--primary);
7
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
11
8
  }
12
9
 
13
10
  .header a {
@@ -16,16 +13,14 @@
16
13
  }
17
14
 
18
15
  .nav {
19
- width: var(--main-width);
20
-
21
16
  display: flex;
17
+ width: var(--main-width);
22
18
  justify-content: space-between;
23
19
  }
24
20
 
25
21
  .home {
26
22
  display: flex;
27
23
  align-items: center;
28
-
29
24
  text-decoration: none;
30
25
  }
31
26
 
@@ -40,11 +35,10 @@
40
35
  }
41
36
 
42
37
  .header-links {
43
- margin: 0;
44
- padding: 0;
45
- list-style: none;
46
38
  display: flex;
47
39
  align-items: center;
48
-
40
+ padding: 0;
41
+ margin: 0;
49
42
  font-weight: 700;
43
+ list-style: none;
50
44
  }
@@ -1,7 +1,9 @@
1
- main {
2
- width: 100%;
1
+ @import 'components/profiled_request_table/placeholder';
2
+ @import 'components/profiled_request_table/profiled_request_table';
3
3
 
4
+ main {
4
5
  display: flex;
6
+ width: 100%;
5
7
  justify-content: center;
6
8
  }
7
9
 
@@ -9,129 +11,33 @@ main {
9
11
  width: var(--main-width);
10
12
  }
11
13
 
12
- .placeholder {
13
- display: flex;
14
- flex-direction: column;
15
- justify-content: center;
16
- align-items: center;
17
- width: 100%;
18
- height: 450px;
19
- }
20
-
21
- .placeholder-image {
22
- height: 30%;
23
- width: 30%;
24
- -webkit-filter: grayscale(1) brightness(2.5);
25
- }
26
-
27
- .placeholder-text {
28
- text-align: center;
29
- color: var(--grey-400);
30
- }
31
-
32
- .profiled-requests-actions {
33
- display: flex;
34
- padding: 1rem 0;
35
- justify-content: space-between;
36
- align-items: center;
37
- }
38
-
39
14
  .search-field {
40
- padding: 0.5rem .5rem;
41
- border-radius: .25em;
42
-
15
+ box-sizing: border-box;
16
+ padding: 0.5rem;
43
17
  border: 1px solid var(--grey-400);
44
- color: var(--grey-700) ;
45
- }
46
-
47
- .clear-action button {
48
- background: var(--red-500);
49
- color: white;
50
- }
51
-
52
- .table {
53
- width: 100%;
54
- /* Hack to get table row borders, see https://stackoverflow.com/a/2586780/2553104 */
55
- border-collapse: collapse;
56
18
  border-radius: 5px;
57
- border: hidden 1px var(--border-color);
58
- box-shadow: 0 0 0 1px var(--border-color);
59
- }
60
-
61
- .table thead tr {
62
- color: var(--grey-400);
63
- }
64
-
65
- .table thead th {
66
- font-weight: 400;
67
- }
68
-
69
- .table tr {
70
- border: solid 1px var(--border-color);
71
- color: var(--grey-700);
72
- cursor: pointer;
73
- }
74
-
75
- .table tr:nth-child(even) {
76
- background: var(--grey-50);
77
- }
78
-
79
- .table tbody tr:hover {
80
- background: var(--grey-100);
81
- }
82
-
83
- .table th,
84
- .table td {
85
- padding: 0.5rem 1rem;
86
- }
87
-
88
- .request-path {
89
- max-width: 300px;
90
-
91
- white-space: nowrap;
92
- overflow: hidden;
93
- text-overflow: ellipsis;
94
- }
95
-
96
- .request-buttons {
97
- z-index: 1;
98
- text-align: right;
99
- }
100
-
101
- .request-buttons a {
102
- text-decoration: none;
103
- padding: 0 .25rem;
104
- color: var(--grey-700);
105
- }
106
-
107
- .request-buttons a:active,
108
- .request-buttons a:focus-visible,
109
- .request-buttons a:hover {
110
- color: var(--blue-500);
111
- }
112
-
113
- .request-buttons a.link-disabled {
114
- cursor: default;
115
- pointer-events: none;
116
- text-decoration: none;
117
- color: var(--grey-200);
118
19
  }
119
20
 
120
21
  .request-details-data {
121
22
  display: flex;
23
+ padding: 1rem 0;
24
+ }
122
25
 
26
+ .request-details-actions {
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: space-between;
30
+ padding: 0 0 1rem;
123
31
  margin: 0;
124
- padding: 0;
125
32
  }
126
33
 
127
34
  .data-item {
128
35
  display: flex;
129
36
  flex-direction: column;
130
37
  align-items: flex-start;
131
- list-style: none;
132
-
133
- margin-right: 3rem;
134
38
  padding: 0;
39
+ margin-right: 3rem;
40
+ list-style: none;
135
41
  }
136
42
 
137
43
  .data-item small {
@@ -139,36 +45,45 @@ main {
139
45
  }
140
46
 
141
47
  .data-item span {
142
- margin: .25rem 0;
48
+ margin: 0.25rem 0;
143
49
  }
144
50
 
145
51
  [class*='request-status-2'],
146
52
  [class*='request-method-get'] {
147
- color: white;
148
53
  background: var(--green-400) !important;
54
+ color: white;
149
55
  }
150
56
 
151
57
  [class*='request-status-4'],
152
58
  [class*='request-method-put'],
153
59
  [class*='request-method-patch'] {
154
- color: white;
155
60
  background: var(--yellow-400) !important;
61
+ color: white;
156
62
  }
157
63
 
158
64
  [class*='request-status-5'],
159
65
  [class*='request-method-delete'] {
160
- color: white;
161
66
  background: var(--red-500) !important;
67
+ color: white;
162
68
  }
163
69
 
164
- .request-details-actions {
165
- margin: 0;
166
- padding: 2em 0;
70
+ .flamegraph-button button {
71
+ background: var(--grey-200);
72
+ }
73
+
74
+ .clear-action button {
75
+ background: var(--red-500);
76
+ color: white;
77
+ font-weight: 600;
78
+
79
+ &:hover {
80
+ background: var(--red-600);
81
+ }
82
+ }
83
+
84
+ .profiled-requests-header {
167
85
  display: flex;
86
+ flex-direction: row;
168
87
  align-items: center;
169
88
  justify-content: space-between;
170
89
  }
171
-
172
- .flamegraph-button button {
173
- background: var(--grey-200);
174
- }