Implement table view on Web UI #119

196Ikuchil · 2022-02-23T15:36:13Z

What type of PR is this?

/kind feature

What this PR does / why we need it:

Reorganization of the directories of some current resources List components.
Implement DataTable on web UI. This table view is switchable to the current resources list view.
- This is an alpha feature. It will be enabled if the ALPHA_TABLE_VIEWS environment value is 1.
simple searching.
sorting.
clickable to edit and delete.

Which issue(s) this PR fixes:

Fixes #96

Special notes for your reviewer:

Samples

clickable

/label tide/merge-method-squash

k8s-ci-robot · 2022-02-23T15:36:21Z

Hi @196Ikuchil. Thanks for your PR.

I'm waiting for a kubernetes-sigs member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

196Ikuchil · 2022-02-23T15:46:16Z

web/components/ResourceViews/DataTables/NodeDataTable.vue

+      nstore.select(node, false);
+    };
+    const search = "";
+    const headers = [


Need help

We need to discuss which columns should be selected for display.
I think that displaying all parameters is not good.
The current columns of each data table are my randomly selected.

In commit d225fbc, I changed some columns(headers).

These columns are displayed in each table.

name

namespace

capacity

status(phase)

condition

creation-time

update-time

And for other columns, I choose the unique values of each resource.

sanposhiho · 2022-02-25T04:31:10Z

/ok-to-test

196Ikuchil · 2022-02-25T13:13:12Z

web/components/ResourceViews/DataTables/NodeDataTable.vue

+      },
+      {
+        text: "Update-Time",
+        value: "metadata.managedFields[0].time",


currently, we display the managed field's timestamp as an update time.

I think that there is no way to get the updated time except this.
I also checked that this doesn't raise an error even if managedFields[0] is nil. (The cell becomes empty.)

sanposhiho · 2022-02-27T22:56:20Z

/assign

sanposhiho · 2022-02-28T00:42:30Z

@196Ikuchil

Some feedbacks.

For Pod table,

Status is not needed. (Because it's always pending).

For Node table,

Namespace is not needed. Node is not namespaced resource.
Conditions and Status is not needed.
Capacity should show each resource(CPU, memory, and pod)

For PV table,

Namespace is also not needed. not namespaced resource.
PVReclaimPolicy is not needed.

For PVC table,

Status is also not needed. same reason as Pod.

For SC table,

Namespace is not needed. same reason.
Parameters, Reclaim-Policy, and Volume-Binding-Mode are not needed.

For PC table,

Namespace is not needed. same reason.

And for all tables,

The length of the Search box should be the same for all tables.
change not to use -. Use the exact name instead. (like CreationTime, GlobalDefault...)

Others

Move "List, Table" switch to top bar.

sanposhiho · 2022-02-28T01:12:35Z

And, in current implementation, Node on Pod table is not updated.
I raise it as another issue because this is not a problem specific to this feature.
#120

196Ikuchil · 2022-02-28T03:21:48Z

Hi @sanposhiho
Thanks to the reviews. I generally understand.
I have two questions.

Status
On PVC, there are possibilities to take other values. Is status not needed?Ref:kubernetes.io/docs/reference/generated/kubernetes-api/v1.23/
(Note: On other resources, I have checked that the status parameter is Deprecated. For example, PodStatus. Therefore, I will remove it from the table.)
Move "List, Table" switch to top bar.
I think it shouldn't move. This is because the buttons should not be placed far from the table. Isn't it hard to tell what the switch is for?
And also the button's component file should be placed under the ResourceViews directory.

sanposhiho · 2022-02-28T03:32:29Z

On PVC, there are possibilities to take other values. Is status not needed?

Yes. Not needed. This value is not much related to scheduling. (This is "scheduler" simulator, so columns that are not related to scheduling are not needed basically.)

This is because the buttons should not be placed far from the table. Isn't it hard to tell what the switch is for?

It's a fair point. But it is the same even in its current location. It is only when the user touches it that they realize it has something to do with how it is displayed.

How about removing the button and change the UI with env.
Like ALPHA__TABLE_VIEWS. If ALPHA__TABLE_VIEWS == true (or 1?), use the table to show resources.

sanposhiho · 2022-02-28T03:35:30Z

I think one of the strengths of the current view is "It's easy to see where Pod is."

Conversely, if we can achieve this strength in this table view, I think we can replace the current UI with table view completely.

sanposhiho · 2022-02-28T03:35:49Z

/retitle Implement table view on Web UI

sanposhiho · 2022-02-28T03:39:15Z

Conversely, if we can achieve this strength in this table view, I think we can replace the current UI with table view completely.

This does not mean that I want you to make changes that way in this PR. I think we can merge this PR first, and then make improvements for that. (Otherwise, this PR will become too big.)

…t/ directory

196Ikuchil · 2022-02-28T11:03:51Z

How about removing the button and change the UI with env.
Like ALPHA__TABLE_VIEWS. If ALPHA__TABLE_VIEWS == true (or 1?), use the table to show resources.

Understood. In this PR, we use env value.
And we expect that the current view will replace this table view in nearly future.

196Ikuchil · 2022-02-28T14:04:15Z

@sanposhiho
Fixed it✋
I also updated the documentation and screenshots at the top of this PR.
#119 (comment)

196Ikuchil · 2022-02-28T14:22:45Z

/unhold

sanposhiho · 2022-03-03T12:16:34Z

web/components/ResourceViews/DataTables/DataTable.vue

+      type: Array,
+      default: () => [],
+    },
+    label: {


Rename to title or resourceName

sanposhiho

make it clear that each row on table is clickable.

sanposhiho · 2022-03-03T14:03:33Z

web/components/ResourceViews/DataTables/DataTable.vue

+    };
+  },
+});
+</script>


