// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`RunDetails closes side panel when close button is clicked 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId=""
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={false}
            onClose={[Function]}
            title=""
          />
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails displays a message indicating there is no graph if graph is not defined and run has status: Error 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <span
            style={
              Object {
                "margin": "40px auto",
              }
            }
          >
            No graph to show
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails displays a message indicating there is no graph if graph is not defined and run has status: Failed 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <span
            style={
              Object {
                "margin": "40px auto",
              }
            }
          >
            No graph to show
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails displays a message indicating there is no graph if graph is not defined and run has status: Skipped 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <span
            style={
              Object {
                "margin": "40px auto",
              }
            }
          >
            No graph to show
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails displays a message indicating there is no graph if graph is not defined and run has status: Succeeded 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <span
            style={
              Object {
                "margin": "40px auto",
              }
            }
          >
            No graph to show
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails displays a spinner if graph is not defined and run has status: Pending 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <WithStyles(CircularProgress)
            className="absoluteCenter"
            size={30}
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails displays a spinner if graph is not defined and run has status: Running 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <WithStyles(CircularProgress)
            className="absoluteCenter"
            size={30}
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails displays a spinner if graph is not defined and run has status: Unknown 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <WithStyles(CircularProgress)
            className="absoluteCenter"
            size={30}
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails keeps side pane open and on same tab when run status changes, shows new status 1`] = `
<div
  className="flex"
>
  <WithStyles(Tooltip)
    title={
      <div>
        <div>
          Executed successfully
        </div>
        <div>
          Start: 
          1/2/2019, 12:34:56 PM
        </div>
      </div>
    }
  >
    <div>
      <pure(CheckCircleIcon)
        data-testid="node-status-sign"
        style={
          Object {
            "color": "#34a853",
            "height": 18,
            "width": 18,
          }
        }
      />
    </div>
  </WithStyles(Tooltip)>
  <span
    style={
      Object {
        "marginLeft": 10,
      }
    }
  >
    test run
  </span>
</div>
`;

exports[`RunDetails keeps side pane open and on same tab when run status changes, shows new status 2`] = `
<div
  className="flex"
>
  <WithStyles(Tooltip)
    title={
      <div>
        <div>
          Resource failed to execute
        </div>
        <div>
          Start: 
          1/2/2019, 12:34:56 PM
        </div>
      </div>
    }
  >
    <div>
      <pure(ErrorIcon)
        data-testid="node-status-sign"
        style={
          Object {
            "color": "#d50000",
            "height": 18,
            "width": 18,
          }
        }
      />
    </div>
  </WithStyles(Tooltip)>
  <span
    style={
      Object {
        "marginLeft": 10,
      }
    }
  >
    test run
  </span>
</div>
`;

exports[`RunDetails loads the run's outputs in the output tab 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={1}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className=""
      >
        <span>
          No metrics found for this run.
        </span>
        <Separator
          orientation="vertical"
        />
        <Hr />
        <div
          key="0"
        >
          <PlotCard
            configs={
              Array [
                Object {
                  "type": "tensorboard",
                  "url": "some url",
                },
              ]
            }
            key="0"
            maxDimension={400}
            title="step1"
          />
          <Separator
            orientation="vertical"
          />
          <Hr />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails logs tab does not load logs if clicked node status is skipped 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={4}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              />
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails logs tab keeps side pane open and on same tab when logs change after refresh 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={4}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              >
                <div
                  className="page"
                >
                  <div
                    className="pageOverflowHidden"
                  >
                    <LogViewer
                      logLines={
                        Array [
                          "new test logs",
                        ]
                      }
                    />
                  </div>
                </div>
              </div>
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails logs tab loads and shows logs in side pane 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={4}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              >
                <div
                  className="page"
                >
                  <div
                    className="pageOverflowHidden"
                  >
                    <LogViewer
                      logLines={
                        Array [
                          "test logs",
                        ]
                      }
                    />
                  </div>
                </div>
              </div>
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails logs tab switches to logs tab in side pane 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={true}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={4}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              >
                <div
                  className="page"
                >
                  <div
                    className="pageOverflowHidden"
                  >
                    <LogViewer
                      logLines={
                        Array [
                          "",
                        ]
                      }
                    />
                  </div>
                </div>
              </div>
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails opens side panel when graph node is clicked 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={0}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              >
                <div
                  className=""
                >
                  <DetailsTable
                    fields={Array []}
                    key="input-parameters-node1"
                    title="Input parameters"
                  />
                  <DetailsTable
                    fields={Array []}
                    key="input-artifacts-node1"
                    title="Input artifacts"
                    valueComponent={[Function]}
                    valueComponentProps={
                      Object {
                        "namespace": undefined,
                      }
                    }
                  />
                  <DetailsTable
                    fields={Array []}
                    key="output-parameters-node1"
                    title="Output parameters"
                  />
                  <DetailsTable
                    fields={Array []}
                    key="output-artifacts-node1"
                    title="Output artifacts"
                    valueComponent={[Function]}
                    valueComponentProps={
                      Object {
                        "namespace": undefined,
                      }
                    }
                  />
                </div>
              </div>
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails renders an empty run 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div>
          <span
            style={
              Object {
                "margin": "40px auto",
              }
            }
          >
            No graph to show
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails shows failure run status in page title 1`] = `
<div
  className="flex"
