energylink/public/app/features/dashboard/specs/repeat.jest.ts

import _ from "lodash";
import { DashboardModel } from "../dashboard_model";
import { expect } from "test/lib/common";

jest.mock("app/core/services/context_srv", () => ({}));

describe("given dashboard with panel repeat in horizontal direction", function() {
  var dashboard;

  beforeEach(function() {
    dashboard = new DashboardModel({
      panels: [
        {
          id: 2,
          repeat: "apps",
          repeatDirection: "h",
          gridPos: { x: 0, y: 0, h: 2, w: 24 }
        }
      ],
      templating: {
        list: [
          {
            name: "apps",
            current: {
              text: "se1, se2, se3",
              value: ["se1", "se2", "se3"]
            },
            options: [
              { text: "se1", value: "se1", selected: true },
              { text: "se2", value: "se2", selected: true },
              { text: "se3", value: "se3", selected: true },
              { text: "se4", value: "se4", selected: false }
            ]
          }
        ]
      }
    });
    dashboard.processRepeats();
  });

  it("should repeat panel 3 times", function() {
    expect(dashboard.panels.length).toBe(3);
  });

  it("should mark panel repeated", function() {
    expect(dashboard.panels[0].repeat).toBe("apps");
    expect(dashboard.panels[1].repeatPanelId).toBe(2);
  });

  it("should set scopedVars on panels", function() {
    expect(dashboard.panels[0].scopedVars.apps.value).toBe("se1");
    expect(dashboard.panels[1].scopedVars.apps.value).toBe("se2");
    expect(dashboard.panels[2].scopedVars.apps.value).toBe("se3");
  });

  it("should place on first row and adjust width so all fit", function() {
    expect(dashboard.panels[0].gridPos).toMatchObject({
      x: 0,
      y: 0,
      h: 2,
      w: 8
    });
    expect(dashboard.panels[1].gridPos).toMatchObject({
      x: 8,
      y: 0,
      h: 2,
      w: 8
    });
    expect(dashboard.panels[2].gridPos).toMatchObject({
      x: 16,
      y: 0,
      h: 2,
      w: 8
    });
  });

  describe("After a second iteration", function() {
    beforeEach(function() {
      dashboard.panels[0].fill = 10;
      dashboard.processRepeats();
    });

    it("reused panel should copy properties from source", function() {
      expect(dashboard.panels[1].fill).toBe(10);
    });

    it("should have same panel count", function() {
      expect(dashboard.panels.length).toBe(3);
    });
  });

  describe("After a second iteration with different variable", function() {
    beforeEach(function() {
      dashboard.templating.list.push({
        name: "server",
        current: { text: "se1, se2, se3", value: ["se1"] },
        options: [{ text: "se1", value: "se1", selected: true }]
      });
      dashboard.panels[0].repeat = "server";
      dashboard.processRepeats();
    });

    it("should remove scopedVars value for last variable", function() {
      expect(dashboard.panels[0].scopedVars.apps).toBe(undefined);
    });

    it("should have new variable value in scopedVars", function() {
      expect(dashboard.panels[0].scopedVars.server.value).toBe("se1");
    });
  });

  describe("After a second iteration and selected values reduced", function() {
    beforeEach(function() {
      dashboard.templating.list[0].options[1].selected = false;
      dashboard.processRepeats();
    });

    it("should clean up repeated panel", function() {
      expect(dashboard.panels.length).toBe(2);
    });
  });

  describe("After a second iteration and panel repeat is turned off", function() {
    beforeEach(function() {
      dashboard.panels[0].repeat = null;
      dashboard.processRepeats();
    });

    it("should clean up repeated panel", function() {
      expect(dashboard.panels.length).toBe(1);
    });

    it("should remove scoped vars from reused panel", function() {
      expect(dashboard.panels[0].scopedVars).toBe(undefined);
    });
  });
});

