浏览代码

improving dash nav react comp

Torkel Ödegaard 6 年之前
父节点
当前提交
d7151e5c88

+ 30 - 17
public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -5,6 +5,9 @@ import { connect } from 'react-redux';
 // Utils & Services
 import { appEvents } from 'app/core/app_events';
 
+// Components
+import { DashNavButton } from './DashNavButton';
+
 // State
 import { updateLocation } from 'app/core/actions';
 
@@ -41,10 +44,17 @@ export class DashNav extends PureComponent<Props> {
   };
 
   onClose = () => {
-    this.props.updateLocation({
-      query: { editview: null, panelId: null, edit: null, fullscreen: null },
-      partial: true,
-    });
+    if (this.props.editview) {
+      this.props.updateLocation({
+        query: { editview: null },
+        partial: true,
+      });
+    } else {
+      this.props.updateLocation({
+        query: { panelId: null, edit: null, fullscreen: null },
+        partial: true,
+      });
+    }
   };
 
   onToggleTVMode = () => {
@@ -116,19 +126,12 @@ export class DashNav extends PureComponent<Props> {
 
         <div className="navbar-buttons navbar-buttons--actions">
           {canEdit && (
-            <button className="btn navbar-button navbar-button--add-panel" title="Add panel" onClick={this.onAddPanel}>
-              <i className="gicon gicon-add-panel" />
-            </button>
-          )}
-
-          {showSettings && (
-            <button
-              className="btn navbar-button navbar-button--settings"
-              onClick={this.onOpenSettings}
-              title="Dashboard Settings"
-            >
-              <i className="fa fa-cog" />
-            </button>
+            <DashNavButton
+              tooltip="Add panel"
+              classSuffix="add-panel"
+              icon="gicon gicon-add-panel"
+              onClick={this.onAddPanel}
+            />
           )}
 
           {canStar && (
@@ -171,6 +174,16 @@ export class DashNav extends PureComponent<Props> {
               <i className="fa fa-link" />
             </a>
           )}
+
+          {showSettings && (
+            <button
+              className="btn navbar-button navbar-button--settings"
+              onClick={this.onOpenSettings}
+              title="Dashboard Settings"
+            >
+              <i className="fa fa-cog" />
+            </button>
+          )}
         </div>
 
         <div className="navbar-buttons navbar-buttons--tv">

+ 22 - 0
public/app/features/dashboard/components/DashNav/DashNavButton.tsx

@@ -0,0 +1,22 @@
+// Libraries
+import React, { FunctionComponent } from 'react';
+
+// Components
+import { Tooltip } from '@grafana/ui';
+
+interface Props {
+  icon: string;
+  tooltip: string;
+  classSuffix: string;
+  onClick: () => void;
+}
+
+export const DashNavButton: FunctionComponent<Props> = ({ icon, tooltip, classSuffix, onClick }) => {
+  return (
+    <Tooltip content={tooltip} placement="bottom">
+      <button className={`btn navbar-button navbar-button--${classSuffix}`} onClick={onClick}>
+        <i className={icon} />
+      </button>
+    </Tooltip>
+  );
+};

+ 1 - 1
public/app/features/dashboard/state/initDashboard.ts

@@ -33,7 +33,7 @@ async function redirectToNewUrl(slug: string, dispatch: any) {
 export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: InitDashboardArgs): ThunkResult<void> {
   return async dispatch => {
     // handle old urls with no uid
-    if (!urlUid && urlSlug) {
+    if (!urlUid && urlSlug && !urlType) {
       redirectToNewUrl(urlSlug, dispatch);
       return;
     }