>
  <WithStyles(Tooltip)
    title={
      <div>
        <div>
          Resource failed to execute
        </div>
        <div>
          Start: 
          1/2/2019, 12:34:56 PM
        </div>
      </div>
    }
  >
    <div>
      <pure(ErrorIcon)
        data-testid="node-status-sign"
        style={
          Object {
            "color": "#d50000",
            "height": 18,
            "width": 18,
          }
        }
      />
    </div>
  </WithStyles(Tooltip)>
  <span
    style={
      Object {
        "marginLeft": 10,
      }
    }
  >
    test run
  </span>
</div>
`;

exports[`RunDetails shows run config fields - handles no description 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={2}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className=""
      >
        <DetailsTable
          fields={
            Array [
              Array [
                "Run ID",
                "test-run-id",
              ],
              Array [
                "Workflow name",
                "-",
              ],
              Array [
                "Status",
                "Skipped",
              ],
              Array [
                "Description",
                undefined,
              ],
              Array [
                "Created at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Started at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Finished at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Duration",
                "25:01:01",
              ],
            ]
          }
          title="Run details"
        />
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails shows run config fields - handles no metadata 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={2}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className=""
      >
        <DetailsTable
          fields={
            Array [
              Array [
                "Run ID",
                "test-run-id",
              ],
              Array [
                "Workflow name",
                "-",
              ],
              Array [
                "Status",
                "Skipped",
              ],
              Array [
                "Description",
                "test run description",
              ],
              Array [
                "Created at",
                "-",
              ],
              Array [
                "Started at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Finished at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Duration",
                "25:01:01",
              ],
            ]
          }
          title="Run details"
        />
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails shows run config fields 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={2}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className=""
      >
        <DetailsTable
          fields={
            Array [
              Array [
                "Run ID",
                "test-run-id",
              ],
              Array [
                "Workflow name",
                "-",
              ],
              Array [
                "Status",
                "Skipped",
              ],
              Array [
                "Description",
                "test run description",
              ],
              Array [
                "Created at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Started at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Finished at",
                "1/2/2019, 12:34:56 PM",
              ],
              Array [
                "Duration",
                "25:01:01",
              ],
            ]
          }
          title="Run details"
        />
        <div>
          <DetailsTable
            fields={
              Array [
                Array [
                  "param1",
                  "value1",
                ],
                Array [
                  "param2",
                  "value2",
                ],
              ]
            }
            title="Run parameters"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails shows success run status in page title 1`] = `
<div
  className="flex"
>
  <WithStyles(Tooltip)
    title={
      <div>
        <div>
          Executed successfully
        </div>
        <div>
          Start: 
          1/2/2019, 12:34:56 PM
        </div>
      </div>
    }
  >
    <div>
      <pure(CheckCircleIcon)
        data-testid="node-status-sign"
        style={
          Object {
            "color": "#34a853",
            "height": 18,
            "width": 18,
          }
        }
      />
    </div>
  </WithStyles(Tooltip)>
  <span
    style={
      Object {
        "marginLeft": 10,
      }
    }
  >
    test run
  </span>
