Skip to content

Commit

Permalink
Merge pull request #259 from vertica/connection_page_update_03
Browse files Browse the repository at this point in the history 
Connection page update - Improving the design of the page
  • Loading branch information
@oualib
oualib authored May 20, 2024
2 parents c367a8e + 0730d42 commit 75514cc
Showing 1 changed file with 144 additions and 92 deletions.
236 changes: 144 additions & 92 deletions project/ui/conn.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"button_html2 = f\"<a href='{url2}' style='text-decoration: none; padding: 8px; background-color: #007bff; color: white; border-radius: 5px;'>{button_label2}</a>\"\n",
"\n",
"\n",
"\n",
"# Create HTML widgets\n",
"html_button1 = widgets.HTML(value=button_html1)\n",
"html_button2 = widgets.HTML(value=button_html2)\n",
Expand All @@ -62,6 +63,7 @@
"metadata": {},
"outputs": [],
"source": [
"# Importing libraries\n",
"logging.info('[Connection Page] Importing libraries')\n",
"from ipywidgets import interact, interactive, fixed, interact_manual\n",
"import ipywidgets as widgets\n",
Expand All @@ -80,7 +82,7 @@
"metadata": {},
"outputs": [],
"source": [
"# style = {'description_width': '150px', 'width' : '400px'}\n",
"# input text boxes\n",
"logging.info('[Connection Page] Creating the widgets for input')\n",
"host = widgets.Text(description = \"Host\",placeholder = \"Enter Host (default is 'verticadb')\", layout=widgets.Layout(width='350px'))\n",
"port = widgets.Text(description = \"Port\", placeholder = \"Enter Port (default is 5433)\", layout=widgets.Layout(width='350px'))\n",
Expand All @@ -89,7 +91,7 @@
"database = widgets.Text(description = \"Database\", placeholder = \"Enter Database (default is 'demo')\", layout=widgets.Layout(width='350px'))\n",
"name = widgets.Text(description = \"Name\", placeholder = \"Enter Name (default is 'VerticaDSN')\", layout=widgets.Layout(width='350px'))\n",
"\n",
"connection_timeout = widgets.Text(description = \"Connection Timeout\", placeholder = \"Time in seconds (default is 5)\", layout=widgets.Layout(width='350px'))\n",
"connection_timeout = widgets.Text(description = \"Connection timeout\", placeholder = \"Time in seconds (default is 5)\", layout=widgets.Layout(width='350px'))\n",
"connection_timeout.style.description_width = '130px'\n",
"autocommit = widgets.Checkbox(value = False, description = 'Autocommit', disabled = False, indent = False,layout=widgets.Layout(width = '350px',align_items='flex-end'))\n",
"\n",
Expand All @@ -106,54 +108,99 @@
"kerberos_service_name.style.description_width = '150px'\n",
"\n",
"backup_server_node = [\"localhost\"]\n",
"connection_inputs = widgets.VBox([\n",
" host,\n",
" port,\n",
" user,\n",
" password,\n",
" database,\n",
" name,\n",
" connection_timeout\n",
"])\n",
"\n",
"logging.info('[Connection Page] Created all widgets')"
]
},
{
"cell_type": "markdown",
"id": "e5731b71-031a-40ff-ac8e-7e88c2f5c170",
"cell_type": "code",
"execution_count": null,
"id": "86581e04-8bf7-4e09-983e-fc89e32f67ae",
"metadata": {},
"outputs": [],
"source": [
"## Please enter connection details"
"%%html\n",
"<head>\n",
" <meta charset=\"UTF-8\">\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
" <style>\n",
" .header-container {\n",
" display: flex;\n",
" justify-content: space-between;\n",
" align-items: center;\n",
" padding: 10px;\n",
" }\n",
" .header-container h1,\n",
" .header-container a {\n",
" margin: 0;\n",
" margin-left: 42px;\n",
" }\n",
" </style>\n",
" <title>Connect to Vertica</title>\n",
"</head>\n",
"<body>\n",
" <div class=\"header-container\">\n",
" <h1>Connect to Vertica</h1>\n",
" <a href=\"https://www.vertica.com/python/documentation/1.0.x/html/connection.html\">Click here for more information on connection settings</a>\n",
" </div>\n",
" <div style=\"margin-left: 42px; padding:10px; font-size: 1rem\">\n",
" Choose how you connect to Vertica\n",
" </div>\n",
"</body>\n",
"</html>"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "1cdf1aa6-6310-4764-823c-c0aff71e396a",
"id": "0457d066-05a0-43c1-9c15-ad13a16b939d",
"metadata": {},
"outputs": [],
"source": [
"import ipywidgets as widgets\n",
"\n",
"display(widgets.VBox([\n",
" host,\n",
" port,\n",
" user,\n",
" password,\n",
" database,\n",
" name,\n",
" connection_timeout\n",
"]))\n",
"logging.info('[Connection Page] Displayed all widgets')"
"# styles controls\n",
"top_box_height = \"370px\"\n",
"output_width = \"530px\"\n",
"button_color = '#007bff'\n",
"text_color = 'white'"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "d87806cd-929a-48e6-9b33-1e93f1df556c",
"id": "840c448c-cc61-412d-b68e-8700c136a1c7",
"metadata": {},
"outputs": [],
"source": [
"# Advanced connection widgets\n",
"dropdown = widgets.Dropdown(\n",
" options=['', 'OAuth', 'TLS', 'Kerberos'],\n",
" description='Advanced connection',\n",
" disabled=False,\n",
" layout={'width': \"300px\"}\n",
")\n",
"dropdown.style.description_width = '130px'\n",
"output_advanced_connection = widgets.Output(layout={'width': output_width})\n",
"\n",
"oauth_params = widgets.VBox([oauth_access_token,oauth_refresh_token])\n",
"kerberos_params = widgets.VBox([kerberos_host_name,kerberos_service_name])\n",
"\n",
"# TLS widget\n",
"tls_params = widgets.RadioButtons(\n",
" options=['Require', 'Verify-CA', 'Verify-Full'],\n",
" value='Require', # Defaults to 'Require'\n",
" description='Select:',\n",
" disabled=False\n",
")\n",
"ssl_context = None\n",
"# Create uploader widget\n",
"uploader = FileChooser('')\n",
"output_tls = widgets.Output()\n",
"# Function to display appropriate widget based on radio button selection\n",
Expand All @@ -171,27 +218,7 @@
"# Call function when radio button value changes\n",
"tls_params.observe(lambda change: display_widget_tls(change['new']), names='value')\n",
"\n",
"logging.info('[Connection Page] TLS widegt done')"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "840c448c-cc61-412d-b68e-8700c136a1c7",
"metadata": {},
"outputs": [],
"source": [
"# Create dropdown widget\n",
"dropdown = widgets.Dropdown(\n",
" options=['', 'OAuth', 'TLS', 'Kerberos'],\n",
" description='Advanced Connection',\n",
" disabled=False\n",
")\n",
"output_advanced_connection = widgets.Output()\n",
"\n",
"oauth_params = widgets.VBox([oauth_access_token,oauth_refresh_token])\n",
"kerberos_params = widgets.VBox([kerberos_host_name,kerberos_service_name])\n",
"\n",
"logging.info('[Connection Page] TLS widegt done')\n",
"\n",
"# Function to display appropriate widget based on dropdown selection\n",
"def display_widget_advanced_connection(selection):\n",
Expand All @@ -212,20 +239,11 @@
"\n",
"# Call function when dropdown value changes\n",
"dropdown.observe(lambda change: display_widget_advanced_connection(change['new']), names='value')\n",
"logging.info('[Connection Page] Advanced setting connection done')"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "640cf2ec-5c0f-4c45-89e0-a5d025e2d26c",
"metadata": {},
"outputs": [],
"source": [
"logging.info('[Connection Page] Advanced setting connection done')\n",
"\n",
"advanced_options = widgets.VBox([dropdown,output_advanced_connection, autocommit])\n",
"\n",
"accordion = widgets.Accordion(children=[advanced_options], titles=('Advanced Options',))\n",
"accordion"
"accordion = widgets.Accordion(children=[advanced_options], titles=('Advanced Options',))"
]
},
{
Expand All @@ -235,10 +253,13 @@
"metadata": {},
"outputs": [],
"source": [
"button = widgets.Button(description=\"Create a Connection\")\n",
"output = widgets.Output(layout={'border': '1px solid black'})\n",
"display(button, output)\n",
"\n",
"button = widgets.Button(description=\"Create\", layout = {\"align_self\" : \"center\", \"margin\": \"15px\"})\n",
"button.style.button_color = button_color\n",
"button.style.text_color = text_color\n",
"output = widgets.Output(layout={'border': '1px solid lightgrey', 'width': output_width})\n",
"left_heading = widgets.HTML(\"\"\"<h1 style=\"text-align: left;\">Create a new connection</h1>\"\"\")\n",
"connection_and_accordian_vbox = widgets.VBox([connection_inputs, accordion], layout = {\"height\" : top_box_height})\n",
"left_section = widgets.VBox([left_heading, connection_and_accordian_vbox, button, output])\n",
"\n",
"def on_button_clicked(b):\n",
" output.clear_output(wait=True) # Clear the output\n",
Expand All @@ -265,14 +286,6 @@
"button.on_click(on_button_clicked)"
]
},
{
"cell_type": "markdown",
"id": "4caf85a1-a3f9-4dd2-af9f-f2a43d239ed1",
"metadata": {},
"source": [
"## Or Select From List"
]
},
{
"cell_type": "code",
"execution_count": null,
Expand All @@ -284,13 +297,16 @@
"\n",
"selection = widgets.Dropdown(\n",
" options=vp.available_connections(),\n",
" description='Available Connections:',\n",
" description='Available connections:',\n",
" disabled=False, layout=widgets.Layout(width='300px'))\n",
"selection.style.description_width = '150px'\n",
"selectionvbox = widgets.VBox([selection], layout = {\"height\" : top_box_height})\n",
"button_select = widgets.Button(description=\"Reconnect\", layout = {\"align_self\" : \"center\", \"margin\": \"15px\"})\n",
"button_select.style = button.style\n",
"output_2 = widgets.Output(layout={'border': '1px solid lightgrey', 'width': output_width})\n",
"\n",
"button_select = widgets.Button(description=\"Create a Connection\")\n",
"output_2 = widgets.Output(layout={'border': '1px solid black'})\n",
"display(selection,button_select, output_2)\n",
"right_heading = widgets.HTML(\"\"\"<h1 style=\"text-align: left;\">Select from existing connections</h1>\"\"\")\n",
"right_section = widgets.VBox([right_heading, selectionvbox,button_select, output_2])\n",
"\n",
"def on_button_clicked_select(b):\n",
" output_2.clear_output(wait=True) # Clear the output\n",
Expand All @@ -305,42 +321,57 @@
{
"cell_type": "code",
"execution_count": null,
"id": "dd19b4c5-f99f-4467-b885-3cc34a58a7ae",
"id": "5ca5d363-4134-42bf-9471-872228c1704c",
"metadata": {},
"outputs": [],
"source": [
"from verticapy._utils._sql._vertica_version import vertica_version\n",
"# Vertical Border line\n",
"vertica_border_line = widgets.HTML(\"\"\"\n",
"<style>\n",
" .vertical-line {\n",
" border-left: 2px solid lightgrey; /* Adjust thickness and color as needed */\n",
" height: 400px; /* Adjust height as needed */\n",
" }\n",
"</style>\n",
"</head>\n",
"<body>\n",
"\n",
"button_version = widgets.Button(description=\"Click to refresh\")\n",
"output_version = widgets.Output()\n",
"<div class=\"vertical-line\"></div>\n",
"\n",
"def on_button_clicked_version(b):\n",
" output_version.clear_output(wait=True) # Clear the output\n",
" with output_version:\n",
" print(\"Vertica version:\", vertica_version()[0], \".\", vertica_version()[1], \".\", vertica_version()[2], \".\", vertica_version()[3])\n",
" print(\"VerticaPy version:\", vp.__version__)\n",
" print(\"VerticaPy long version:\", vp.__long_version__)\n",
"button_version.on_click(on_button_clicked_version)\n",
"version_details = widgets.VBox([button_version, output_version])"
"</body>\n",
"\"\"\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "db3e615b-7ed6-4b14-a508-432a0e6735a5",
"id": "77e8205d-8b53-4aba-befa-9ffb3929393d",
"metadata": {},
"outputs": [],
"source": [
"accordion = widgets.Accordion(children=[version_details], titles=('Version Details',))\n",
"accordion"
"main_section = widgets.HBox([left_section, vertica_border_line, right_section], layout={\"justify_content\": \"space-between\", \"margin\" :\"0px 50px 0px 50px\"})\n"
]
},
{
"cell_type": "markdown",
"id": "b295fdd4-b6c3-4749-a639-d9a589e1d46b",
"cell_type": "code",
"execution_count": null,
"id": "dd19b4c5-f99f-4467-b885-3cc34a58a7ae",
"metadata": {},
"outputs": [],
"source": [
"_________"
"from verticapy._utils._sql._vertica_version import vertica_version\n",
"\n",
"button_version = widgets.Button(description=\"Click to refresh\")\n",
"output_version = widgets.Output()\n",
"\n",
"def on_button_clicked_version(b):\n",
" output_version.clear_output(wait=True) # Clear the output\n",
" with output_version:\n",
" print(\"Vertica version:\", vertica_version()[0], \".\", vertica_version()[1], \".\", vertica_version()[2], \".\", vertica_version()[3])\n",
" print(\"VerticaPy version:\", vp.__version__)\n",
" print(\"VerticaPy long version:\", vp.__long_version__)\n",
"button_version.on_click(on_button_clicked_version)\n",
"button_version.style = button.style"
]
},
{
Expand All @@ -363,17 +394,38 @@
"\n",
"install_button = widgets.Button(description=\"Install latest verticapy\")\n",
"install_button.on_click(install_verticapy)\n",
"\n",
"display(install_button, output_install)"
"install_button.style = button.style\n",
"install_verticapy_text = widgets.HTML(\"<br><b> Note: </b> If you want to get the latest VerticaPy then you can get the latest version directly from the GitHub repo by clicking below.\")"
]
},
{
"cell_type": "markdown",
"id": "a935e70f-9cad-4149-9f66-a8c6b95e9405",
"cell_type": "code",
"execution_count": null,
"id": "0621ff8c-5644-41b4-a36a-19e68a99025a",
"metadata": {},
"outputs": [],
"source": [
"_________"
"version_details = widgets.VBox([button_version, output_version, install_verticapy_text,install_button, output_install])\n",
"accordion = widgets.Accordion(children=[version_details], titles=('Version Details',))\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "c88e2005-3d3e-43ad-87ab-d515d2b3c62a",
"metadata": {},
"outputs": [],
"source": [
"display(widgets.VBox([main_section,widgets.HTML(\"<br>\"),accordion]))"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "57e0377a-af49-474d-9fa1-307a7118191f",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
Expand Down

0 comments on commit 75514cc

Please sign in to comment.