@patternfly/patternfly 4.196.4 → 4.196.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +24 -0
- package/base/themes/dark/_chart-globals.scss +39 -0
- package/base/themes/dark/_globals.scss +5 -0
- package/base/themes/dark/_variables.scss +95 -0
- package/components/ChipGroup/chip-group.css +1 -1
- package/components/ChipGroup/chip-group.scss +2 -1
- package/components/LabelGroup/label-group.css +1 -0
- package/components/LabelGroup/label-group.scss +1 -0
- package/docs/components/Form/examples/Form.md +56 -511
- package/docs/demos/Form/examples/BasicForms.md +781 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +2 -1
- package/patternfly.css +2 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/themes/dark/colors.scss +16 -0
- package/sass-utilities/themes/dark/mixins.scss +5 -0
- package/sass-utilities/themes/dark/placeholders.scss +28 -0
- package/sass-utilities/themes/dark/scss-variables.scss +86 -0
|
@@ -758,3 +758,784 @@ section: components
|
|
|
758
758
|
</form>
|
|
759
759
|
|
|
760
760
|
```
|
|
761
|
+
|
|
762
|
+
### Complex form
|
|
763
|
+
|
|
764
|
+
```html
|
|
765
|
+
<form novalidate class="pf-c-form">
|
|
766
|
+
<div class="pf-c-form__group">
|
|
767
|
+
<div class="pf-c-form__group-label">
|
|
768
|
+
<label
|
|
769
|
+
class="pf-c-form__label"
|
|
770
|
+
for="form-demo-sections-complex-formform-demo-sections-complex-form-name"
|
|
771
|
+
>
|
|
772
|
+
<span class="pf-c-form__label-text">Name</span>
|
|
773
|
+
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
774
|
+
</label>
|
|
775
|
+
|
|
776
|
+
<button
|
|
777
|
+
class="pf-c-form__group-label-help"
|
|
778
|
+
aria-label="More information for name field"
|
|
779
|
+
aria-describedby="form-demo-sections-complex-formform-demo-sections-complex-form-name"
|
|
780
|
+
>
|
|
781
|
+
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
782
|
+
</button>
|
|
783
|
+
</div>
|
|
784
|
+
<div class="pf-c-form__group-control">
|
|
785
|
+
<input
|
|
786
|
+
class="pf-c-form-control"
|
|
787
|
+
type="text"
|
|
788
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-name"
|
|
789
|
+
name="form-demo-sections-complex-formform-demo-sections-complex-form-name"
|
|
790
|
+
required
|
|
791
|
+
/>
|
|
792
|
+
</div>
|
|
793
|
+
</div>
|
|
794
|
+
|
|
795
|
+
<div class="pf-c-form__group">
|
|
796
|
+
<div class="pf-c-form__group-label">
|
|
797
|
+
<label
|
|
798
|
+
class="pf-c-form__label"
|
|
799
|
+
for="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
|
|
800
|
+
>
|
|
801
|
+
<span class="pf-c-form__label-text">Labels</span>
|
|
802
|
+
</label>
|
|
803
|
+
|
|
804
|
+
<button
|
|
805
|
+
class="pf-c-form__group-label-help"
|
|
806
|
+
aria-label="More information for labels field"
|
|
807
|
+
aria-describedby="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
|
|
808
|
+
>
|
|
809
|
+
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
810
|
+
</button>
|
|
811
|
+
</div>
|
|
812
|
+
<div class="pf-c-form__group-control">
|
|
813
|
+
<div
|
|
814
|
+
class="pf-c-text-input-group"
|
|
815
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
|
|
816
|
+
>
|
|
817
|
+
<div class="pf-c-text-input-group__main">
|
|
818
|
+
<div class="pf-c-label-group">
|
|
819
|
+
<div class="pf-c-label-group__main">
|
|
820
|
+
<ul
|
|
821
|
+
class="pf-c-label-group__list"
|
|
822
|
+
role="list"
|
|
823
|
+
aria-label="Group of labels"
|
|
824
|
+
>
|
|
825
|
+
<li class="pf-c-label-group__list-item">
|
|
826
|
+
<span class="pf-c-label">
|
|
827
|
+
<span class="pf-c-label__content">
|
|
828
|
+
<span class="pf-c-label__icon">
|
|
829
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
830
|
+
</span>
|
|
831
|
+
prometheus=k8s
|
|
832
|
+
</span>
|
|
833
|
+
<button
|
|
834
|
+
class="pf-c-button pf-m-plain"
|
|
835
|
+
type="button"
|
|
836
|
+
id="-label-1-button"
|
|
837
|
+
aria-label="Remove"
|
|
838
|
+
aria-labelledby="-label-1-button -label-1-text"
|
|
839
|
+
>
|
|
840
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
841
|
+
</button>
|
|
842
|
+
</span>
|
|
843
|
+
</li>
|
|
844
|
+
<li class="pf-c-label-group__list-item">
|
|
845
|
+
<span class="pf-c-label pf-m-blue">
|
|
846
|
+
<span class="pf-c-label__content">
|
|
847
|
+
<span class="pf-c-label__icon">
|
|
848
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
849
|
+
</span>
|
|
850
|
+
new
|
|
851
|
+
</span>
|
|
852
|
+
<button
|
|
853
|
+
class="pf-c-button pf-m-plain"
|
|
854
|
+
type="button"
|
|
855
|
+
id="-label-2-button"
|
|
856
|
+
aria-label="Remove"
|
|
857
|
+
aria-labelledby="-label-2-button -label-2-text"
|
|
858
|
+
>
|
|
859
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
860
|
+
</button>
|
|
861
|
+
</span>
|
|
862
|
+
</li>
|
|
863
|
+
<li class="pf-c-label-group__list-item">
|
|
864
|
+
<button class="pf-c-label pf-m-add" type="button">
|
|
865
|
+
<span class="pf-c-label__content">Add Label</span>
|
|
866
|
+
</button>
|
|
867
|
+
</li>
|
|
868
|
+
</ul>
|
|
869
|
+
</div>
|
|
870
|
+
</div>
|
|
871
|
+
<span class="pf-c-text-input-group__text">
|
|
872
|
+
<input
|
|
873
|
+
class="pf-c-text-input-group__text-input"
|
|
874
|
+
type="text"
|
|
875
|
+
value
|
|
876
|
+
aria-label="Type to filter"
|
|
877
|
+
/>
|
|
878
|
+
</span>
|
|
879
|
+
</div>
|
|
880
|
+
</div>
|
|
881
|
+
</div>
|
|
882
|
+
</div>
|
|
883
|
+
|
|
884
|
+
<div
|
|
885
|
+
class="pf-c-form__field-group"
|
|
886
|
+
role="group"
|
|
887
|
+
aria-labelledby="form-demo-sections-complex-form-alerting-title"
|
|
888
|
+
>
|
|
889
|
+
<div class="pf-c-form__field-group-toggle">
|
|
890
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
891
|
+
<button
|
|
892
|
+
class="pf-c-button pf-m-plain"
|
|
893
|
+
type="button"
|
|
894
|
+
aria-expanded="false"
|
|
895
|
+
aria-label="Details"
|
|
896
|
+
id="form-demo-sections-complex-form-alerting-toggle"
|
|
897
|
+
aria-labelledby="form-demo-sections-complex-form-alerting-title form-demo-sections-complex-form-alerting-toggle"
|
|
898
|
+
>
|
|
899
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
900
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
901
|
+
</span>
|
|
902
|
+
</button>
|
|
903
|
+
</div>
|
|
904
|
+
</div>
|
|
905
|
+
<div class="pf-c-form__field-group-header">
|
|
906
|
+
<div class="pf-c-form__field-group-header-main">
|
|
907
|
+
<div class="pf-c-form__field-group-header-title">
|
|
908
|
+
<div
|
|
909
|
+
class="pf-c-form__field-group-header-title-text"
|
|
910
|
+
id="form-demo-sections-complex-form-alerting-title"
|
|
911
|
+
>Alerting</div>
|
|
912
|
+
</div>
|
|
913
|
+
<div
|
|
914
|
+
class="pf-c-form__field-group-header-description"
|
|
915
|
+
>Define details regarding alerting.</div>
|
|
916
|
+
</div>
|
|
917
|
+
</div>
|
|
918
|
+
</div>
|
|
919
|
+
|
|
920
|
+
<div
|
|
921
|
+
class="pf-c-form__field-group"
|
|
922
|
+
role="group"
|
|
923
|
+
aria-labelledby="form-demo-sections-complex-form-query-title"
|
|
924
|
+
>
|
|
925
|
+
<div class="pf-c-form__field-group-toggle">
|
|
926
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
927
|
+
<button
|
|
928
|
+
class="pf-c-button pf-m-plain"
|
|
929
|
+
type="button"
|
|
930
|
+
aria-expanded="false"
|
|
931
|
+
aria-label="Details"
|
|
932
|
+
id="form-demo-sections-complex-form-query-toggle"
|
|
933
|
+
aria-labelledby="form-demo-sections-complex-form-query-title form-demo-sections-complex-form-query-toggle"
|
|
934
|
+
>
|
|
935
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
936
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
937
|
+
</span>
|
|
938
|
+
</button>
|
|
939
|
+
</div>
|
|
940
|
+
</div>
|
|
941
|
+
<div class="pf-c-form__field-group-header">
|
|
942
|
+
<div class="pf-c-form__field-group-header-main">
|
|
943
|
+
<div class="pf-c-form__field-group-header-title">
|
|
944
|
+
<div
|
|
945
|
+
class="pf-c-form__field-group-header-title-text"
|
|
946
|
+
id="form-demo-sections-complex-form-query-title"
|
|
947
|
+
>Query</div>
|
|
948
|
+
</div>
|
|
949
|
+
<div
|
|
950
|
+
class="pf-c-form__field-group-header-description"
|
|
951
|
+
>The query specification defines the query command line flags when starting.</div>
|
|
952
|
+
</div>
|
|
953
|
+
</div>
|
|
954
|
+
</div>
|
|
955
|
+
|
|
956
|
+
<div
|
|
957
|
+
class="pf-c-form__field-group"
|
|
958
|
+
role="group"
|
|
959
|
+
aria-labelledby="form-demo-sections-complex-form-affinity-title"
|
|
960
|
+
>
|
|
961
|
+
<div class="pf-c-form__field-group-toggle">
|
|
962
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
963
|
+
<button
|
|
964
|
+
class="pf-c-button pf-m-plain"
|
|
965
|
+
type="button"
|
|
966
|
+
aria-expanded="false"
|
|
967
|
+
aria-label="Details"
|
|
968
|
+
id="form-demo-sections-complex-form-affinity-toggle"
|
|
969
|
+
aria-labelledby="form-demo-sections-complex-form-affinity-title form-demo-sections-complex-form-affinity-toggle"
|
|
970
|
+
>
|
|
971
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
972
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
973
|
+
</span>
|
|
974
|
+
</button>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
<div class="pf-c-form__field-group-header">
|
|
978
|
+
<div class="pf-c-form__field-group-header-main">
|
|
979
|
+
<div class="pf-c-form__field-group-header-title">
|
|
980
|
+
<div
|
|
981
|
+
class="pf-c-form__field-group-header-title-text"
|
|
982
|
+
id="form-demo-sections-complex-form-affinity-title"
|
|
983
|
+
>Affinity</div>
|
|
984
|
+
</div>
|
|
985
|
+
<div
|
|
986
|
+
class="pf-c-form__field-group-header-description"
|
|
987
|
+
>If specified, the pod's scheduling constraints.</div>
|
|
988
|
+
</div>
|
|
989
|
+
</div>
|
|
990
|
+
<div class="pf-c-form__field-group-body" hidden>
|
|
991
|
+
<div
|
|
992
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
993
|
+
role="group"
|
|
994
|
+
aria-labelledby="form-demo-sections-complex-form-node-affinity-title"
|
|
995
|
+
>
|
|
996
|
+
<div class="pf-c-form__field-group-toggle">
|
|
997
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
998
|
+
<button
|
|
999
|
+
class="pf-c-button pf-m-plain"
|
|
1000
|
+
type="button"
|
|
1001
|
+
aria-expanded="true"
|
|
1002
|
+
aria-label="Details"
|
|
1003
|
+
id="form-demo-sections-complex-form-node-affinity-toggle"
|
|
1004
|
+
aria-labelledby="form-demo-sections-complex-form-node-affinity-title form-demo-sections-complex-form-node-affinity-toggle"
|
|
1005
|
+
>
|
|
1006
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1007
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1008
|
+
</span>
|
|
1009
|
+
</button>
|
|
1010
|
+
</div>
|
|
1011
|
+
</div>
|
|
1012
|
+
<div class="pf-c-form__field-group-header">
|
|
1013
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1014
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1015
|
+
<div
|
|
1016
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1017
|
+
id="form-demo-sections-complex-form-node-affinity-title"
|
|
1018
|
+
>Node affinity</div>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div
|
|
1021
|
+
class="pf-c-form__field-group-header-description"
|
|
1022
|
+
>Describes node affinity scheduling rules for the pod.</div>
|
|
1023
|
+
</div>
|
|
1024
|
+
</div>
|
|
1025
|
+
<div class="pf-c-form__field-group-body">
|
|
1026
|
+
<div
|
|
1027
|
+
class="pf-c-form__field-group"
|
|
1028
|
+
role="group"
|
|
1029
|
+
aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title"
|
|
1030
|
+
>
|
|
1031
|
+
<div class="pf-c-form__field-group-toggle">
|
|
1032
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
1033
|
+
<button
|
|
1034
|
+
class="pf-c-button pf-m-plain"
|
|
1035
|
+
type="button"
|
|
1036
|
+
aria-expanded="false"
|
|
1037
|
+
aria-label="Details"
|
|
1038
|
+
id="form-demo-sections-complex-form-node-affinity-required-toggle"
|
|
1039
|
+
aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title form-demo-sections-complex-form-node-affinity-required-toggle"
|
|
1040
|
+
>
|
|
1041
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1042
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1043
|
+
</span>
|
|
1044
|
+
</button>
|
|
1045
|
+
</div>
|
|
1046
|
+
</div>
|
|
1047
|
+
<div class="pf-c-form__field-group-header">
|
|
1048
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1049
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1050
|
+
<div
|
|
1051
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1052
|
+
id="form-demo-sections-complex-form-node-affinity-required-title"
|
|
1053
|
+
>Required during scheduling, ignored during execution</div>
|
|
1054
|
+
</div>
|
|
1055
|
+
<div
|
|
1056
|
+
class="pf-c-form__field-group-header-description"
|
|
1057
|
+
>The scheduler will prefer to schedule pods to nodes that satisfy the affinity expressions specified by this field, but it may choose a node that violates one or more of the expressions. The node that is most preferred is the one with the greatest sum of weights, i.e. for each node that meets all of the scheduling requirements.</div>
|
|
1058
|
+
</div>
|
|
1059
|
+
</div>
|
|
1060
|
+
</div>
|
|
1061
|
+
|
|
1062
|
+
<div
|
|
1063
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
1064
|
+
role="group"
|
|
1065
|
+
aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title"
|
|
1066
|
+
>
|
|
1067
|
+
<div class="pf-c-form__field-group-toggle">
|
|
1068
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
1069
|
+
<button
|
|
1070
|
+
class="pf-c-button pf-m-plain"
|
|
1071
|
+
type="button"
|
|
1072
|
+
aria-expanded="true"
|
|
1073
|
+
aria-label="Details"
|
|
1074
|
+
id="form-demo-sections-complex-form-node-affinity-required-2-toggle"
|
|
1075
|
+
aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title form-demo-sections-complex-form-node-affinity-required-2-toggle"
|
|
1076
|
+
>
|
|
1077
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1078
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1079
|
+
</span>
|
|
1080
|
+
</button>
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
<div class="pf-c-form__field-group-header">
|
|
1084
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1085
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1086
|
+
<div
|
|
1087
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1088
|
+
id="form-demo-sections-complex-form-node-affinity-required-2-title"
|
|
1089
|
+
>Required during scheduling, ignored during execution</div>
|
|
1090
|
+
</div>
|
|
1091
|
+
<div
|
|
1092
|
+
class="pf-c-form__field-group-header-description"
|
|
1093
|
+
>The scheduler will prefer to schedule pods to nodes that satisfy the affinity expressions specified by this field, but it may choose a node that violates one or more of the expressions. The node that is most preferred is the one with the greatest sum of weights, i.e. for each node that meets all of the scheduling requirements.</div>
|
|
1094
|
+
</div>
|
|
1095
|
+
</div>
|
|
1096
|
+
<div class="pf-c-form__field-group-body">
|
|
1097
|
+
<section
|
|
1098
|
+
class="pf-c-form__section"
|
|
1099
|
+
role="group"
|
|
1100
|
+
aria-labelledby="form-demo-sections-complex-form-node-selector-terms-title"
|
|
1101
|
+
>
|
|
1102
|
+
<div class="pf-c-form__group">
|
|
1103
|
+
<div class="pf-c-form__group-label">
|
|
1104
|
+
<label
|
|
1105
|
+
class="pf-c-form__label"
|
|
1106
|
+
id="form-demo-sections-complex-form-node-selector-terms-title"
|
|
1107
|
+
>
|
|
1108
|
+
<span class="pf-c-form__label-text">Node selector terms</span>
|
|
1109
|
+
<span
|
|
1110
|
+
class="pf-c-form__label-required"
|
|
1111
|
+
aria-hidden="true"
|
|
1112
|
+
>*</span>
|
|
1113
|
+
</label>
|
|
1114
|
+
</div>
|
|
1115
|
+
<div class="pf-c-form__group-control pf-m-stack">
|
|
1116
|
+
<div class="pf-c-input-group">
|
|
1117
|
+
<input
|
|
1118
|
+
class="pf-c-form-control"
|
|
1119
|
+
required
|
|
1120
|
+
type="text"
|
|
1121
|
+
id="form-demo-sections-complex-form-node-selector-terms-input-1"
|
|
1122
|
+
name="form-demo-sections-complex-form-node-selector-terms-input-1"
|
|
1123
|
+
aria-labelledby="form-demo-sections-complex-form-node-selector-terms form-demo-sections-complex-form-node-selector-terms-title"
|
|
1124
|
+
/>
|
|
1125
|
+
|
|
1126
|
+
<button
|
|
1127
|
+
class="pf-c-button pf-m-plain"
|
|
1128
|
+
type="button"
|
|
1129
|
+
aria-label="Remove"
|
|
1130
|
+
>
|
|
1131
|
+
<i class="fas fa-minus-circle" aria-hidden="true"></i>
|
|
1132
|
+
</button>
|
|
1133
|
+
</div>
|
|
1134
|
+
<button
|
|
1135
|
+
class="pf-c-button pf-m-link pf-m-inline"
|
|
1136
|
+
type="button"
|
|
1137
|
+
>
|
|
1138
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1139
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1140
|
+
</span>
|
|
1141
|
+
Add valid redirect URI
|
|
1142
|
+
</button>
|
|
1143
|
+
</div>
|
|
1144
|
+
</div>
|
|
1145
|
+
</section>
|
|
1146
|
+
</div>
|
|
1147
|
+
</div>
|
|
1148
|
+
</div>
|
|
1149
|
+
</div>
|
|
1150
|
+
|
|
1151
|
+
<div
|
|
1152
|
+
class="pf-c-form__field-group"
|
|
1153
|
+
role="group"
|
|
1154
|
+
aria-labelledby="form-demo-sections-complex-form-pod-affinity-title"
|
|
1155
|
+
>
|
|
1156
|
+
<div class="pf-c-form__field-group-toggle">
|
|
1157
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
1158
|
+
<button
|
|
1159
|
+
class="pf-c-button pf-m-plain"
|
|
1160
|
+
type="button"
|
|
1161
|
+
aria-expanded="false"
|
|
1162
|
+
aria-label="Details"
|
|
1163
|
+
id="form-demo-sections-complex-form-pod-affinity-toggle"
|
|
1164
|
+
aria-labelledby="form-demo-sections-complex-form-pod-affinity-title form-demo-sections-complex-form-pod-affinity-toggle"
|
|
1165
|
+
>
|
|
1166
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1167
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1168
|
+
</span>
|
|
1169
|
+
</button>
|
|
1170
|
+
</div>
|
|
1171
|
+
</div>
|
|
1172
|
+
<div class="pf-c-form__field-group-header">
|
|
1173
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1174
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1175
|
+
<div
|
|
1176
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1177
|
+
id="form-demo-sections-complex-form-pod-affinity-title"
|
|
1178
|
+
>Pod affinity</div>
|
|
1179
|
+
</div>
|
|
1180
|
+
<div
|
|
1181
|
+
class="pf-c-form__field-group-header-description"
|
|
1182
|
+
>Describes pod affinity scheduling rules (e.g. co-locate the pod in the same node, zone, etc. as some other pods).</div>
|
|
1183
|
+
</div>
|
|
1184
|
+
</div>
|
|
1185
|
+
</div>
|
|
1186
|
+
</div>
|
|
1187
|
+
</div>
|
|
1188
|
+
|
|
1189
|
+
<div
|
|
1190
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
1191
|
+
role="group"
|
|
1192
|
+
aria-labelledby="form-demo-sections-complex-form-routing-title"
|
|
1193
|
+
>
|
|
1194
|
+
<div class="pf-c-form__field-group-toggle">
|
|
1195
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
1196
|
+
<button
|
|
1197
|
+
class="pf-c-button pf-m-plain"
|
|
1198
|
+
type="button"
|
|
1199
|
+
aria-expanded="true"
|
|
1200
|
+
aria-label="Details"
|
|
1201
|
+
id="form-demo-sections-complex-form-routing-toggle"
|
|
1202
|
+
aria-labelledby="form-demo-sections-complex-form-routing-title form-demo-sections-complex-form-routing-toggle"
|
|
1203
|
+
>
|
|
1204
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1205
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1206
|
+
</span>
|
|
1207
|
+
</button>
|
|
1208
|
+
</div>
|
|
1209
|
+
</div>
|
|
1210
|
+
<div class="pf-c-form__field-group-header">
|
|
1211
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1212
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1213
|
+
<div
|
|
1214
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1215
|
+
id="form-demo-sections-complex-form-routing-title"
|
|
1216
|
+
>Routing</div>
|
|
1217
|
+
</div>
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
<div class="pf-c-form__field-group-body">
|
|
1221
|
+
<div
|
|
1222
|
+
class="pf-c-form__group"
|
|
1223
|
+
role="group"
|
|
1224
|
+
aria-labelledby="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-legend"
|
|
1225
|
+
>
|
|
1226
|
+
<div class="pf-c-form__group-control">
|
|
1227
|
+
<div class="pf-c-check">
|
|
1228
|
+
<input
|
|
1229
|
+
class="pf-c-check__input"
|
|
1230
|
+
type="checkbox"
|
|
1231
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-create-route"
|
|
1232
|
+
name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-create-route"
|
|
1233
|
+
/>
|
|
1234
|
+
|
|
1235
|
+
<label
|
|
1236
|
+
class="pf-c-check__label"
|
|
1237
|
+
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-create-route"
|
|
1238
|
+
>Create a route to the application</label>
|
|
1239
|
+
</div>
|
|
1240
|
+
<div
|
|
1241
|
+
class="pf-c-form__helper-text"
|
|
1242
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-legend"
|
|
1243
|
+
aria-live="polite"
|
|
1244
|
+
>
|
|
1245
|
+
<div class="pf-c-helper-text">
|
|
1246
|
+
<div class="pf-c-helper-text__item">
|
|
1247
|
+
<span
|
|
1248
|
+
class="pf-c-helper-text__item-text"
|
|
1249
|
+
>Exposes your appplication at a public URL.</span>
|
|
1250
|
+
</div>
|
|
1251
|
+
</div>
|
|
1252
|
+
</div>
|
|
1253
|
+
</div>
|
|
1254
|
+
</div>
|
|
1255
|
+
<div class="pf-c-form__group">
|
|
1256
|
+
<div class="pf-c-form__group-label">
|
|
1257
|
+
<label
|
|
1258
|
+
class="pf-c-form__label"
|
|
1259
|
+
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname"
|
|
1260
|
+
>
|
|
1261
|
+
<span class="pf-c-form__label-text">Hostname</span>
|
|
1262
|
+
</label>
|
|
1263
|
+
</div>
|
|
1264
|
+
<div class="pf-c-form__group-control">
|
|
1265
|
+
<input
|
|
1266
|
+
class="pf-c-form-control"
|
|
1267
|
+
type="text"
|
|
1268
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname"
|
|
1269
|
+
name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname"
|
|
1270
|
+
/>
|
|
1271
|
+
|
|
1272
|
+
<div
|
|
1273
|
+
class="pf-c-form__helper-text"
|
|
1274
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname-helper"
|
|
1275
|
+
aria-live="polite"
|
|
1276
|
+
>
|
|
1277
|
+
<div class="pf-c-helper-text">
|
|
1278
|
+
<div class="pf-c-helper-text__item">
|
|
1279
|
+
<span
|
|
1280
|
+
class="pf-c-helper-text__item-text"
|
|
1281
|
+
>Public hostname for the route. If not specified, a hostname is generated.</span>
|
|
1282
|
+
</div>
|
|
1283
|
+
</div>
|
|
1284
|
+
</div>
|
|
1285
|
+
</div>
|
|
1286
|
+
</div>
|
|
1287
|
+
<div class="pf-c-form__group">
|
|
1288
|
+
<div class="pf-c-form__group-label">
|
|
1289
|
+
<label
|
|
1290
|
+
class="pf-c-form__label"
|
|
1291
|
+
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
|
|
1292
|
+
>
|
|
1293
|
+
<span class="pf-c-form__label-text">Path</span>
|
|
1294
|
+
</label>
|
|
1295
|
+
</div>
|
|
1296
|
+
<div class="pf-c-form__group-control">
|
|
1297
|
+
<input
|
|
1298
|
+
class="pf-c-form-control"
|
|
1299
|
+
type="text"
|
|
1300
|
+
placeholder="/"
|
|
1301
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
|
|
1302
|
+
name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
|
|
1303
|
+
required
|
|
1304
|
+
/>
|
|
1305
|
+
|
|
1306
|
+
<div
|
|
1307
|
+
class="pf-c-form__helper-text"
|
|
1308
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path-helper"
|
|
1309
|
+
aria-live="polite"
|
|
1310
|
+
>
|
|
1311
|
+
<div class="pf-c-helper-text">
|
|
1312
|
+
<div class="pf-c-helper-text__item">
|
|
1313
|
+
<span
|
|
1314
|
+
class="pf-c-helper-text__item-text"
|
|
1315
|
+
>Path that the router watches to route traffic to the service.</span>
|
|
1316
|
+
</div>
|
|
1317
|
+
</div>
|
|
1318
|
+
</div>
|
|
1319
|
+
</div>
|
|
1320
|
+
</div>
|
|
1321
|
+
<div
|
|
1322
|
+
class="pf-c-form__group"
|
|
1323
|
+
role="group"
|
|
1324
|
+
aria-labelledby="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
|
|
1325
|
+
>
|
|
1326
|
+
<div
|
|
1327
|
+
class="pf-c-form__group-label"
|
|
1328
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
|
|
1329
|
+
>
|
|
1330
|
+
<span
|
|
1331
|
+
class="pf-c-form__label"
|
|
1332
|
+
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security"
|
|
1333
|
+
>
|
|
1334
|
+
<span class="pf-c-form__label-text">Security</span>
|
|
1335
|
+
</span>
|
|
1336
|
+
</div>
|
|
1337
|
+
<div class="pf-c-form__group-control">
|
|
1338
|
+
<div class="pf-c-check">
|
|
1339
|
+
<input
|
|
1340
|
+
class="pf-c-check__input"
|
|
1341
|
+
type="checkbox"
|
|
1342
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-check-1"
|
|
1343
|
+
name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-check-1"
|
|
1344
|
+
/>
|
|
1345
|
+
|
|
1346
|
+
<label
|
|
1347
|
+
class="pf-c-check__label"
|
|
1348
|
+
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-check-1"
|
|
1349
|
+
>Secure Route</label>
|
|
1350
|
+
</div>
|
|
1351
|
+
<div
|
|
1352
|
+
class="pf-c-form__helper-text"
|
|
1353
|
+
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-helper"
|
|
1354
|
+
aria-live="polite"
|
|
1355
|
+
>
|
|
1356
|
+
<div class="pf-c-helper-text">
|
|
1357
|
+
<div class="pf-c-helper-text__item">
|
|
1358
|
+
<span
|
|
1359
|
+
class="pf-c-helper-text__item-text"
|
|
1360
|
+
>Routes can be secured using several TLS termination types for serving certificates.</span>
|
|
1361
|
+
</div>
|
|
1362
|
+
</div>
|
|
1363
|
+
</div>
|
|
1364
|
+
</div>
|
|
1365
|
+
</div>
|
|
1366
|
+
</div>
|
|
1367
|
+
</div>
|
|
1368
|
+
|
|
1369
|
+
<div
|
|
1370
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
1371
|
+
role="group"
|
|
1372
|
+
aria-labelledby="form-demo-sections-complex-form-health-checks-title"
|
|
1373
|
+
>
|
|
1374
|
+
<div class="pf-c-form__field-group-toggle">
|
|
1375
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
1376
|
+
<button
|
|
1377
|
+
class="pf-c-button pf-m-plain"
|
|
1378
|
+
type="button"
|
|
1379
|
+
aria-expanded="true"
|
|
1380
|
+
aria-label="Details"
|
|
1381
|
+
id="form-demo-sections-complex-form-health-checks-toggle"
|
|
1382
|
+
aria-labelledby="form-demo-sections-complex-form-health-checks-title form-demo-sections-complex-form-health-checks-toggle"
|
|
1383
|
+
>
|
|
1384
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1385
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1386
|
+
</span>
|
|
1387
|
+
</button>
|
|
1388
|
+
</div>
|
|
1389
|
+
</div>
|
|
1390
|
+
<div class="pf-c-form__field-group-header">
|
|
1391
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1392
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1393
|
+
<div
|
|
1394
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1395
|
+
id="form-demo-sections-complex-form-health-checks-title"
|
|
1396
|
+
>Health checks</div>
|
|
1397
|
+
</div>
|
|
1398
|
+
</div>
|
|
1399
|
+
</div>
|
|
1400
|
+
<div class="pf-c-form__field-group-body">
|
|
1401
|
+
<div
|
|
1402
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
1403
|
+
role="group"
|
|
1404
|
+
aria-labelledby="form-demo-sections-complex-form-readiness-title"
|
|
1405
|
+
>
|
|
1406
|
+
<div class="pf-c-form__field-group-header">
|
|
1407
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1408
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1409
|
+
<div
|
|
1410
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1411
|
+
id="form-demo-sections-complex-form-readiness-title"
|
|
1412
|
+
>Readiness probe</div>
|
|
1413
|
+
</div>
|
|
1414
|
+
<div
|
|
1415
|
+
class="pf-c-form__field-group-header-description"
|
|
1416
|
+
>A readiness probe checks if the container is ready to handle requests. A failed readiness probe means that a container should not receive any traffic from a proxy, even if it's running.</div>
|
|
1417
|
+
</div>
|
|
1418
|
+
</div>
|
|
1419
|
+
<div class="pf-c-form__field-group-body">
|
|
1420
|
+
<div class="pf-c-form__group">
|
|
1421
|
+
<div class="pf-c-form__group-control">
|
|
1422
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1423
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1424
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1425
|
+
</span>
|
|
1426
|
+
Add liveness probe
|
|
1427
|
+
</button>
|
|
1428
|
+
</div>
|
|
1429
|
+
</div>
|
|
1430
|
+
</div>
|
|
1431
|
+
</div>
|
|
1432
|
+
<div
|
|
1433
|
+
class="pf-c-form__field-group pf-m-expanded"
|
|
1434
|
+
role="group"
|
|
1435
|
+
aria-labelledby="form-demo-sections-complex-form-startup-title"
|
|
1436
|
+
>
|
|
1437
|
+
<div class="pf-c-form__field-group-header">
|
|
1438
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1439
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1440
|
+
<div
|
|
1441
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1442
|
+
id="form-demo-sections-complex-form-startup-title"
|
|
1443
|
+
>Liveness probe</div>
|
|
1444
|
+
</div>
|
|
1445
|
+
<div
|
|
1446
|
+
class="pf-c-form__field-group-header-description"
|
|
1447
|
+
>A startup probe checks if the application within the container is started.</div>
|
|
1448
|
+
</div>
|
|
1449
|
+
</div>
|
|
1450
|
+
<div class="pf-c-form__field-group-body">
|
|
1451
|
+
<div class="pf-c-form__group">
|
|
1452
|
+
<div class="pf-c-form__group-control">
|
|
1453
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1454
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1455
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1456
|
+
</span>
|
|
1457
|
+
Add startup probe
|
|
1458
|
+
</button>
|
|
1459
|
+
</div>
|
|
1460
|
+
</div>
|
|
1461
|
+
</div>
|
|
1462
|
+
</div>
|
|
1463
|
+
</div>
|
|
1464
|
+
</div>
|
|
1465
|
+
|
|
1466
|
+
<div
|
|
1467
|
+
class="pf-c-form__field-group"
|
|
1468
|
+
role="group"
|
|
1469
|
+
aria-labelledby="form-demo-sections-complex-form-build-configuration-title"
|
|
1470
|
+
>
|
|
1471
|
+
<div class="pf-c-form__field-group-toggle">
|
|
1472
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
1473
|
+
<button
|
|
1474
|
+
class="pf-c-button pf-m-plain"
|
|
1475
|
+
type="button"
|
|
1476
|
+
aria-expanded="false"
|
|
1477
|
+
aria-label="Details"
|
|
1478
|
+
id="form-demo-sections-complex-form-build-configuration-toggle"
|
|
1479
|
+
aria-labelledby="form-demo-sections-complex-form-build-configuration-title form-demo-sections-complex-form-build-configuration-toggle"
|
|
1480
|
+
>
|
|
1481
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1482
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1483
|
+
</span>
|
|
1484
|
+
</button>
|
|
1485
|
+
</div>
|
|
1486
|
+
</div>
|
|
1487
|
+
<div class="pf-c-form__field-group-header">
|
|
1488
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1489
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1490
|
+
<div
|
|
1491
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1492
|
+
id="form-demo-sections-complex-form-build-configuration-title"
|
|
1493
|
+
>Build configuration</div>
|
|
1494
|
+
</div>
|
|
1495
|
+
</div>
|
|
1496
|
+
<div class="pf-c-form__field-group-header-actions">
|
|
1497
|
+
<button class="pf-c-button pf-m-secondary" type="button">Import</button>
|
|
1498
|
+
</div>
|
|
1499
|
+
</div>
|
|
1500
|
+
</div>
|
|
1501
|
+
|
|
1502
|
+
<div
|
|
1503
|
+
class="pf-c-form__field-group"
|
|
1504
|
+
role="group"
|
|
1505
|
+
aria-labelledby="form-demo-sections-complex-form-deployment-title"
|
|
1506
|
+
>
|
|
1507
|
+
<div class="pf-c-form__field-group-toggle">
|
|
1508
|
+
<div class="pf-c-form__field-group-toggle-button">
|
|
1509
|
+
<button
|
|
1510
|
+
class="pf-c-button pf-m-plain"
|
|
1511
|
+
type="button"
|
|
1512
|
+
aria-expanded="false"
|
|
1513
|
+
aria-label="Details"
|
|
1514
|
+
id="form-demo-sections-complex-form-deployment-toggle"
|
|
1515
|
+
aria-labelledby="form-demo-sections-complex-form-deployment-title form-demo-sections-complex-form-deployment-toggle"
|
|
1516
|
+
>
|
|
1517
|
+
<span class="pf-c-form__field-group-toggle-icon">
|
|
1518
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1519
|
+
</span>
|
|
1520
|
+
</button>
|
|
1521
|
+
</div>
|
|
1522
|
+
</div>
|
|
1523
|
+
<div class="pf-c-form__field-group-header">
|
|
1524
|
+
<div class="pf-c-form__field-group-header-main">
|
|
1525
|
+
<div class="pf-c-form__field-group-header-title">
|
|
1526
|
+
<div
|
|
1527
|
+
class="pf-c-form__field-group-header-title-text"
|
|
1528
|
+
id="form-demo-sections-complex-form-deployment-title"
|
|
1529
|
+
>Deployment</div>
|
|
1530
|
+
</div>
|
|
1531
|
+
</div>
|
|
1532
|
+
</div>
|
|
1533
|
+
</div>
|
|
1534
|
+
|
|
1535
|
+
<div class="pf-c-form__actions">
|
|
1536
|
+
<button class="pf-c-button pf-m-primary" type="submit">Save</button>
|
|
1537
|
+
<button class="pf-c-button pf-m-secondary" type="reset">Cancel</button>
|
|
1538
|
+
</div>
|
|
1539
|
+
</form>
|
|
1540
|
+
|
|
1541
|
+
```
|