hook up ott-vis-datasource to ott-vis (#1367)

* hook up `ott-vis-datasource` to `ott-vis`

* format

Author: dyc3

packages/ott-vis/src/components/CorePanel.tsx

@@ -6,6 +6,7 @@ import { css, cx } from "@emotion/css";
 import { useStyles2 } from "@grafana/ui";
 import GlobalView from "./views/GlobalView";
 import RegionView from "./views/RegionView";
+import { LoadingState } from "@grafana/schema";
 
 interface Props extends PanelProps<CoreOptions> {}
 
@@ -29,6 +30,41 @@ const getStyles = () => {
 	};
 };
 
+export const CorePanel: React.FC<Props> = ({ options, data, width, height }) => {
+	const styles = useStyles2(getStyles);
+
+	if (data.state === LoadingState.Loading) {
+		return <div>Loading...</div>;
+	}
+
+	const systemState: SystemState = options.useSampleData
+		? sampleSystemState
+		: data.series[0].fields.find(f => f.name === "Balancers")?.values[0] ?? [];
+
+	let view;
+	if (options.view === "global") {
+		view = <GlobalView height={height} width={width} systemState={systemState} />;
+	} else if (options.view === "region") {
+		view = <RegionView height={height} width={width} systemState={systemState} />;
+	} else {
+		view = <div>Invalid view</div>;
+	}
+
+	return (
+		<div
+			className={cx(
+				styles.wrapper,
+				css`
+					width: ${width}px;
+					height: ${height}px;
+				`
+			)}
+		>
+			{view}
+		</div>
+	);
+};
+
 const sampleSystemState: SystemState = [
 	{
 		id: "154d9d41-128c-45ab-83d8-28661882c9e3",
@@ -103,30 +139,3 @@ const sampleSystemState: SystemState = [
 		],
 	},
 ];
-
-export const CorePanel: React.FC<Props> = ({ options, data, width, height }) => {
-	const styles = useStyles2(getStyles);
-
-	let view;
-	if (options.view === "global") {
-		view = <GlobalView height={height} width={width} systemState={sampleSystemState} />;
-	} else if (options.view === "region") {
-		view = <RegionView height={height} width={width} systemState={sampleSystemState} />;
-	} else {
-		view = <div>Invalid view</div>;
-	}
-
-	return (
-		<div
-			className={cx(
-				styles.wrapper,
-				css`
-					width: ${width}px;
-					height: ${height}px;
-				`
-			)}
-		>
-			{view}
-		</div>
-	);
-};

packages/ott-vis/src/module.ts

@@ -22,37 +22,9 @@ export const plugin = new PanelPlugin<CoreOptions>(CorePanel).setPanelOptions(bu
 				],
 			},
 		})
-		.addTextInput({
-			path: "text",
-			name: "Allowed Entities",
-			description: "Number of entities allowed to be displayed in the panel at one time",
-			defaultValue: "25",
-		})
 		.addBooleanSwitch({
-			path: "showSeriesCount",
-			name: "Show series counter",
-			defaultValue: false,
-		})
-		.addRadio({
-			path: "seriesCountSize",
-			defaultValue: "sm",
-			name: "Series counter size",
-			settings: {
-				options: [
-					{
-						value: "sm",
-						label: "Small",
-					},
-					{
-						value: "md",
-						label: "Medium",
-					},
-					{
-						value: "lg",
-						label: "Large",
-					},
-				],
-			},
-			showIf: config => config.showSeriesCount,
+			path: "useSampleData",
+			name: "Use Sample Data",
+			description: "Use sample data instead of querying the datasource",
 		});
 });

packages/ott-vis/src/types.ts

@@ -1,8 +1,4 @@
-type SeriesSize = "sm" | "md" | "lg";
-
 export interface CoreOptions {
 	view: "global" | "region";
-	text: string;
-	showSeriesCount: boolean;
-	seriesCountSize: SeriesSize;
+	useSampleData: boolean;
 }