diff --git a/CHANGELOG.md b/CHANGELOG.md index 30fa0cd0b94..1a623d5ea8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ * **Alerting**: Notification reminders [#7330](https://github.com/grafana/grafana/issues/7330), thx [@jbaublitz](https://github.com/jbaublitz) * **Dashboard**: TV & Kiosk mode changes, new cycle view mode button in dashboard toolbar [#13025](https://github.com/grafana/grafana/pull/13025) * **OAuth**: Gitlab OAuth with support for filter by groups [#5623](https://github.com/grafana/grafana/issues/5623), thx [@BenoitKnecht](https://github.com/BenoitKnecht) +* **Postgres**: Graphical query builder [#10095](https://github.com/grafana/grafana/issues/10095), thx [svenklemm](https://github.com/svenklemm) ### New Features @@ -19,7 +20,9 @@ ### Minor +* **Units**: Adds bitcoin axes unit. [#13125](https://github.com/grafana/grafana/pull/13125) * **GrafanaCli**: Fixed issue with grafana-cli install plugin resulting in corrupt http response from source error. Fixes [#13079](https://github.com/grafana/grafana/issues/13079) +* **Logging**: Reopen log files after receiving a SIGHUP signal [#13112](https://github.com/grafana/grafana/pull/13112), thx [@filewalkwithme](https://github.com/filewalkwithme) * **Api**: Delete nonexistent datasource should return 404 [#12313](https://github.com/grafana/grafana/issues/12313), thx [@AustinWinstanley](https://github.com/AustinWinstanley) * **Dashboard**: Fix selecting current dashboard from search should not reload dashboard [#12248](https://github.com/grafana/grafana/issues/12248) * **Dashboard**: Use uid when linking to dashboards internally in a dashboard [#10705](https://github.com/grafana/grafana/issues/10705) diff --git a/conf/defaults.ini b/conf/defaults.ini index 90fc144c6e0..fff9f630690 100644 --- a/conf/defaults.ini +++ b/conf/defaults.ini @@ -538,3 +538,8 @@ container_name = [external_image_storage.local] # does not require any configuration + +[rendering] +# Options to configure external image rendering server like https://github.com/grafana/grafana-image-renderer +server_url = +callback_url = diff --git a/conf/sample.ini b/conf/sample.ini index 4291071e026..2b2ae497e36 100644 --- a/conf/sample.ini +++ b/conf/sample.ini @@ -460,3 +460,8 @@ log_queries = [external_image_storage.local] # does not require any configuration + +[rendering] +# Options to configure external image rendering server like https://github.com/grafana/grafana-image-renderer +;server_url = +;callback_url = diff --git a/docs/sources/administration/provisioning.md b/docs/sources/administration/provisioning.md index c57fb1683f0..f3d4091defa 100644 --- a/docs/sources/administration/provisioning.md +++ b/docs/sources/administration/provisioning.md @@ -155,7 +155,7 @@ Since not all datasources have the same configuration settings we only have the | tlsSkipVerify | boolean | *All* | Controls whether a client verifies the server's certificate chain and host name. | | graphiteVersion | string | Graphite | Graphite version | | timeInterval | string | Elastic, InfluxDB & Prometheus | Lowest interval/step value that should be used for this data source | -| esVersion | number | Elastic | Elasticsearch version as an number (2/5/56) | +| esVersion | number | Elastic | Elasticsearch version as a number (2/5/56) | | timeField | string | Elastic | Which field that should be used as timestamp | | interval | string | Elastic | Index date time format | | authType | string | Cloudwatch | Auth provider. keys/credentials/arn | @@ -165,6 +165,8 @@ Since not all datasources have the same configuration settings we only have the | tsdbVersion | string | OpenTSDB | Version | | tsdbResolution | string | OpenTSDB | Resolution | | sslmode | string | PostgreSQL | SSLmode. 'disable', 'require', 'verify-ca' or 'verify-full' | +| postgresVersion | number | PostgreSQL | Postgres version as a number (903/904/905/906/1000) meaning v9.3, v9.4, ..., v10 | +| timescaledb | boolean | PostgreSQL | Enable usage of TimescaleDB extension | #### Secure Json Data diff --git a/docs/sources/features/datasources/postgres.md b/docs/sources/features/datasources/postgres.md index 1d195a01349..4dfe6929bc1 100644 --- a/docs/sources/features/datasources/postgres.md +++ b/docs/sources/features/datasources/postgres.md @@ -31,7 +31,9 @@ Name | Description *User* | Database user's login/username *Password* | Database user's password *SSL Mode* | This option determines whether or with what priority a secure SSL TCP/IP connection will be negotiated with the server. -*TimescaleDB* | With this option enabled Grafana will use TimescaleDB features, e.g. use ```time_bucket``` for grouping by time (only available in Grafana 5.3+). +*Version* | This option determines which functions are available in the query builder (only available in Grafana 5.3+). +*TimescaleDB* | TimescaleDB is a time-series database built as a PostgreSQL extension. If enabled, Grafana will use `time_bucket` in the `$__timeGroup` macro and display TimescaleDB specific aggregate functions in the query builder (only available in Grafana 5.3+). + ### Database User Permissions (Important!) @@ -292,5 +294,6 @@ datasources: password: "Password!" jsonData: sslmode: "disable" # disable/require/verify-ca/verify-full + postgresVersion: 903 # 903=9.3, 904=9.4, 905=9.5, 906=9.6, 1000=10 timescaledb: false ``` diff --git a/pkg/cmd/grafana-server/main.go b/pkg/cmd/grafana-server/main.go index f00e6bba0fd..f1e298671d7 100644 --- a/pkg/cmd/grafana-server/main.go +++ b/pkg/cmd/grafana-server/main.go @@ -96,13 +96,17 @@ func main() { func listenToSystemSignals(server *GrafanaServerImpl) { signalChan := make(chan os.Signal, 1) - ignoreChan := make(chan os.Signal, 1) + sighupChan := make(chan os.Signal, 1) - signal.Notify(ignoreChan, syscall.SIGHUP) + signal.Notify(sighupChan, syscall.SIGHUP) signal.Notify(signalChan, os.Interrupt, os.Kill, syscall.SIGTERM) - select { - case sig := <-signalChan: - server.Shutdown(fmt.Sprintf("System signal: %s", sig)) + for { + select { + case _ = <-sighupChan: + log.Reload() + case sig := <-signalChan: + server.Shutdown(fmt.Sprintf("System signal: %s", sig)) + } } } diff --git a/pkg/log/file.go b/pkg/log/file.go index d137adbf3de..b8430dc6086 100644 --- a/pkg/log/file.go +++ b/pkg/log/file.go @@ -236,3 +236,20 @@ func (w *FileLogWriter) Close() { func (w *FileLogWriter) Flush() { w.mw.fd.Sync() } + +// Reload file logger +func (w *FileLogWriter) Reload() { + // block Logger's io.Writer + w.mw.Lock() + defer w.mw.Unlock() + + // Close + fd := w.mw.fd + fd.Close() + + // Open again + err := w.StartLogger() + if err != nil { + fmt.Fprintf(os.Stderr, "Reload StartLogger: %s\n", err) + } +} diff --git a/pkg/log/handlers.go b/pkg/log/handlers.go index 14a96fdcdb4..804d8fcbd70 100644 --- a/pkg/log/handlers.go +++ b/pkg/log/handlers.go @@ -3,3 +3,7 @@ package log type DisposableHandler interface { Close() } + +type ReloadableHandler interface { + Reload() +} diff --git a/pkg/log/log.go b/pkg/log/log.go index 0e6874e1b4b..d0e6ea89f27 100644 --- a/pkg/log/log.go +++ b/pkg/log/log.go @@ -21,10 +21,12 @@ import ( var Root log15.Logger var loggersToClose []DisposableHandler +var loggersToReload []ReloadableHandler var filters map[string]log15.Lvl func init() { loggersToClose = make([]DisposableHandler, 0) + loggersToReload = make([]ReloadableHandler, 0) Root = log15.Root() Root.SetHandler(log15.DiscardHandler()) } @@ -115,6 +117,12 @@ func Close() { loggersToClose = make([]DisposableHandler, 0) } +func Reload() { + for _, logger := range loggersToReload { + logger.Reload() + } +} + func GetLogLevelFor(name string) Lvl { if level, ok := filters[name]; ok { switch level { @@ -230,6 +238,7 @@ func ReadLoggingConfig(modes []string, logsPath string, cfg *ini.File) { fileHandler.Init() loggersToClose = append(loggersToClose, fileHandler) + loggersToReload = append(loggersToReload, fileHandler) handler = fileHandler case "syslog": sysLogHandler := NewSyslog(sec, format) diff --git a/pkg/services/rendering/http_mode.go b/pkg/services/rendering/http_mode.go index 9084ca27353..d47dfaeaae1 100644 --- a/pkg/services/rendering/http_mode.go +++ b/pkg/services/rendering/http_mode.go @@ -2,6 +2,7 @@ package rendering import ( "context" + "fmt" "io" "net" "net/http" @@ -20,14 +21,13 @@ var netTransport = &http.Transport{ TLSHandshakeTimeout: 5 * time.Second, } +var netClient = &http.Client{ + Transport: netTransport, +} + func (rs *RenderingService) renderViaHttp(ctx context.Context, opts Opts) (*RenderResult, error) { filePath := rs.getFilePathForNewImage() - var netClient = &http.Client{ - Timeout: opts.Timeout, - Transport: netTransport, - } - rendererUrl, err := url.Parse(rs.Cfg.RendererUrl) if err != nil { return nil, err @@ -35,10 +35,10 @@ func (rs *RenderingService) renderViaHttp(ctx context.Context, opts Opts) (*Rend queryParams := rendererUrl.Query() queryParams.Add("url", rs.getURL(opts.Path)) - queryParams.Add("renderKey", rs.getRenderKey(opts.UserId, opts.OrgId, opts.OrgRole)) + queryParams.Add("renderKey", rs.getRenderKey(opts.OrgId, opts.UserId, opts.OrgRole)) queryParams.Add("width", strconv.Itoa(opts.Width)) queryParams.Add("height", strconv.Itoa(opts.Height)) - queryParams.Add("domain", rs.getLocalDomain()) + queryParams.Add("domain", rs.domain) queryParams.Add("timezone", isoTimeOffsetToPosixTz(opts.Timezone)) queryParams.Add("encoding", opts.Encoding) queryParams.Add("timeout", strconv.Itoa(int(opts.Timeout.Seconds()))) @@ -49,20 +49,48 @@ func (rs *RenderingService) renderViaHttp(ctx context.Context, opts Opts) (*Rend return nil, err } + reqContext, cancel := context.WithTimeout(ctx, opts.Timeout+time.Second*2) + defer cancel() + + req = req.WithContext(reqContext) + // make request to renderer server resp, err := netClient.Do(req) if err != nil { - return nil, err + rs.log.Error("Failed to send request to remote rendering service.", "error", err) + return nil, fmt.Errorf("Failed to send request to remote rendering service. %s", err) } // save response to file defer resp.Body.Close() + + // check for timeout first + if reqContext.Err() == context.DeadlineExceeded { + rs.log.Info("Rendering timed out") + return nil, ErrTimeout + } + + // if we didnt get a 200 response, something went wrong. + if resp.StatusCode != http.StatusOK { + rs.log.Error("Remote rendering request failed", "error", resp.Status) + return nil, fmt.Errorf("Remote rendering request failed. %d: %s", resp.StatusCode, resp.Status) + } + out, err := os.Create(filePath) if err != nil { return nil, err } defer out.Close() - io.Copy(out, resp.Body) + _, err = io.Copy(out, resp.Body) + if err != nil { + // check that we didnt timeout while receiving the response. + if reqContext.Err() == context.DeadlineExceeded { + rs.log.Info("Rendering timed out") + return nil, ErrTimeout + } + rs.log.Error("Remote rendering request failed", "error", err) + return nil, fmt.Errorf("Remote rendering request failed. %s", err) + } return &RenderResult{FilePath: filePath}, err } diff --git a/pkg/services/rendering/phantomjs.go b/pkg/services/rendering/phantomjs.go index 87ccaf6b5d2..1bd7489c153 100644 --- a/pkg/services/rendering/phantomjs.go +++ b/pkg/services/rendering/phantomjs.go @@ -49,7 +49,7 @@ func (rs *RenderingService) renderViaPhantomJS(ctx context.Context, opts Opts) ( fmt.Sprintf("width=%v", opts.Width), fmt.Sprintf("height=%v", opts.Height), fmt.Sprintf("png=%v", pngPath), - fmt.Sprintf("domain=%v", rs.getLocalDomain()), + fmt.Sprintf("domain=%v", rs.domain), fmt.Sprintf("timeout=%v", opts.Timeout.Seconds()), fmt.Sprintf("renderKey=%v", renderKey), } diff --git a/pkg/services/rendering/plugin_mode.go b/pkg/services/rendering/plugin_mode.go index 550779ad7c3..58fef2b095f 100644 --- a/pkg/services/rendering/plugin_mode.go +++ b/pkg/services/rendering/plugin_mode.go @@ -77,10 +77,10 @@ func (rs *RenderingService) renderViaPlugin(ctx context.Context, opts Opts) (*Re Height: int32(opts.Height), FilePath: pngPath, Timeout: int32(opts.Timeout.Seconds()), - RenderKey: rs.getRenderKey(opts.UserId, opts.OrgId, opts.OrgRole), + RenderKey: rs.getRenderKey(opts.OrgId, opts.UserId, opts.OrgRole), Encoding: opts.Encoding, Timezone: isoTimeOffsetToPosixTz(opts.Timezone), - Domain: rs.getLocalDomain(), + Domain: rs.domain, }) if err != nil { diff --git a/pkg/services/rendering/rendering.go b/pkg/services/rendering/rendering.go index 799aecc3e88..ff4a67cc9b6 100644 --- a/pkg/services/rendering/rendering.go +++ b/pkg/services/rendering/rendering.go @@ -3,6 +3,8 @@ package rendering import ( "context" "fmt" + "net/url" + "os" "path/filepath" plugin "github.com/hashicorp/go-plugin" @@ -27,12 +29,31 @@ type RenderingService struct { grpcPlugin pluginModel.RendererPlugin pluginInfo *plugins.RendererPlugin renderAction renderFunc + domain string Cfg *setting.Cfg `inject:""` } func (rs *RenderingService) Init() error { rs.log = log.New("rendering") + + // ensure ImagesDir exists + err := os.MkdirAll(rs.Cfg.ImagesDir, 0700) + if err != nil { + return err + } + + // set value used for domain attribute of renderKey cookie + if rs.Cfg.RendererUrl != "" { + // RendererCallbackUrl has already been passed, it wont generate an error. + u, _ := url.Parse(rs.Cfg.RendererCallbackUrl) + rs.domain = u.Hostname() + } else if setting.HttpAddr != setting.DEFAULT_HTTP_ADDR { + rs.domain = setting.HttpAddr + } else { + rs.domain = "localhost" + } + return nil } @@ -82,16 +103,17 @@ func (rs *RenderingService) getFilePathForNewImage() string { } func (rs *RenderingService) getURL(path string) string { - // &render=1 signals to the legacy redirect layer to - return fmt.Sprintf("%s://%s:%s/%s&render=1", setting.Protocol, rs.getLocalDomain(), setting.HttpPort, path) -} + if rs.Cfg.RendererUrl != "" { + // The backend rendering service can potentially be remote. + // So we need to use the root_url to ensure the rendering service + // can reach this Grafana instance. + + // &render=1 signals to the legacy redirect layer to + return fmt.Sprintf("%s%s&render=1", rs.Cfg.RendererCallbackUrl, path) -func (rs *RenderingService) getLocalDomain() string { - if setting.HttpAddr != setting.DEFAULT_HTTP_ADDR { - return setting.HttpAddr } - - return "localhost" + // &render=1 signals to the legacy redirect layer to + return fmt.Sprintf("%s://%s:%s/%s&render=1", setting.Protocol, rs.domain, setting.HttpPort, path) } func (rs *RenderingService) getRenderKey(orgId, userId int64, orgRole models.RoleType) string { diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index eb61568261d..789622ca0dd 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -197,6 +197,7 @@ type Cfg struct { ImagesDir string PhantomDir string RendererUrl string + RendererCallbackUrl string DisableBruteForceLoginProtection bool TempDataLifetime time.Duration @@ -641,6 +642,18 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error { // Rendering renderSec := iniFile.Section("rendering") cfg.RendererUrl = renderSec.Key("server_url").String() + cfg.RendererCallbackUrl = renderSec.Key("callback_url").String() + if cfg.RendererCallbackUrl == "" { + cfg.RendererCallbackUrl = AppUrl + } else { + if cfg.RendererCallbackUrl[len(cfg.RendererCallbackUrl)-1] != '/' { + cfg.RendererCallbackUrl += "/" + } + _, err := url.Parse(cfg.RendererCallbackUrl) + if err != nil { + log.Fatal(4, "Invalid callback_url(%s): %s", cfg.RendererCallbackUrl, err) + } + } cfg.ImagesDir = filepath.Join(DataPath, "png") cfg.PhantomDir = filepath.Join(HomePath, "tools/phantomjs") cfg.TempDataLifetime = iniFile.Section("paths").Key("temp_data_lifetime").MustDuration(time.Second * 3600 * 24) diff --git a/pkg/setting/setting_test.go b/pkg/setting/setting_test.go index 9de22c86811..affb3c3e7ca 100644 --- a/pkg/setting/setting_test.go +++ b/pkg/setting/setting_test.go @@ -20,6 +20,7 @@ func TestLoadingSettings(t *testing.T) { So(err, ShouldBeNil) So(AdminUser, ShouldEqual, "admin") + So(cfg.RendererCallbackUrl, ShouldEqual, "http://localhost:3000/") }) Convey("Should be able to override via environment variables", func() { @@ -178,5 +179,15 @@ func TestLoadingSettings(t *testing.T) { So(InstanceName, ShouldEqual, hostname) }) + Convey("Reading callback_url should add trailing slash", func() { + cfg := NewCfg() + cfg.Load(&CommandLineArgs{ + HomePath: "../../", + Args: []string{"cfg:rendering.callback_url=http://myserver/renderer"}, + }) + + So(cfg.RendererCallbackUrl, ShouldEqual, "http://myserver/renderer/") + }) + }) } diff --git a/public/app/app.ts b/public/app/app.ts index 77f56264504..8e30747072e 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -21,7 +21,7 @@ import _ from 'lodash'; import moment from 'moment'; // add move to lodash for backward compatabiltiy -_.move = function(array, fromIndex, toIndex) { +_.move = (array, fromIndex, toIndex) => { array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]); return array; }; @@ -76,9 +76,9 @@ export class GrafanaApp { $provide.decorator('$http', [ '$delegate', '$templateCache', - function($delegate, $templateCache) { + ($delegate, $templateCache) => { const get = $delegate.get; - $delegate.get = function(url, config) { + $delegate.get = (url, config) => { if (url.match(/\.html$/)) { // some template's already exist in the cache if (!$templateCache.get(url)) { @@ -135,7 +135,7 @@ export class GrafanaApp { this.preBootModules = null; }); }) - .catch(function(err) { + .catch(err => { console.log('Application boot failed:', err); }); } diff --git a/public/app/containers/Explore/utils/debounce.ts b/public/app/containers/Explore/utils/debounce.ts index 5fda5a05f5f..a7c9450a6c1 100644 --- a/public/app/containers/Explore/utils/debounce.ts +++ b/public/app/containers/Explore/utils/debounce.ts @@ -4,7 +4,7 @@ export default function debounce(func, wait) { return function(this: any) { const context = this; const args = arguments; - const later = function() { + const later = () => { timeout = null; func.apply(context, args); }; diff --git a/public/app/containers/Teams/TeamList.tsx b/public/app/containers/Teams/TeamList.tsx index d0feee75184..2a5743bea96 100644 --- a/public/app/containers/Teams/TeamList.tsx +++ b/public/app/containers/Teams/TeamList.tsx @@ -6,6 +6,7 @@ import { NavStore } from 'app/stores/NavStore/NavStore'; import { TeamsStore, Team } from 'app/stores/TeamsStore/TeamsStore'; import { BackendSrv } from 'app/core/services/backend_srv'; import DeleteButton from 'app/core/components/DeleteButton/DeleteButton'; +import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; interface Props { nav: typeof NavStore.Type; @@ -61,48 +62,81 @@ export class TeamList extends React.Component { ); } + renderTeamList(teams) { + return ( +
+
+
+ +
+ +
+ + + New team + +
+ +
+ + + + + + + + + {teams.filteredTeams.map(team => this.renderTeamMember(team))} +
+ NameEmailMembers +
+
+
+ ); + } + + renderEmptyList() { + return ( +
+ +
+ ); + } + render() { const { nav, teams } = this.props; + let view; + + if (teams.filteredTeams.length > 0) { + view = this.renderTeamList(teams); + } else { + view = this.renderEmptyList(); + } + return (
-
-
-
- -
- - - -
- - - - - - - - - {teams.filteredTeams.map(team => this.renderTeamMember(team))} -
- NameEmailMembers -
-
-
+ {view}
); } diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index e7295646172..18e9d8dbd84 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -4,10 +4,12 @@ import PageHeader from './components/PageHeader/PageHeader'; import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA'; import { SearchResult } from './components/search/SearchResult'; import { TagFilter } from './components/TagFilter/TagFilter'; +import { SideMenu } from './components/sidemenu/SideMenu'; import DashboardPermissions from './components/Permissions/DashboardPermissions'; export function registerAngularDirectives() { react2AngularDirective('passwordStrength', PasswordStrength, ['password']); + react2AngularDirective('sidemenu', SideMenu, []); react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']); react2AngularDirective('emptyListCta', EmptyListCTA, ['model']); react2AngularDirective('searchResult', SearchResult, []); diff --git a/public/app/core/components/gf_page.ts b/public/app/core/components/gf_page.ts index ad0770940ec..057a307f205 100644 --- a/public/app/core/components/gf_page.ts +++ b/public/app/core/components/gf_page.ts @@ -31,7 +31,7 @@ export function gfPageDirective() { header: '?gfPageHeader', body: 'gfPageBody', }, - link: function(scope, elem, attrs) { + link: (scope, elem, attrs) => { console.log(scope); }, }; diff --git a/public/app/core/components/scroll/page_scroll.ts b/public/app/core/components/scroll/page_scroll.ts index b6603f06175..2d6e27f8b22 100644 --- a/public/app/core/components/scroll/page_scroll.ts +++ b/public/app/core/components/scroll/page_scroll.ts @@ -4,7 +4,7 @@ import appEvents from 'app/core/app_events'; export function pageScrollbar() { return { restrict: 'A', - link: function(scope, elem, attrs) { + link: (scope, elem, attrs) => { let lastPos = 0; appEvents.on( diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index 2d60825e739..bd355817f92 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -14,7 +14,7 @@ const scrollerClass = 'baron__scroller'; export function geminiScrollbar() { return { restrict: 'A', - link: function(scope, elem, attrs) { + link: (scope, elem, attrs) => { let scrollRoot = elem.parent(); const scroller = elem; diff --git a/public/app/core/components/sidemenu/BottomNavLinks.test.tsx b/public/app/core/components/sidemenu/BottomNavLinks.test.tsx new file mode 100644 index 00000000000..8eaed4ca264 --- /dev/null +++ b/public/app/core/components/sidemenu/BottomNavLinks.test.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import BottomNavLinks from './BottomNavLinks'; +import appEvents from '../../app_events'; + +jest.mock('../../app_events', () => ({ + emit: jest.fn(), +})); + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + link: {}, + user: { + isGrafanaAdmin: false, + isSignedIn: false, + orgCount: 2, + orgRole: '', + orgId: 1, + orgName: 'Grafana', + timezone: 'UTC', + helpFlags1: 1, + lightTheme: false, + hasEditPermissionInFolders: false, + }, + }, + propOverrides + ); + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render organisation switcher', () => { + const wrapper = setup({ + link: { + showOrgSwitcher: true, + }, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render subtitle', () => { + const wrapper = setup({ + link: { + subTitle: 'subtitle', + }, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render children', () => { + const wrapper = setup({ + link: { + children: [ + { + id: '1', + }, + { + id: '2', + }, + { + id: '3', + }, + { + id: '4', + hideFromMenu: true, + }, + ], + }, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); + +describe('Functions', () => { + describe('item clicked', () => { + const wrapper = setup(); + const mockEvent = { preventDefault: jest.fn() }; + it('should emit show modal event if url matches shortcut', () => { + const child = { url: '/shortcuts' }; + const instance = wrapper.instance() as BottomNavLinks; + instance.itemClicked(mockEvent, child); + + expect(appEvents.emit).toHaveBeenCalledWith('show-modal', { templateHtml: '' }); + }); + }); +}); diff --git a/public/app/core/components/sidemenu/BottomNavLinks.tsx b/public/app/core/components/sidemenu/BottomNavLinks.tsx new file mode 100644 index 00000000000..21c83864c62 --- /dev/null +++ b/public/app/core/components/sidemenu/BottomNavLinks.tsx @@ -0,0 +1,78 @@ +import React, { PureComponent } from 'react'; +import appEvents from '../../app_events'; +import { User } from '../../services/context_srv'; + +export interface Props { + link: any; + user: User; +} + +class BottomNavLinks extends PureComponent { + itemClicked = (event, child) => { + if (child.url === '/shortcuts') { + event.preventDefault(); + appEvents.emit('show-modal', { + templateHtml: '', + }); + } + }; + + switchOrg = () => { + appEvents.emit('show-modal', { + templateHtml: '', + }); + }; + + render() { + const { link, user } = this.props; + return ( +
+ + + {link.icon && } + {link.img && } + + + +
+ ); + } +} + +export default BottomNavLinks; diff --git a/public/app/core/components/sidemenu/BottomSection.test.tsx b/public/app/core/components/sidemenu/BottomSection.test.tsx new file mode 100644 index 00000000000..40307895c57 --- /dev/null +++ b/public/app/core/components/sidemenu/BottomSection.test.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import BottomSection from './BottomSection'; + +jest.mock('../../config', () => ({ + bootData: { + navTree: [ + { + id: 'profile', + hideFromMenu: true, + }, + { + hideFromMenu: true, + }, + { + hideFromMenu: false, + }, + { + hideFromMenu: true, + }, + ], + }, + user: { + orgCount: 5, + orgName: 'Grafana', + }, +})); + +jest.mock('app/core/services/context_srv', () => ({ + contextSrv: { + sidemenu: true, + isSignedIn: false, + isGrafanaAdmin: false, + hasEditPermissionFolders: false, + }, +})); + +describe('Render', () => { + it('should render component', () => { + const wrapper = shallow(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/sidemenu/BottomSection.tsx b/public/app/core/components/sidemenu/BottomSection.tsx new file mode 100644 index 00000000000..ee5175ca763 --- /dev/null +++ b/public/app/core/components/sidemenu/BottomSection.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import _ from 'lodash'; +import SignIn from './SignIn'; +import BottomNavLinks from './BottomNavLinks'; +import { contextSrv } from 'app/core/services/context_srv'; +import config from '../../config'; + +export default function BottomSection() { + const navTree = _.cloneDeep(config.bootData.navTree); + const bottomNav = _.filter(navTree, item => item.hideFromMenu); + const isSignedIn = contextSrv.isSignedIn; + const user = contextSrv.user; + + if (user && user.orgCount > 1) { + const profileNode = _.find(bottomNav, { id: 'profile' }); + if (profileNode) { + profileNode.showOrgSwitcher = true; + } + } + + return ( +
+ {!isSignedIn && } + {bottomNav.map((link, index) => { + return ; + })} +
+ ); +} diff --git a/public/app/core/components/sidemenu/DropDownChild.test.tsx b/public/app/core/components/sidemenu/DropDownChild.test.tsx new file mode 100644 index 00000000000..6a15ca5b23f --- /dev/null +++ b/public/app/core/components/sidemenu/DropDownChild.test.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import DropDownChild from './DropDownChild'; + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + child: { + divider: true, + }, + }, + propOverrides + ); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render icon if exists', () => { + const wrapper = setup({ + child: { + divider: false, + icon: 'icon-test', + }, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/sidemenu/DropDownChild.tsx b/public/app/core/components/sidemenu/DropDownChild.tsx new file mode 100644 index 00000000000..1a577d185e5 --- /dev/null +++ b/public/app/core/components/sidemenu/DropDownChild.tsx @@ -0,0 +1,21 @@ +import React, { SFC } from 'react'; + +export interface Props { + child: any; +} + +const DropDownChild: SFC = props => { + const { child } = props; + const listItemClassName = child.divider ? 'divider' : ''; + + return ( +
  • + + {child.icon && } + {child.text} + +
    • + ); +}; + +export default DropDownChild; diff --git a/public/app/core/components/sidemenu/SideMenu.test.tsx b/public/app/core/components/sidemenu/SideMenu.test.tsx new file mode 100644 index 00000000000..2a262adca5a --- /dev/null +++ b/public/app/core/components/sidemenu/SideMenu.test.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { SideMenu } from './SideMenu'; +import appEvents from '../../app_events'; +import { contextSrv } from 'app/core/services/context_srv'; + +jest.mock('../../app_events', () => ({ + emit: jest.fn(), +})); + +jest.mock('app/core/services/context_srv', () => ({ + contextSrv: { + sidemenu: true, + user: {}, + isSignedIn: false, + isGrafanaAdmin: false, + isEditor: false, + hasEditPermissionFolders: false, + toggleSideMenu: jest.fn(), + }, +})); + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + loginUrl: '', + user: {}, + mainLinks: [], + bottomeLinks: [], + isSignedIn: false, + }, + propOverrides + ); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); + +describe('Functions', () => { + describe('toggle side menu', () => { + const wrapper = setup(); + const instance = wrapper.instance() as SideMenu; + instance.toggleSideMenu(); + + it('should call contextSrv.toggleSideMenu', () => { + expect(contextSrv.toggleSideMenu).toHaveBeenCalled(); + }); + + it('should emit toggle sidemenu event', () => { + expect(appEvents.emit).toHaveBeenCalledWith('toggle-sidemenu'); + }); + }); + + describe('toggle side menu on mobile', () => { + const wrapper = setup(); + const instance = wrapper.instance() as SideMenu; + instance.toggleSideMenuSmallBreakpoint(); + + it('should emit toggle sidemenu event', () => { + expect(appEvents.emit).toHaveBeenCalledWith('toggle-sidemenu-mobile'); + }); + }); +}); diff --git a/public/app/core/components/sidemenu/SideMenu.tsx b/public/app/core/components/sidemenu/SideMenu.tsx new file mode 100644 index 00000000000..0092c1e3842 --- /dev/null +++ b/public/app/core/components/sidemenu/SideMenu.tsx @@ -0,0 +1,32 @@ +import React, { PureComponent } from 'react'; +import appEvents from '../../app_events'; +import { contextSrv } from 'app/core/services/context_srv'; +import TopSection from './TopSection'; +import BottomSection from './BottomSection'; + +export class SideMenu extends PureComponent { + toggleSideMenu = () => { + contextSrv.toggleSideMenu(); + appEvents.emit('toggle-sidemenu'); + }; + + toggleSideMenuSmallBreakpoint = () => { + appEvents.emit('toggle-sidemenu-mobile'); + }; + + render() { + return [ +
    + graphana_logo +
    , +
    + + +  Close + +
    , + , + , + ]; + } +} diff --git a/public/app/core/components/sidemenu/SideMenuDropDown.test.tsx b/public/app/core/components/sidemenu/SideMenuDropDown.test.tsx new file mode 100644 index 00000000000..c98d78ca021 --- /dev/null +++ b/public/app/core/components/sidemenu/SideMenuDropDown.test.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import SideMenuDropDown from './SideMenuDropDown'; + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + link: { + text: 'link', + }, + }, + propOverrides + ); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render children', () => { + const wrapper = setup({ + link: { + text: 'link', + children: [{ id: 1 }, { id: 2 }, { id: 3 }], + }, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/sidemenu/SideMenuDropDown.tsx b/public/app/core/components/sidemenu/SideMenuDropDown.tsx new file mode 100644 index 00000000000..7cd7554f82c --- /dev/null +++ b/public/app/core/components/sidemenu/SideMenuDropDown.tsx @@ -0,0 +1,23 @@ +import React, { SFC } from 'react'; +import DropDownChild from './DropDownChild'; + +interface Props { + link: any; +} + +const SideMenuDropDown: SFC = props => { + const { link } = props; + return ( +
      +
    • + {link.text} +
      • + {link.children && + link.children.map((child, index) => { + return ; + })} +
    + ); +}; + +export default SideMenuDropDown; diff --git a/public/app/core/components/sidemenu/SignIn.test.tsx b/public/app/core/components/sidemenu/SignIn.test.tsx new file mode 100644 index 00000000000..c202926086f --- /dev/null +++ b/public/app/core/components/sidemenu/SignIn.test.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import SignIn from './SignIn'; + +describe('Render', () => { + it('should render component', () => { + const wrapper = shallow(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/sidemenu/SignIn.tsx b/public/app/core/components/sidemenu/SignIn.tsx new file mode 100644 index 00000000000..17dd913823a --- /dev/null +++ b/public/app/core/components/sidemenu/SignIn.tsx @@ -0,0 +1,23 @@ +import React, { SFC } from 'react'; + +const SignIn: SFC = () => { + const loginUrl = `login?redirect=${encodeURIComponent(window.location.pathname)}`; + return ( + + ); +}; + +export default SignIn; diff --git a/public/app/core/components/sidemenu/TopSection.test.tsx b/public/app/core/components/sidemenu/TopSection.test.tsx new file mode 100644 index 00000000000..6ed01479833 --- /dev/null +++ b/public/app/core/components/sidemenu/TopSection.test.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import TopSection from './TopSection'; + +jest.mock('../../config', () => ({ + bootData: { + navTree: [ + { id: '1', hideFromMenu: true }, + { id: '2', hideFromMenu: true }, + { id: '3', hideFromMenu: false }, + { id: '4', hideFromMenu: true }, + ], + }, +})); + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + mainLinks: [], + }, + propOverrides + ); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render items', () => { + const wrapper = setup({ + mainLinks: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }], + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/sidemenu/TopSection.tsx b/public/app/core/components/sidemenu/TopSection.tsx new file mode 100644 index 00000000000..c6bf5df8242 --- /dev/null +++ b/public/app/core/components/sidemenu/TopSection.tsx @@ -0,0 +1,19 @@ +import React, { SFC } from 'react'; +import _ from 'lodash'; +import TopSectionItem from './TopSectionItem'; +import config from '../../config'; + +const TopSection: SFC = () => { + const navTree = _.cloneDeep(config.bootData.navTree); + const mainLinks = _.filter(navTree, item => !item.hideFromMenu); + + return ( +
    + {mainLinks.map((link, index) => { + return ; + })} +
    + ); +}; + +export default TopSection; diff --git a/public/app/core/components/sidemenu/TopSectionItem.test.tsx b/public/app/core/components/sidemenu/TopSectionItem.test.tsx new file mode 100644 index 00000000000..e7d3c4b7c75 --- /dev/null +++ b/public/app/core/components/sidemenu/TopSectionItem.test.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import TopSectionItem from './TopSectionItem'; + +const setup = (propOverrides?: object) => { + const props = Object.assign( + { + link: {}, + }, + propOverrides + ); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/components/sidemenu/TopSectionItem.tsx b/public/app/core/components/sidemenu/TopSectionItem.tsx new file mode 100644 index 00000000000..4a207cc0df9 --- /dev/null +++ b/public/app/core/components/sidemenu/TopSectionItem.tsx @@ -0,0 +1,23 @@ +import React, { SFC } from 'react'; +import SideMenuDropDown from './SideMenuDropDown'; + +export interface Props { + link: any; +} + +const TopSectionItem: SFC = props => { + const { link } = props; + return ( +
    + + + + {link.img && } + + + {link.children && } +
    + ); +}; + +export default TopSectionItem; diff --git a/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap new file mode 100644 index 00000000000..f3181b617ad --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap @@ -0,0 +1,163 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render children 1`] = ` + +`; + +exports[`Render should render component 1`] = ` +
    + + + +
      +
    • + +
      • +
    +
    +`; + +exports[`Render should render organisation switcher 1`] = ` + +`; + +exports[`Render should render subtitle 1`] = ` +
    + + + +
      +
    • + + subtitle + +
      • +
    • + +
      • +
    +
    +`; diff --git a/public/app/core/components/sidemenu/__snapshots__/BottomSection.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/BottomSection.test.tsx.snap new file mode 100644 index 00000000000..ea92e8b7343 --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/BottomSection.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
    + + + + +
    +`; diff --git a/public/app/core/components/sidemenu/__snapshots__/DropDownChild.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/DropDownChild.test.tsx.snap new file mode 100644 index 00000000000..fcfd8ea936a --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/DropDownChild.test.tsx.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
  • + +
    • +`; + +exports[`Render should render icon if exists 1`] = ` +
  • + + + +
    • +`; diff --git a/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap new file mode 100644 index 00000000000..78e64209749 --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +Array [ +
    , +
    , + , + , +] +`; diff --git a/public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap new file mode 100644 index 00000000000..861168c1cc3 --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/SideMenuDropDown.test.tsx.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render children 1`] = ` +
      +
    • + + link + +
      • + + + +
    +`; + +exports[`Render should render component 1`] = ` +
      +
    • + + link + +
      • +
    +`; diff --git a/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap new file mode 100644 index 00000000000..ba21be63b51 --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` + +`; diff --git a/public/app/core/components/sidemenu/__snapshots__/TopSection.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/TopSection.test.tsx.snap new file mode 100644 index 00000000000..c78ec726302 --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/TopSection.test.tsx.snap @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
    + +
    +`; + +exports[`Render should render items 1`] = ` +
    + +
    +`; diff --git a/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap new file mode 100644 index 00000000000..f7ff56bff6b --- /dev/null +++ b/public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` + +`; diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html deleted file mode 100644 index 3a4ce11333e..00000000000 --- a/public/app/core/components/sidemenu/sidemenu.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - -  Close - - -
    -
    - - - - - - - -
    -
    - -
    -
    - - - - - - - - -
    - -
    - - - - - - - -
    -
    \ No newline at end of file diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts deleted file mode 100644 index f2798f874bd..00000000000 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ /dev/null @@ -1,89 +0,0 @@ -import _ from 'lodash'; -import config from 'app/core/config'; -import $ from 'jquery'; -import coreModule from '../../core_module'; -import appEvents from 'app/core/app_events'; - -export class SideMenuCtrl { - user: any; - mainLinks: any; - bottomNav: any; - loginUrl: string; - isSignedIn: boolean; - isOpenMobile: boolean; - - /** @ngInject */ - constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) { - this.isSignedIn = contextSrv.isSignedIn; - this.user = contextSrv.user; - - const navTree = _.cloneDeep(config.bootData.navTree); - this.mainLinks = _.filter(navTree, item => !item.hideFromMenu); - this.bottomNav = _.filter(navTree, item => item.hideFromMenu); - this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); - - if (contextSrv.user.orgCount > 1) { - const profileNode = _.find(this.bottomNav, { id: 'profile' }); - if (profileNode) { - profileNode.showOrgSwitcher = true; - } - } - - this.$scope.$on('$routeChangeSuccess', () => { - this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); - }); - } - - toggleSideMenu() { - this.contextSrv.toggleSideMenu(); - appEvents.emit('toggle-sidemenu'); - - this.$timeout(() => { - this.$rootScope.$broadcast('render'); - }); - } - - toggleSideMenuSmallBreakpoint() { - appEvents.emit('toggle-sidemenu-mobile'); - } - - switchOrg() { - this.$rootScope.appEvent('show-modal', { - templateHtml: '', - }); - } - - itemClicked(item, evt) { - if (item.url === '/shortcuts') { - appEvents.emit('show-modal', { - templateHtml: '', - }); - evt.preventDefault(); - } - } -} - -export function sideMenuDirective() { - return { - restrict: 'E', - templateUrl: 'public/app/core/components/sidemenu/sidemenu.html', - controller: SideMenuCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: {}, - link: function(scope, elem) { - // hack to hide dropdown menu - elem.on('click.dropdown', '.dropdown-menu a', function(evt) { - const menu = $(evt.target).parents('.dropdown-menu'); - const parent = menu.parent(); - menu.detach(); - - setTimeout(function() { - parent.append(menu); - }, 100); - }); - }, - }; -} - -coreModule.directive('sidemenu', sideMenuDirective); diff --git a/public/app/core/components/sql_part/sql_part.ts b/public/app/core/components/sql_part/sql_part.ts new file mode 100644 index 00000000000..a9b76b1ed2d --- /dev/null +++ b/public/app/core/components/sql_part/sql_part.ts @@ -0,0 +1,74 @@ +import _ from 'lodash'; + +export class SqlPartDef { + type: string; + style: string; + label: string; + params: any[]; + defaultParams: any[]; + wrapOpen: string; + wrapClose: string; + separator: string; + + constructor(options: any) { + this.type = options.type; + if (options.label) { + this.label = options.label; + } else { + this.label = this.type[0].toUpperCase() + this.type.substring(1) + ':'; + } + this.style = options.style; + if (this.style === 'function') { + this.wrapOpen = '('; + this.wrapClose = ')'; + this.separator = ', '; + } else { + this.wrapOpen = ' '; + this.wrapClose = ' '; + this.separator = ' '; + } + this.params = options.params; + this.defaultParams = options.defaultParams; + } +} + +export class SqlPart { + part: any; + def: SqlPartDef; + params: any[]; + label: string; + name: string; + datatype: string; + + constructor(part: any, def: any) { + this.part = part; + this.def = def; + if (!this.def) { + throw { message: 'Could not find sql part ' + part.type }; + } + + this.datatype = part.datatype; + + if (part.name) { + this.name = part.name; + this.label = def.label + ' ' + part.name; + } else { + this.name = ''; + this.label = def.label; + } + + part.params = part.params || _.clone(this.def.defaultParams); + this.params = part.params; + } + + updateParam(strValue, index) { + // handle optional parameters + if (strValue === '' && this.def.params[index].optional) { + this.params.splice(index, 1); + } else { + this.params[index] = strValue; + } + + this.part.params = this.params; + } +} diff --git a/public/app/core/components/sql_part/sql_part_editor.ts b/public/app/core/components/sql_part/sql_part_editor.ts new file mode 100644 index 00000000000..5d0f63a6953 --- /dev/null +++ b/public/app/core/components/sql_part/sql_part_editor.ts @@ -0,0 +1,199 @@ +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from 'app/core/core_module'; + +const template = ` +
    +{{part.label}} +{{part.def.wrapOpen}}{{part.def.wrapClose}} + +`; + +/** @ngInject */ +export function sqlPartEditorDirective($compile, templateSrv) { + const paramTemplate = ''; + + return { + restrict: 'E', + template: template, + scope: { + part: '=', + handleEvent: '&', + debounce: '@', + }, + link: function postLink($scope, elem) { + const part = $scope.part; + const partDef = part.def; + const $paramsContainer = elem.find('.query-part-parameters'); + const debounceLookup = $scope.debounce; + let cancelBlur = null; + + $scope.partActions = []; + + function clickFuncParam(this: any, paramIndex) { + /*jshint validthis:true */ + const $link = $(this); + const $input = $link.next(); + + $input.val(part.params[paramIndex]); + $input.css('width', $link.width() + 16 + 'px'); + + $link.hide(); + $input.show(); + $input.focus(); + $input.select(); + + const typeahead = $input.data('typeahead'); + if (typeahead) { + $input.val(''); + typeahead.lookup(); + } + } + + function inputBlur($input, paramIndex) { + cancelBlur = setTimeout(function() { + switchToLink($input, paramIndex); + }, 200); + } + + function switchToLink($input, paramIndex) { + /*jshint validthis:true */ + const $link = $input.prev(); + const newValue = $input.val(); + + if (newValue !== '' || part.def.params[paramIndex].optional) { + $link.html(templateSrv.highlightVariablesAsHtml(newValue)); + + part.updateParam($input.val(), paramIndex); + $scope.$apply(() => { + $scope.handleEvent({ $event: { name: 'part-param-changed' } }); + }); + } + + $input.hide(); + $link.show(); + } + + function inputKeyPress(this: any, paramIndex, e) { + /*jshint validthis:true */ + if (e.which === 13) { + switchToLink($(this), paramIndex); + } + } + + function inputKeyDown(this: any) { + /*jshint validthis:true */ + this.style.width = (3 + this.value.length) * 8 + 'px'; + } + + function addTypeahead($input, param, paramIndex) { + if (!param.options && !param.dynamicLookup) { + return; + } + + const typeaheadSource = function(query, callback) { + if (param.options) { + let options = param.options; + if (param.type === 'int') { + options = _.map(options, function(val) { + return val.toString(); + }); + } + return options; + } + + $scope.$apply(function() { + $scope.handleEvent({ $event: { name: 'get-param-options', param: param } }).then(function(result) { + const dynamicOptions = _.map(result, function(op) { + return op.value; + }); + + // add current value to dropdown if it's not in dynamicOptions + if (_.indexOf(dynamicOptions, part.params[paramIndex]) === -1) { + dynamicOptions.unshift(part.params[paramIndex]); + } + + callback(dynamicOptions); + }); + }); + }; + + $input.attr('data-provide', 'typeahead'); + + $input.typeahead({ + source: typeaheadSource, + minLength: 0, + items: 1000, + updater: function(value) { + if (value === part.params[paramIndex]) { + clearTimeout(cancelBlur); + $input.focus(); + return value; + } + return value; + }, + }); + + const typeahead = $input.data('typeahead'); + typeahead.lookup = function() { + this.query = this.$element.val() || ''; + const items = this.source(this.query, $.proxy(this.process, this)); + return items ? this.process(items) : items; + }; + + if (debounceLookup) { + typeahead.lookup = _.debounce(typeahead.lookup, 500, { leading: true }); + } + } + + $scope.showActionsMenu = function() { + $scope.handleEvent({ $event: { name: 'get-part-actions' } }).then(res => { + $scope.partActions = res; + }); + }; + + $scope.triggerPartAction = function(action) { + $scope.handleEvent({ $event: { name: 'action', action: action } }); + }; + + function addElementsAndCompile() { + _.each(partDef.params, function(param, index) { + if (param.optional && part.params.length <= index) { + return; + } + + if (index > 0) { + $('' + partDef.separator + '').appendTo($paramsContainer); + } + + const paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]); + const $paramLink = $('' + paramValue + ''); + const $input = $(paramTemplate); + + $paramLink.appendTo($paramsContainer); + $input.appendTo($paramsContainer); + + $input.blur(_.partial(inputBlur, $input, index)); + $input.keyup(inputKeyDown); + $input.keypress(_.partial(inputKeyPress, index)); + $paramLink.click(_.partial(clickFuncParam, index)); + + addTypeahead($input, param, index); + }); + } + + function relink() { + $paramsContainer.empty(); + addElementsAndCompile(); + } + + relink(); + }, + }; +} + +coreModule.directive('sqlPartEditor', sqlPartEditorDirective); diff --git a/public/app/core/config.ts b/public/app/core/config.ts index 1428dbec74c..3b8a087132c 100644 --- a/public/app/core/config.ts +++ b/public/app/core/config.ts @@ -33,9 +33,9 @@ export class Settings { constructor(options) { const defaults = { datasources: {}, - window_title_prefix: 'Grafana - ', + windowTitlePrefix: 'Grafana - ', panels: {}, - new_panel_title: 'Panel Title', + newPanelTitle: 'Panel Title', playlist_timespan: '1m', unsaved_changes_warning: true, appSubUrl: '', diff --git a/public/app/core/controllers/invited_ctrl.ts b/public/app/core/controllers/invited_ctrl.ts index e9127af26b7..63f9d975c1f 100644 --- a/public/app/core/controllers/invited_ctrl.ts +++ b/public/app/core/controllers/invited_ctrl.ts @@ -16,8 +16,8 @@ export class InvitedCtrl { }, }; - $scope.init = function() { - backendSrv.get('/api/user/invite/' + $routeParams.code).then(function(invite) { + $scope.init = () => { + backendSrv.get('/api/user/invite/' + $routeParams.code).then(invite => { $scope.formModel.name = invite.name; $scope.formModel.email = invite.email; $scope.formModel.username = invite.email; @@ -28,12 +28,12 @@ export class InvitedCtrl { }); }; - $scope.submit = function() { + $scope.submit = () => { if (!$scope.inviteForm.$valid) { return; } - backendSrv.post('/api/user/invite/complete', $scope.formModel).then(function() { + backendSrv.post('/api/user/invite/complete', $scope.formModel).then(() => { window.location.href = config.appSubUrl + '/'; }); }; diff --git a/public/app/core/controllers/login_ctrl.ts b/public/app/core/controllers/login_ctrl.ts index 737596fcdf6..de4e3415dfb 100644 --- a/public/app/core/controllers/login_ctrl.ts +++ b/public/app/core/controllers/login_ctrl.ts @@ -29,7 +29,7 @@ export class LoginCtrl { $scope.loginMode = true; $scope.submitBtnText = 'Log in'; - $scope.init = function() { + $scope.init = () => { $scope.$watch('loginMode', $scope.loginModeChanged); if (config.loginError) { @@ -37,7 +37,7 @@ export class LoginCtrl { } }; - $scope.submit = function() { + $scope.submit = () => { if ($scope.loginMode) { $scope.login(); } else { @@ -45,7 +45,7 @@ export class LoginCtrl { } }; - $scope.changeView = function() { + $scope.changeView = () => { const loginView = document.querySelector('#login-view'); const changePasswordView = document.querySelector('#change-password-view'); @@ -65,7 +65,7 @@ export class LoginCtrl { }, 400); }; - $scope.changePassword = function() { + $scope.changePassword = () => { $scope.command.oldPassword = 'admin'; if ($scope.command.newPassword !== $scope.command.confirmNew) { @@ -73,25 +73,25 @@ export class LoginCtrl { return; } - backendSrv.put('/api/user/password', $scope.command).then(function() { + backendSrv.put('/api/user/password', $scope.command).then(() => { $scope.toGrafana(); }); }; - $scope.skip = function() { + $scope.skip = () => { $scope.toGrafana(); }; - $scope.loginModeChanged = function(newValue) { + $scope.loginModeChanged = newValue => { $scope.submitBtnText = newValue ? 'Log in' : 'Sign up'; }; - $scope.signUp = function() { + $scope.signUp = () => { if (!$scope.loginForm.$valid) { return; } - backendSrv.post('/api/user/signup', $scope.formModel).then(function(result) { + backendSrv.post('/api/user/signup', $scope.formModel).then(result => { if (result.status === 'SignUpCreated') { $location.path('/signup').search({ email: $scope.formModel.email }); } else { @@ -100,7 +100,7 @@ export class LoginCtrl { }); }; - $scope.login = function() { + $scope.login = () => { delete $scope.loginError; if (!$scope.loginForm.$valid) { @@ -110,7 +110,7 @@ export class LoginCtrl { backendSrv .post('/login', $scope.formModel) - .then(function(result) { + .then(result => { $scope.result = result; if ($scope.formModel.password !== 'admin' || $scope.ldapEnabled || $scope.authProxyEnabled) { @@ -125,7 +125,7 @@ export class LoginCtrl { }); }; - $scope.toGrafana = function() { + $scope.toGrafana = () => { const params = $location.search(); if (params.redirect && params.redirect[0] === '/') { diff --git a/public/app/core/controllers/reset_password_ctrl.ts b/public/app/core/controllers/reset_password_ctrl.ts index 244f0307150..933655399e8 100644 --- a/public/app/core/controllers/reset_password_ctrl.ts +++ b/public/app/core/controllers/reset_password_ctrl.ts @@ -22,16 +22,16 @@ export class ResetPasswordCtrl { }, }; - $scope.sendResetEmail = function() { + $scope.sendResetEmail = () => { if (!$scope.sendResetForm.$valid) { return; } - backendSrv.post('/api/user/password/send-reset-email', $scope.formModel).then(function() { + backendSrv.post('/api/user/password/send-reset-email', $scope.formModel).then(() => { $scope.mode = 'email-sent'; }); }; - $scope.submitReset = function() { + $scope.submitReset = () => { if (!$scope.resetForm.$valid) { return; } @@ -41,7 +41,7 @@ export class ResetPasswordCtrl { return; } - backendSrv.post('/api/user/password/reset', $scope.formModel).then(function() { + backendSrv.post('/api/user/password/reset', $scope.formModel).then(() => { $location.path('login'); }); }; diff --git a/public/app/core/core.ts b/public/app/core/core.ts index d6088283f3b..173d6b80b15 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -20,7 +20,6 @@ import './services/search_srv'; import './services/ng_react'; import { grafanaAppDirective } from './components/grafana_app'; -import { sideMenuDirective } from './components/sidemenu/sidemenu'; import { searchDirective } from './components/search/search'; import { infoPopover } from './components/info_popover'; import { navbarDirective } from './components/navbar/navbar'; @@ -31,6 +30,7 @@ import { layoutSelector } from './components/layout_selector/layout_selector'; import { switchDirective } from './components/switch'; import { dashboardSelector } from './components/dashboard_selector'; import { queryPartEditorDirective } from './components/query_part/query_part_editor'; +import { sqlPartEditorDirective } from './components/sql_part/sql_part_editor'; import { formDropdownDirective } from './components/form_dropdown/form_dropdown'; import 'app/core/controllers/all'; import 'app/core/services/all'; @@ -61,7 +61,6 @@ export { arrayJoin, coreModule, grafanaAppDirective, - sideMenuDirective, navbarDirective, searchDirective, liveSrv, @@ -72,6 +71,7 @@ export { appEvents, dashboardSelector, queryPartEditorDirective, + sqlPartEditorDirective, colors, formDropdownDirective, assignModelProperties, diff --git a/public/app/core/filters/filters.ts b/public/app/core/filters/filters.ts index 745873369c0..c4dbf6b7535 100644 --- a/public/app/core/filters/filters.ts +++ b/public/app/core/filters/filters.ts @@ -3,22 +3,22 @@ import angular from 'angular'; import moment from 'moment'; import coreModule from '../core_module'; -coreModule.filter('stringSort', function() { - return function(input) { +coreModule.filter('stringSort', () => { + return input => { return input.sort(); }; }); -coreModule.filter('slice', function() { - return function(arr, start, end) { +coreModule.filter('slice', () => { + return (arr, start, end) => { if (!_.isUndefined(arr)) { return arr.slice(start, end); } }; }); -coreModule.filter('stringify', function() { - return function(arr) { +coreModule.filter('stringify', () => { + return arr => { if (_.isObject(arr) && !_.isArray(arr)) { return angular.toJson(arr); } else { @@ -27,8 +27,8 @@ coreModule.filter('stringify', function() { }; }); -coreModule.filter('moment', function() { - return function(date, mode) { +coreModule.filter('moment', () => { + return (date, mode) => { switch (mode) { case 'ago': return moment(date).fromNow(); @@ -37,8 +37,8 @@ coreModule.filter('moment', function() { }; }); -coreModule.filter('noXml', function() { - const noXml = function(text) { +coreModule.filter('noXml', () => { + const noXml = text => { return _.isString(text) ? text .replace(/&/g, '&') @@ -48,14 +48,14 @@ coreModule.filter('noXml', function() { .replace(/"/g, '"') : text; }; - return function(text) { + return text => { return _.isArray(text) ? _.map(text, noXml) : noXml(text); }; }); /** @ngInject */ function interpolateTemplateVars(templateSrv) { - const filterFunc: any = function(text, scope) { + const filterFunc: any = (text, scope) => { let scopedVars; if (scope.ctrl) { scopedVars = (scope.ctrl.panel || scope.ctrl.row).scopedVars; diff --git a/public/app/core/lodash_extended.ts b/public/app/core/lodash_extended.ts index 1a8820fb0db..1fc7d7c341a 100644 --- a/public/app/core/lodash_extended.ts +++ b/public/app/core/lodash_extended.ts @@ -4,7 +4,7 @@ import _ from 'lodash'; Mixins :) */ _.mixin({ - move: function(array, fromIndex, toIndex) { + move: (array, fromIndex, toIndex) => { array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]); return array; }, diff --git a/public/app/core/services/alert_srv.ts b/public/app/core/services/alert_srv.ts index 19ad81667d7..2d447651b75 100644 --- a/public/app/core/services/alert_srv.ts +++ b/public/app/core/services/alert_srv.ts @@ -70,7 +70,7 @@ export class AlertSrv { const newAlertJson = angular.toJson(newAlert); // remove same alert if it already exists - _.remove(this.list, function(value) { + _.remove(this.list, value => { return angular.toJson(value) === newAlertJson; }); diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index c2742c82958..c40fbff2ab2 100644 --- a/public/app/core/services/context_srv.ts +++ b/public/app/core/services/context_srv.ts @@ -8,6 +8,8 @@ export class User { isSignedIn: any; orgRole: any; orgId: number; + orgName: string; + orgCount: number; timezone: string; helpFlags1: number; lightTheme: boolean; diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts index 631cc274021..3a00589c251 100644 --- a/public/app/core/services/popover_srv.ts +++ b/public/app/core/services/popover_srv.ts @@ -6,13 +6,13 @@ import Drop from 'tether-drop'; function popoverSrv(this: any, $compile, $rootScope, $timeout) { let openDrop = null; - this.close = function() { + this.close = () => { if (openDrop) { openDrop.close(); } }; - this.show = function(options) { + this.show = options => { if (openDrop) { openDrop.close(); openDrop = null; @@ -68,7 +68,7 @@ function popoverSrv(this: any, $compile, $rootScope, $timeout) { }, 100); // return close function - return function() { + return () => { if (drop) { drop.close(); } diff --git a/public/app/core/services/segment_srv.ts b/public/app/core/services/segment_srv.ts index f03f5eca546..e7653ec5cf7 100644 --- a/public/app/core/services/segment_srv.ts +++ b/public/app/core/services/segment_srv.ts @@ -42,48 +42,48 @@ export function uiSegmentSrv(this: any, $sce, templateSrv) { } }; - this.newSelectMeasurement = function() { + this.newSelectMeasurement = () => { return new MetricSegment({ value: 'select measurement', fake: true }); }; - this.newFake = function(text, type, cssClass) { + this.newFake = (text, type, cssClass) => { return new MetricSegment({ value: text, fake: true, type: type, cssClass: cssClass }); }; - this.newSegment = function(options) { + this.newSegment = options => { return new MetricSegment(options); }; - this.newKey = function(key) { + this.newKey = key => { return new MetricSegment({ value: key, type: 'key', cssClass: 'query-segment-key' }); }; - this.newKeyValue = function(value) { + this.newKeyValue = value => { return new MetricSegment({ value: value, type: 'value', cssClass: 'query-segment-value' }); }; - this.newCondition = function(condition) { + this.newCondition = condition => { return new MetricSegment({ value: condition, type: 'condition', cssClass: 'query-keyword' }); }; - this.newOperator = function(op) { + this.newOperator = op => { return new MetricSegment({ value: op, type: 'operator', cssClass: 'query-segment-operator' }); }; - this.newOperators = function(ops) { - return _.map(ops, function(op) { + this.newOperators = ops => { + return _.map(ops, op => { return new MetricSegment({ value: op, type: 'operator', cssClass: 'query-segment-operator' }); }); }; - this.transformToSegments = function(addTemplateVars, variableTypeFilter) { - return function(results) { - const segments = _.map(results, function(segment) { + this.transformToSegments = (addTemplateVars, variableTypeFilter) => { + return results => { + const segments = _.map(results, segment => { return self.newSegment({ value: segment.text, expandable: segment.expandable }); }); if (addTemplateVars) { - _.each(templateSrv.variables, function(variable) { + _.each(templateSrv.variables, variable => { if (variableTypeFilter === void 0 || variableTypeFilter === variable.type) { segments.unshift(self.newSegment({ type: 'value', value: '$' + variable.name, expandable: true })); } @@ -94,11 +94,11 @@ export function uiSegmentSrv(this: any, $sce, templateSrv) { }; }; - this.newSelectMetric = function() { + this.newSelectMetric = () => { return new MetricSegment({ value: 'select metric', fake: true }); }; - this.newPlusButton = function() { + this.newPlusButton = () => { return new MetricSegment({ fake: true, html: '', diff --git a/public/app/core/services/util_srv.ts b/public/app/core/services/util_srv.ts index da598fbb127..2b7538f1be2 100644 --- a/public/app/core/services/util_srv.ts +++ b/public/app/core/services/util_srv.ts @@ -44,7 +44,7 @@ export class UtilSrv { backdrop: options.backdrop, }); - Promise.resolve(modal).then(function(modalEl) { + Promise.resolve(modal).then(modalEl => { modalEl.modal('show'); }); } @@ -52,12 +52,12 @@ export class UtilSrv { showConfirmModal(payload) { const scope = this.$rootScope.$new(); - scope.onConfirm = function() { + scope.onConfirm = () => { payload.onConfirm(); scope.dismiss(); }; - scope.updateConfirmText = function(value) { + scope.updateConfirmText = value => { scope.confirmTextValid = payload.confirmText.toLowerCase() === value.toLowerCase(); }; diff --git a/public/app/core/specs/backend_srv.test.ts b/public/app/core/specs/backend_srv.test.ts index e9cd5973d36..2e35b87deb4 100644 --- a/public/app/core/specs/backend_srv.test.ts +++ b/public/app/core/specs/backend_srv.test.ts @@ -1,7 +1,7 @@ import { BackendSrv } from 'app/core/services/backend_srv'; jest.mock('app/core/store'); -describe('backend_srv', function() { +describe('backend_srv', () => { const _httpBackend = options => { if (options.url === 'gateway-error') { return Promise.reject({ status: 502 }); diff --git a/public/app/core/specs/datemath.test.ts b/public/app/core/specs/datemath.test.ts index 8197f01c872..bbc54970411 100644 --- a/public/app/core/specs/datemath.test.ts +++ b/public/app/core/specs/datemath.test.ts @@ -91,11 +91,11 @@ describe('DateMath', () => { }); _.each(spans, span => { - it('should round now to the beginning of the ' + span, function() { + it('should round now to the beginning of the ' + span, () => { expect(dateMath.parse('now/' + span).format(format)).toEqual(now.startOf(span).format(format)); }); - it('should round now to the end of the ' + span, function() { + it('should round now to the end of the ' + span, () => { expect(dateMath.parse('now/' + span, true).format(format)).toEqual(now.endOf(span).format(format)); }); }); @@ -114,18 +114,18 @@ describe('DateMath', () => { }); }); - describe('relative time to date parsing', function() { - it('should handle negative time', function() { + describe('relative time to date parsing', () => { + it('should handle negative time', () => { const date = dateMath.parseDateMath('-2d', moment([2014, 1, 5])); expect(date.valueOf()).toEqual(moment([2014, 1, 3]).valueOf()); }); - it('should handle multiple math expressions', function() { + it('should handle multiple math expressions', () => { const date = dateMath.parseDateMath('-2d-6h', moment([2014, 1, 5])); expect(date.valueOf()).toEqual(moment([2014, 1, 2, 18]).valueOf()); }); - it('should return false when invalid expression', function() { + it('should return false when invalid expression', () => { const date = dateMath.parseDateMath('2', moment([2014, 1, 5])); expect(date).toEqual(undefined); }); diff --git a/public/app/core/specs/file_export.test.ts b/public/app/core/specs/file_export.test.ts index ced94fcdbc0..52ec4ccea19 100644 --- a/public/app/core/specs/file_export.test.ts +++ b/public/app/core/specs/file_export.test.ts @@ -101,7 +101,7 @@ describe('file_export', () => { expect(returnedText).toBe(expectedText); }); - it('should decode HTML encoded characters', function() { + it('should decode HTML encoded characters', () => { const inputTable = { columns: [{ text: 'string_value' }], rows: [ diff --git a/public/app/core/specs/kbn.test.ts b/public/app/core/specs/kbn.test.ts index b4072adf7cf..dfa665e3205 100644 --- a/public/app/core/specs/kbn.test.ts +++ b/public/app/core/specs/kbn.test.ts @@ -2,27 +2,27 @@ import kbn from '../utils/kbn'; import * as dateMath from '../utils/datemath'; import moment from 'moment'; -describe('unit format menu', function() { +describe('unit format menu', () => { const menu = kbn.getUnitFormats(); - menu.map(function(submenu) { - describe('submenu ' + submenu.text, function() { - it('should have a title', function() { + menu.map(submenu => { + describe('submenu ' + submenu.text, () => { + it('should have a title', () => { expect(typeof submenu.text).toBe('string'); }); - it('should have a submenu', function() { + it('should have a submenu', () => { expect(Array.isArray(submenu.submenu)).toBe(true); }); - submenu.submenu.map(function(entry) { - describe('entry ' + entry.text, function() { - it('should have a title', function() { + submenu.submenu.map(entry => { + describe('entry ' + entry.text, () => { + it('should have a title', () => { expect(typeof entry.text).toBe('string'); }); - it('should have a format', function() { + it('should have a format', () => { expect(typeof entry.value).toBe('string'); }); - it('should have a valid format', function() { + it('should have a valid format', () => { expect(typeof kbn.valueFormats[entry.value]).toBe('function'); }); }); @@ -32,8 +32,8 @@ describe('unit format menu', function() { }); function describeValueFormat(desc, value, tickSize, tickDecimals, result) { - describe('value format: ' + desc, function() { - it('should translate ' + value + ' as ' + result, function() { + describe('value format: ' + desc, () => { + it('should translate ' + value + ' as ' + result, () => { const scaledDecimals = tickDecimals - Math.floor(Math.log(tickSize) / Math.LN10); const str = kbn.valueFormats[desc](value, tickDecimals, scaledDecimals); expect(str).toBe(result); @@ -100,85 +100,85 @@ describeValueFormat('d', 3, 1, 0, '3 day'); describeValueFormat('d', 245, 100, 0, '35 week'); describeValueFormat('d', 2456, 10, 0, '6.73 year'); -describe('date time formats', function() { +describe('date time formats', () => { const epoch = 1505634997920; const utcTime = moment.utc(epoch); const browserTime = moment(epoch); - it('should format as iso date', function() { + it('should format as iso date', () => { const expected = browserTime.format('YYYY-MM-DD HH:mm:ss'); const actual = kbn.valueFormats.dateTimeAsIso(epoch); expect(actual).toBe(expected); }); - it('should format as iso date (in UTC)', function() { + it('should format as iso date (in UTC)', () => { const expected = utcTime.format('YYYY-MM-DD HH:mm:ss'); const actual = kbn.valueFormats.dateTimeAsIso(epoch, true); expect(actual).toBe(expected); }); - it('should format as iso date and skip date when today', function() { + it('should format as iso date and skip date when today', () => { const now = moment(); const expected = now.format('HH:mm:ss'); const actual = kbn.valueFormats.dateTimeAsIso(now.valueOf(), false); expect(actual).toBe(expected); }); - it('should format as iso date (in UTC) and skip date when today', function() { + it('should format as iso date (in UTC) and skip date when today', () => { const now = moment.utc(); const expected = now.format('HH:mm:ss'); const actual = kbn.valueFormats.dateTimeAsIso(now.valueOf(), true); expect(actual).toBe(expected); }); - it('should format as US date', function() { + it('should format as US date', () => { const expected = browserTime.format('MM/DD/YYYY h:mm:ss a'); const actual = kbn.valueFormats.dateTimeAsUS(epoch, false); expect(actual).toBe(expected); }); - it('should format as US date (in UTC)', function() { + it('should format as US date (in UTC)', () => { const expected = utcTime.format('MM/DD/YYYY h:mm:ss a'); const actual = kbn.valueFormats.dateTimeAsUS(epoch, true); expect(actual).toBe(expected); }); - it('should format as US date and skip date when today', function() { + it('should format as US date and skip date when today', () => { const now = moment(); const expected = now.format('h:mm:ss a'); const actual = kbn.valueFormats.dateTimeAsUS(now.valueOf(), false); expect(actual).toBe(expected); }); - it('should format as US date (in UTC) and skip date when today', function() { + it('should format as US date (in UTC) and skip date when today', () => { const now = moment.utc(); const expected = now.format('h:mm:ss a'); const actual = kbn.valueFormats.dateTimeAsUS(now.valueOf(), true); expect(actual).toBe(expected); }); - it('should format as from now with days', function() { + it('should format as from now with days', () => { const daysAgo = moment().add(-7, 'd'); const expected = '7 days ago'; const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), false); expect(actual).toBe(expected); }); - it('should format as from now with days (in UTC)', function() { + it('should format as from now with days (in UTC)', () => { const daysAgo = moment.utc().add(-7, 'd'); const expected = '7 days ago'; const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), true); expect(actual).toBe(expected); }); - it('should format as from now with minutes', function() { + it('should format as from now with minutes', () => { const daysAgo = moment().add(-2, 'm'); const expected = '2 minutes ago'; const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), false); expect(actual).toBe(expected); }); - it('should format as from now with minutes (in UTC)', function() { + it('should format as from now with minutes (in UTC)', () => { const daysAgo = moment.utc().add(-2, 'm'); const expected = '2 minutes ago'; const actual = kbn.valueFormats.dateTimeFromNow(daysAgo.valueOf(), true); @@ -186,92 +186,92 @@ describe('date time formats', function() { }); }); -describe('kbn.toFixed and negative decimals', function() { - it('should treat as zero decimals', function() { +describe('kbn.toFixed and negative decimals', () => { + it('should treat as zero decimals', () => { const str = kbn.toFixed(186.123, -2); expect(str).toBe('186'); }); }); -describe('kbn ms format when scaled decimals is null do not use it', function() { - it('should use specified decimals', function() { +describe('kbn ms format when scaled decimals is null do not use it', () => { + it('should use specified decimals', () => { const str = kbn.valueFormats['ms'](10000086.123, 1, null); expect(str).toBe('2.8 hour'); }); }); -describe('kbn kbytes format when scaled decimals is null do not use it', function() { - it('should use specified decimals', function() { +describe('kbn kbytes format when scaled decimals is null do not use it', () => { + it('should use specified decimals', () => { const str = kbn.valueFormats['kbytes'](10000000, 3, null); expect(str).toBe('9.537 GiB'); }); }); -describe('kbn deckbytes format when scaled decimals is null do not use it', function() { - it('should use specified decimals', function() { +describe('kbn deckbytes format when scaled decimals is null do not use it', () => { + it('should use specified decimals', () => { const str = kbn.valueFormats['deckbytes'](10000000, 3, null); expect(str).toBe('10.000 GB'); }); }); -describe('kbn roundValue', function() { - it('should should handle null value', function() { +describe('kbn roundValue', () => { + it('should should handle null value', () => { const str = kbn.roundValue(null, 2); expect(str).toBe(null); }); - it('should round value', function() { + it('should round value', () => { const str = kbn.roundValue(200.877, 2); expect(str).toBe(200.88); }); }); -describe('calculateInterval', function() { - it('1h 100 resultion', function() { +describe('calculateInterval', () => { + it('1h 100 resultion', () => { const range = { from: dateMath.parse('now-1h'), to: dateMath.parse('now') }; const res = kbn.calculateInterval(range, 100, null); expect(res.interval).toBe('30s'); }); - it('10m 1600 resolution', function() { + it('10m 1600 resolution', () => { const range = { from: dateMath.parse('now-10m'), to: dateMath.parse('now') }; const res = kbn.calculateInterval(range, 1600, null); expect(res.interval).toBe('500ms'); expect(res.intervalMs).toBe(500); }); - it('fixed user min interval', function() { + it('fixed user min interval', () => { const range = { from: dateMath.parse('now-10m'), to: dateMath.parse('now') }; const res = kbn.calculateInterval(range, 1600, '10s'); expect(res.interval).toBe('10s'); expect(res.intervalMs).toBe(10000); }); - it('short time range and user low limit', function() { + it('short time range and user low limit', () => { const range = { from: dateMath.parse('now-10m'), to: dateMath.parse('now') }; const res = kbn.calculateInterval(range, 1600, '>10s'); expect(res.interval).toBe('10s'); }); - it('large time range and user low limit', function() { + it('large time range and user low limit', () => { const range = { from: dateMath.parse('now-14d'), to: dateMath.parse('now') }; const res = kbn.calculateInterval(range, 1000, '>10s'); expect(res.interval).toBe('20m'); }); - it('10s 900 resolution and user low limit in ms', function() { + it('10s 900 resolution and user low limit in ms', () => { const range = { from: dateMath.parse('now-10s'), to: dateMath.parse('now') }; const res = kbn.calculateInterval(range, 900, '>15ms'); expect(res.interval).toBe('15ms'); }); - it('1d 1 resolution', function() { + it('1d 1 resolution', () => { const range = { from: dateMath.parse('now-1d'), to: dateMath.parse('now') }; const res = kbn.calculateInterval(range, 1, null); expect(res.interval).toBe('1d'); expect(res.intervalMs).toBe(86400000); }); - it('86399s 1 resolution', function() { + it('86399s 1 resolution', () => { const range = { from: dateMath.parse('now-86390s'), to: dateMath.parse('now'), @@ -282,140 +282,140 @@ describe('calculateInterval', function() { }); }); -describe('hex', function() { - it('positive integer', function() { +describe('hex', () => { + it('positive integer', () => { const str = kbn.valueFormats.hex(100, 0); expect(str).toBe('64'); }); - it('negative integer', function() { + it('negative integer', () => { const str = kbn.valueFormats.hex(-100, 0); expect(str).toBe('-64'); }); - it('null', function() { + it('null', () => { const str = kbn.valueFormats.hex(null, 0); expect(str).toBe(''); }); - it('positive float', function() { + it('positive float', () => { const str = kbn.valueFormats.hex(50.52, 1); expect(str).toBe('32.8'); }); - it('negative float', function() { + it('negative float', () => { const str = kbn.valueFormats.hex(-50.333, 2); expect(str).toBe('-32.547AE147AE14'); }); }); -describe('hex 0x', function() { - it('positive integeter', function() { +describe('hex 0x', () => { + it('positive integeter', () => { const str = kbn.valueFormats.hex0x(7999, 0); expect(str).toBe('0x1F3F'); }); - it('negative integer', function() { + it('negative integer', () => { const str = kbn.valueFormats.hex0x(-584, 0); expect(str).toBe('-0x248'); }); - it('null', function() { + it('null', () => { const str = kbn.valueFormats.hex0x(null, 0); expect(str).toBe(''); }); - it('positive float', function() { + it('positive float', () => { const str = kbn.valueFormats.hex0x(74.443, 3); expect(str).toBe('0x4A.716872B020C4'); }); - it('negative float', function() { + it('negative float', () => { const str = kbn.valueFormats.hex0x(-65.458, 1); expect(str).toBe('-0x41.8'); }); }); -describe('duration', function() { - it('null', function() { +describe('duration', () => { + it('null', () => { const str = kbn.toDuration(null, 0, 'millisecond'); expect(str).toBe(''); }); - it('0 milliseconds', function() { + it('0 milliseconds', () => { const str = kbn.toDuration(0, 0, 'millisecond'); expect(str).toBe('0 milliseconds'); }); - it('1 millisecond', function() { + it('1 millisecond', () => { const str = kbn.toDuration(1, 0, 'millisecond'); expect(str).toBe('1 millisecond'); }); - it('-1 millisecond', function() { + it('-1 millisecond', () => { const str = kbn.toDuration(-1, 0, 'millisecond'); expect(str).toBe('1 millisecond ago'); }); - it('seconds', function() { + it('seconds', () => { const str = kbn.toDuration(1, 0, 'second'); expect(str).toBe('1 second'); }); - it('minutes', function() { + it('minutes', () => { const str = kbn.toDuration(1, 0, 'minute'); expect(str).toBe('1 minute'); }); - it('hours', function() { + it('hours', () => { const str = kbn.toDuration(1, 0, 'hour'); expect(str).toBe('1 hour'); }); - it('days', function() { + it('days', () => { const str = kbn.toDuration(1, 0, 'day'); expect(str).toBe('1 day'); }); - it('weeks', function() { + it('weeks', () => { const str = kbn.toDuration(1, 0, 'week'); expect(str).toBe('1 week'); }); - it('months', function() { + it('months', () => { const str = kbn.toDuration(1, 0, 'month'); expect(str).toBe('1 month'); }); - it('years', function() { + it('years', () => { const str = kbn.toDuration(1, 0, 'year'); expect(str).toBe('1 year'); }); - it('decimal days', function() { + it('decimal days', () => { const str = kbn.toDuration(1.5, 2, 'day'); expect(str).toBe('1 day, 12 hours, 0 minutes'); }); - it('decimal months', function() { + it('decimal months', () => { const str = kbn.toDuration(1.5, 3, 'month'); expect(str).toBe('1 month, 2 weeks, 1 day, 0 hours'); }); - it('no decimals', function() { + it('no decimals', () => { const str = kbn.toDuration(38898367008, 0, 'millisecond'); expect(str).toBe('1 year'); }); - it('1 decimal', function() { + it('1 decimal', () => { const str = kbn.toDuration(38898367008, 1, 'millisecond'); expect(str).toBe('1 year, 2 months'); }); - it('too many decimals', function() { + it('too many decimals', () => { const str = kbn.toDuration(38898367008, 20, 'millisecond'); expect(str).toBe('1 year, 2 months, 3 weeks, 4 days, 5 hours, 6 minutes, 7 seconds, 8 milliseconds'); }); - it('floating point error', function() { + it('floating point error', () => { const str = kbn.toDuration(36993906007, 8, 'millisecond'); expect(str).toBe('1 year, 2 months, 0 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds'); }); }); -describe('volume', function() { - it('1000m3', function() { +describe('volume', () => { + it('1000m3', () => { const str = kbn.valueFormats['m3'](1000, 1, null); expect(str).toBe('1000.0 m³'); }); }); -describe('hh:mm:ss', function() { - it('00:04:06', function() { +describe('hh:mm:ss', () => { + it('00:04:06', () => { const str = kbn.valueFormats['dthms'](246, 1); expect(str).toBe('00:04:06'); }); - it('24:00:00', function() { + it('24:00:00', () => { const str = kbn.valueFormats['dthms'](86400, 1); expect(str).toBe('24:00:00'); }); - it('6824413:53:20', function() { + it('6824413:53:20', () => { const str = kbn.valueFormats['dthms'](24567890000, 1); expect(str).toBe('6824413:53:20'); }); diff --git a/public/app/core/specs/time_series.test.ts b/public/app/core/specs/time_series.test.ts index 3c0fc42be65..6cf7399c059 100644 --- a/public/app/core/specs/time_series.test.ts +++ b/public/app/core/specs/time_series.test.ts @@ -1,33 +1,33 @@ import TimeSeries from 'app/core/time_series2'; import { updateLegendValues } from 'app/core/time_series2'; -describe('TimeSeries', function() { +describe('TimeSeries', () => { let points, series; const yAxisFormats = ['short', 'ms']; let testData; - beforeEach(function() { + beforeEach(() => { testData = { alias: 'test', datapoints: [[1, 2], [null, 3], [10, 4], [8, 5]], }; }); - describe('when getting flot pairs', function() { - it('with connected style, should ignore nulls', function() { + describe('when getting flot pairs', () => { + it('with connected style, should ignore nulls', () => { series = new TimeSeries(testData); points = series.getFlotPairs('connected', yAxisFormats); expect(points.length).toBe(3); }); - it('with null as zero style, should replace nulls with zero', function() { + it('with null as zero style, should replace nulls with zero', () => { series = new TimeSeries(testData); points = series.getFlotPairs('null as zero', yAxisFormats); expect(points.length).toBe(4); expect(points[1][1]).toBe(0); }); - it('if last is null current should pick next to last', function() { + it('if last is null current should pick next to last', () => { series = new TimeSeries({ datapoints: [[10, 1], [null, 2]], }); @@ -35,7 +35,7 @@ describe('TimeSeries', function() { expect(series.stats.current).toBe(10); }); - it('max value should work for negative values', function() { + it('max value should work for negative values', () => { series = new TimeSeries({ datapoints: [[-10, 1], [-4, 2]], }); @@ -43,13 +43,13 @@ describe('TimeSeries', function() { expect(series.stats.max).toBe(-4); }); - it('average value should ignore nulls', function() { + it('average value should ignore nulls', () => { series = new TimeSeries(testData); series.getFlotPairs('null', yAxisFormats); expect(series.stats.avg).toBe(6.333333333333333); }); - it('the delta value should account for nulls', function() { + it('the delta value should account for nulls', () => { series = new TimeSeries({ datapoints: [[1, 2], [3, 3], [null, 4], [10, 5], [15, 6]], }); @@ -57,7 +57,7 @@ describe('TimeSeries', function() { expect(series.stats.delta).toBe(14); }); - it('the delta value should account for nulls on first', function() { + it('the delta value should account for nulls on first', () => { series = new TimeSeries({ datapoints: [[null, 2], [1, 3], [10, 4], [15, 5]], }); @@ -65,7 +65,7 @@ describe('TimeSeries', function() { expect(series.stats.delta).toBe(14); }); - it('the delta value should account for nulls on last', function() { + it('the delta value should account for nulls on last', () => { series = new TimeSeries({ datapoints: [[1, 2], [5, 3], [10, 4], [null, 5]], }); @@ -73,7 +73,7 @@ describe('TimeSeries', function() { expect(series.stats.delta).toBe(9); }); - it('the delta value should account for resets', function() { + it('the delta value should account for resets', () => { series = new TimeSeries({ datapoints: [[1, 2], [5, 3], [10, 4], [0, 5], [10, 6]], }); @@ -81,7 +81,7 @@ describe('TimeSeries', function() { expect(series.stats.delta).toBe(19); }); - it('the delta value should account for resets on last', function() { + it('the delta value should account for resets on last', () => { series = new TimeSeries({ datapoints: [[1, 2], [2, 3], [10, 4], [8, 5]], }); @@ -89,13 +89,13 @@ describe('TimeSeries', function() { expect(series.stats.delta).toBe(17); }); - it('the range value should be max - min', function() { + it('the range value should be max - min', () => { series = new TimeSeries(testData); series.getFlotPairs('null', yAxisFormats); expect(series.stats.range).toBe(9); }); - it('first value should ingone nulls', function() { + it('first value should ingone nulls', () => { series = new TimeSeries(testData); series.getFlotPairs('null', yAxisFormats); expect(series.stats.first).toBe(1); @@ -106,13 +106,13 @@ describe('TimeSeries', function() { expect(series.stats.first).toBe(1); }); - it('with null as zero style, average value should treat nulls as 0', function() { + it('with null as zero style, average value should treat nulls as 0', () => { series = new TimeSeries(testData); series.getFlotPairs('null as zero', yAxisFormats); expect(series.stats.avg).toBe(4.75); }); - it('average value should be null if all values is null', function() { + it('average value should be null if all values is null', () => { series = new TimeSeries({ datapoints: [[null, 2], [null, 3], [null, 4], [null, 5]], }); @@ -120,7 +120,7 @@ describe('TimeSeries', function() { expect(series.stats.avg).toBe(null); }); - it('calculates timeStep', function() { + it('calculates timeStep', () => { series = new TimeSeries({ datapoints: [[null, 1], [null, 2], [null, 3]], }); @@ -135,190 +135,190 @@ describe('TimeSeries', function() { }); }); - describe('When checking if ms resolution is needed', function() { - describe('msResolution with second resolution timestamps', function() { - beforeEach(function() { + describe('When checking if ms resolution is needed', () => { + describe('msResolution with second resolution timestamps', () => { + beforeEach(() => { series = new TimeSeries({ datapoints: [[45, 1234567890], [60, 1234567899]], }); }); - it('should set hasMsResolution to false', function() { + it('should set hasMsResolution to false', () => { expect(series.hasMsResolution).toBe(false); }); }); - describe('msResolution with millisecond resolution timestamps', function() { - beforeEach(function() { + describe('msResolution with millisecond resolution timestamps', () => { + beforeEach(() => { series = new TimeSeries({ datapoints: [[55, 1236547890001], [90, 1234456709000]], }); }); - it('should show millisecond resolution tooltip', function() { + it('should show millisecond resolution tooltip', () => { expect(series.hasMsResolution).toBe(true); }); }); - describe('msResolution with millisecond resolution timestamps but with trailing zeroes', function() { - beforeEach(function() { + describe('msResolution with millisecond resolution timestamps but with trailing zeroes', () => { + beforeEach(() => { series = new TimeSeries({ datapoints: [[45, 1234567890000], [60, 1234567899000]], }); }); - it('should not show millisecond resolution tooltip', function() { + it('should not show millisecond resolution tooltip', () => { expect(series.hasMsResolution).toBe(false); }); }); }); - describe('can detect if series contains ms precision', function() { + describe('can detect if series contains ms precision', () => { let fakedata; - beforeEach(function() { + beforeEach(() => { fakedata = testData; }); - it('missing datapoint with ms precision', function() { + it('missing datapoint with ms precision', () => { fakedata.datapoints[0] = [1337, 1234567890000]; series = new TimeSeries(fakedata); expect(series.isMsResolutionNeeded()).toBe(false); }); - it('contains datapoint with ms precision', function() { + it('contains datapoint with ms precision', () => { fakedata.datapoints[0] = [1337, 1236547890001]; series = new TimeSeries(fakedata); expect(series.isMsResolutionNeeded()).toBe(true); }); }); - describe('series overrides', function() { + describe('series overrides', () => { let series; - beforeEach(function() { + beforeEach(() => { series = new TimeSeries(testData); }); - describe('fill & points', function() { - beforeEach(function() { + describe('fill & points', () => { + beforeEach(() => { series.alias = 'test'; series.applySeriesOverrides([{ alias: 'test', fill: 0, points: true }]); }); - it('should set fill zero, and enable points', function() { + it('should set fill zero, and enable points', () => { expect(series.lines.fill).toBe(0.001); expect(series.points.show).toBe(true); }); }); - describe('series option overrides, bars, true & lines false', function() { - beforeEach(function() { + describe('series option overrides, bars, true & lines false', () => { + beforeEach(() => { series.alias = 'test'; series.applySeriesOverrides([{ alias: 'test', bars: true, lines: false }]); }); - it('should disable lines, and enable bars', function() { + it('should disable lines, and enable bars', () => { expect(series.lines.show).toBe(false); expect(series.bars.show).toBe(true); }); }); - describe('series option overrides, linewidth, stack', function() { - beforeEach(function() { + describe('series option overrides, linewidth, stack', () => { + beforeEach(() => { series.alias = 'test'; series.applySeriesOverrides([{ alias: 'test', linewidth: 5, stack: false }]); }); - it('should disable stack, and set lineWidth', function() { + it('should disable stack, and set lineWidth', () => { expect(series.stack).toBe(false); expect(series.lines.lineWidth).toBe(5); }); }); - describe('series option overrides, dashes and lineWidth', function() { - beforeEach(function() { + describe('series option overrides, dashes and lineWidth', () => { + beforeEach(() => { series.alias = 'test'; series.applySeriesOverrides([{ alias: 'test', linewidth: 5, dashes: true }]); }); - it('should enable dashes, set dashes lineWidth to 5 and lines lineWidth to 0', function() { + it('should enable dashes, set dashes lineWidth to 5 and lines lineWidth to 0', () => { expect(series.dashes.show).toBe(true); expect(series.dashes.lineWidth).toBe(5); expect(series.lines.lineWidth).toBe(0); }); }); - describe('series option overrides, fill below to', function() { - beforeEach(function() { + describe('series option overrides, fill below to', () => { + beforeEach(() => { series.alias = 'test'; series.applySeriesOverrides([{ alias: 'test', fillBelowTo: 'min' }]); }); - it('should disable line fill and add fillBelowTo', function() { + it('should disable line fill and add fillBelowTo', () => { expect(series.fillBelowTo).toBe('min'); }); }); - describe('series option overrides, pointradius, steppedLine', function() { - beforeEach(function() { + describe('series option overrides, pointradius, steppedLine', () => { + beforeEach(() => { series.alias = 'test'; series.applySeriesOverrides([{ alias: 'test', pointradius: 5, steppedLine: true }]); }); - it('should set pointradius, and set steppedLine', function() { + it('should set pointradius, and set steppedLine', () => { expect(series.points.radius).toBe(5); expect(series.lines.steps).toBe(true); }); }); - describe('override match on regex', function() { - beforeEach(function() { + describe('override match on regex', () => { + beforeEach(() => { series.alias = 'test_01'; series.applySeriesOverrides([{ alias: '/.*01/', lines: false }]); }); - it('should match second series', function() { + it('should match second series', () => { expect(series.lines.show).toBe(false); }); }); - describe('override series y-axis, and z-index', function() { - beforeEach(function() { + describe('override series y-axis, and z-index', () => { + beforeEach(() => { series.alias = 'test'; series.applySeriesOverrides([{ alias: 'test', yaxis: 2, zindex: 2 }]); }); - it('should set yaxis', function() { + it('should set yaxis', () => { expect(series.yaxis).toBe(2); }); - it('should set zindex', function() { + it('should set zindex', () => { expect(series.zindex).toBe(2); }); }); - describe('override color', function() { - beforeEach(function() { + describe('override color', () => { + beforeEach(() => { series.applySeriesOverrides([{ alias: 'test', color: '#112233' }]); }); - it('should set color', function() { + it('should set color', () => { expect(series.color).toBe('#112233'); }); - it('should set bars.fillColor', function() { + it('should set bars.fillColor', () => { expect(series.bars.fillColor).toBe('#112233'); }); }); }); - describe('value formatter', function() { + describe('value formatter', () => { let series; - beforeEach(function() { + beforeEach(() => { series = new TimeSeries(testData); }); - it('should format non-numeric values as empty string', function() { + it('should format non-numeric values as empty string', () => { expect(series.formatValue(null)).toBe(''); expect(series.formatValue(undefined)).toBe(''); expect(series.formatValue(NaN)).toBe(''); @@ -327,10 +327,10 @@ describe('TimeSeries', function() { }); }); - describe('legend decimals', function() { + describe('legend decimals', () => { let series, panel; const height = 200; - beforeEach(function() { + beforeEach(() => { testData = { alias: 'test', datapoints: [[1, 2], [0, 3], [10, 4], [8, 5]], @@ -347,14 +347,14 @@ describe('TimeSeries', function() { }; }); - it('should set decimals based on Y axis (expect calculated decimals = 1)', function() { + it('should set decimals based on Y axis (expect calculated decimals = 1)', () => { const data = [series]; // Expect ticks with this data will have decimals = 1 updateLegendValues(data, panel, height); expect(data[0].decimals).toBe(2); }); - it('should set decimals based on Y axis to 0 if calculated decimals = 0)', function() { + it('should set decimals based on Y axis to 0 if calculated decimals = 0)', () => { testData.datapoints = [[10, 2], [0, 3], [100, 4], [80, 5]]; series = new TimeSeries(testData); series.getFlotPairs(); @@ -363,14 +363,14 @@ describe('TimeSeries', function() { expect(data[0].decimals).toBe(0); }); - it('should set decimals to Y axis decimals + 1', function() { + it('should set decimals to Y axis decimals + 1', () => { panel.yaxes[0].decimals = 2; const data = [series]; updateLegendValues(data, panel, height); expect(data[0].decimals).toBe(3); }); - it('should set decimals to legend decimals value if it was set explicitly', function() { + it('should set decimals to legend decimals value if it was set explicitly', () => { panel.decimals = 3; const data = [series]; updateLegendValues(data, panel, height); diff --git a/public/app/core/utils/css_loader.ts b/public/app/core/utils/css_loader.ts index 19dd84a6087..b4c26293bb8 100644 --- a/public/app/core/utils/css_loader.ts +++ b/public/app/core/utils/css_loader.ts @@ -9,8 +9,8 @@ for (let i = 0; i < links.length; i++) { } const isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/); -const webkitLoadCheck = function(link, callback) { - setTimeout(function() { +const webkitLoadCheck = (link, callback) => { + setTimeout(() => { for (let i = 0; i < document.styleSheets.length; i++) { const sheet = document.styleSheets[i]; if (sheet.href === link.href) { @@ -21,19 +21,19 @@ const webkitLoadCheck = function(link, callback) { }, 10); }; -const noop = function() {}; +const noop = () => {}; -const loadCSS = function(url) { - return new Promise(function(resolve, reject) { +const loadCSS = url => { + return new Promise((resolve, reject) => { const link = document.createElement('link'); - const timeout = setTimeout(function() { + const timeout = setTimeout(() => { reject('Unable to load CSS'); }, waitSeconds * 1000); - const _callback = function(error) { + const _callback = error => { clearTimeout(timeout); link.onload = link.onerror = noop; - setTimeout(function() { + setTimeout(() => { if (error) { reject(error); } else { @@ -47,14 +47,14 @@ const loadCSS = function(url) { link.href = url; if (!isWebkit) { - link.onload = function() { + link.onload = () => { _callback(undefined); }; } else { webkitLoadCheck(link, _callback); } - link.onerror = function(evt: any) { + link.onerror = (evt: any) => { _callback(evt.error || new Error('Error loading CSS file.')); }; diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts index 0ac26947076..8b276acb539 100644 --- a/public/app/core/utils/kbn.ts +++ b/public/app/core/utils/kbn.ts @@ -450,6 +450,7 @@ kbn.valueFormats.currencySEK = kbn.formatBuilders.currency('kr'); kbn.valueFormats.currencyCZK = kbn.formatBuilders.currency('czk'); kbn.valueFormats.currencyCHF = kbn.formatBuilders.currency('CHF'); kbn.valueFormats.currencyPLN = kbn.formatBuilders.currency('zł'); +kbn.valueFormats.currencyBTC = kbn.formatBuilders.currency('฿'); // Data (Binary) kbn.valueFormats.bits = kbn.formatBuilders.binarySIPrefix('b'); @@ -882,6 +883,7 @@ kbn.getUnitFormats = function() { { text: 'Czech koruna (czk)', value: 'currencyCZK' }, { text: 'Swiss franc (CHF)', value: 'currencyCHF' }, { text: 'Polish Złoty (PLN)', value: 'currencyPLN' }, + { text: 'Bitcoin (฿)', value: 'currencyBTC' }, ], }, { diff --git a/public/app/features/dashboard/change_tracker.ts b/public/app/features/dashboard/change_tracker.ts index 5047aefa199..aa71ac2e306 100644 --- a/public/app/features/dashboard/change_tracker.ts +++ b/public/app/features/dashboard/change_tracker.ts @@ -128,7 +128,7 @@ export class ChangeTracker { }); // ignore template variable values - _.each(dash.templating.list, function(value) { + _.each(dash.templating.list, value => { value.current = null; value.options = null; value.filters = null; diff --git a/public/app/features/dashboard/dashboard_loader_srv.ts b/public/app/features/dashboard/dashboard_loader_srv.ts index b7705dd9497..572a92f07bc 100644 --- a/public/app/features/dashboard/dashboard_loader_srv.ts +++ b/public/app/features/dashboard/dashboard_loader_srv.ts @@ -59,7 +59,7 @@ export class DashboardLoaderSrv { }); } - promise.then(function(result) { + promise.then(result => { if (result.meta.dashboardNotFound !== true) { impressionSrv.addDashboardImpression(result.dashboard.id); } diff --git a/public/app/features/dashboard/repeat_option/repeat_option.ts b/public/app/features/dashboard/repeat_option/repeat_option.ts index 19c28607640..4e04a7b3ecc 100644 --- a/public/app/features/dashboard/repeat_option/repeat_option.ts +++ b/public/app/features/dashboard/repeat_option/repeat_option.ts @@ -15,7 +15,7 @@ function dashRepeatOptionDirective(variableSrv) { scope: { panel: '=', }, - link: function(scope, element) { + link: (scope, element) => { element.css({ display: 'block', width: '100%' }); scope.variables = variableSrv.variables.map(item => { @@ -36,7 +36,7 @@ function dashRepeatOptionDirective(variableSrv) { scope.panel.repeatDirection = 'h'; } - scope.optionChanged = function() { + scope.optionChanged = () => { if (scope.panel.repeat) { scope.panel.repeatDirection = 'h'; } diff --git a/public/app/features/dashboard/shareModalCtrl.ts b/public/app/features/dashboard/shareModalCtrl.ts index 27f0e0073a9..c00a6d8d57f 100644 --- a/public/app/features/dashboard/shareModalCtrl.ts +++ b/public/app/features/dashboard/shareModalCtrl.ts @@ -11,7 +11,7 @@ export function ShareModalCtrl($scope, $rootScope, $location, $timeout, timeSrv, }; $scope.editor = { index: $scope.tabIndex || 0 }; - $scope.init = function() { + $scope.init = () => { $scope.modeSharePanel = $scope.panel ? true : false; $scope.tabs = [{ title: 'Link', src: 'shareLink.html' }]; @@ -34,7 +34,7 @@ export function ShareModalCtrl($scope, $rootScope, $location, $timeout, timeSrv, $scope.buildUrl(); }; - $scope.buildUrl = function() { + $scope.buildUrl = () => { let baseUrl = $location.absUrl(); const queryStart = baseUrl.indexOf('?'); @@ -90,7 +90,7 @@ export function ShareModalCtrl($scope, $rootScope, $location, $timeout, timeSrv, // This function will try to return the proper full name of the local timezone // Chrome does not handle the timezone offset (but phantomjs does) - $scope.getLocalTimeZone = function() { + $scope.getLocalTimeZone = () => { const utcOffset = '&tz=UTC' + encodeURIComponent(moment().format('Z')); // Older browser does not the internationalization API @@ -111,7 +111,7 @@ export function ShareModalCtrl($scope, $rootScope, $location, $timeout, timeSrv, return '&tz=' + encodeURIComponent(options.timeZone); }; - $scope.getShareUrl = function() { + $scope.getShareUrl = () => { return $scope.shareUrl; }; } diff --git a/public/app/features/dashboard/share_snapshot_ctrl.ts b/public/app/features/dashboard/share_snapshot_ctrl.ts index 2cda493838a..ec487801948 100644 --- a/public/app/features/dashboard/share_snapshot_ctrl.ts +++ b/public/app/features/dashboard/share_snapshot_ctrl.ts @@ -25,8 +25,8 @@ export class ShareSnapshotCtrl { { text: 'Public on the web', value: 3 }, ]; - $scope.init = function() { - backendSrv.get('/api/snapshot/shared-options').then(function(options) { + $scope.init = () => { + backendSrv.get('/api/snapshot/shared-options').then(options => { $scope.externalUrl = options['externalSnapshotURL']; $scope.sharingButtonText = options['externalSnapshotName']; $scope.externalEnabled = options['externalEnabled']; @@ -35,7 +35,7 @@ export class ShareSnapshotCtrl { $scope.apiUrl = '/api/snapshots'; - $scope.createSnapshot = function(external) { + $scope.createSnapshot = external => { $scope.dashboard.snapshot = { timestamp: new Date(), }; @@ -49,12 +49,12 @@ export class ShareSnapshotCtrl { $rootScope.$broadcast('refresh'); - $timeout(function() { + $timeout(() => { $scope.saveSnapshot(external); }, $scope.snapshot.timeoutSeconds * 1000); }; - $scope.saveSnapshot = function(external) { + $scope.saveSnapshot = external => { const dash = $scope.dashboard.getSaveModelClone(); $scope.scrubDashboard(dash); @@ -67,7 +67,7 @@ export class ShareSnapshotCtrl { const postUrl = external ? $scope.externalUrl + $scope.apiUrl : $scope.apiUrl; backendSrv.post(postUrl, cmdData).then( - function(results) { + results => { $scope.loading = false; if (external) { @@ -88,17 +88,17 @@ export class ShareSnapshotCtrl { $scope.step = 2; }, - function() { + () => { $scope.loading = false; } ); }; - $scope.getSnapshotUrl = function() { + $scope.getSnapshotUrl = () => { return $scope.snapshotUrl; }; - $scope.scrubDashboard = function(dash) { + $scope.scrubDashboard = dash => { // change title dash.title = $scope.snapshot.name; @@ -106,7 +106,7 @@ export class ShareSnapshotCtrl { dash.time = timeSrv.timeRange(); // remove panel queries & links - _.each(dash.panels, function(panel) { + _.each(dash.panels, panel => { panel.targets = []; panel.links = []; panel.datasource = null; @@ -114,10 +114,10 @@ export class ShareSnapshotCtrl { // remove annotation queries dash.annotations.list = _.chain(dash.annotations.list) - .filter(function(annotation) { + .filter(annotation => { return annotation.enable; }) - .map(function(annotation) { + .map(annotation => { return { name: annotation.name, enable: annotation.enable, @@ -131,7 +131,7 @@ export class ShareSnapshotCtrl { .value(); // remove template queries - _.each(dash.templating.list, function(variable) { + _.each(dash.templating.list, variable => { variable.query = ''; variable.options = variable.current; variable.refresh = false; @@ -149,21 +149,21 @@ export class ShareSnapshotCtrl { // cleanup snapshotData delete $scope.dashboard.snapshot; - $scope.dashboard.forEachPanel(function(panel) { + $scope.dashboard.forEachPanel(panel => { delete panel.snapshotData; }); - _.each($scope.dashboard.annotations.list, function(annotation) { + _.each($scope.dashboard.annotations.list, annotation => { delete annotation.snapshotData; }); }; - $scope.deleteSnapshot = function() { - backendSrv.get($scope.deleteUrl).then(function() { + $scope.deleteSnapshot = () => { + backendSrv.get($scope.deleteUrl).then(() => { $scope.step = 3; }); }; - $scope.saveExternalSnapshotRef = function(cmdData, results) { + $scope.saveExternalSnapshotRef = (cmdData, results) => { // save external in local instance as well cmdData.external = true; cmdData.key = results.key; diff --git a/public/app/features/dashboard/timepicker/input_date.ts b/public/app/features/dashboard/timepicker/input_date.ts index 1e016ab0896..7de39dfacb2 100644 --- a/public/app/features/dashboard/timepicker/input_date.ts +++ b/public/app/features/dashboard/timepicker/input_date.ts @@ -5,10 +5,10 @@ export function inputDateDirective() { return { restrict: 'A', require: 'ngModel', - link: function($scope, $elem, attrs, ngModel) { + link: ($scope, $elem, attrs, ngModel) => { const format = 'YYYY-MM-DD HH:mm:ss'; - const fromUser = function(text) { + const fromUser = text => { if (text.indexOf('now') !== -1) { if (!dateMath.isValid(text)) { ngModel.$setValidity('error', false); @@ -34,7 +34,7 @@ export function inputDateDirective() { return parsed; }; - const toUser = function(currentValue) { + const toUser = currentValue => { if (moment.isMoment(currentValue)) { return currentValue.format(format); } else { diff --git a/public/app/features/dashboard/upload.ts b/public/app/features/dashboard/upload.ts index 7f7a177ac4b..10d35d1f300 100644 --- a/public/app/features/dashboard/upload.ts +++ b/public/app/features/dashboard/upload.ts @@ -16,11 +16,11 @@ function uploadDashboardDirective(timer, alertSrv, $location) { scope: { onUpload: '&', }, - link: function(scope) { + link: scope => { function file_selected(evt) { const files = evt.target.files; // FileList object - const readerOnload = function() { - return function(e) { + const readerOnload = () => { + return e => { let dash; try { dash = JSON.parse(e.target.result); @@ -30,7 +30,7 @@ function uploadDashboardDirective(timer, alertSrv, $location) { return; } - scope.$apply(function() { + scope.$apply(() => { scope.onUpload({ dash: dash }); }); }; diff --git a/public/app/features/dashboard/view_state_srv.ts b/public/app/features/dashboard/view_state_srv.ts index 773ec6ec711..521de4ecbad 100644 --- a/public/app/features/dashboard/view_state_srv.ts +++ b/public/app/features/dashboard/view_state_srv.ts @@ -22,18 +22,18 @@ export class DashboardViewState { self.$scope = $scope; self.dashboard = $scope.dashboard; - $scope.onAppEvent('$routeUpdate', function() { + $scope.onAppEvent('$routeUpdate', () => { const urlState = self.getQueryStringState(); if (self.needsSync(urlState)) { self.update(urlState, true); } }); - $scope.onAppEvent('panel-change-view', function(evt, payload) { + $scope.onAppEvent('panel-change-view', (evt, payload) => { self.update(payload); }); - $scope.onAppEvent('panel-initialized', function(evt, payload) { + $scope.onAppEvent('panel-initialized', (evt, payload) => { self.registerPanel(payload.scope); }); @@ -156,7 +156,7 @@ export class DashboardViewState { } getPanelScope(id) { - return _.find(this.panelScopes, function(panelScope) { + return _.find(this.panelScopes, panelScope => { return panelScope.ctrl.panel.id === id; }); } @@ -176,7 +176,7 @@ export class DashboardViewState { return false; } - this.$timeout(function() { + this.$timeout(() => { if (self.oldTimeRange !== ctrl.range) { self.$rootScope.$broadcast('refresh'); } else { @@ -216,7 +216,7 @@ export class DashboardViewState { } } - const unbind = panelScope.$on('$destroy', function() { + const unbind = panelScope.$on('$destroy', () => { self.panelScopes = _.without(self.panelScopes, panelScope); unbind(); }); @@ -226,7 +226,7 @@ export class DashboardViewState { /** @ngInject */ export function dashboardViewStateSrv($location, $timeout, $rootScope) { return { - create: function($scope) { + create: $scope => { return new DashboardViewState($scope, $location, $timeout, $rootScope); }, }; diff --git a/public/app/features/dashlinks/module.ts b/public/app/features/dashlinks/module.ts index aab6817b327..fde41a08d52 100644 --- a/public/app/features/dashlinks/module.ts +++ b/public/app/features/dashlinks/module.ts @@ -10,7 +10,7 @@ function dashLinksContainer() { restrict: 'E', controller: 'DashLinksContainerCtrl', template: '', - link: function() {}, + link: () => {}, }; } @@ -18,7 +18,7 @@ function dashLinksContainer() { function dashLink($compile, $sanitize, linkSrv) { return { restrict: 'E', - link: function(scope, elem) { + link: (scope, elem) => { const link = scope.link; let template = '
    ' + @@ -130,16 +130,16 @@ export class DashLinksContainerCtrl { function updateDashLinks() { const promises = _.map($scope.links, buildLinks); - $q.all(promises).then(function(results) { + $q.all(promises).then(results => { $scope.generatedLinks = _.flatten(results); }); } - $scope.searchDashboards = function(link, limit) { - return backendSrv.search({ tag: link.tags, limit: limit }).then(function(results) { + $scope.searchDashboards = (link, limit) => { + return backendSrv.search({ tag: link.tags, limit: limit }).then(results => { return _.reduce( results, - function(memo, dash) { + (memo, dash) => { // do not add current dashboard if (dash.id !== currentDashId) { memo.push({ @@ -158,9 +158,9 @@ export class DashLinksContainerCtrl { }); }; - $scope.fillDropdown = function(link) { - $scope.searchDashboards(link, 100).then(function(results) { - _.each(results, function(hit) { + $scope.fillDropdown = link => { + $scope.searchDashboards(link, 100).then(results => { + _.each(results, hit => { hit.url = linkSrv.getLinkUrl(hit); }); link.searchHits = results; diff --git a/public/app/features/org/change_password_ctrl.ts b/public/app/features/org/change_password_ctrl.ts index 033ff807721..7a4ba0f031a 100644 --- a/public/app/features/org/change_password_ctrl.ts +++ b/public/app/features/org/change_password_ctrl.ts @@ -9,7 +9,7 @@ export class ChangePasswordCtrl { $scope.ldapEnabled = config.ldapEnabled; $scope.navModel = navModelSrv.getNav('profile', 'change-password', 0); - $scope.changePassword = function() { + $scope.changePassword = () => { if (!$scope.userForm.$valid) { return; } @@ -19,7 +19,7 @@ export class ChangePasswordCtrl { return; } - backendSrv.put('/api/user/password', $scope.command).then(function() { + backendSrv.put('/api/user/password', $scope.command).then(() => { $location.path('profile'); }); }; diff --git a/public/app/features/org/new_org_ctrl.ts b/public/app/features/org/new_org_ctrl.ts index bc87010c100..6a8808abfac 100644 --- a/public/app/features/org/new_org_ctrl.ts +++ b/public/app/features/org/new_org_ctrl.ts @@ -7,9 +7,9 @@ export class NewOrgCtrl { $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1); $scope.newOrg = { name: '' }; - $scope.createOrg = function() { - backendSrv.post('/api/orgs/', $scope.newOrg).then(function(result) { - backendSrv.post('/api/user/using/' + result.orgId).then(function() { + $scope.createOrg = () => { + backendSrv.post('/api/orgs/', $scope.newOrg).then(result => { + backendSrv.post('/api/user/using/' + result.orgId).then(() => { window.location.href = config.appSubUrl + '/org'; }); }); diff --git a/public/app/features/org/org_api_keys_ctrl.ts b/public/app/features/org/org_api_keys_ctrl.ts index 668d6a86841..1ead0a350b9 100644 --- a/public/app/features/org/org_api_keys_ctrl.ts +++ b/public/app/features/org/org_api_keys_ctrl.ts @@ -8,22 +8,22 @@ export class OrgApiKeysCtrl { $scope.roleTypes = ['Viewer', 'Editor', 'Admin']; $scope.token = { role: 'Viewer' }; - $scope.init = function() { + $scope.init = () => { $scope.getTokens(); }; - $scope.getTokens = function() { - backendSrv.get('/api/auth/keys').then(function(tokens) { + $scope.getTokens = () => { + backendSrv.get('/api/auth/keys').then(tokens => { $scope.tokens = tokens; }); }; - $scope.removeToken = function(id) { + $scope.removeToken = id => { backendSrv.delete('/api/auth/keys/' + id).then($scope.getTokens); }; - $scope.addToken = function() { - backendSrv.post('/api/auth/keys', $scope.token).then(function(result) { + $scope.addToken = () => { + backendSrv.post('/api/auth/keys', $scope.token).then(result => { const modalScope = $scope.$new(true); modalScope.key = result.key; modalScope.rootPath = window.location.origin + $scope.$root.appSubUrl; diff --git a/public/app/features/org/select_org_ctrl.ts b/public/app/features/org/select_org_ctrl.ts index 34cfc9b7df4..cd5166771ac 100644 --- a/public/app/features/org/select_org_ctrl.ts +++ b/public/app/features/org/select_org_ctrl.ts @@ -14,18 +14,18 @@ export class SelectOrgCtrl { }, }; - $scope.init = function() { + $scope.init = () => { $scope.getUserOrgs(); }; - $scope.getUserOrgs = function() { - backendSrv.get('/api/user/orgs').then(function(orgs) { + $scope.getUserOrgs = () => { + backendSrv.get('/api/user/orgs').then(orgs => { $scope.orgs = orgs; }); }; - $scope.setUsingOrg = function(org) { - backendSrv.post('/api/user/using/' + org.orgId).then(function() { + $scope.setUsingOrg = org => { + backendSrv.post('/api/user/using/' + org.orgId).then(() => { window.location.href = config.appSubUrl + '/'; }); }; diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 065bd1aa791..8b742e17952 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -54,13 +54,13 @@ const panelTemplate = `
    `; -module.directive('grafanaPanel', function($rootScope, $document, $timeout) { +module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { return { restrict: 'E', template: panelTemplate, transclude: true, scope: { ctrl: '=' }, - link: function(scope, elem) { + link: (scope, elem) => { const panelContainer = elem.find('.panel-container'); const panelContent = elem.find('.panel-content'); const cornerInfoElem = elem.find('.panel-info-corner'); @@ -184,7 +184,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { infoDrop = new Drop({ target: cornerInfoElem[0], - content: function() { + content: () => { return ctrl.getInfoContent({ mode: 'tooltip' }); }, classes: ctrl.error ? 'drop-error' : 'drop-help', @@ -208,7 +208,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo); scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo); - cornerInfoElem.on('click', function() { + cornerInfoElem.on('click', () => { infoDrop.close(); scope.$apply(ctrl.openInspector.bind(ctrl)); }); @@ -216,7 +216,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { elem.on('mouseenter', mouseEnter); elem.on('mouseleave', mouseLeave); - scope.$on('$destroy', function() { + scope.$on('$destroy', () => { elem.off(); cornerInfoElem.off(); @@ -232,7 +232,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { }; }); -module.directive('panelHelpCorner', function($rootScope) { +module.directive('panelHelpCorner', $rootScope => { return { restrict: 'E', template: ` @@ -242,6 +242,6 @@ module.directive('panelHelpCorner', function($rootScope) { `, - link: function(scope, elem) {}, + link: (scope, elem) => {}, }; }); diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index 102f065cff2..5fa20c4714b 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -85,12 +85,12 @@ function panelHeader($compile) { return { restrict: 'E', template: template, - link: function(scope, elem, attrs) { + link: (scope, elem, attrs) => { const menuElem = elem.find('.panel-menu'); let menuScope; let isDragged; - elem.click(function(evt) { + elem.click(evt => { const targetClass = evt.target.className; // remove existing scope diff --git a/public/app/features/panel/query_troubleshooter.ts b/public/app/features/panel/query_troubleshooter.ts index e4d2eb5a302..c19efd4d065 100644 --- a/public/app/features/panel/query_troubleshooter.ts +++ b/public/app/features/panel/query_troubleshooter.ts @@ -170,8 +170,8 @@ export function queryTroubleshooter() { panelCtrl: '=', isOpen: '=', }, - link: function(scope, elem, attrs, ctrl) { - ctrl.renderJsonExplorer = function(data) { + link: (scope, elem, attrs, ctrl) => { + ctrl.renderJsonExplorer = data => { const jsonElem = elem.find('.query-troubleshooter-json'); ctrl.jsonExplorer = new JsonExplorer(data, 3, { diff --git a/public/app/features/panel/solo_panel_ctrl.ts b/public/app/features/panel/solo_panel_ctrl.ts index 53bacd68fe7..0e45fe48c4d 100644 --- a/public/app/features/panel/solo_panel_ctrl.ts +++ b/public/app/features/panel/solo_panel_ctrl.ts @@ -7,7 +7,7 @@ export class SoloPanelCtrl { constructor($scope, $routeParams, $location, dashboardLoaderSrv, contextSrv, backendSrv) { let panelId; - $scope.init = function() { + $scope.init = () => { contextSrv.sidemenu = false; appEvents.emit('toggle-sidemenu-hidden'); @@ -27,13 +27,13 @@ export class SoloPanelCtrl { return; } - dashboardLoaderSrv.loadDashboard($routeParams.type, $routeParams.slug, $routeParams.uid).then(function(result) { + dashboardLoaderSrv.loadDashboard($routeParams.type, $routeParams.slug, $routeParams.uid).then(result => { result.meta.soloMode = true; $scope.initDashboard(result, $scope); }); }; - $scope.initPanelScope = function() { + $scope.initPanelScope = () => { const panelInfo = $scope.dashboard.getPanelInfoById(panelId); // fake row ctrl scope diff --git a/public/app/features/panellinks/module.ts b/public/app/features/panellinks/module.ts index c8b6041a3e1..a5605c1d641 100644 --- a/public/app/features/panellinks/module.ts +++ b/public/app/features/panellinks/module.ts @@ -10,7 +10,7 @@ function panelLinksEditor() { restrict: 'E', controller: 'PanelLinksEditorCtrl', templateUrl: 'public/app/features/panellinks/module.html', - link: function() {}, + link: () => {}, }; } @@ -19,15 +19,15 @@ export class PanelLinksEditorCtrl { constructor($scope, backendSrv) { $scope.panel.links = $scope.panel.links || []; - $scope.addLink = function() { + $scope.addLink = () => { $scope.panel.links.push({ type: 'dashboard', }); }; - $scope.searchDashboards = function(queryStr, callback) { - backendSrv.search({ query: queryStr }).then(function(hits) { - const dashboards = _.map(hits, function(dash) { + $scope.searchDashboards = (queryStr, callback) => { + backendSrv.search({ query: queryStr }).then(hits => { + const dashboards = _.map(hits, dash => { return dash.title; }); @@ -35,8 +35,8 @@ export class PanelLinksEditorCtrl { }); }; - $scope.dashboardChanged = function(link) { - backendSrv.search({ query: link.dashboard }).then(function(hits) { + $scope.dashboardChanged = link => { + backendSrv.search({ query: link.dashboard }).then(hits => { const dashboard = _.find(hits, { title: link.dashboard }); if (dashboard) { if (dashboard.url) { @@ -50,7 +50,7 @@ export class PanelLinksEditorCtrl { }); }; - $scope.deleteLink = function(link) { + $scope.deleteLink = link => { $scope.panel.links = _.without($scope.panel.links, link); }; } diff --git a/public/app/features/playlist/playlist_routes.ts b/public/app/features/playlist/playlist_routes.ts index 8e9913cbc60..6e907ea0858 100644 --- a/public/app/features/playlist/playlist_routes.ts +++ b/public/app/features/playlist/playlist_routes.ts @@ -21,7 +21,7 @@ function grafanaRoutes($routeProvider) { .when('/playlists/play/:id', { template: '', resolve: { - init: function(playlistSrv, $route) { + init: (playlistSrv, $route) => { const playlistId = $route.current.params.id; playlistSrv.start(playlistId); }, diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 3c1a1860ac3..19889d3e26e 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -200,7 +200,7 @@ export class DataSourceEditCtrl { coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl); -coreModule.directive('datasourceHttpSettings', function() { +coreModule.directive('datasourceHttpSettings', () => { return { scope: { current: '=', @@ -209,15 +209,15 @@ coreModule.directive('datasourceHttpSettings', function() { }, templateUrl: 'public/app/features/plugins/partials/ds_http_settings.html', link: { - pre: function($scope, elem, attrs) { + pre: ($scope, elem, attrs) => { // do not show access option if direct access is disabled $scope.showAccessOption = $scope.noDirectAccess !== 'true'; $scope.showAccessHelp = false; - $scope.toggleAccessHelp = function() { + $scope.toggleAccessHelp = () => { $scope.showAccessHelp = !$scope.showAccessHelp; }; - $scope.getSuggestUrls = function() { + $scope.getSuggestUrls = () => { return [$scope.suggestUrl]; }; }, diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts index dc55ee2a181..41d1b6f1deb 100644 --- a/public/app/features/plugins/plugin_component.ts +++ b/public/app/features/plugins/plugin_component.ts @@ -36,7 +36,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ // handle relative template urls for plugin templates options.Component.templateUrl = relativeTemplateUrlToAbs(options.Component.templateUrl, options.baseUrl); - return function() { + return () => { return { templateUrl: options.Component.templateUrl, template: options.Component.template, @@ -71,12 +71,12 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ const panelInfo = config.panels[scope.panel.type]; let panelCtrlPromise = Promise.resolve(UnknownPanelCtrl); if (panelInfo) { - panelCtrlPromise = importPluginModule(panelInfo.module).then(function(panelModule) { + panelCtrlPromise = importPluginModule(panelInfo.module).then(panelModule => { return panelModule.PanelCtrl; }); } - return panelCtrlPromise.then(function(PanelCtrl: any) { + return panelCtrlPromise.then((PanelCtrl: any) => { componentInfo.Component = PanelCtrl; if (!PanelCtrl || PanelCtrl.registered) { @@ -128,7 +128,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ } // Annotations case 'annotations-query-ctrl': { - return importPluginModule(scope.ctrl.currentDatasource.meta.module).then(function(dsModule) { + return importPluginModule(scope.ctrl.currentDatasource.meta.module).then(dsModule => { return { baseUrl: scope.ctrl.currentDatasource.meta.baseUrl, name: 'annotations-query-ctrl-' + scope.ctrl.currentDatasource.meta.id, @@ -144,7 +144,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ // Datasource ConfigCtrl case 'datasource-config-ctrl': { const dsMeta = scope.ctrl.datasourceMeta; - return importPluginModule(dsMeta.module).then(function(dsModule): any { + return importPluginModule(dsMeta.module).then((dsModule): any => { if (!dsModule.ConfigCtrl) { return { notFound: true }; } @@ -161,7 +161,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ // AppConfigCtrl case 'app-config-ctrl': { const model = scope.ctrl.model; - return importPluginModule(model.module).then(function(appModule) { + return importPluginModule(model.module).then(appModule => { return { baseUrl: model.baseUrl, name: 'app-config-' + model.id, @@ -174,7 +174,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ // App Page case 'app-page': { const appModel = scope.ctrl.appModel; - return importPluginModule(appModel.module).then(function(appModule) { + return importPluginModule(appModel.module).then(appModule => { return { baseUrl: appModel.baseUrl, name: 'app-page-' + appModel.id + '-' + scope.ctrl.page.slug, @@ -206,9 +206,9 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ elem.empty(); // let a binding digest cycle complete before adding to dom - setTimeout(function() { + setTimeout(() => { elem.append(child); - scope.$applyAsync(function() { + scope.$applyAsync(() => { scope.$broadcast('component-did-mount'); scope.$broadcast('refresh'); }); @@ -239,9 +239,9 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ return { restrict: 'E', - link: function(scope, elem, attrs) { + link: (scope, elem, attrs) => { getModule(scope, attrs) - .then(function(componentInfo) { + .then(componentInfo => { registerPluginComponent(scope, elem, attrs, componentInfo); }) .catch(err => { diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index c970b73fe59..16465740642 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -10,7 +10,7 @@ import { CustomVariable } from './custom_variable'; import { ConstantVariable } from './constant_variable'; import { AdhocVariable } from './adhoc_variable'; -coreModule.factory('templateSrv', function() { +coreModule.factory('templateSrv', () => { return templateSrv; }); diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts index fe383c68077..bc946458705 100644 --- a/public/app/features/templating/custom_variable.ts +++ b/public/app/features/templating/custom_variable.ts @@ -39,7 +39,7 @@ export class CustomVariable implements Variable { updateOptions() { // extract options in comma separated string - this.options = _.map(this.query.split(/[,]+/), function(text) { + this.options = _.map(this.query.split(/[,]+/), text => { return { text: text.trim(), value: text.trim() }; }); diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index 9dc6468415a..cef7c9cc912 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -30,31 +30,31 @@ export class VariableEditorCtrl { $scope.hideOptions = [{ value: 0, text: '' }, { value: 1, text: 'Label' }, { value: 2, text: 'Variable' }]; - $scope.init = function() { + $scope.init = () => { $scope.mode = 'list'; $scope.variables = variableSrv.variables; $scope.reset(); - $scope.$watch('mode', function(val) { + $scope.$watch('mode', val => { if (val === 'new') { $scope.reset(); } }); }; - $scope.setMode = function(mode) { + $scope.setMode = mode => { $scope.mode = mode; }; - $scope.add = function() { + $scope.add = () => { if ($scope.isValid()) { variableSrv.addVariable($scope.current); $scope.update(); } }; - $scope.isValid = function() { + $scope.isValid = () => { if (!$scope.ctrl.form.$valid) { return false; } @@ -84,7 +84,7 @@ export class VariableEditorCtrl { return true; }; - $scope.validate = function() { + $scope.validate = () => { $scope.infoText = ''; if ($scope.current.type === 'adhoc' && $scope.current.datasource !== null) { $scope.infoText = 'Adhoc filters are applied automatically to all queries that target this datasource'; @@ -96,7 +96,7 @@ export class VariableEditorCtrl { } }; - $scope.runQuery = function() { + $scope.runQuery = () => { $scope.optionsLimit = 20; return variableSrv.updateOptions($scope.current).catch(err => { if (err.data && err.data.message) { @@ -106,23 +106,23 @@ export class VariableEditorCtrl { }); }; - $scope.edit = function(variable) { + $scope.edit = variable => { $scope.current = variable; $scope.currentIsNew = false; $scope.mode = 'edit'; $scope.validate(); }; - $scope.duplicate = function(variable) { + $scope.duplicate = variable => { const clone = _.cloneDeep(variable.getSaveModel()); $scope.current = variableSrv.createVariableFromModel(clone); $scope.current.name = 'copy_of_' + variable.name; variableSrv.addVariable($scope.current); }; - $scope.update = function() { + $scope.update = () => { if ($scope.isValid()) { - $scope.runQuery().then(function() { + $scope.runQuery().then(() => { $scope.reset(); $scope.mode = 'list'; templateSrv.updateTemplateData(); @@ -130,18 +130,18 @@ export class VariableEditorCtrl { } }; - $scope.reset = function() { + $scope.reset = () => { $scope.currentIsNew = true; $scope.current = variableSrv.createVariableFromModel({ type: 'query' }); // this is done here in case a new data source type variable was added - $scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) { + $scope.datasources = _.filter(datasourceSrv.getMetricSources(), ds => { return !ds.meta.mixed && ds.value !== null; }); $scope.datasourceTypes = _($scope.datasources) .uniqBy('meta.id') - .map(function(ds) { + .map(ds => { return { text: ds.meta.name, value: ds.meta.id }; }) .value(); @@ -164,11 +164,11 @@ export class VariableEditorCtrl { $scope.validate(); }; - $scope.removeVariable = function(variable) { + $scope.removeVariable = variable => { variableSrv.removeVariable(variable); }; - $scope.showMoreOptions = function() { + $scope.showMoreOptions = () => { $scope.optionsLimit += 20; }; } diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts index 7f12b1d3a77..57e5ae8eec3 100644 --- a/public/app/features/templating/interval_variable.ts +++ b/public/app/features/templating/interval_variable.ts @@ -65,7 +65,7 @@ export class IntervalVariable implements Variable { updateOptions() { // extract options between quotes and/or comma - this.options = _.map(this.query.match(/(["'])(.*?)\1|\w+/g), function(text) { + this.options = _.map(this.query.match(/(["'])(.*?)\1|\w+/g), text => { text = text.replace(/["']+/g, ''); return { text: text.trim(), value: text.trim() }; }); diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index e1ffcb837cb..d3f39023cfb 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -106,8 +106,8 @@ export class QueryVariable implements Variable { getValuesForTag(tagKey) { return this.datasourceSrv.get(this.datasource).then(datasource => { const query = this.tagValuesQuery.replace('$tag', tagKey); - return this.metricFindQuery(datasource, query).then(function(results) { - return _.map(results, function(value) { + return this.metricFindQuery(datasource, query).then(results => { + return _.map(results, value => { return value.text; }); }); diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts index 3510c729cdb..6eab51abbfa 100644 --- a/public/app/features/templating/template_srv.ts +++ b/public/app/features/templating/template_srv.ts @@ -77,7 +77,7 @@ export class TemplateSrv { if (value instanceof Array && value.length === 0) { return '__empty__'; } - const quotedValues = _.map(value, function(val) { + const quotedValues = _.map(value, val => { return '"' + luceneEscape(val) + '"'; }); return '(' + quotedValues.join(' OR ') + ')'; @@ -248,7 +248,7 @@ export class TemplateSrv { } fillVariableValuesForUrl(params, scopedVars) { - _.each(this.variables, function(variable) { + _.each(this.variables, variable => { if (scopedVars && scopedVars[variable.name] !== void 0) { if (scopedVars[variable.name].skipUrlSync) { return; @@ -264,7 +264,7 @@ export class TemplateSrv { } distributeVariable(value, variable) { - value = _.map(value, function(val, index) { + value = _.map(value, (val, index) => { if (index !== 0) { return variable + '=' + val; } else { diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index 22f8a909440..8c0f1f11f77 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -122,12 +122,13 @@ export class VariableSrv { } const g = this.createGraph(); - const promises = g - .getNode(variable.name) - .getOptimizedInputEdges() - .map(e => { + const node = g.getNode(variable.name); + let promises = []; + if (node) { + promises = node.getOptimizedInputEdges().map(e => { return this.updateOptions(this.variables.find(v => v.name === e.inputNode.name)); }); + } return this.$q.all(promises).then(() => { if (emitChangeEvents) { @@ -174,10 +175,10 @@ export class VariableSrv { selected = variable.options[0]; } else { selected = { - value: _.map(selected, function(val) { + value: _.map(selected, val => { return val.value; }), - text: _.map(selected, function(val) { + text: _.map(selected, val => { return val.text; }).join(' + '), }; @@ -249,7 +250,7 @@ export class VariableSrv { const params = this.$location.search(); // remove variable params - _.each(params, function(value, key) { + _.each(params, (value, key) => { if (key.indexOf('var-') === 0) { delete params[key]; } diff --git a/public/app/plugins/datasource/postgres/config_ctrl.ts b/public/app/plugins/datasource/postgres/config_ctrl.ts new file mode 100644 index 00000000000..a396b9f9aa4 --- /dev/null +++ b/public/app/plugins/datasource/postgres/config_ctrl.ts @@ -0,0 +1,63 @@ +import _ from 'lodash'; + +export class PostgresConfigCtrl { + static templateUrl = 'partials/config.html'; + + current: any; + datasourceSrv: any; + showTimescaleDBHelp: boolean; + + /** @ngInject */ + constructor($scope, datasourceSrv) { + this.datasourceSrv = datasourceSrv; + this.current.jsonData.sslmode = this.current.jsonData.sslmode || 'verify-full'; + this.current.jsonData.postgresVersion = this.current.jsonData.postgresVersion || 903; + this.showTimescaleDBHelp = false; + this.autoDetectFeatures(); + } + + autoDetectFeatures() { + if (!this.current.id) { + return; + } + + this.datasourceSrv.loadDatasource(this.current.name).then(ds => { + return ds.getVersion().then(version => { + version = Number(version[0].text); + + // timescaledb is only available for 9.6+ + if (version >= 906) { + ds.getTimescaleDBVersion().then(version => { + if (version.length === 1) { + this.current.jsonData.timescaledb = true; + } + }); + } + + const major = Math.trunc(version / 100); + const minor = version % 100; + let name = String(major); + if (version < 1000) { + name = String(major) + '.' + String(minor); + } + if (!_.find(this.postgresVersions, (p: any) => p.value === version)) { + this.postgresVersions.push({ name: name, value: version }); + } + this.current.jsonData.postgresVersion = version; + }); + }); + } + + toggleTimescaleDBHelp() { + this.showTimescaleDBHelp = !this.showTimescaleDBHelp; + } + + // the value portion is derived from postgres server_version_num/100 + postgresVersions = [ + { name: '9.3', value: 903 }, + { name: '9.4', value: 904 }, + { name: '9.5', value: 905 }, + { name: '9.6', value: 906 }, + { name: '10', value: 1000 }, + ]; +} diff --git a/public/app/plugins/datasource/postgres/datasource.ts b/public/app/plugins/datasource/postgres/datasource.ts index 678327a4a86..6522032b39f 100644 --- a/public/app/plugins/datasource/postgres/datasource.ts +++ b/public/app/plugins/datasource/postgres/datasource.ts @@ -1,22 +1,27 @@ import _ from 'lodash'; import ResponseParser from './response_parser'; +import PostgresQuery from 'app/plugins/datasource/postgres/postgres_query'; export class PostgresDatasource { id: any; name: any; + jsonData: any; responseParser: ResponseParser; + queryModel: PostgresQuery; /** @ngInject */ - constructor(instanceSettings, private backendSrv, private $q, private templateSrv) { + constructor(instanceSettings, private backendSrv, private $q, private templateSrv, private timeSrv) { this.name = instanceSettings.name; this.id = instanceSettings.id; + this.jsonData = instanceSettings.jsonData; this.responseParser = new ResponseParser(this.$q); + this.queryModel = new PostgresQuery({}); } interpolateVariable(value, variable) { if (typeof value === 'string') { if (variable.multi || variable.includeAll) { - return "'" + value.replace(/'/g, `''`) + "'"; + return this.queryModel.quoteLiteral(value); } else { return value; } @@ -26,23 +31,25 @@ export class PostgresDatasource { return value; } - const quotedValues = _.map(value, function(val) { - return "'" + val.replace(/'/g, `''`) + "'"; + const quotedValues = _.map(value, v => { + return this.queryModel.quoteLiteral(v); }); return quotedValues.join(','); } query(options) { - const queries = _.filter(options.targets, item => { - return item.hide !== true; - }).map(item => { + const queries = _.filter(options.targets, target => { + return target.hide !== true; + }).map(target => { + const queryModel = new PostgresQuery(target, this.templateSrv, options.scopedVars); + return { - refId: item.refId, + refId: target.refId, intervalMs: options.intervalMs, maxDataPoints: options.maxDataPoints, datasourceId: this.id, - rawSql: this.templateSrv.replace(item.rawSql, options.scopedVars, this.interpolateVariable), - format: item.format, + rawSql: queryModel.render(this.interpolateVariable), + format: target.format, }; }); @@ -103,17 +110,13 @@ export class PostgresDatasource { format: 'table', }; + const range = this.timeSrv.timeRange(); const data = { queries: [interpolatedQuery], + from: range.from.valueOf().toString(), + to: range.to.valueOf().toString(), }; - if (optionalOptions && optionalOptions.range && optionalOptions.range.from) { - data['from'] = optionalOptions.range.from.valueOf().toString(); - } - if (optionalOptions && optionalOptions.range && optionalOptions.range.to) { - data['to'] = optionalOptions.range.to.valueOf().toString(); - } - return this.backendSrv .datasourceRequest({ url: '/api/tsdb/query', @@ -123,6 +126,14 @@ export class PostgresDatasource { .then(data => this.responseParser.parseMetricFindQueryResult(refId, data)); } + getVersion() { + return this.metricFindQuery("SELECT current_setting('server_version_num')::int/100", {}); + } + + getTimescaleDBVersion() { + return this.metricFindQuery("SELECT extversion FROM pg_extension WHERE extname = 'timescaledb'", {}); + } + testDatasource() { return this.metricFindQuery('SELECT 1', {}) .then(res => { diff --git a/public/app/plugins/datasource/postgres/meta_query.ts b/public/app/plugins/datasource/postgres/meta_query.ts new file mode 100644 index 00000000000..0c54cc26cad --- /dev/null +++ b/public/app/plugins/datasource/postgres/meta_query.ts @@ -0,0 +1,176 @@ +export class PostgresMetaQuery { + constructor(private target, private queryModel) {} + + getOperators(datatype: string) { + switch (datatype) { + case 'float4': + case 'float8': { + return ['=', '!=', '<', '<=', '>', '>=']; + } + case 'text': + case 'varchar': + case 'char': { + return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE', '~', '~*', '!~', '!~*']; + } + default: { + return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN']; + } + } + } + + // quote identifier as literal to use in metadata queries + quoteIdentAsLiteral(value) { + return this.queryModel.quoteLiteral(this.queryModel.unquoteIdentifier(value)); + } + + findMetricTable() { + // query that returns first table found that has a timestamp(tz) column and a float column + const query = ` +SELECT + quote_ident(table_name) as table_name, + ( SELECT + quote_ident(column_name) as column_name + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name IN ('timestamptz','timestamp') + ORDER BY ordinal_position LIMIT 1 + ) AS time_column, + ( SELECT + quote_ident(column_name) AS column_name + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name='float8' + ORDER BY ordinal_position LIMIT 1 + ) AS value_column +FROM information_schema.tables t +WHERE + table_schema IN ( + SELECT CASE WHEN trim(unnest) = '"$user"' THEN user ELSE trim(unnest) END + FROM unnest(string_to_array(current_setting('search_path'),',')) + ) AND + EXISTS + ( SELECT 1 + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name IN ('timestamptz','timestamp') + ) AND + EXISTS + ( SELECT 1 + FROM information_schema.columns c + WHERE + c.table_schema = t.table_schema AND + c.table_name = t.table_name AND + udt_name='float8' + ) +LIMIT 1 +;`; + return query; + } + + buildSchemaConstraint() { + const query = ` +table_schema IN ( + SELECT CASE WHEN trim(unnest) = \'"$user"\' THEN user ELSE trim(unnest) END + FROM unnest(string_to_array(current_setting(\'search_path\'),\',\')) +)`; + return query; + } + + buildTableConstraint(table: string) { + let query = ''; + + // check for schema qualified table + if (table.includes('.')) { + const parts = table.split('.'); + query = 'table_schema = ' + this.quoteIdentAsLiteral(parts[0]); + query += ' AND table_name = ' + this.quoteIdentAsLiteral(parts[1]); + return query; + } else { + query = ` +table_schema IN ( + SELECT CASE WHEN trim(unnest) = \'"$user"\' THEN user ELSE trim(unnest) END + FROM unnest(string_to_array(current_setting(\'search_path\'),\',\')) +)`; + query += ' AND table_name = ' + this.quoteIdentAsLiteral(table); + + return query; + } + } + + buildTableQuery() { + let query = 'SELECT quote_ident(table_name) FROM information_schema.tables WHERE '; + query += this.buildSchemaConstraint(); + query += ' ORDER BY table_name'; + return query; + } + + buildColumnQuery(type?: string) { + let query = 'SELECT quote_ident(column_name) FROM information_schema.columns WHERE '; + query += this.buildTableConstraint(this.target.table); + + switch (type) { + case 'time': { + query += + " AND data_type IN ('timestamp without time zone','timestamp with time zone','bigint','integer','double precision','real')"; + break; + } + case 'metric': { + query += " AND data_type IN ('text','character','character varying')"; + break; + } + case 'value': { + query += " AND data_type IN ('bigint','integer','double precision','real')"; + query += ' AND column_name <> ' + this.quoteIdentAsLiteral(this.target.timeColumn); + break; + } + case 'group': { + query += " AND data_type IN ('text','character','character varying')"; + break; + } + } + + query += ' ORDER BY column_name'; + + return query; + } + + buildValueQuery(column: string) { + let query = 'SELECT DISTINCT quote_literal(' + column + ')'; + query += ' FROM ' + this.target.table; + query += ' WHERE $__timeFilter(' + this.target.timeColumn + ')'; + query += ' ORDER BY 1 LIMIT 100'; + return query; + } + + buildDatatypeQuery(column: string) { + let query = ` +SELECT udt_name +FROM information_schema.columns +WHERE + table_schema IN ( + SELECT schema FROM ( + SELECT CASE WHEN trim(unnest) = \'"$user"\' THEN user ELSE trim(unnest) END as schema + FROM unnest(string_to_array(current_setting(\'search_path\'),\',\')) + ) s + WHERE EXISTS (SELECT 1 FROM information_schema.schemata WHERE schema_name = s.schema) + ) +`; + query += ' AND table_name = ' + this.quoteIdentAsLiteral(this.target.table); + query += ' AND column_name = ' + this.quoteIdentAsLiteral(column); + return query; + } + + buildAggregateQuery() { + let query = 'SELECT DISTINCT proname FROM pg_aggregate '; + query += 'INNER JOIN pg_proc ON pg_aggregate.aggfnoid = pg_proc.oid '; + query += 'INNER JOIN pg_type ON pg_type.oid=pg_proc.prorettype '; + query += "WHERE pronargs=1 AND typname IN ('float8') AND aggkind='n' ORDER BY 1"; + return query; + } +} diff --git a/public/app/plugins/datasource/postgres/module.ts b/public/app/plugins/datasource/postgres/module.ts index a4266183bcf..f81cdb7c371 100644 --- a/public/app/plugins/datasource/postgres/module.ts +++ b/public/app/plugins/datasource/postgres/module.ts @@ -1,16 +1,6 @@ import { PostgresDatasource } from './datasource'; import { PostgresQueryCtrl } from './query_ctrl'; - -class PostgresConfigCtrl { - static templateUrl = 'partials/config.html'; - - current: any; - - /** @ngInject */ - constructor($scope) { - this.current.jsonData.sslmode = this.current.jsonData.sslmode || 'verify-full'; - } -} +import { PostgresConfigCtrl } from './config_ctrl'; const defaultQuery = `SELECT extract(epoch from time_column) AS time, diff --git a/public/app/plugins/datasource/postgres/partials/config.html b/public/app/plugins/datasource/postgres/partials/config.html index a1783c09dc4..a4df858db7e 100644 --- a/public/app/plugins/datasource/postgres/partials/config.html +++ b/public/app/plugins/datasource/postgres/partials/config.html @@ -42,10 +42,36 @@
    - + + Version + + This option controls what functions are available in the PostgreSQL query builder. + + + + +
    +
    + + +
    + +
    +
    +

    + TimescaleDB is a time-series database built as a PostgreSQL extension. If enabled, Grafana will use time_bucket in the $__timeGroup macro and display TimescaleDB specific aggregate functions in the query builder. +

    +
    +
    + +
    User Permission
    diff --git a/public/app/plugins/datasource/postgres/partials/query.editor.html b/public/app/plugins/datasource/postgres/partials/query.editor.html index 763fd6a6e96..fd944f4266c 100644 --- a/public/app/plugins/datasource/postgres/partials/query.editor.html +++ b/public/app/plugins/datasource/postgres/partials/query.editor.html @@ -1,43 +1,141 @@ - -
    -
    - - -
    -
    + + +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    + + + + + + + + +
    + +
    +
    +
    + +
    + +
    +
    + +
    + +
    + + +
    + +
    + +
    + +
    +
    +
    +
    + +
    +
    + +
    + +
    + + +
    + +
    + +
    + +
    +
    +
    + +
    + +
    +
    + + + + +
    + +
    + +
    + +
    +
    +
    +
    + +
    - -
    - -
    -
    -
    -
    +
    + +
    +
    + -
    -
    -
    +
    + -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    -
    - 
    {{ctrl.lastQueryMeta.sql}}
    -
    +
    + 
    {{ctrl.lastQueryMeta.sql}}
    +
    -
    - 
    Time series:
+  
    
+    
    Time series:
 - return column named time (UTC in seconds or timestamp)
 - return column(s) with numeric datatype as values
 Optional: 
@@ -73,13 +171,13 @@ Or build your own conditionals using these macros which just return the values:
 - $__timeTo() ->  '2017-04-21T05:01:17Z'
 - $__unixEpochFrom() ->  1492750877
 - $__unixEpochTo() ->  1492750877
-		
    
-	
    
+
    +
    -
    +
    -
    - 
    {{ctrl.lastQueryError}}
    -
    +
    + 
    {{ctrl.lastQueryError}}
    +
    diff --git a/public/app/plugins/datasource/postgres/plugin.json b/public/app/plugins/datasource/postgres/plugin.json index af2dbc4468e..2c2e1690a65 100644 --- a/public/app/plugins/datasource/postgres/plugin.json +++ b/public/app/plugins/datasource/postgres/plugin.json @@ -19,4 +19,5 @@ "alerting": true, "annotations": true, "metrics": true + } diff --git a/public/app/plugins/datasource/postgres/postgres_query.ts b/public/app/plugins/datasource/postgres/postgres_query.ts new file mode 100644 index 00000000000..fd0987f2761 --- /dev/null +++ b/public/app/plugins/datasource/postgres/postgres_query.ts @@ -0,0 +1,285 @@ +import _ from 'lodash'; + +export default class PostgresQuery { + target: any; + templateSrv: any; + scopedVars: any; + + /** @ngInject */ + constructor(target, templateSrv?, scopedVars?) { + this.target = target; + this.templateSrv = templateSrv; + this.scopedVars = scopedVars; + + target.format = target.format || 'time_series'; + target.timeColumn = target.timeColumn || 'time'; + target.metricColumn = target.metricColumn || 'none'; + + target.group = target.group || []; + target.where = target.where || [{ type: 'macro', name: '$__timeFilter', params: [] }]; + target.select = target.select || [[{ type: 'column', params: ['value'] }]]; + + // handle pre query gui panels gracefully + if (!('rawQuery' in this.target)) { + if ('rawSql' in target) { + // pre query gui panel + target.rawQuery = true; + } else { + // new panel + target.rawQuery = false; + } + } + + // give interpolateQueryStr access to this + this.interpolateQueryStr = this.interpolateQueryStr.bind(this); + } + + // remove identifier quoting from identifier to use in metadata queries + unquoteIdentifier(value) { + if (value[0] === '"' && value[value.length - 1] === '"') { + return value.substring(1, value.length - 1).replace(/""/g, '"'); + } else { + return value; + } + } + + quoteIdentifier(value) { + return '"' + value.replace(/"/g, '""') + '"'; + } + + quoteLiteral(value) { + return "'" + value.replace(/'/g, "''") + "'"; + } + + escapeLiteral(value) { + return value.replace(/'/g, "''"); + } + + hasTimeGroup() { + return _.find(this.target.group, (g: any) => g.type === 'time'); + } + + hasMetricColumn() { + return this.target.metricColumn !== 'none'; + } + + interpolateQueryStr(value, variable, defaultFormatFn) { + // if no multi or include all do not regexEscape + if (!variable.multi && !variable.includeAll) { + return this.escapeLiteral(value); + } + + if (typeof value === 'string') { + return this.quoteLiteral(value); + } + + const escapedValues = _.map(value, this.quoteLiteral); + return escapedValues.join(','); + } + + render(interpolate?) { + const target = this.target; + + // new query with no table set yet + if (!this.target.rawQuery && !('table' in this.target)) { + return ''; + } + + if (!target.rawQuery) { + target.rawSql = this.buildQuery(); + } + + if (interpolate) { + return this.templateSrv.replace(target.rawSql, this.scopedVars, this.interpolateQueryStr); + } else { + return target.rawSql; + } + } + + hasUnixEpochTimecolumn() { + return ['int4', 'int8', 'float4', 'float8', 'numeric'].indexOf(this.target.timeColumnType) > -1; + } + + buildTimeColumn(alias = true) { + const timeGroup = this.hasTimeGroup(); + let query; + let macro = '$__timeGroup'; + + if (timeGroup) { + let args; + if (timeGroup.params.length > 1 && timeGroup.params[1] !== 'none') { + args = timeGroup.params.join(','); + } else { + args = timeGroup.params[0]; + } + if (this.hasUnixEpochTimecolumn()) { + macro = '$__unixEpochGroup'; + } + if (alias) { + macro += 'Alias'; + } + query = macro + '(' + this.target.timeColumn + ',' + args + ')'; + } else { + query = this.target.timeColumn; + if (alias) { + query += ' AS "time"'; + } + } + + return query; + } + + buildMetricColumn() { + if (this.hasMetricColumn()) { + return this.target.metricColumn + ' AS metric'; + } + + return ''; + } + + buildValueColumns() { + let query = ''; + for (const column of this.target.select) { + query += ',\n ' + this.buildValueColumn(column); + } + + return query; + } + + buildValueColumn(column) { + let query = ''; + + const columnName = _.find(column, (g: any) => g.type === 'column'); + query = columnName.params[0]; + + const aggregate = _.find(column, (g: any) => g.type === 'aggregate' || g.type === 'percentile'); + const windows = _.find(column, (g: any) => g.type === 'window' || g.type === 'moving_window'); + + if (aggregate) { + const func = aggregate.params[0]; + switch (aggregate.type) { + case 'aggregate': + if (func === 'first' || func === 'last') { + query = func + '(' + query + ',' + this.target.timeColumn + ')'; + } else { + query = func + '(' + query + ')'; + } + break; + case 'percentile': + query = func + '(' + aggregate.params[1] + ') WITHIN GROUP (ORDER BY ' + query + ')'; + break; + } + } + + if (windows) { + const overParts = []; + if (this.hasMetricColumn()) { + overParts.push('PARTITION BY ' + this.target.metricColumn); + } + overParts.push('ORDER BY ' + this.buildTimeColumn(false)); + + const over = overParts.join(' '); + let curr: string; + let prev: string; + switch (windows.type) { + case 'window': + switch (windows.params[0]) { + case 'increase': + curr = query; + prev = 'lag(' + curr + ') OVER (' + over + ')'; + query = '(CASE WHEN ' + curr + ' >= ' + prev + ' THEN ' + curr + ' - ' + prev + ' ELSE ' + curr + ' END)'; + break; + case 'rate': + let timeColumn = this.target.timeColumn; + if (aggregate) { + timeColumn = 'min(' + timeColumn + ')'; + } + + curr = query; + prev = 'lag(' + curr + ') OVER (' + over + ')'; + query = '(CASE WHEN ' + curr + ' >= ' + prev + ' THEN ' + curr + ' - ' + prev + ' ELSE ' + curr + ' END)'; + query += '/extract(epoch from ' + timeColumn + ' - lag(' + timeColumn + ') OVER (' + over + '))'; + break; + default: + query = windows.params[0] + '(' + query + ') OVER (' + over + ')'; + break; + } + break; + case 'moving_window': + query = windows.params[0] + '(' + query + ') OVER (' + over + ' ROWS ' + windows.params[1] + ' PRECEDING)'; + break; + } + } + + const alias = _.find(column, (g: any) => g.type === 'alias'); + if (alias) { + query += ' AS ' + this.quoteIdentifier(alias.params[0]); + } + + return query; + } + + buildWhereClause() { + let query = ''; + const conditions = _.map(this.target.where, (tag, index) => { + switch (tag.type) { + case 'macro': + return tag.name + '(' + this.target.timeColumn + ')'; + break; + case 'expression': + return tag.params.join(' '); + break; + } + }); + + if (conditions.length > 0) { + query = '\nWHERE\n ' + conditions.join(' AND\n '); + } + + return query; + } + + buildGroupClause() { + let query = ''; + let groupSection = ''; + + for (let i = 0; i < this.target.group.length; i++) { + const part = this.target.group[i]; + if (i > 0) { + groupSection += ', '; + } + if (part.type === 'time') { + groupSection += '1'; + } else { + groupSection += part.params[0]; + } + } + + if (groupSection.length) { + query = '\nGROUP BY ' + groupSection; + if (this.hasMetricColumn()) { + query += ',2'; + } + } + return query; + } + + buildQuery() { + let query = 'SELECT'; + + query += '\n ' + this.buildTimeColumn(); + if (this.hasMetricColumn()) { + query += ',\n ' + this.buildMetricColumn(); + } + query += this.buildValueColumns(); + + query += '\nFROM ' + this.target.table; + + query += this.buildWhereClause(); + query += this.buildGroupClause(); + + query += '\nORDER BY 1'; + + return query; + } +} diff --git a/public/app/plugins/datasource/postgres/query_ctrl.ts b/public/app/plugins/datasource/postgres/query_ctrl.ts index fceca1e2037..1cb8bfa5a05 100644 --- a/public/app/plugins/datasource/postgres/query_ctrl.ts +++ b/public/app/plugins/datasource/postgres/query_ctrl.ts @@ -1,12 +1,10 @@ import _ from 'lodash'; +import appEvents from 'app/core/app_events'; +import { PostgresMetaQuery } from './meta_query'; import { QueryCtrl } from 'app/plugins/sdk'; - -export interface PostgresQuery { - refId: string; - format: string; - alias: string; - rawSql: string; -} +import { SqlPart } from 'app/core/components/sql_part/sql_part'; +import PostgresQuery from './postgres_query'; +import sqlPart from './sql_part'; export interface QueryMeta { sql: string; @@ -26,17 +24,29 @@ export class PostgresQueryCtrl extends QueryCtrl { showLastQuerySQL: boolean; formats: any[]; - target: PostgresQuery; + queryModel: PostgresQuery; + metaBuilder: PostgresMetaQuery; lastQueryMeta: QueryMeta; lastQueryError: string; showHelp: boolean; + tableSegment: any; + whereAdd: any; + timeColumnSegment: any; + metricColumnSegment: any; + selectMenu: any[]; + selectParts: SqlPart[][]; + groupParts: SqlPart[]; + whereParts: SqlPart[]; + groupAdd: any; /** @ngInject */ - constructor($scope, $injector) { + constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) { super($scope, $injector); + this.target = this.target; + this.queryModel = new PostgresQuery(this.target, templateSrv, this.panel.scopedVars); + this.metaBuilder = new PostgresMetaQuery(this.target, this.queryModel); + this.updateProjection(); - this.target.format = this.target.format || 'time_series'; - this.target.alias = ''; this.formats = [{ text: 'Time series', value: 'time_series' }, { text: 'Table', value: 'table' }]; if (!this.target.rawSql) { @@ -44,15 +54,231 @@ export class PostgresQueryCtrl extends QueryCtrl { if (this.panelCtrl.panel.type === 'table') { this.target.format = 'table'; this.target.rawSql = 'SELECT 1'; + this.target.rawQuery = true; } else { this.target.rawSql = defaultQuery; + this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then(result => { + if (result.length > 0) { + this.target.table = result[0].text; + let segment = this.uiSegmentSrv.newSegment(this.target.table); + this.tableSegment.html = segment.html; + this.tableSegment.value = segment.value; + + this.target.timeColumn = result[1].text; + segment = this.uiSegmentSrv.newSegment(this.target.timeColumn); + this.timeColumnSegment.html = segment.html; + this.timeColumnSegment.value = segment.value; + + this.target.timeColumnType = 'timestamp'; + this.target.select = [[{ type: 'column', params: [result[2].text] }]]; + this.updateProjection(); + this.panelCtrl.refresh(); + } + }); } } + if (!this.target.table) { + this.tableSegment = uiSegmentSrv.newSegment({ value: 'select table', fake: true }); + } else { + this.tableSegment = uiSegmentSrv.newSegment(this.target.table); + } + + this.timeColumnSegment = uiSegmentSrv.newSegment(this.target.timeColumn); + this.metricColumnSegment = uiSegmentSrv.newSegment(this.target.metricColumn); + + this.buildSelectMenu(); + this.whereAdd = this.uiSegmentSrv.newPlusButton(); + this.groupAdd = this.uiSegmentSrv.newPlusButton(); + this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope); this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope); } + updateProjection() { + this.selectParts = _.map(this.target.select, function(parts: any) { + return _.map(parts, sqlPart.create).filter(n => n); + }); + this.whereParts = _.map(this.target.where, sqlPart.create).filter(n => n); + this.groupParts = _.map(this.target.group, sqlPart.create).filter(n => n); + } + + updatePersistedParts() { + this.target.select = _.map(this.selectParts, function(selectParts) { + return _.map(selectParts, function(part: any) { + return { type: part.def.type, datatype: part.datatype, params: part.params }; + }); + }); + this.target.where = _.map(this.whereParts, function(part: any) { + return { type: part.def.type, datatype: part.datatype, name: part.name, params: part.params }; + }); + this.target.group = _.map(this.groupParts, function(part: any) { + return { type: part.def.type, datatype: part.datatype, params: part.params }; + }); + } + + buildSelectMenu() { + this.selectMenu = []; + const aggregates = { + text: 'Aggregate Functions', + value: 'aggregate', + submenu: [ + { text: 'Average', value: 'avg' }, + { text: 'Count', value: 'count' }, + { text: 'Maximum', value: 'max' }, + { text: 'Minimum', value: 'min' }, + { text: 'Sum', value: 'sum' }, + { text: 'Standard deviation', value: 'stddev' }, + { text: 'Variance', value: 'variance' }, + ], + }; + + // first and last aggregate are timescaledb specific + if (this.datasource.jsonData.timescaledb === true) { + aggregates.submenu.push({ text: 'First', value: 'first' }); + aggregates.submenu.push({ text: 'Last', value: 'last' }); + } + + this.selectMenu.push(aggregates); + + // ordered set aggregates require postgres 9.4+ + if (this.datasource.jsonData.postgresVersion >= 904) { + const aggregates2 = { + text: 'Ordered-Set Aggregate Functions', + value: 'percentile', + submenu: [ + { text: 'Percentile (continuous)', value: 'percentile_cont' }, + { text: 'Percentile (discrete)', value: 'percentile_disc' }, + ], + }; + this.selectMenu.push(aggregates2); + } + + const windows = { + text: 'Window Functions', + value: 'window', + submenu: [ + { text: 'Increase', value: 'increase' }, + { text: 'Rate', value: 'rate' }, + { text: 'Sum', value: 'sum' }, + { text: 'Moving Average', value: 'avg', type: 'moving_window' }, + ], + }; + this.selectMenu.push(windows); + + this.selectMenu.push({ text: 'Alias', value: 'alias' }); + this.selectMenu.push({ text: 'Column', value: 'column' }); + } + + toggleEditorMode() { + if (this.target.rawQuery) { + appEvents.emit('confirm-modal', { + title: 'Warning', + text2: 'Switching to query builder may overwrite your raw SQL.', + icon: 'fa-exclamation', + yesText: 'Switch', + onConfirm: () => { + this.target.rawQuery = !this.target.rawQuery; + }, + }); + } else { + this.target.rawQuery = !this.target.rawQuery; + } + } + + resetPlusButton(button) { + const plusButton = this.uiSegmentSrv.newPlusButton(); + button.html = plusButton.html; + button.value = plusButton.value; + } + + getTableSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildTableQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + + tableChanged() { + this.target.table = this.tableSegment.value; + this.target.where = []; + this.target.group = []; + this.updateProjection(); + + const segment = this.uiSegmentSrv.newSegment('none'); + this.metricColumnSegment.html = segment.html; + this.metricColumnSegment.value = segment.value; + this.target.metricColumn = 'none'; + + const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then(result => { + // check if time column is still valid + if (result.length > 0 && !_.find(result, (r: any) => r.text === this.target.timeColumn)) { + const segment = this.uiSegmentSrv.newSegment(result[0].text); + this.timeColumnSegment.html = segment.html; + this.timeColumnSegment.value = segment.value; + } + return this.timeColumnChanged(false); + }); + const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then(result => { + if (result.length > 0) { + this.target.select = [[{ type: 'column', params: [result[0].text] }]]; + this.updateProjection(); + } + }); + + this.$q.all([task1, task2]).then(() => { + this.panelCtrl.refresh(); + }); + } + + getTimeColumnSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('time')) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + + timeColumnChanged(refresh?: boolean) { + this.target.timeColumn = this.timeColumnSegment.value; + return this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)).then(result => { + if (result.length === 1) { + if (this.target.timeColumnType !== result[0].text) { + this.target.timeColumnType = result[0].text; + } + let partModel; + if (this.queryModel.hasUnixEpochTimecolumn()) { + partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] }); + } else { + partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] }); + } + + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } + } + + this.updatePersistedParts(); + if (refresh !== false) { + this.panelCtrl.refresh(); + } + }); + } + + getMetricColumnSegments() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('metric')) + .then(this.transformToSegments({ addNone: true })) + .catch(this.handleQueryError.bind(this)); + } + + metricColumnChanged() { + this.target.metricColumn = this.metricColumnSegment.value; + this.panelCtrl.refresh(); + } + onDataReceived(dataList) { this.lastQueryMeta = null; this.lastQueryError = null; @@ -72,4 +298,356 @@ export class PostgresQueryCtrl extends QueryCtrl { } } } + + transformToSegments(config) { + return results => { + const segments = _.map(results, segment => { + return this.uiSegmentSrv.newSegment({ + value: segment.text, + expandable: segment.expandable, + }); + }); + + if (config.addTemplateVars) { + for (const variable of this.templateSrv.variables) { + let value; + value = '$' + variable.name; + if (config.templateQuoter && variable.multi === false) { + value = config.templateQuoter(value); + } + + segments.unshift( + this.uiSegmentSrv.newSegment({ + type: 'template', + value: value, + expandable: true, + }) + ); + } + } + + if (config.addNone) { + segments.unshift(this.uiSegmentSrv.newSegment({ type: 'template', value: 'none', expandable: true })); + } + + return segments; + }; + } + + findAggregateIndex(selectParts) { + return _.findIndex(selectParts, (p: any) => p.def.type === 'aggregate' || p.def.type === 'percentile'); + } + + findWindowIndex(selectParts) { + return _.findIndex(selectParts, (p: any) => p.def.type === 'window' || p.def.type === 'moving_window'); + } + + addSelectPart(selectParts, item, subItem) { + let partType = item.value; + if (subItem && subItem.type) { + partType = subItem.type; + } + let partModel = sqlPart.create({ type: partType }); + if (subItem) { + partModel.params[0] = subItem.value; + } + let addAlias = false; + + switch (partType) { + case 'column': + const parts = _.map(selectParts, function(part: any) { + return sqlPart.create({ type: part.def.type, params: _.clone(part.params) }); + }); + this.selectParts.push(parts); + break; + case 'percentile': + case 'aggregate': + // add group by if no group by yet + if (this.target.group.length === 0) { + this.addGroup('time', '$__interval'); + } + const aggIndex = this.findAggregateIndex(selectParts); + if (aggIndex !== -1) { + // replace current aggregation + selectParts[aggIndex] = partModel; + } else { + selectParts.splice(1, 0, partModel); + } + if (!_.find(selectParts, (p: any) => p.def.type === 'alias')) { + addAlias = true; + } + break; + case 'moving_window': + case 'window': + const windowIndex = this.findWindowIndex(selectParts); + if (windowIndex !== -1) { + // replace current window function + selectParts[windowIndex] = partModel; + } else { + const aggIndex = this.findAggregateIndex(selectParts); + if (aggIndex !== -1) { + selectParts.splice(aggIndex + 1, 0, partModel); + } else { + selectParts.splice(1, 0, partModel); + } + } + if (!_.find(selectParts, (p: any) => p.def.type === 'alias')) { + addAlias = true; + } + break; + case 'alias': + addAlias = true; + break; + } + + if (addAlias) { + // set initial alias name to column name + partModel = sqlPart.create({ type: 'alias', params: [selectParts[0].params[0].replace(/"/g, '')] }); + if (selectParts[selectParts.length - 1].def.type === 'alias') { + selectParts[selectParts.length - 1] = partModel; + } else { + selectParts.push(partModel); + } + } + + this.updatePersistedParts(); + this.panelCtrl.refresh(); + } + + removeSelectPart(selectParts, part) { + if (part.def.type === 'column') { + // remove all parts of column unless its last column + if (this.selectParts.length > 1) { + const modelsIndex = _.indexOf(this.selectParts, selectParts); + this.selectParts.splice(modelsIndex, 1); + } + } else { + const partIndex = _.indexOf(selectParts, part); + selectParts.splice(partIndex, 1); + } + + this.updatePersistedParts(); + } + + handleSelectPartEvent(selectParts, part, evt) { + switch (evt.name) { + case 'get-param-options': { + switch (part.def.type) { + case 'aggregate': + return this.datasource + .metricFindQuery(this.metaBuilder.buildAggregateQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + case 'column': + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('value')) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.panelCtrl.refresh(); + break; + } + case 'action': { + this.removeSelectPart(selectParts, part); + this.panelCtrl.refresh(); + break; + } + case 'get-part-actions': { + return this.$q.when([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + handleGroupPartEvent(part, index, evt) { + switch (evt.name) { + case 'get-param-options': { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.panelCtrl.refresh(); + break; + } + case 'action': { + this.removeGroup(part, index); + this.panelCtrl.refresh(); + break; + } + case 'get-part-actions': { + return this.$q.when([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + addGroup(partType, value) { + let params = [value]; + if (partType === 'time') { + params = ['$__interval', 'none']; + } + const partModel = sqlPart.create({ type: partType, params: params }); + + if (partType === 'time') { + // put timeGroup at start + this.groupParts.splice(0, 0, partModel); + } else { + this.groupParts.push(partModel); + } + + // add aggregates when adding group by + for (const selectParts of this.selectParts) { + if (!selectParts.some(part => part.def.type === 'aggregate')) { + const aggregate = sqlPart.create({ type: 'aggregate', params: ['avg'] }); + selectParts.splice(1, 0, aggregate); + if (!selectParts.some(part => part.def.type === 'alias')) { + const alias = sqlPart.create({ type: 'alias', params: [selectParts[0].part.params[0]] }); + selectParts.push(alias); + } + } + } + + this.updatePersistedParts(); + } + + removeGroup(part, index) { + if (part.def.type === 'time') { + // remove aggregations + this.selectParts = _.map(this.selectParts, (s: any) => { + return _.filter(s, (part: any) => { + if (part.def.type === 'aggregate' || part.def.type === 'percentile') { + return false; + } + return true; + }); + }); + } + + this.groupParts.splice(index, 1); + this.updatePersistedParts(); + } + + handleWherePartEvent(whereParts, part, evt, index) { + switch (evt.name) { + case 'get-param-options': { + switch (evt.param.name) { + case 'left': + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery()) + .then(this.transformToSegments({})) + .catch(this.handleQueryError.bind(this)); + case 'right': + if (['int4', 'int8', 'float4', 'float8', 'timestamp', 'timestamptz'].indexOf(part.datatype) > -1) { + // don't do value lookups for numerical fields + return this.$q.when([]); + } else { + return this.datasource + .metricFindQuery(this.metaBuilder.buildValueQuery(part.params[0])) + .then( + this.transformToSegments({ + addTemplateVars: true, + templateQuoter: (v: string) => { + return this.queryModel.quoteLiteral(v); + }, + }) + ) + .catch(this.handleQueryError.bind(this)); + } + case 'op': + return this.$q.when(this.uiSegmentSrv.newOperators(this.metaBuilder.getOperators(part.datatype))); + default: + return this.$q.when([]); + } + } + case 'part-param-changed': { + this.updatePersistedParts(); + this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(part.params[0])).then((d: any) => { + if (d.length === 1) { + part.datatype = d[0].text; + } + }); + this.panelCtrl.refresh(); + break; + } + case 'action': { + // remove element + whereParts.splice(index, 1); + this.updatePersistedParts(); + this.panelCtrl.refresh(); + break; + } + case 'get-part-actions': { + return this.$q.when([{ text: 'Remove', value: 'remove-part' }]); + } + } + } + + getWhereOptions() { + const options = []; + if (this.queryModel.hasUnixEpochTimecolumn()) { + options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__unixEpochFilter' })); + } else { + options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__timeFilter' })); + } + options.push(this.uiSegmentSrv.newSegment({ type: 'expression', value: 'Expression' })); + return this.$q.when(options); + } + + addWhereAction(part, index) { + switch (this.whereAdd.type) { + case 'macro': { + const partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] }); + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } + break; + } + default: { + this.whereParts.push(sqlPart.create({ type: 'expression', params: ['value', '=', 'value'] })); + } + } + + this.updatePersistedParts(); + this.resetPlusButton(this.whereAdd); + this.panelCtrl.refresh(); + } + + getGroupOptions() { + return this.datasource + .metricFindQuery(this.metaBuilder.buildColumnQuery('group')) + .then(tags => { + const options = []; + if (!this.queryModel.hasTimeGroup()) { + options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' })); + } + for (const tag of tags) { + options.push(this.uiSegmentSrv.newSegment({ type: 'column', value: tag.text })); + } + return options; + }) + .catch(this.handleQueryError.bind(this)); + } + + addGroupAction() { + switch (this.groupAdd.value) { + default: { + this.addGroup(this.groupAdd.type, this.groupAdd.value); + } + } + + this.resetPlusButton(this.groupAdd); + this.panelCtrl.refresh(); + } + + handleQueryError(err) { + this.error = err.message || 'Failed to issue metric query'; + return []; + } } diff --git a/public/app/plugins/datasource/postgres/specs/datasource.test.ts b/public/app/plugins/datasource/postgres/specs/datasource.test.ts index 8ee687543cc..49541028caf 100644 --- a/public/app/plugins/datasource/postgres/specs/datasource.test.ts +++ b/public/app/plugins/datasource/postgres/specs/datasource.test.ts @@ -9,12 +9,23 @@ describe('PostgreSQLDatasource', () => { const templateSrv = { replace: jest.fn(text => text), }; + const raw = { + from: moment.utc('2018-04-25 10:00'), + to: moment.utc('2018-04-25 11:00'), + }; const ctx = { backendSrv, + timeSrvMock: { + timeRange: () => ({ + from: raw.from, + to: raw.to, + raw: raw, + }), + }, } as any; beforeEach(() => { - ctx.ds = new PostgresDatasource(instanceSettings, backendSrv, {}, templateSrv); + ctx.ds = new PostgresDatasource(instanceSettings, backendSrv, {}, templateSrv, ctx.timeSrvMock); }); describe('When performing annotationQuery', () => { @@ -219,6 +230,7 @@ describe('PostgreSQLDatasource', () => { it('should return a quoted value', () => { ctx.variable.multi = true; expect(ctx.ds.interpolateVariable("a'bc", ctx.variable)).toEqual("'a''bc'"); + expect(ctx.ds.interpolateVariable("a'b'c", ctx.variable)).toEqual("'a''b''c'"); }); }); diff --git a/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts new file mode 100644 index 00000000000..877bd47618b --- /dev/null +++ b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts @@ -0,0 +1,155 @@ +import PostgresQuery from '../postgres_query'; + +describe('PostgresQuery', function() { + const templateSrv = { + replace: jest.fn(text => text), + }; + + describe('When initializing', function() { + it('should not be in SQL mode', function() { + const query = new PostgresQuery({}, templateSrv); + expect(query.target.rawQuery).toBe(false); + }); + it('should be in SQL mode for pre query builder queries', function() { + const query = new PostgresQuery({ rawSql: 'SELECT 1' }, templateSrv); + expect(query.target.rawQuery).toBe(true); + }); + }); + + describe('When generating time column SQL', function() { + const query = new PostgresQuery({}, templateSrv); + + query.target.timeColumn = 'time'; + expect(query.buildTimeColumn()).toBe('time AS "time"'); + query.target.timeColumn = '"time"'; + expect(query.buildTimeColumn()).toBe('"time" AS "time"'); + }); + + describe('When generating time column SQL with group by time', function() { + let query = new PostgresQuery( + { timeColumn: 'time', group: [{ type: 'time', params: ['5m', 'none'] }] }, + templateSrv + ); + expect(query.buildTimeColumn()).toBe('$__timeGroupAlias(time,5m)'); + expect(query.buildTimeColumn(false)).toBe('$__timeGroup(time,5m)'); + + query = new PostgresQuery({ timeColumn: 'time', group: [{ type: 'time', params: ['5m', 'NULL'] }] }, templateSrv); + expect(query.buildTimeColumn()).toBe('$__timeGroupAlias(time,5m,NULL)'); + + query = new PostgresQuery( + { timeColumn: 'time', timeColumnType: 'int4', group: [{ type: 'time', params: ['5m', 'none'] }] }, + templateSrv + ); + expect(query.buildTimeColumn()).toBe('$__unixEpochGroupAlias(time,5m)'); + expect(query.buildTimeColumn(false)).toBe('$__unixEpochGroup(time,5m)'); + }); + + describe('When generating metric column SQL', function() { + const query = new PostgresQuery({}, templateSrv); + + query.target.metricColumn = 'host'; + expect(query.buildMetricColumn()).toBe('host AS metric'); + query.target.metricColumn = '"host"'; + expect(query.buildMetricColumn()).toBe('"host" AS metric'); + }); + + describe('When generating value column SQL', function() { + const query = new PostgresQuery({}, templateSrv); + + let column = [{ type: 'column', params: ['value'] }]; + expect(query.buildValueColumn(column)).toBe('value'); + column = [{ type: 'column', params: ['value'] }, { type: 'alias', params: ['alias'] }]; + expect(query.buildValueColumn(column)).toBe('value AS "alias"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'aggregate', params: ['max'] }, + ]; + expect(query.buildValueColumn(column)).toBe('max(v) AS "a"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'window', params: ['increase'] }, + ]; + expect(query.buildValueColumn(column)).toBe( + '(CASE WHEN v >= lag(v) OVER (ORDER BY time) THEN v - lag(v) OVER (ORDER BY time) ELSE v END) AS "a"' + ); + }); + + describe('When generating value column SQL with metric column', function() { + const query = new PostgresQuery({}, templateSrv); + query.target.metricColumn = 'host'; + + let column = [{ type: 'column', params: ['value'] }]; + expect(query.buildValueColumn(column)).toBe('value'); + column = [{ type: 'column', params: ['value'] }, { type: 'alias', params: ['alias'] }]; + expect(query.buildValueColumn(column)).toBe('value AS "alias"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'aggregate', params: ['max'] }, + ]; + expect(query.buildValueColumn(column)).toBe('max(v) AS "a"'); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'window', params: ['increase'] }, + ]; + expect(query.buildValueColumn(column)).toBe( + '(CASE WHEN v >= lag(v) OVER (PARTITION BY host ORDER BY time) THEN v - lag(v) OVER (PARTITION BY host ORDER BY time) ELSE v END) AS "a"' + ); + column = [ + { type: 'column', params: ['v'] }, + { type: 'alias', params: ['a'] }, + { type: 'aggregate', params: ['max'] }, + { type: 'window', params: ['increase'] }, + ]; + expect(query.buildValueColumn(column)).toBe( + '(CASE WHEN max(v) >= lag(max(v)) OVER (PARTITION BY host ORDER BY time) ' + + 'THEN max(v) - lag(max(v)) OVER (PARTITION BY host ORDER BY time) ELSE max(v) END) AS "a"' + ); + }); + + describe('When generating WHERE clause', function() { + const query = new PostgresQuery({ where: [] }, templateSrv); + + expect(query.buildWhereClause()).toBe(''); + + query.target.timeColumn = 't'; + query.target.where = [{ type: 'macro', name: '$__timeFilter' }]; + expect(query.buildWhereClause()).toBe('\nWHERE\n $__timeFilter(t)'); + + query.target.where = [{ type: 'expression', params: ['v', '=', '1'] }]; + expect(query.buildWhereClause()).toBe('\nWHERE\n v = 1'); + + query.target.where = [{ type: 'macro', name: '$__timeFilter' }, { type: 'expression', params: ['v', '=', '1'] }]; + expect(query.buildWhereClause()).toBe('\nWHERE\n $__timeFilter(t) AND\n v = 1'); + }); + + describe('When generating GROUP BY clause', function() { + const query = new PostgresQuery({ group: [], metricColumn: 'none' }, templateSrv); + + expect(query.buildGroupClause()).toBe(''); + query.target.group = [{ type: 'time', params: ['5m'] }]; + expect(query.buildGroupClause()).toBe('\nGROUP BY 1'); + query.target.metricColumn = 'm'; + expect(query.buildGroupClause()).toBe('\nGROUP BY 1,2'); + }); + + describe('When generating complete statement', function() { + const target = { + timeColumn: 't', + table: 'table', + select: [[{ type: 'column', params: ['value'] }]], + where: [], + }; + let result = 'SELECT\n t AS "time",\n value\nFROM table\nORDER BY 1'; + const query = new PostgresQuery(target, templateSrv); + + expect(query.buildQuery()).toBe(result); + + query.target.metricColumn = 'm'; + result = 'SELECT\n t AS "time",\n m AS metric,\n value\nFROM table\nORDER BY 1'; + expect(query.buildQuery()).toBe(result); + }); +}); diff --git a/public/app/plugins/datasource/postgres/sql_part.ts b/public/app/plugins/datasource/postgres/sql_part.ts new file mode 100644 index 00000000000..695060f6366 --- /dev/null +++ b/public/app/plugins/datasource/postgres/sql_part.ts @@ -0,0 +1,137 @@ +import { SqlPartDef, SqlPart } from 'app/core/components/sql_part/sql_part'; + +const index = []; + +function createPart(part): any { + const def = index[part.type]; + if (!def) { + return null; + } + + return new SqlPart(part, def); +} + +function register(options: any) { + index[options.type] = new SqlPartDef(options); +} + +register({ + type: 'column', + style: 'label', + params: [{ type: 'column', dynamicLookup: true }], + defaultParams: ['value'], +}); + +register({ + type: 'expression', + style: 'expression', + label: 'Expr:', + params: [ + { name: 'left', type: 'string', dynamicLookup: true }, + { name: 'op', type: 'string', dynamicLookup: true }, + { name: 'right', type: 'string', dynamicLookup: true }, + ], + defaultParams: ['value', '=', 'value'], +}); + +register({ + type: 'macro', + style: 'label', + label: 'Macro:', + params: [], + defaultParams: [], +}); + +register({ + type: 'aggregate', + style: 'label', + params: [ + { + name: 'name', + type: 'string', + options: ['avg', 'count', 'min', 'max', 'sum', 'stddev', 'variance'], + }, + ], + defaultParams: ['avg'], +}); + +register({ + type: 'percentile', + label: 'Aggregate:', + style: 'label', + params: [ + { + name: 'name', + type: 'string', + options: ['percentile_cont', 'percentile_disc'], + }, + { + name: 'fraction', + type: 'number', + options: ['0.5', '0.75', '0.9', '0.95', '0.99'], + }, + ], + defaultParams: ['percentile_cont', '0.95'], +}); + +register({ + type: 'alias', + style: 'label', + params: [{ name: 'name', type: 'string', quote: 'double' }], + defaultParams: ['alias'], +}); + +register({ + type: 'time', + style: 'function', + label: 'time', + params: [ + { + name: 'interval', + type: 'interval', + options: ['$__interval', '1s', '10s', '1m', '5m', '10m', '15m', '1h'], + }, + { + name: 'fill', + type: 'string', + options: ['none', 'NULL', 'previous', '0'], + }, + ], + defaultParams: ['$__interval', 'none'], +}); + +register({ + type: 'window', + style: 'label', + params: [ + { + name: 'function', + type: 'string', + options: ['increase', 'rate', 'sum'], + }, + ], + defaultParams: ['increase'], +}); + +register({ + type: 'moving_window', + style: 'label', + label: 'Moving Window:', + params: [ + { + name: 'function', + type: 'string', + options: ['avg'], + }, + { + name: 'window_size', + type: 'number', + options: ['3', '5', '7', '10', '20'], + }, + ], + defaultParams: ['avg', '5'], +}); + +export default { + create: createPart, +}; diff --git a/public/app/routes/ReactContainer.tsx b/public/app/routes/ReactContainer.tsx index b161a5e7a87..438cdaa9137 100644 --- a/public/app/routes/ReactContainer.tsx +++ b/public/app/routes/ReactContainer.tsx @@ -50,7 +50,7 @@ export function reactContainer( ReactDOM.render(WrapInProvider(store, component, props), elem[0]); - scope.$on('$destroy', function() { + scope.$on('$destroy', () => { ReactDOM.unmountComponentAtNode(elem[0]); }); }, diff --git a/public/app/routes/dashboard_loaders.ts b/public/app/routes/dashboard_loaders.ts index 74c9fe2235a..b3e329bd4f2 100644 --- a/public/app/routes/dashboard_loaders.ts +++ b/public/app/routes/dashboard_loaders.ts @@ -7,9 +7,10 @@ export class LoadDashboardCtrl { $scope.appEvent('dashboard-fetch-start'); if (!$routeParams.uid && !$routeParams.slug) { - backendSrv.get('/api/dashboards/home').then(function(homeDash) { + backendSrv.get('/api/dashboards/home').then(homeDash => { if (homeDash.redirectUri) { - $location.path(homeDash.redirectUri); + const newUrl = locationUtil.stripBaseFromUrl(homeDash.redirectUri); + $location.path(newUrl); } else { const meta = homeDash.meta; meta.canSave = meta.canShare = meta.canStar = false; @@ -29,7 +30,7 @@ export class LoadDashboardCtrl { return; } - dashboardLoaderSrv.loadDashboard($routeParams.type, $routeParams.slug, $routeParams.uid).then(function(result) { + dashboardLoaderSrv.loadDashboard($routeParams.type, $routeParams.slug, $routeParams.uid).then(result => { if (result.meta.url) { const url = locationUtil.stripBaseFromUrl(result.meta.url);