Merge pull request #516 from openziti/ui_delete_frontend

Support for Removing Frontends through the Web Console (#515)

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## v0.4.21
 
+FEATURE: The web console now supports deleting `zrok access` frontends (https://github.com/openziti/zrok/issues/504)
+
+CHANGE: The web console now displays the frontend token as the label for any `zrok access` frontends throughout the user interface (https://github.com/openziti/zrok/issues/504)
+
 CHANGE: Updated `github.com/rubenv/sql-migrate` to `v1.6.0`
 
 FIX: The migration `sqlite3/015_v0_4_19_share_unique_name_constraint.sql` has been adjusted to delete the old `shares_old` table as the last step of the migration process. Not sure exactly why, but SQLite is unhappy otherwise (https://github.com/openziti/zrok/issues/504)

controller/frontendDetail.go

@@ -47,6 +47,7 @@ func (h *getFrontendDetailHandler) Handle(params metadata.GetFrontendDetailParam
 	}
 	payload := &rest_model_zrok.Frontend{
 		ID:        int64(fe.Id),
+		Token:     fe.Token,
 		ZID:       fe.ZId,
 		CreatedAt: fe.CreatedAt.UnixMilli(),
 		UpdatedAt: fe.UpdatedAt.UnixMilli(),

controller/overview.go

@@ -95,6 +95,7 @@ func (h *overviewHandler) Handle(_ metadata.OverviewParams, principal *rest_mode
 		for _, fe := range fes {
 			envFe := &rest_model_zrok.Frontend{
 				ID:        int64(fe.Id),
+				Token:     fe.Token,
 				ZID:       fe.ZId,
 				CreatedAt: fe.CreatedAt.UnixMilli(),
 				UpdatedAt: fe.UpdatedAt.UnixMilli(),

rest_model_zrok/frontend.go

@@ -26,6 +26,9 @@ type Frontend struct {
 	// shr token
 	ShrToken string `json:"shrToken,omitempty"`
 
+	// token
+	Token string `json:"token,omitempty"`
+
 	// updated at
 	UpdatedAt int64 `json:"updatedAt,omitempty"`
 

rest_server_zrok/embedded_spec.go

@@ -1215,6 +1215,9 @@ func init() {
         "shrToken": {
           "type": "string"
         },
+        "token": {
+          "type": "string"
+        },
         "updatedAt": {
           "type": "integer"
         },
@@ -2835,6 +2838,9 @@ func init() {
         "shrToken": {
           "type": "string"
         },
+        "token": {
+          "type": "string"
+        },
         "updatedAt": {
           "type": "integer"
         },

sdk/python/sdk/zrok/setup.py

@@ -1,20 +1,23 @@
-import os
+# coding: utf-8
 
-from setuptools import find_packages, setup  # noqa: H301
+"""
+    zrok
 
-# optionally upload to TestPyPi with alternative name in testing repo
-NAME = os.getenv('ZROK_PY_NAME', "zrok_sdk")
-# inherit zrok version from environment or default to dev version
-VERSION = os.getenv('ZROK_VERSION', "0.4.0.dev")
+    zrok client access  # noqa: E501
 
+    OpenAPI spec version: 0.3.0
+    
+    Generated by: https://github.com/swagger-api/swagger-codegen.git
+"""
+
+from setuptools import setup, find_packages  # noqa: H301
+
+NAME = "zrok_sdk"
+VERSION = "1.0.0"
 # To install the library, run the following
 #
 # python setup.py install
 #
-# or
-#
-# pip install --editable .
-#
 # prerequisite: setuptools
 # http://pypi.python.org/pypi/setuptools
 
@@ -24,14 +27,13 @@ setup(
     name=NAME,
     version=VERSION,
     description="zrok",
-    author_email="cameron.otts@netfoundry.io",
-    url="https://zrok.io",
-    python_requires='>=3.10',
+    author_email="",
+    url="",
     keywords=["Swagger", "zrok"],
     install_requires=REQUIRES,
     packages=find_packages(),
     include_package_data=True,
     long_description="""\
-    Geo-scale, next-generation peer-to-peer sharing platform built on top of OpenZiti.
+    zrok client access  # noqa: E501
     """
 )

sdk/python/sdk/zrok/zrok_api/models/frontend.py

@@ -29,6 +29,7 @@ class Frontend(object):
     """
     swagger_types = {
         'id': 'int',
+        'token': 'str',
         'shr_token': 'str',
         'z_id': 'str',
         'created_at': 'int',
@@ -37,15 +38,17 @@ class Frontend(object):
 
     attribute_map = {
         'id': 'id',
+        'token': 'token',
         'shr_token': 'shrToken',
         'z_id': 'zId',
         'created_at': 'createdAt',
         'updated_at': 'updatedAt'
     }
 
-    def __init__(self, id=None, shr_token=None, z_id=None, created_at=None, updated_at=None):  # noqa: E501
+    def __init__(self, id=None, token=None, shr_token=None, z_id=None, created_at=None, updated_at=None):  # noqa: E501
         """Frontend - a model defined in Swagger"""  # noqa: E501
         self._id = None
+        self._token = None
         self._shr_token = None
         self._z_id = None
         self._created_at = None
@@ -53,6 +56,8 @@ class Frontend(object):
         self.discriminator = None
         if id is not None:
             self.id = id
+        if token is not None:
+            self.token = token
         if shr_token is not None:
             self.shr_token = shr_token
         if z_id is not None:
@@ -83,6 +88,27 @@ class Frontend(object):
 
         self._id = id
 
+    @property
+    def token(self):
+        """Gets the token of this Frontend.  # noqa: E501
+
+
+        :return: The token of this Frontend.  # noqa: E501
+        :rtype: str
+        """
+        return self._token
+
+    @token.setter
+    def token(self, token):
+        """Sets the token of this Frontend.
+
+
+        :param token: The token of this Frontend.  # noqa: E501
+        :type: str
+        """
+
+        self._token = token
+
     @property
     def shr_token(self):
         """Gets the shr_token of this Frontend.  # noqa: E501

specs/zrok.yml

@@ -778,6 +778,8 @@ definitions:
     properties:
       id:
         type: integer
+      token:
+        type: string
       shrToken:
         type: string
       zId:

ui/src/api/types.js

@@ -111,6 +111,7 @@
  * @memberof module:types
  * 
  * @property {number} id 
+ * @property {string} token 
  * @property {string} shrToken 
  * @property {string} zId 
  * @property {number} createdAt 

ui/src/console/detail/access/AccessDetail.js

@@ -4,6 +4,7 @@ import {useEffect, useState} from "react";
 import {getFrontendDetail} from "../../../api/metadata";
 import {Tab, Tabs} from "react-bootstrap";
 import DetailTab from "./DetailTab";
+import ActionsTab from "./ActionsTab";
 
 const AccessDetail = (props) => {
     const [detail, setDetail] = useState({});
@@ -17,11 +18,14 @@ const AccessDetail = (props) => {
 
     return (
         <div>
-            <h2><Icon path={mdiAccessPointNetwork} size={2} />{" "}{detail.shrToken} ({detail.id})</h2>
+            <h2><Icon path={mdiAccessPointNetwork} size={2} />{" "}{detail.token}</h2>
             <Tabs defaultActiveKey={"detail"} className={"mb-3"}>
                 <Tab eventKey={"detail"} title={"Detail"}>
                     <DetailTab frontend={detail} />
                 </Tab>
+                <Tab eventKey={"actions"} title={"Actions"}>
+                    <ActionsTab frontend={detail} />
+                </Tab>
             </Tabs>
         </div>
     );

ui/src/console/detail/access/ActionsTab.js

@@ -0,0 +1,27 @@
+import * as share from "../../../api/share";
+import {Button} from "react-bootstrap";
+
+const ActionsTab = (props) => {
+    const deleteFrontend = (feToken, shrToken, envZId) => {
+        if(window.confirm("Really delete access frontend '" + feToken + "' for share '" + shrToken + "'?")) {
+            share.unaccess({body: {frontendToken: feToken, shrToken: shrToken, envZId: envZId}}).then(resp => {
+                console.log(resp);
+            });
+        }
+    }
+
+    return (
+        <div className={"actions-tab"}>
+            <h3>Delete your access frontend '{props.frontend.token}' for share '{props.frontend.shrToken}'?</h3>
+            <p>
+                This will remove your <code>zrok access</code> frontend from this environment. You will still need to
+                terminate the corresponding <code>zrok access</code> process in your local environment.
+            </p>
+            <Button variant={"danger"} onClick={() => deleteFrontend(props.frontend.token, props.frontend.shrToken, props.frontend.zId)}>
+                Delete '{props.frontend.token}'
+            </Button>
+        </div>
+    );
+};
+
+export default ActionsTab;

ui/src/console/visualizer/graph.js

@@ -78,7 +78,7 @@ export const mergeGraph = (oldGraph, user, accountLimited, newOverview) => {
                        id: 'ac:' + fe.id,
                        feId: fe.id,
                        target: fe.shrToken,
-                       label: fe.shrToken,
+                       label: fe.token,
                        type: "frontend",
                        val: 50
                    }