From 88d71d707094c74618057076c4b64185f8266ad3 Mon Sep 17 00:00:00 2001 From: Srinath Narayanan Date: Mon, 23 Nov 2020 17:46:59 -0800 Subject: [PATCH] working version --- .../SelfServe/SelfServe.tsx | 18 +-- .../SelfServe/SelfServeTypes.tsx | 119 +++++++++++++----- .../SettingsSubComponents/SelfServe/SqlX.tsx | 34 +++++ .../SmartUi/SmartUiComponent.test.tsx | 14 +-- .../Controls/SmartUi/SmartUiComponent.tsx | 7 +- 5 files changed, 143 insertions(+), 49 deletions(-) create mode 100644 src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SqlX.tsx diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServe.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServe.tsx index a1fe8ec5e..6ea3e42f1 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServe.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServe.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Descriptor, InputType, SmartUiComponent } from "../../../SmartUi/SmartUiComponent"; -import { SqlX } from "./SelfServeTypes"; +import { SqlX } from "./SqlX"; interface SelfServeComponentProps { propertyNames: string[] @@ -33,8 +33,8 @@ export class SelfServeCmponent extends React.Component text: "More Details" } }, - children: [ - { + children: { + "instanceCount" : { id: "instanceCount", input: { label: "Instance Count", @@ -47,7 +47,7 @@ export class SelfServeCmponent extends React.Component inputType: "slider" } }, - { + "instanceSize": { id: "instanceSize", input: { label: "Instance Size", @@ -61,9 +61,9 @@ export class SelfServeCmponent extends React.Component defaultKey: "1Core4Gb" } } - ] } - }; + } + }; @@ -80,8 +80,8 @@ export class SelfServeCmponent extends React.Component }; public render() : JSX.Element { - console.log('keys: ', SqlX.toJson()); - - return + const data : Descriptor = {root: SqlX.toJson()} + //return + return } } \ No newline at end of file diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServeTypes.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServeTypes.tsx index 081c9778c..bd0b4815f 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServeTypes.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SelfServeTypes.tsx @@ -1,55 +1,112 @@ import "reflect-metadata"; +import { EnumItem, Info, InputTypeValue } from "../../../SmartUi/SmartUiComponent"; -const SqlXPropertiesKey = 'SqlXPropertiesKey'; - -const modifyParentProperty = (context: any, parentProperty: string, property: string | symbol) : any => { - if (parentProperty in context) { - context[parentProperty][property] ={} - return context +const modifyParentProperty = (children: {[key: string]: any}, parentProperty: string, property: string | symbol) : any => { + if (parentProperty in children) { + children[parentProperty][property] ={id: property, input: {}} + return children } else { - const keys = Object.keys(context) + const keys = Object.keys(children) for(var i =0; i< keys.length; i++) { - context[keys[i]] = modifyParentProperty(context[keys[i]], parentProperty, property) - return context + children[keys[i]] = modifyParentProperty(children[keys[i]], parentProperty, property) + return children } } - return context + return children } -export const Property = (parentProperty?: string): PropertyDecorator => { +export const InfoBar = (metadataKey: string, info: Info) => { + return (target: any) => { + let context = Reflect.getMetadata(metadataKey, target) + if(!context) { + context = {id: "root", info: info, input: undefined, children: {} } + } else { + context.info = info + } + console.log("class context:" + JSON.stringify(context)) + Reflect.defineMetadata(metadataKey, context, target) + }; +}; + +export const Property = (metadataKey: string, parentProperty?: string): PropertyDecorator => { return (target, property) => { - let context = Reflect.getMetadata(SqlXPropertiesKey, target) + let context = Reflect.getMetadata(metadataKey, target) if(!context) { - context = {} + context = {id: "root", info: undefined, input: undefined, children: {} } + context.children[property] = {id: property, input: {}} } if (parentProperty) { const prevContextValue = JSON.stringify(context) - context = modifyParentProperty(context, parentProperty, property) + context.children = modifyParentProperty(context.children, parentProperty, property) if (JSON.stringify(context) === prevContextValue) { throw new Error(`${parentProperty} not defined. declare it before the child property with @Property decorator.`) } } else { - context[property] = {} + context.children[property] = {id: property, input: {}} } - console.log("context:" + JSON.stringify(context)) - Reflect.defineMetadata(SqlXPropertiesKey, context, target) + console.log("props context:" + JSON.stringify(context)) + Reflect.defineMetadata(metadataKey, context, target) }; }; -export class SqlX { - @Property() - static prop1: any; - - @Property() - static prop2: any; - - @Property("prop1") - static prop11: any; - - - public static toJson = () : any => { - return Reflect.getMetadata(SqlXPropertiesKey, SqlX) - } +export const modifyInputTypes = (metadataKey: string, fieldName: string, value: any) : PropertyDecorator => { + return (target, property) => { + let context = Reflect.getMetadata(metadataKey, target) + if(!context) { + throw new Error("Incorrect order") + } + context.children[property].input[fieldName] = value + //context = modifyType(property) + console.log("props context:" + JSON.stringify(context)) + Reflect.defineMetadata(metadataKey, context, target) + }; } +export const Type = (metadataKey: string, type: InputTypeValue): PropertyDecorator => { + return modifyInputTypes(metadataKey, "type", type) +}; + +export const Label = (metadataKey: string, label: string): PropertyDecorator => { + return modifyInputTypes(metadataKey, "label", label) +}; + +export const DataFieldName = (metadataKey: string, dataFieldName: string): PropertyDecorator => { + return modifyInputTypes(metadataKey, "dataFieldName", dataFieldName) +}; + +export const Min = (metadataKey: string, min: number): PropertyDecorator => { + return modifyInputTypes(metadataKey, "min", min) +}; + +export const Max = (metadataKey: string, max: number): PropertyDecorator => { + return modifyInputTypes(metadataKey, "max", max) +}; + +export const Step = (metadataKey: string, step: number): PropertyDecorator => { + return modifyInputTypes(metadataKey, "step", step) +}; + +export const DefaultValue = (metadataKey: string, defaultValue: any): PropertyDecorator => { + return modifyInputTypes(metadataKey, "defaultValue", defaultValue) +}; + +export const TrueLabel = (metadataKey: string, trueLabel: string): PropertyDecorator => { + return modifyInputTypes(metadataKey, "trueLabel", trueLabel) +}; + +export const FalseLabel = (metadataKey: string, falseLabel: string): PropertyDecorator => { + return modifyInputTypes(metadataKey, "falseLabel", falseLabel) +}; + +export const Choices = (metadataKey: string, choices: EnumItem[]): PropertyDecorator => { + return modifyInputTypes(metadataKey, "choices", choices) +}; + +export const DefaultKey = (metadataKey: string, defaultKey: string): PropertyDecorator => { + return modifyInputTypes(metadataKey, "defaultKey", defaultKey) +}; + +export const NumberInputType = (metadataKey: string, numberInputType: string): PropertyDecorator => { + return modifyInputTypes(metadataKey, "inputType", numberInputType) +}; diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SqlX.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SqlX.tsx new file mode 100644 index 000000000..ab4bf3d53 --- /dev/null +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SelfServe/SqlX.tsx @@ -0,0 +1,34 @@ +import { DataFieldName, Label, Min, Max, Step, DefaultKey, DefaultValue, Property, Type, NumberInputType, Choices } from "./SelfServeTypes"; +import { EnumItem } from "../../../SmartUi/SmartUiComponent"; +const SqlXRoot = 'SqlXRoot'; + +export class SqlX { + @Label(SqlXRoot, "Instance Count") + @DataFieldName(SqlXRoot, "instanceCount") + @Min(SqlXRoot, 1) + @Max(SqlXRoot, 5) + @Step(SqlXRoot, 1) + @DefaultValue(SqlXRoot, 1) + @NumberInputType(SqlXRoot, "slider") + @Type(SqlXRoot, "number") + @Property(SqlXRoot) + static instanceCount: any; + + @Label(SqlXRoot, "Instance Size") + @DataFieldName(SqlXRoot, "instanceSize") + @Choices(SqlXRoot, SqlX.instanceTypeOptions) + @DefaultKey(SqlXRoot, "1Core4Gb") + @Type(SqlXRoot, "enum") + @Property(SqlXRoot) + static instanceType: any; + + static instanceTypeOptions : EnumItem[] = [ + { label: "1Core4Gb", key: "1Core4Gb", value: "1Core4Gb" }, + { label: "2Core8Gb", key: "2Core8Gb", value: "2Core8Gb" }, + { label: "4Core16Gb", key: "4Core16Gb", value: "4Core16Gb" } + ] + + public static toJson = () : any => { + return Reflect.getMetadata(SqlXRoot, SqlX) + } +} \ No newline at end of file diff --git a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx index b455a59fa..7a7d63d02 100644 --- a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx +++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx @@ -13,8 +13,8 @@ describe("SmartUiComponent", () => { text: "More Details" } }, - children: [ - { + children: { + "throughput": { id: "throughput", input: { label: "Throughput (input)", @@ -27,7 +27,7 @@ describe("SmartUiComponent", () => { inputType: "spin" } }, - { + "throughput2": { id: "throughput2", input: { label: "Throughput (Slider)", @@ -40,7 +40,7 @@ describe("SmartUiComponent", () => { inputType: "slider" } }, - { + "containerId": { id: "containerId", input: { label: "Container id", @@ -48,7 +48,7 @@ describe("SmartUiComponent", () => { type: "string" } }, - { + "analyticalStore": { id: "analyticalStore", input: { label: "Analytical Store", @@ -59,7 +59,7 @@ describe("SmartUiComponent", () => { type: "boolean" } }, - { + "database": { id: "database", input: { label: "Database", @@ -73,8 +73,8 @@ describe("SmartUiComponent", () => { defaultKey: "db2" } } - ] } + } }; const exampleCallbacks = (newValues: Map): void => { diff --git a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx index bb218c7a3..d0f59c9d8 100644 --- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx +++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx @@ -75,7 +75,7 @@ export interface Node { id: string; info?: Info; input?: AnyInput; - children?: Node[]; + children?: { [id: string]: Node} ; } export interface Descriptor { @@ -324,7 +324,10 @@ export class SmartUiComponent extends React.Component {node.info && this.renderInfo(node.info)} {node.input && this.renderInput(node.input)} - {node.children && node.children.map(child =>
{this.renderNode(child)}
)} + {node.children && Object.entries(node.children).map(([key, value]) => { + return
{this.renderNode(value as Node)}
+ }) + } ); }