Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
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
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
0c16d3cd
Commit
0c16d3cd
authored
Jan 23, 2019
by
Torkel Ödegaard
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Moved history component, added start draft of frontend code style guide
parent
26385dea
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
75 additions
and
14 deletions
+75
-14
public/app/features/all.ts
+1
-1
public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.test.ts
+2
-2
public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts
+3
-5
public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts
+3
-4
public/app/features/dashboard/components/VersionHistory/HistorySrv.ts
+1
-1
public/app/features/dashboard/components/VersionHistory/__mocks__/history.ts
+0
-0
public/app/features/dashboard/components/VersionHistory/index.ts
+2
-0
public/app/features/dashboard/components/VersionHistory/template.html
+0
-0
public/app/features/dashboard/index.ts
+1
-1
style_guides/frontend.md
+62
-0
No files found.
public/app/features/all.ts
View file @
0c16d3cd
import
'./annotations/all'
;
import
'./templating/all'
;
import
'./plugins/all'
;
import
'./dashboard
/all
'
;
import
'./dashboard'
;
import
'./playlist/all'
;
import
'./panel/all'
;
import
'./org/all'
;
...
...
public/app/features/dashboard/
specs/history_c
trl.test.ts
→
public/app/features/dashboard/
components/VersionHistory/HistoryListC
trl.test.ts
View file @
0c16d3cd
import
_
from
'lodash'
;
import
{
HistoryListCtrl
}
from
'
app/features/dashboard/history/history
'
;
import
{
versions
,
compare
,
restore
}
from
'./
history_mocks
'
;
import
{
HistoryListCtrl
}
from
'
./HistoryListCtrl
'
;
import
{
versions
,
compare
,
restore
}
from
'./
__mocks__/history
'
;
import
$q
from
'q'
;
describe
(
'HistoryListCtrl'
,
()
=>
{
...
...
public/app/features/dashboard/
history/history
.ts
→
public/app/features/dashboard/
components/VersionHistory/HistoryListCtrl
.ts
View file @
0c16d3cd
import
'./history_srv'
;
import
_
from
'lodash'
;
import
angular
from
'angular'
;
import
moment
from
'moment'
;
import
locationUtil
from
'app/core/utils/location_util'
;
import
{
DashboardModel
}
from
'../dashboard_model'
;
import
{
HistoryListOpts
,
RevisionsModel
,
CalculateDiffOptions
,
HistorySrv
}
from
'./
history_s
rv'
;
import
{
DashboardModel
}
from
'../
../
dashboard_model'
;
import
{
HistoryListOpts
,
RevisionsModel
,
CalculateDiffOptions
,
HistorySrv
}
from
'./
HistoryS
rv'
;
export
class
HistoryListCtrl
{
appending
:
boolean
;
...
...
@@ -200,7 +198,7 @@ export class HistoryListCtrl {
export
function
dashboardHistoryDirective
()
{
return
{
restrict
:
'E'
,
templateUrl
:
'public/app/features/dashboard/
history/history
.html'
,
templateUrl
:
'public/app/features/dashboard/
components/VersionHistory/template
.html'
,
controller
:
HistoryListCtrl
,
bindToController
:
true
,
controllerAs
:
'ctrl'
,
...
...
public/app/features/dashboard/
specs/history_s
rv.test.ts
→
public/app/features/dashboard/
components/VersionHistory/HistoryS
rv.test.ts
View file @
0c16d3cd
import
'../history/history_srv'
;
import
{
versions
,
restore
}
from
'./history_mocks'
;
import
{
HistorySrv
}
from
'../history/history_srv'
;
import
{
DashboardModel
}
from
'../dashboard_model'
;
import
{
versions
,
restore
}
from
'./__mocks__/history'
;
import
{
HistorySrv
}
from
'./HistorySrv'
;
import
{
DashboardModel
}
from
'../../dashboard_model'
;
jest
.
mock
(
'app/core/store'
);
describe
(
'historySrv'
,
()
=>
{
...
...
public/app/features/dashboard/
history/history_s
rv.ts
→
public/app/features/dashboard/
components/VersionHistory/HistoryS
rv.ts
View file @
0c16d3cd
import
_
from
'lodash'
;
import
coreModule
from
'app/core/core_module'
;
import
{
DashboardModel
}
from
'../dashboard_model'
;
import
{
DashboardModel
}
from
'../
../
dashboard_model'
;
export
interface
HistoryListOpts
{
limit
:
number
;
...
...
public/app/features/dashboard/
specs/history_mocks
.ts
→
public/app/features/dashboard/
components/VersionHistory/__mocks__/history
.ts
View file @
0c16d3cd
File moved
public/app/features/dashboard/components/VersionHistory/index.ts
0 → 100644
View file @
0c16d3cd
export
{
HistoryListCtrl
}
from
'./HistoryListCtrl'
;
export
{
HistorySrv
}
from
'./HistorySrv'
;
public/app/features/dashboard/
history/history
.html
→
public/app/features/dashboard/
components/VersionHistory/template
.html
View file @
0c16d3cd
File moved
public/app/features/dashboard/
all
.ts
→
public/app/features/dashboard/
index
.ts
View file @
0c16d3cd
import
'./dashboard_ctrl'
;
import
'./alerting_srv'
;
import
'./history/history'
;
import
'./dashboard_loader_srv'
;
import
'./submenu/submenu'
;
import
'./save_as_modal'
;
...
...
@@ -27,6 +26,7 @@ import './components/DashExportModal';
import
'./components/DashNav'
;
import
'./components/ExportDataModal'
;
import
'./components/FolderPicker'
;
import
'./components/VersionHistory'
;
// angular wrappers
import
{
react2AngularDirective
}
from
'app/core/utils/react2angular'
;
...
...
style_guides/frontend.md
0 → 100644
View file @
0c16d3cd
# Frontend Style Guide
Generally we follow the Airbnb
[
React Style Guide
](
https://github.com/airbnb/javascript/tree/master/react
)
.
## Table of Contents
1.
[
Basic Rules
](
#basic-rules
)
1.
[
File & Component Organization
](
#Organization
)
1.
[
Naming
](
#naming
)
1.
[
Declaration
](
#declaration
)
1.
[
Props
](
#props
)
1.
[
Refs
](
#refs
)
1.
[
Methods
](
#methods
)
1.
[
Ordering
](
#ordering
)
## Basic rules
*
Try to keep files small and focused and break large components up into sub components.
## Organization
*
Components and types that needs to be used by external plugins needs to go into @grafana/ui
*
Components should get their own folder under features/xxx/components
*
Sub components can live in that component folders, so not small component needs their own folder
*
Place test next to their component file (same dir)
*
Mocks in __mocks__ dir
*
Test utils in __tests__ dir
*
Component sass should live in the same folder as component code
*
State logic & domain models should live in features/xxx/state
*
Containers (pages) can live in feature root features/xxx
*
up for debate?
## Props
*
Name callback props & handlers with a "on" prefix.
```
tsx
// good
onChange
=
()
=>
{
};
render
()
{
return
(
<
MyComponent
onChange=
{
this
.
onChange
}
/>
);
}
// bad
handleChange
=
()
=>
{
};
render
()
{
return
(
<
MyComponent
changed=
{
this
.
handleChange
}
/>
);
}
```
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