Suggested change

</script>

</script>

<style>

.row-pointer > .v-data-table__wrapper > table > tbody > tr:hover {

cursor: pointer;

}

</style>

sanposhiho · 2022-03-03T14:04:03Z

web/components/ResourceViews/DataTables/DataTable.vue

+          :items="items"
+          :items-per-page="5"
+          :search="search"
+          multi-sort


Suggested change

multi-sort

multi-sort

class="row-pointer"

sanposhiho

Thanks @196Ikuchil 👍
/lgtm
/approve

k8s-ci-robot · 2022-03-11T13:35:22Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: 196Ikuchil, sanposhiho

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [sanposhiho]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

* refactor:move resource view components to under the ResourceViews/List/ directory * refactor:create ResourcesViewPanel component and replace it on index.vue * add: ResourcesViewPanel & RadioButton to select view * add:DataTable template * fix:typo * add:basic data tables for each resources * fix:import PodList on UnscheduledPodList * fix:change display columns * fix:declare of Array type * fix:remove debug comment * fix:change show columns * fix:change columns name * typo:lang * style:adjust search text field of tables * feat:add ALPHA_TABLE_VIEWS env * fix:show datatable if ALPHA_TABLE_VIEWS env val is "1" * fix:column name * refactor:separated into new component * refactor:change label to title * style:make it clear that each row on table is clickable

