GraphPanel: Don't sort series when legend table & sort column is not visible (#17095)

* Fix: if current sort key is not active column, do not use for sort and select next available active (#16980)

* Fix: only sort if sortkey is active column and table is active (#16980)

* Fix: sorting stacked series as legend. current descending order test (#16980)

* Fix: existing sort tests and added additional to prevent bug from resurfacing (#16980)

public/app/plugins/panel/graph/Legend/Legend.tsx

@@ -89,7 +89,7 @@ export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
 
 
   sortLegend() {
   sortLegend() {
     let seriesList: TimeSeries[] = [...this.props.seriesList] || [];
     let seriesList: TimeSeries[] = [...this.props.seriesList] || [];
-    if (this.props.sort) {
+    if (this.props.sort && this.props[this.props.sort] && this.props.alignAsTable) {
       seriesList = _.sortBy(seriesList, series => {
       seriesList = _.sortBy(seriesList, series => {
         let sort = series.stats[this.props.sort];
         let sort = series.stats[this.props.sort];
         if (sort === null) {
         if (sort === null) {

public/app/plugins/panel/graph/graph.ts

@@ -461,9 +461,9 @@ class GraphElement {
   sortSeries(series, panel) {
   sortSeries(series, panel) {
     const sortBy = panel.legend.sort;
     const sortBy = panel.legend.sort;
     const sortOrder = panel.legend.sortDesc;
     const sortOrder = panel.legend.sortDesc;
-    const haveSortBy = sortBy !== null && sortBy !== undefined;
+    const haveSortBy = sortBy !== null && sortBy !== undefined && panel.legend[sortBy];
     const haveSortOrder = sortOrder !== null && sortOrder !== undefined;
     const haveSortOrder = sortOrder !== null && sortOrder !== undefined;
-    const shouldSortBy = panel.stack && haveSortBy && haveSortOrder;
+    const shouldSortBy = panel.stack && haveSortBy && haveSortOrder && panel.legend.alignAsTable;
     const sortDesc = panel.legend.sortDesc === true ? -1 : 1;
     const sortDesc = panel.legend.sortDesc === true ? -1 : 1;
 
 
     if (shouldSortBy) {
     if (shouldSortBy) {

public/app/plugins/panel/graph/specs/graph.test.ts

@@ -167,8 +167,11 @@ describe('grafanaGraph', () => {
   describe('sorting stacked series as legend. min descending order', () => {
   describe('sorting stacked series as legend. min descending order', () => {
     beforeEach(() => {
     beforeEach(() => {
       setupCtx(() => {
       setupCtx(() => {
-        ctrl.panel.legend.sort = 'min';
+        const sortKey = 'min';
+        ctrl.panel.legend.sort = sortKey;
         ctrl.panel.legend.sortDesc = true;
         ctrl.panel.legend.sortDesc = true;
+        ctrl.panel.legend.alignAsTable = true;
+        ctrl.panel.legend[sortKey] = true;
         ctrl.panel.stack = true;
         ctrl.panel.stack = true;
       });
       });
     });
     });
@@ -210,8 +213,11 @@ describe('grafanaGraph', () => {
   describe('sorting stacked series as legend. current descending order', () => {
   describe('sorting stacked series as legend. current descending order', () => {
     beforeEach(() => {
     beforeEach(() => {
       setupCtx(() => {
       setupCtx(() => {
-        ctrl.panel.legend.sort = 'current';
+        const sortKey = 'current';
+        ctrl.panel.legend.sort = sortKey;
         ctrl.panel.legend.sortDesc = true;
         ctrl.panel.legend.sortDesc = true;
+        ctrl.panel.legend.alignAsTable = true;
+        ctrl.panel.legend[sortKey] = true;
         ctrl.panel.stack = true;
         ctrl.panel.stack = true;
       });
       });
     });
     });
@@ -222,6 +228,23 @@ describe('grafanaGraph', () => {
     });
     });
   });
   });
 
 
+  describe('stacked series should not sort if legend is not as table or sort key column is not visible', () => {
+    beforeEach(() => {
+      setupCtx(() => {
+        const sortKey = 'min';
+        ctrl.panel.legend.sort = sortKey;
+        ctrl.panel.legend.sortDesc = true;
+        ctrl.panel.legend.alignAsTable = false;
+        ctrl.panel.legend[sortKey] = false;
+        ctrl.panel.stack = true;
+      });
+    });
+    it('highest value should be first', () => {
+      expect(ctx.plotData[0].alias).toBe('series1');
+      expect(ctx.plotData[1].alias).toBe('series2');
+    });
+  });
+
   describe('when logBase is log 10', () => {
   describe('when logBase is log 10', () => {
     beforeEach(() => {
     beforeEach(() => {
       setupCtx(() => {
       setupCtx(() => {