describe("given dashboard with panel repeat in vertical direction", function() {
  var dashboard;

  beforeEach(function() {
    dashboard = new DashboardModel({
      panels: [
        {
          id: 2,
          repeat: "apps",
          repeatDirection: "v",
          gridPos: { x: 5, y: 0, h: 2, w: 8 }
        }
      ],
      templating: {
        list: [
          {
            name: "apps",
            current: {
              text: "se1, se2, se3",
              value: ["se1", "se2", "se3"]
            },
            options: [
              { text: "se1", value: "se1", selected: true },
              { text: "se2", value: "se2", selected: true },
              { text: "se3", value: "se3", selected: true },
              { text: "se4", value: "se4", selected: false }
            ]
          }
        ]
      }
    });
    dashboard.processRepeats();
  });

  it("should place on items on top of each other and keep witdh", function() {
    expect(dashboard.panels[0].gridPos).toMatchObject({
      x: 5,
      y: 0,
      h: 2,
      w: 8
    });
    expect(dashboard.panels[1].gridPos).toMatchObject({
      x: 5,
      y: 2,
      h: 2,
      w: 8
    });
    expect(dashboard.panels[2].gridPos).toMatchObject({
      x: 5,
      y: 4,
      h: 2,
      w: 8
    });
  });
});