…in (#121) * Able to configure API server and port, thus expose it is possible via compose * linters * update property name to be more descriptive * change the parameter arg to be more descriptive * WIP - use create server chain to start k8s api server. * WIP - remove unecessary shutdown fn * setup annoymoususer for insecure testing * update go mod sum * instead of building kube-api , only do openapi-gen * add vendor files into repo and keep existing openapi gen * forgot to add openapi * remove not needed generated api * refactor due to linters * change makefile to what it was for github action * refactor due to cyclomatic complexity * use original dockerfile step * unnecessary if * remove openapi step before test * disable admission plugins to for node taints and service account checks * Added docs to describe our kube-apiserver creation process and env var * add permission doc * Import from existing cluster (#111) * feat:add ignoreRestart Option to Import on ExportService * add:impl ReplicateExistingClusterService * add:ExternalKubeClientCfg to config * add:impl interface of ReplicateExistingClusterService * feat:impl replicate existing cluster's resources logic if ExternalImportEnabled is enabled * test:add Import with ignoreRestart test * refactor:add interface of ExportService * add:create mock of ExportService(run go generate) * Update config/config.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update export/export.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update export/export.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update replicateexistingcluster/replicateexistingcluster.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update replicateexistingcluster/replicateexistingcluster.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update server/di/di.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update server/di/di.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update replicateexistingcluster/replicateexistingcluster.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update replicateexistingcluster/replicateexistingcluster.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Update replicateexistingcluster/replicateexistingcluster.go Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * refactor:rename IgnoreRestart option to IgnoreSchedulerConfiguration * refactor:rename _exportService to exportService * refactor:rename to replicateExistingClusterService * refactor:change convert logic of resources * refactor:move private functions to utils.go of export package * test:export utils test * test:add test for replicateexistingcluster * fix:return value of ConvertToResourcesForImportFromResourcesForExport * fix:get a context in arg of ImportFromExistingCluster * fix:remove comment * fix:rename to ConvertResourcesForImportToResourcesForExport * fix:do import before API server starting Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * support reset feature on web ui (#114) * fix nil pointer reference * update delete collection method to force delete * fix conflict * delete debug print * fix lint * fix * update factory method * add provider * fix reset button * fix format * Rename simulatorPlugin to wrappedPlugin (#126) * refactor:rename simulatorPlugin to wrappedPlugin * fix:prefix word * test:fix * refactor:receiver name * Implement table view on Web UI (#119) * refactor:move resource view components to under the ResourceViews/List/ directory * refactor:create ResourcesViewPanel component and replace it on index.vue * add: ResourcesViewPanel & RadioButton to select view * add:DataTable template * fix:typo * add:basic data tables for each resources * fix:import PodList on UnscheduledPodList * fix:change display columns * fix:declare of Array type * fix:remove debug comment * fix:change show columns * fix:change columns name * typo:lang * style:adjust search text field of tables * feat:add ALPHA_TABLE_VIEWS env * fix:show datatable if ALPHA_TABLE_VIEWS env val is "1" * fix:column name * refactor:separated into new component * refactor:change label to title * style:make it clear that each row on table is clickable * Display the kind/apiVersion in the scheduler configuration yaml (#129) * Display the kind/apiVersion in the scheduler configuration yaml * Add kind/apiVersion to the yaml as you might expect * For "APPLY" keep the profiles only so that ignored edits (e.g. apiVersion) are not displayed next time. * The editor still allows unsupported/ignored edits, but at least it is clear what was set when you revisit. Signed-off-by: Mark Sturdevant <mark.sturdevant@ibm.com> * Ensure only profiles get updated in ApplySchedulerConfig * Also don't yarn lint/format coverage directory * WIP - remove unecessary shutdown fn * fix rebase issue * merge master * Request kube apiserver directly from frontend (#115) * Request kube apiserver directly from frontend * Show axios errors on page * Add axios error judge * Change default kubeAPIserver port * Add simple cause err message, Fix typo * Delete comments * Fix err message * change kube apiserver request header * tmp * Delete pods when delete node * delete managed field before apply * Update web/components/ResourceBar/ResourceBar.vue Co-authored-by: Kensei Nakada <handbomusic@gmail.com> Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Add deprecate description (#127) * Add deprecate comment lines * change some docs description * fix indent and move not-deprecate APIs * fix linter err * setup annoymoususer for insecure testing * Request kube apiserver directly from frontend (#115) * Request kube apiserver directly from frontend * Show axios errors on page * Add axios error judge * Change default kubeAPIserver port * Add simple cause err message, Fix typo * Delete comments * Fix err message * change kube apiserver request header * tmp * Delete pods when delete node * delete managed field before apply * Update web/components/ResourceBar/ResourceBar.vue Co-authored-by: Kensei Nakada <handbomusic@gmail.com> Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Able to configure API server and port, thus expose it is possible via compose * refactor due to linters * remove unecessary error channel * log the error return from prepared aggregator server * add temp cert directory * remote unnecessary changes. * update md to reflect default api behavior * remove unnecessary flag * Enable Priority Plugin for admission Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * Change the order of logging to ensure url is correct. Co-authored-by: Kensei Nakada <handbomusic@gmail.com> * pass cleanupFunc all the way to shutdown * attemp to fix useragent issue * Revert "attemp to fix useragent issue" This reverts commit b06408a. Co-authored-by: 196Ikuchil <22634362+196Ikuchil@users.noreply.github.com> Co-authored-by: Kensei Nakada <handbomusic@gmail.com> Co-authored-by: sivchari <shibuuuu5@gmail.com> Co-authored-by: Mark Sturdevant <mark.sturdevant@ibm.com> Co-authored-by: momom-i <51011095+momom-i@users.noreply.github.com>

k8s-ci-robot added do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. kind/feature Categorizes issue or PR as related to a new feature. tide/merge-method-squash Denotes a PR that should be squashed by tide when it merges. labels Feb 23, 2022

k8s-ci-robot added needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Feb 23, 2022

k8s-ci-robot requested a review from alculquicondor February 23, 2022 15:36

k8s-ci-robot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. sig/scheduling Categorizes an issue or PR as relevant to SIG Scheduling. labels Feb 23, 2022

k8s-ci-robot requested a review from Huang-Wei February 23, 2022 15:36

196Ikuchil commented Feb 23, 2022

View reviewed changes

k8s-ci-robot added ok-to-test Indicates a non-member PR verified by an org member that is safe to test. and removed needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. labels Feb 25, 2022

196Ikuchil commented Feb 25, 2022

View reviewed changes

k8s-ci-robot assigned sanposhiho Feb 27, 2022

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 28, 2022

k8s-ci-robot changed the title ~~Implement DataTable on Web UI to be able to see many resources~~ Implement table view on Web UI Feb 28, 2022

196Ikuchil added 4 commits February 28, 2022 19:46

refactor:move resource view components to under the ResourceViews/Lis…

7ab5ff9

…t/ directory

refactor:create ResourcesViewPanel component and replace it on index.vue

4cda73e

add: ResourcesViewPanel & RadioButton to select view

e3aa6de

add:DataTable template

9aaadd4

fix:remove debug comment

51ea437

196Ikuchil force-pushed the web_impl_new_table branch from 1978319 to 51ea437 Compare February 28, 2022 10:50

k8s-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 28, 2022

196Ikuchil added 6 commits February 28, 2022 20:15

fix:change show columns

5201737

fix:change columns name

1e6dfb4

typo:lang

feed14e

style:adjust search text field of tables

9006270

feat:add ALPHA_TABLE_VIEWS env

82a599f

fix:show datatable if ALPHA_TABLE_VIEWS env val is "1"

2398c09

fix:column name

1de589b

k8s-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Feb 28, 2022

refactor:separated into new component

59f3878

sanposhiho reviewed Mar 3, 2022

View reviewed changes

refactor:change label to title

79cd07e

sanposhiho reviewed Mar 3, 2022

View reviewed changes

style:make it clear that each row on table is clickable

674e850

sanposhiho approved these changes Mar 11, 2022

View reviewed changes

k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Mar 11, 2022

k8s-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Mar 11, 2022

k8s-ci-robot merged commit 9b1f680 into kubernetes-sigs:master Mar 11, 2022

This was referenced Mar 11, 2022

Improve the documentation about environment variables #106

Closed

Request kube apiserver directly from frontend #115

Merged

196Ikuchil mentioned this pull request Mar 31, 2022

REQUEST: New membership for 196Ikuchil kubernetes/org#3346

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement table view on Web UI #119

Implement table view on Web UI #119

196Ikuchil commented Feb 23, 2022 •

edited

Loading

k8s-ci-robot commented Feb 23, 2022

196Ikuchil Feb 23, 2022

196Ikuchil Feb 24, 2022 •

edited

Loading

sanposhiho commented Feb 25, 2022

196Ikuchil Feb 25, 2022

196Ikuchil Feb 27, 2022

sanposhiho commented Feb 27, 2022

sanposhiho commented Feb 28, 2022 •

edited

Loading

sanposhiho commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

sanposhiho commented Feb 28, 2022

sanposhiho commented Feb 28, 2022 •

edited

Loading

sanposhiho commented Feb 28, 2022

sanposhiho commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

sanposhiho Mar 3, 2022

sanposhiho left a comment

sanposhiho Mar 3, 2022

sanposhiho Mar 3, 2022

sanposhiho left a comment

k8s-ci-robot commented Mar 11, 2022

-</script>
+</script>
+<style>
+.row-pointer > .v-data-table__wrapper > table > tbody > tr:hover {
+  cursor: pointer;
+}
+</style>

Implement table view on Web UI #119

Implement table view on Web UI #119

Conversation

196Ikuchil commented Feb 23, 2022 • edited Loading

What type of PR is this?

What this PR does / why we need it:

Which issue(s) this PR fixes:

Special notes for your reviewer:

Samples

clickable

k8s-ci-robot commented Feb 23, 2022

196Ikuchil Feb 23, 2022

Choose a reason for hiding this comment

Need help

196Ikuchil Feb 24, 2022 • edited Loading

Choose a reason for hiding this comment

sanposhiho commented Feb 25, 2022

196Ikuchil Feb 25, 2022

Choose a reason for hiding this comment

196Ikuchil Feb 27, 2022

Choose a reason for hiding this comment

sanposhiho commented Feb 27, 2022

sanposhiho commented Feb 28, 2022 • edited Loading

sanposhiho commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

sanposhiho commented Feb 28, 2022

sanposhiho commented Feb 28, 2022 • edited Loading

sanposhiho commented Feb 28, 2022

sanposhiho commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

196Ikuchil commented Feb 28, 2022

sanposhiho Mar 3, 2022

Choose a reason for hiding this comment

sanposhiho left a comment

Choose a reason for hiding this comment

sanposhiho Mar 3, 2022

Choose a reason for hiding this comment

sanposhiho Mar 3, 2022

Choose a reason for hiding this comment

sanposhiho left a comment

Choose a reason for hiding this comment

k8s-ci-robot commented Mar 11, 2022

196Ikuchil commented Feb 23, 2022 •

edited

Loading

196Ikuchil Feb 24, 2022 •

edited

Loading

sanposhiho commented Feb 28, 2022 •

edited

Loading

sanposhiho commented Feb 28, 2022 •

edited

Loading