</div>
`;

exports[`RunDetails switches to config tab 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={2}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className=""
      >
        <DetailsTable
          fields={Array []}
          title="Run details"
        />
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails switches to inputs/outputs tab in side pane 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={0}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              >
                <div
                  className=""
                >
                  <DetailsTable
                    fields={
                      Array [
                        Array [
                          "input1",
                          "val1",
                        ],
                      ]
                    }
                    key="input-parameters-node1"
                    title="Input parameters"
                  />
                  <DetailsTable
                    fields={Array []}
                    key="input-artifacts-node1"
                    title="Input artifacts"
                    valueComponent={[Function]}
                    valueComponentProps={
                      Object {
                        "namespace": undefined,
                      }
                    }
                  />
                  <DetailsTable
                    fields={
                      Array [
                        Array [
                          "output1",
                          "val1",
                        ],
                        Array [
                          "output2",
                          "value2",
                        ],
                      ]
                    }
                    key="output-parameters-node1"
                    title="Output parameters"
                  />
                  <DetailsTable
                    fields={Array []}
                    key="output-artifacts-node1"
                    title="Output artifacts"
                    valueComponent={[Function]}
                    valueComponentProps={
                      Object {
                        "namespace": undefined,
                      }
                    }
                  />
                </div>
              </div>
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails switches to manifest tab in side pane 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={8}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              >
                <div
                  className=""
                >
                  <DetailsTable
                    fields={Array []}
                    title="Resource Manifest"
                  />
                </div>
              </div>
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails switches to run output tab, shows empty message 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={1}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className=""
      >
        <span>
          No metrics found for this run.
        </span>
        <Separator
          orientation="vertical"
        />
        <Hr />
        <span>
          No output artifacts found for this run.
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`RunDetails switches to volumes tab in side pane 1`] = `
<div
  className="page"
>
  <div
    className="page"
  >
    <MD2Tabs
      onSwitch={[Function]}
      selectedTab={0}
      tabs={
        Array [
          "Graph",
          "Run output",
          "Config",
        ]
      }
    />
    <div
      className="page"
    >
      <div
        className="page graphPane"
      >
        <div
          className="page"
        >
          <GraphMock
            graph={
              Graph {
                "_defaultEdgeLabelFn": [Function],
                "_defaultNodeLabelFn": [Function],
                "_edgeLabels": Object {},
                "_edgeObjs": Object {},
                "_in": Object {},
                "_isCompound": false,
                "_isDirected": true,
                "_isMultigraph": false,
                "_label": Object {},
                "_nodes": Object {},
                "_out": Object {},
                "_preds": Object {},
                "_sucs": Object {},
              }
            }
            onClick={[Function]}
            onError={[Function]}
            selectedNodeId="node1"
          />
          <ReduceGraphSwitch
            checked={false}
            disabled={true}
            onChange={[Function]}
          />
          <SidePanel
            isBusy={false}
            isOpen={true}
            onClose={[Function]}
            title="node1"
          >
            <div
              className="page"
            >
              <MD2Tabs
                onSwitch={[Function]}
                selectedTab={3}
                tabs={
                  Array [
                    "Input/Output",
                    "Visualizations",
                    "Details",
                    "Volumes",
                    "Logs",
                    "Pod",
                    "Events",
                    "ML Metadata",
                  ]
                }
              />
              <div
                className="page"
                data-testid="run-details-node-details"
              >
                <div
                  className=""
                >
                  <DetailsTable
                    fields={Array []}
                    title="Volume Mounts"
                  />
                </div>
              </div>
            </div>
          </SidePanel>
          <div
            className="footer"
          >
            <div
              className="flex"
            >
              <pure(InfoOutlinedIcon)
                className="infoIcon"
              />
              <span
                className="infoSpan"
              >
                Runtime execution graph. Only steps that are currently running or have already completed are shown.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