describe("given dashboard with row repeat", function() {
  let dashboard, dashboardJSON;

  beforeEach(function() {
    dashboardJSON = {
      panels: [
        {
          id: 1,
          type: "row",
          gridPos: { x: 0, y: 0, h: 1, w: 24 },
          repeat: "apps"
        },
        { id: 2, type: "graph", gridPos: { x: 0, y: 1, h: 1, w: 6 } },
        { id: 3, type: "graph", gridPos: { x: 6, y: 1, h: 1, w: 6 } },
        { id: 4, type: "row", gridPos: { x: 0, y: 2, h: 1, w: 24 } },
        { id: 5, type: "graph", gridPos: { x: 0, y: 3, h: 1, w: 12 } }
      ],
      templating: {
        list: [
          {
            name: "apps",
            current: {
              text: "se1, se2",
              value: ["se1", "se2"]
            },
            options: [
              { text: "se1", value: "se1", selected: true },
              { text: "se2", value: "se2", selected: true },
              { text: "se3", value: "se3", selected: false }
            ]
          }
        ]
      }
    };
    dashboard = new DashboardModel(dashboardJSON);
    dashboard.processRepeats();
  });

  it("should not repeat only row", function() {
    const panel_types = _.map(dashboard.panels, "type");
    expect(panel_types).toEqual([
      "row",
      "graph",
      "graph",
      "row",
      "graph",
      "graph",
      "row",
      "graph"
    ]);
  });

  it("should set scopedVars for each panel", function() {
    dashboardJSON.templating.list[0].options[2].selected = true;
    dashboard = new DashboardModel(dashboardJSON);
    dashboard.processRepeats();

    expect(dashboard.panels[1].scopedVars).toMatchObject({
      apps: { text: "se1", value: "se1" }
    });
    expect(dashboard.panels[4].scopedVars).toMatchObject({
      apps: { text: "se2", value: "se2" }
    });

    const scopedVars = _.compact(
      _.map(dashboard.panels, panel => {
        return panel.scopedVars ? panel.scopedVars.apps.value : null;
      })
    );

    expect(scopedVars).toEqual([
      "se1",
      "se1",
      "se1",
      "se2",
      "se2",
      "se2",
      "se3",
      "se3",
      "se3"
    ]);
  });

  it("should repeat only configured row", function() {
    expect(dashboard.panels[6].id).toBe(4);
    expect(dashboard.panels[7].id).toBe(5);
  });

  it("should repeat only row if it is collapsed", function() {
    dashboardJSON.panels = [
      {
        id: 1,
        type: "row",
        collapsed: true,
        repeat: "apps",
        gridPos: { x: 0, y: 0, h: 1, w: 24 },
        panels: [
          { id: 2, type: "graph", gridPos: { x: 0, y: 1, h: 1, w: 6 } },
          { id: 3, type: "graph", gridPos: { x: 6, y: 1, h: 1, w: 6 } }
        ]
      },
      { id: 4, type: "row", gridPos: { x: 0, y: 1, h: 1, w: 24 } },
      { id: 5, type: "graph", gridPos: { x: 0, y: 2, h: 1, w: 12 } }
    ];
    dashboard = new DashboardModel(dashboardJSON);
    dashboard.processRepeats();

    const panel_types = _.map(dashboard.panels, "type");
    expect(panel_types).toEqual(["row", "row", "row", "graph"]);
    expect(dashboard.panels[0].panels).toHaveLength(2);
    expect(dashboard.panels[1].panels).toHaveLength(2);
  });

  it("should properly repeat multiple rows", function() {
    dashboardJSON.panels = [
      {
        id: 1,
        type: "row",
        gridPos: { x: 0, y: 0, h: 1, w: 24 },
        repeat: "apps"
      }, // repeat
      { id: 2, type: "graph", gridPos: { x: 0, y: 1, h: 1, w: 6 } },
      { id: 3, type: "graph", gridPos: { x: 6, y: 1, h: 1, w: 6 } },
      { id: 4, type: "row", gridPos: { x: 0, y: 2, h: 1, w: 24 } }, // don't touch
      { id: 5, type: "graph", gridPos: { x: 0, y: 3, h: 1, w: 12 } },
      {
        id: 6,
        type: "row",
        gridPos: { x: 0, y: 4, h: 1, w: 24 },
        repeat: "hosts"
      }, // repeat
      { id: 7, type: "graph", gridPos: { x: 0, y: 5, h: 1, w: 6 } },
      { id: 8, type: "graph", gridPos: { x: 6, y: 5, h: 1, w: 6 } }
    ];
    dashboardJSON.templating.list.push({
      name: "hosts",
      current: {
        text: "backend01, backend02",
        value: ["backend01", "backend02"]
      },
      options: [
        { text: "backend01", value: "backend01", selected: true },
        { text: "backend02", value: "backend02", selected: true },
        { text: "backend03", value: "backend03", selected: false }
      ]
    });
    dashboard = new DashboardModel(dashboardJSON);
    dashboard.processRepeats();

    const panel_types = _.map(dashboard.panels, "type");
    expect(panel_types).toEqual([
      "row",
      "graph",
      "graph",
      "row",
      "graph",
      "graph",
      "row",
      "graph",
      "row",
      "graph",
      "graph",
      "row",
      "graph",
      "graph"
    ]);

    expect(dashboard.panels[0].scopedVars["apps"].value).toBe("se1");
    expect(dashboard.panels[1].scopedVars["apps"].value).toBe("se1");
    expect(dashboard.panels[3].scopedVars["apps"].value).toBe("se2");
    expect(dashboard.panels[4].scopedVars["apps"].value).toBe("se2");
    expect(dashboard.panels[8].scopedVars["hosts"].value).toBe("backend01");
    expect(dashboard.panels[9].scopedVars["hosts"].value).toBe("backend01");
    expect(dashboard.panels[11].scopedVars["hosts"].value).toBe("backend02");
    expect(dashboard.panels[12].scopedVars["hosts"].value).toBe("backend02");
  });

  it("should assign unique ids for repeated panels", function() {
    dashboardJSON.panels = [
      {
        id: 1,
        type: "row",
        collapsed: true,
        repeat: "apps",
        gridPos: { x: 0, y: 0, h: 1, w: 24 },
        panels: [
          { id: 2, type: "graph", gridPos: { x: 0, y: 1, h: 1, w: 6 } },
          { id: 3, type: "graph", gridPos: { x: 6, y: 1, h: 1, w: 6 } }
        ]
      },
      { id: 4, type: "row", gridPos: { x: 0, y: 1, h: 1, w: 24 } },
      { id: 5, type: "graph", gridPos: { x: 0, y: 2, h: 1, w: 12 } }
    ];
    dashboard = new DashboardModel(dashboardJSON);
    dashboard.processRepeats();

    const panel_ids = _.flattenDeep(
      _.map(dashboard.panels, panel => {
        let ids = [];
        if (panel.panels && panel.panels.length) {
          ids = _.map(panel.panels, "id");
        }
        ids.push(panel.id);
        return ids;
      })
    );
    expect(panel_ids.length).toEqual(_.uniq(panel_ids).length);
  });
});