Fix: Rework Frontend (#51)

Author: ricoberger

src/datasource/components/configeditor/ConfigEditor.tsx

@@ -17,14 +17,14 @@ interface Props
     KubernetesSecureJsonData
   > { }
 
-export function ConfigEditor(props: Props) {
+export function ConfigEditor({ options, onOptionsChange }: Props) {
   return (
     <>
-      <Cluster {...props} />
-      <Grafana {...props} />
-      <Impersonate {...props} />
-      <GenerateKubeconfig {...props} />
-      <Integrations {...props} />
+      <Cluster options={options} onOptionsChange={onOptionsChange} />
+      <Grafana options={options} onOptionsChange={onOptionsChange} />
+      <Impersonate options={options} onOptionsChange={onOptionsChange} />
+      <GenerateKubeconfig options={options} onOptionsChange={onOptionsChange} />
+      <Integrations options={options} onOptionsChange={onOptionsChange} />
     </>
   );
 }

src/datasource/components/configeditor/GenerateKubeconfig.tsx

@@ -17,7 +17,7 @@ interface Props
     KubernetesSecureJsonData
   > { }
 
-export function GenerateKubeconfig({ onOptionsChange, options }: Props) {
+export function GenerateKubeconfig({ options, onOptionsChange }: Props) {
   const styles = useStyles2((theme: GrafanaTheme2) => {
     return {
       container: css({

src/datasource/components/configeditor/Grafana.tsx

@@ -17,7 +17,7 @@ interface Props
     KubernetesSecureJsonData
   > { }
 
-export function Grafana({ onOptionsChange, options }: Props) {
+export function Grafana({ options, onOptionsChange }: Props) {
   const styles = useStyles2((theme: GrafanaTheme2) => {
     return {
       container: css({

src/datasource/components/configeditor/Impersonate.tsx

@@ -17,7 +17,7 @@ interface Props
     KubernetesSecureJsonData
   > { }
 
-export function Impersonate({ onOptionsChange, options }: Props) {
+export function Impersonate({ options, onOptionsChange }: Props) {
   const styles = useStyles2((theme: GrafanaTheme2) => {
     return {
       containerKubeconfigGeneration: css({

src/datasource/components/configeditor/Integrations.tsx

@@ -17,7 +17,7 @@ interface Props
     KubernetesSecureJsonData
   > { }
 
-export function Integrations({ onOptionsChange, options }: Props) {
+export function Integrations({ options, onOptionsChange }: Props) {
   const styles = useStyles2((theme: GrafanaTheme2) => {
     return {
       containerKubeconfigGeneration: css({

src/datasource/components/kubernetes/metrics/MetricsDaemonSets.tsx

@@ -9,9 +9,7 @@ interface Props {
   namespace?: string;
   name?: string;
 }
-/**
- * The MetricsDaemonSets component displays the DaemonSet metrics.
- */
+
 export function MetricsDaemonSets({ settings, namespace, name }: Props) {
   const scene = new EmbeddedScene({
     body: new SceneFlexLayout({

src/datasource/components/variablequeryeditor/VariableQueryEditor.tsx

@@ -16,13 +16,18 @@ import { KubernetesContainers } from './KubernetesContainers';
 interface Props
   extends QueryEditorProps<DataSource, any, DataSourceOptions, Query> { }
 
-export function VariableQueryEditor(props: Props) {
+export function VariableQueryEditor({
+  datasource,
+  query,
+  onChange,
+  onRunQuery,
+}: Props) {
   return (
     <>
       <InlineFieldRow>
         <InlineField label="Type">
           <Combobox<QueryType>
-            value={props.query.queryType}
+            value={query.queryType}
             options={[
               {
                 label: 'Kubernetes: Resources IDs',
@@ -39,8 +44,8 @@ export function VariableQueryEditor(props: Props) {
               { label: 'Kubernetes: Resources', value: 'kubernetes-resources' },
             ]}
             onChange={(option: ComboboxOption<QueryType>) => {
-              props.onChange({
-                ...props.query,
+              onChange({
+                ...query,
                 ...DEFAULT_QUERIES[option.value],
                 queryType: option.value,
               });
@@ -49,12 +54,22 @@ export function VariableQueryEditor(props: Props) {
         </InlineField>
       </InlineFieldRow>
 
-      {props.query.queryType === 'kubernetes-containers' && (
-        <KubernetesContainers {...props} />
+      {query.queryType === 'kubernetes-containers' && (
+        <KubernetesContainers
+          datasource={datasource}
+          query={query}
+          onChange={onChange}
+          onRunQuery={onRunQuery}
+        />
       )}
 
-      {props.query.queryType === 'kubernetes-resources' && (
-        <KubernetesResources {...props} />
+      {query.queryType === 'kubernetes-resources' && (
+        <KubernetesResources
+          datasource={datasource}
+          query={query}
+          onChange={onChange}
+          onRunQuery={onRunQuery}
+        />
       )}
     </>
   );