IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Shows SubMenu when filtering directly from table (#21017)

Browse Source 
* Fix: Shows SubMenu when filtering from table
Fixes #20270

* Tests: Updates snapshots

* Refactor: Changes after PR comments

* Refactor: Changes template
This commit is contained in:
Hugo Häggmark 2019-12-11 14:09:57 +01:00 committed by GitHub
parent 4698cef2a2
commit 8495af4c52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 206 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/dashboard/components/SubMenu/SubMenuCtrl.ts
View File

@ -1,16 +1,22 @@
import angular, { ILocationService } from 'angular';
import _ from 'lodash';
import { VariableSrv } from 'app/features/templating/all';
import { CoreEvents } from '../../../../types';
export class SubMenuCtrl {
annotations: any;
variables: any;
dashboard: any;
submenuEnabled: boolean;
/** @ngInject */
constructor(private variableSrv: VariableSrv, private $location: ILocationService) {
this.annotations = this.dashboard.templating.list;
this.variables = this.variableSrv.variables;
this.submenuEnabled = false;
this.dashboard.events.on(CoreEvents.submenuVisibilityChanged, (enabled: boolean) => {
this.submenuEnabled = enabled;
});
}
annotationStateChanged() {

2
public/app/features/dashboard/components/SubMenu/template.html
View File

@ -1,4 +1,4 @@
<div class="submenu-controls">
<div class="submenu-controls" ng-hide="ctrl.submenuEnabled === false">
<div ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item gf-form-inline">
<div class="gf-form">
<label

20
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -1,37 +1,33 @@
// Libraries
import $ from 'jquery';
import React, { PureComponent, MouseEvent } from 'react';
import React, { MouseEvent, PureComponent } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import classNames from 'classnames';
// Services & Utils
import { createErrorNotification } from 'app/core/copy/appNotification';
import { getMessageFromError } from 'app/core/utils/errors';
// Components
import { DashboardGrid } from '../dashgrid/DashboardGrid';
import { DashNav } from '../components/DashNav';
import { SubMenu } from '../components/SubMenu';
import { DashboardSettings } from '../components/DashboardSettings';
import { CustomScrollbar, Alert } from '@grafana/ui';
import { Alert, CustomScrollbar } from '@grafana/ui';
// Redux
import { initDashboard } from '../state/initDashboard';
import { cleanUpDashboard } from '../state/actions';
import { updateLocation } from 'app/core/actions';
import { notifyApp } from 'app/core/actions';
import { notifyApp, updateLocation } from 'app/core/actions';
// Types
import {
StoreState,
AppNotificationSeverity,
DashboardInitError,
DashboardInitPhase,
DashboardRouteInfo,
DashboardInitError,
AppNotificationSeverity,
StoreState,
} from 'app/types';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { PanelInspector } from '../components/Inspector/PanelInspector';
export interface Props {
urlUid?: string;
urlSlug?: string;
@ -301,7 +297,7 @@ export class DashboardPage extends PureComponent<Props, State> {
{initError && this.renderInitFailedState()}
<div className={gridWrapperClasses}>
{dashboard.meta.submenuEnabled && <SubMenu dashboard={dashboard} />}
<SubMenu dashboard={dashboard} />
<DashboardGrid
dashboard={dashboard}
isEditing={isEditing}

184
public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
View File

@ -118,6 +118,98 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
<div
className="dashboard-container"
>
<SubMenu
dashboard={
DashboardModel {
"annotations": Object {
"list": Array [
Object {
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard",
},
],
},
"autoUpdate": undefined,
"description": undefined,
"editable": true,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"gnetId": null,
"graphTooltip": 0,
"id": null,
"links": Array [],
"meta": Object {
"canEdit": true,
"canMakeEditable": false,
"canSave": true,
"canShare": true,
"canStar": true,
"fullscreen": false,
"isEditing": false,
"showSettings": true,
},
"originalTemplating": Array [],
"originalTime": Object {
"from": "now-6h",
"to": "now",
},
"panels": Array [
PanelModel {
"cachedPluginOptions": Object {},
"datasource": null,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"gridPos": Object {
"h": 1,
"w": 1,
"x": 0,
"y": 0,
},
"id": 1,
"targets": Array [
Object {
"refId": "A",
},
],
"title": "My graph",
"transparent": false,
"type": "graph",
},
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 21,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
"templating": Object {
"list": Array [],
},
"time": Object {
"from": "now-6h",
"to": "now",
},
"timepicker": Object {},
"timezone": "",
"title": "My dashboard",
"uid": null,
"version": 0,
}
}
/>
<DashboardGrid
dashboard={
DashboardModel {
@ -448,6 +540,98 @@ exports[`DashboardPage When dashboard has editview url state should render setti
<div
className="dashboard-container"
>
<SubMenu
dashboard={
DashboardModel {
"annotations": Object {
"list": Array [
Object {
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard",
},
],
},
"autoUpdate": undefined,
"description": undefined,
"editable": true,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"gnetId": null,
"graphTooltip": 0,
"id": null,
"links": Array [],
"meta": Object {
"canEdit": true,
"canMakeEditable": false,
"canSave": true,
"canShare": true,
"canStar": true,
"fullscreen": false,
"isEditing": false,
"showSettings": true,
},
"originalTemplating": Array [],
"originalTime": Object {
"from": "now-6h",
"to": "now",
},
"panels": Array [
PanelModel {
"cachedPluginOptions": Object {},
"datasource": null,
"events": Emitter {
"emitter": EventEmitter {
"_events": Object {},
"_eventsCount": 0,
},
},
"gridPos": Object {
"h": 1,
"w": 1,
"x": 0,
"y": 0,
},
"id": 1,
"targets": Array [
Object {
"refId": "A",
},
],
"title": "My graph",
"transparent": false,
"type": "graph",
},
],
"refresh": undefined,
"revision": undefined,
"schemaVersion": 21,
"snapshot": undefined,
"style": "dark",
"tags": Array [],
"templating": Object {
"list": Array [],
},
"time": Object {
"from": "now-6h",
"to": "now",
},
"timepicker": Object {},
"timezone": "",
"title": "My dashboard",
"uid": null,
"version": 0,
}
}
/>
<DashboardGrid
dashboard={
DashboardModel {

14
public/app/features/dashboard/state/DashboardModel.ts
View File

@ -1,23 +1,18 @@
// Libaries
import _ from 'lodash';
// Constants
import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
import { GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL } from 'app/core/constants';
// Utils & Services
import { Emitter } from 'app/core/utils/emitter';
import { contextSrv } from 'app/core/services/context_srv';
import sortByKeys from 'app/core/utils/sort_by_keys';
// Types
import { PanelModel, GridPos, panelAdded, panelRemoved } from './PanelModel';
import { GridPos, panelAdded, PanelModel, panelRemoved } from './PanelModel';
import { DashboardMigrator } from './DashboardMigrator';
import { TimeRange, TimeZone, AppEvent } from '@grafana/data';
import { AppEvent, dateTime, DateTimeInput, isDateTime, PanelEvents, TimeRange, TimeZone, toUtc } from '@grafana/data';
import { UrlQueryValue } from '@grafana/runtime';
import { PanelEvents } from '@grafana/data';
import { KIOSK_MODE_TV, DashboardMeta, CoreEvents } from 'app/types';
import { toUtc, DateTimeInput, dateTime, isDateTime } from '@grafana/data';
import { CoreEvents, DashboardMeta, KIOSK_MODE_TV } from 'app/types';
export interface CloneOptions {
saveVariables?: boolean;
@ -660,6 +655,7 @@ export class DashboardModel {
return false;
})();
this.events.emit(CoreEvents.submenuVisibilityChanged, this.meta.submenuEnabled);
}
getPanelInfoById(panelId: number) {

4
public/app/types/events.ts
View File

@ -1,7 +1,6 @@
import { DataFrame, TimeRange } from '@grafana/data';
import { DataFrame, eventFactory, TimeRange } from '@grafana/data';
import { IHttpResponse } from 'angular';
import { DashboardModel } from 'app/features/dashboard/state';
import { eventFactory } from '@grafana/data';
/**
* Event Payloads
@ -121,6 +120,7 @@ export const repeatsProcessed = eventFactory('repeats-processed');
export const rowExpanded = eventFactory('row-expanded');
export const rowCollapsed = eventFactory('row-collapsed');
export const templateVariableValueUpdated = eventFactory('template-variable-value-updated');
export const submenuVisibilityChanged = eventFactory<boolean>('submenu-visibility-changed');
export const dataFramesReceived = eventFactory<DataFrame[]>('data-frames-received');